feat(mobile): refonte design DSFR complète + partie admin

- écrans auth/dashboard/journal/info/urgence/profil refondus sur le design system - AppBar institutionnel République Française sur tous les écrans - partie admin (utilisateurs, contenus, émotions) avec AdminGuard - entrée Espace administration dans le profil (admins uniquement) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-19 15:22:15 +02:00
parent 2e96e07c7e
commit 7fd27d8dc2
22 changed files with 2102 additions and 910 deletions
@@ -0,0 +1,104 @@
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useRouter } from 'expo-router';
+import { Ionicons } from '@expo/vector-icons';
+import { Card, SectionTitle } from '@/components/ui';
+import { useAdminUtilisateurs, useAdminFeeds, useAdminEmotions } from '@/hooks/useAdmin';
+import { Colors } from '@/lib/colors';
+import { FontSize, FontWeight, Radius, Spacing } from '@/lib/theme';
+
+interface HubItem {
+  href: '/admin/utilisateurs' | '/admin/contenus' | '/admin/emotions';
+  icon: keyof typeof Ionicons.glyphMap;
+  titre: string;
+  sousTitre: string;
+  compteur?: number;
+}
+
+/** Hub d'administration : accès aux trois sections de gestion. */
+export default function AdminHubScreen() {
+  const router = useRouter();
+  const { data: utilisateurs } = useAdminUtilisateurs();
+  const { data: feeds } = useAdminFeeds();
+  const { data: emotions } = useAdminEmotions();
+
+  const items: HubItem[] = [
+    {
+      href: '/admin/utilisateurs',
+      icon: 'people-outline',
+      titre: 'Utilisateurs',
+      sousTitre: 'Comptes, rôles et activation',
+      compteur: utilisateurs?.length,
+    },
+    {
+      href: '/admin/contenus',
+      icon: 'newspaper-outline',
+      titre: 'Contenus',
+      sousTitre: 'Articles d’information santé mentale',
+      compteur: feeds?.length,
+    },
+    {
+      href: '/admin/emotions',
+      icon: 'color-palette-outline',
+      titre: 'Émotions',
+      sousTitre: 'Référentiel des émotions et sous-émotions',
+      compteur: emotions?.length,
+    },
+  ];
+
+  return (
+    <ScrollView style={styles.screen} contentContainerStyle={styles.content}>
+      <SectionTitle>Espace d’administration</SectionTitle>
+      <Text style={styles.intro}>Gérez les utilisateurs, les contenus et le référentiel des émotions.</Text>
+
+      <View style={styles.list}>
+        {items.map((item) => (
+          <Card key={item.href} onPress={() => router.push(item.href)} style={styles.card}>
+            <View style={styles.row}>
+              <View style={styles.iconCircle}>
+                <Ionicons name={item.icon} size={26} color={Colors.primary} />
+              </View>
+              <View style={styles.cardBody}>
+                <Text style={styles.cardTitle}>{item.titre}</Text>
+                <Text style={styles.cardSubtitle}>{item.sousTitre}</Text>
+              </View>
+              <View style={styles.cardEnd}>
+                {typeof item.compteur === 'number' ? (
+                  <Text style={styles.count}>{item.compteur}</Text>
+                ) : null}
+                <Ionicons name="chevron-forward" size={20} color={Colors.gray[400]} />
+              </View>
+            </View>
+          </Card>
+        ))}
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: { flex: 1, backgroundColor: Colors.gray[50] },
+  content: { padding: Spacing.lg, gap: Spacing.md },
+  intro: { fontSize: FontSize.sm, color: Colors.gray[500], marginBottom: Spacing.sm, lineHeight: 20 },
+  list: { gap: Spacing.md },
+  card: { padding: Spacing.lg },
+  row: { flexDirection: 'row', alignItems: 'center', gap: Spacing.md },
+  iconCircle: {
+    width: 48,
+    height: 48,
+    borderRadius: Radius.md,
+    backgroundColor: '#E3E3FD',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cardBody: { flex: 1 },
+  cardTitle: { fontSize: FontSize.md, fontWeight: FontWeight.bold, color: Colors.black },
+  cardSubtitle: { fontSize: FontSize.xs, color: Colors.gray[500], marginTop: 2, lineHeight: 18 },
+  cardEnd: { flexDirection: 'row', alignItems: 'center', gap: Spacing.sm },
+  count: {
+    fontSize: FontSize.sm,
+    fontWeight: FontWeight.bold,
+    color: Colors.primary,
+    minWidth: 22,
+    textAlign: 'right',
+  },
+});