AzmogExe/cesizen-individuel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- é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>
This commit is contained in:
Azmog
2026-06-19 15:22:15 +02:00
parent 2e96e07c7e
commit 7fd27d8dc2
22 changed files with 2102 additions and 910 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile/app/(tabs)/journal/_layout.tsx
+5 -3
View File
@@ -1,18 +1,20 @@
import { Stack } from 'expo-router';
import { Colors } from '@/lib/colors';
import { FontWeight } from '@/lib/theme';
export default function JournalLayout() {
return (
<Stack
screenOptions={{
headerStyle: { backgroundColor: Colors.white },
headerTitleStyle: { fontWeight: '700', color: Colors.black },
headerTitleStyle: { fontWeight: FontWeight.bold, color: Colors.black },
headerTintColor: Colors.primary,
}}
>
<Stack.Screen name="index" options={{ title: 'Mon journal' }} />
<Stack.Screen name="index" options={{ headerShown: false }} />
<Stack.Screen name="reports" options={{ headerShown: false }} />
<Stack.Screen name="new" options={{ title: 'Nouvelle saisie', presentation: 'modal' }} />
<Stack.Screen name="edit" options={{ title: 'Modifier la saisie', presentation: 'modal' }} />
<Stack.Screen name="reports" options={{ title: 'Mes rapports' }} />
</Stack>
);
}
mobile/app/(tabs)/journal/edit.tsx
+34 -82
View File
@@ -1,10 +1,12 @@
import { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, TextInput, ScrollView, Alert } from 'react-native';
import { View, Text, StyleSheet, ScrollView, Alert } from 'react-native';
import { useRouter, useLocalSearchParams } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useSaisies, useUpdateSaisie } from '@/hooks/useTracker';
import EmotionPicker from '@/components/EmotionPicker';
import { IntensityPicker } from './new';
import { Colors } from '@/lib/colors';
import { Spacing, FontSize, FontWeight } from '@/lib/theme';
import { Button, TextField, Loader } from '@/components/ui';
export default function EditEntryScreen() {
const router = useRouter();
@@ -38,126 +40,76 @@ export default function EditEntryScreen() {
note: note.trim() || undefined,
date_saisie: dateSaisie,
});
Alert.alert('Succès', 'Saisie modifiée !', [
{ text: 'OK', onPress: () => router.back() },
]);
Alert.alert('Succès', 'Saisie modifiée !', [{ text: 'OK', onPress: () => router.back() }]);
} catch {
Alert.alert('Erreur', 'Impossible de modifier la saisie');
}
};
if (!saisie) {
return (
<View style={styles.loading}>
<Text style={styles.loadingText}>Chargement...</Text>
</View>
);
return <Loader label="Chargement…" />;
}
return (
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
<Text style={styles.title}>Modifier la saisie</Text>
{/* Emotion */}
{/* Émotion */}
<View style={styles.section}>
<Text style={styles.label}>Émotion</Text>
<EmotionPicker value={emotionId} onChange={setEmotionId} />
</View>
{/* Intensite */}
{/* Intensité */}
<View style={styles.section}>
<Text style={styles.label}>Intensité</Text>
<View style={styles.intensityContainer}>
<Text style={styles.intensityValue}>{intensite}</Text>
<Text style={styles.intensityUnit}>/10</Text>
</View>
<View style={styles.sliderButtons}>
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((v) => (
<TouchableOpacity
key={v}
style={[styles.sliderDot, intensite === v && styles.sliderDotActive]}
onPress={() => setIntensite(v)}
>
<Text style={[styles.sliderDotText, intensite === v && styles.sliderDotTextActive]}>{v}</Text>
</TouchableOpacity>
))}
</View>
<View style={styles.sliderLabels}>
<Text style={styles.sliderLabel}>Faible</Text>
<Text style={styles.sliderLabel}>Forte</Text>
<IntensityPicker value={intensite} onChange={setIntensite} />
<View style={styles.scaleLabels}>
<Text style={styles.scaleLabel}>Faible</Text>
<Text style={styles.scaleLabel}>Forte</Text>
</View>
</View>
{/* Note */}
<View style={styles.section}>
<Text style={styles.label}>Note (optionnel)</Text>
<TextInput
style={styles.textArea}
<TextField
label="Note (optionnel)"
value={note}
onChangeText={setNote}
placeholder="Décrivez ce que vous ressentez..."
placeholder="Décrivez ce que vous ressentez…"
multiline
numberOfLines={4}
textAlignVertical="top"
/>
</View>
{/* Actions */}
<View style={styles.actionsRow}>
<TouchableOpacity style={styles.cancelBtn} onPress={() => router.back()}>
<Text style={styles.cancelBtnText}>Annuler</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.submitBtn, updateSaisie.isPending && styles.btnDisabled]}
<Button title="Annuler" variant="secondary" onPress={() => router.back()} style={styles.flex} />
<Button
title="Enregistrer"
icon="checkmark"
loading={updateSaisie.isPending}
disabled={!emotionId}
onPress={handleSubmit}
disabled={updateSaisie.isPending || !emotionId}
>
<Ionicons name="checkmark" size={20} color={Colors.white} />
<Text style={styles.submitBtnText}>
{updateSaisie.isPending ? 'Envoi...' : 'Enregistrer'}
</Text>
</TouchableOpacity>
style={styles.flex}
/>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: Colors.white },
content: { padding: 20, paddingBottom: 40 },
loading: { flex: 1, justifyContent: 'center', alignItems: 'center' },
loadingText: { color: Colors.gray[400], fontSize: 16 },
title: { fontSize: 24, fontWeight: '800', color: Colors.black, marginBottom: 24 },
section: { marginBottom: 24 },
label: { fontSize: 15, fontWeight: '700', color: Colors.black, marginBottom: 10 },
intensityContainer: { flexDirection: 'row', alignItems: 'baseline', justifyContent: 'center', marginBottom: 16 },
intensityValue: { fontSize: 48, fontWeight: '800', color: Colors.black },
intensityUnit: { fontSize: 20, color: Colors.gray[400], marginLeft: 4 },
sliderButtons: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 4 },
sliderDot: {
width: 28, height: 28, borderRadius: 4,
backgroundColor: Colors.gray[100], justifyContent: 'center', alignItems: 'center',
},
sliderDotActive: { backgroundColor: Colors.primary },
sliderDotText: { fontSize: 12, fontWeight: '600', color: Colors.gray[500] },
sliderDotTextActive: { color: Colors.white },
sliderLabels: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 4 },
sliderLabel: { fontSize: 12, color: Colors.gray[400] },
textArea: {
backgroundColor: Colors.gray[100], borderTopLeftRadius: 4, borderTopRightRadius: 4,
borderBottomWidth: 2, borderBottomColor: Colors.black,
padding: 16, fontSize: 15, color: Colors.black, minHeight: 100,
},
actionsRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 8, gap: 12 },
cancelBtn: {
flex: 1, paddingVertical: 16, borderRadius: 4,
backgroundColor: Colors.white, alignItems: 'center', borderWidth: 1, borderColor: Colors.primary,
},
cancelBtnText: { fontSize: 15, fontWeight: '600', color: Colors.primary },
submitBtn: {
flex: 1, flexDirection: 'row', gap: 8, paddingVertical: 16, borderRadius: 4,
backgroundColor: Colors.primary, alignItems: 'center', justifyContent: 'center',
},
submitBtnText: { fontSize: 15, fontWeight: '700', color: Colors.white },
btnDisabled: { opacity: 0.5 },
container: { flex: 1, backgroundColor: Colors.gray[50] },
content: { padding: Spacing.lg, paddingBottom: Spacing.xxxl },
section: { marginBottom: Spacing.xl },
label: { fontSize: FontSize.body, fontWeight: FontWeight.bold, color: Colors.black, marginBottom: Spacing.md },
intensityContainer: { flexDirection: 'row', alignItems: 'baseline', justifyContent: 'center', marginBottom: Spacing.lg },
intensityValue: { fontSize: FontSize.display, fontWeight: FontWeight.heavy, color: Colors.primary, lineHeight: 56 },
intensityUnit: { fontSize: FontSize.xl, color: Colors.gray[400], marginLeft: Spacing.xs },
scaleLabels: { flexDirection: 'row', justifyContent: 'space-between', marginTop: Spacing.md },
scaleLabel: { fontSize: FontSize.xs, color: Colors.gray[500] },
actionsRow: { flexDirection: 'row', justifyContent: 'space-between', gap: Spacing.md, marginTop: Spacing.sm },
flex: { flex: 1 },
});
mobile/app/(tabs)/journal/index.tsx
+100 -56
View File
@@ -4,6 +4,8 @@ import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useSaisies, useDeleteSaisie } from '@/hooks/useTracker';
import { Colors } from '@/lib/colors';
import { Spacing, Radius, FontSize, FontWeight, Shadow, MIN_TOUCH, HIT_SLOP } from '@/lib/theme';
import { AppBar, Card, Badge, EmptyState, Loader } from '@/components/ui';
import type { SaisieTracker } from '@/types';
export default function JournalScreen() {
@@ -36,86 +38,128 @@ export default function JournalScreen() {
};
const renderItem = ({ item }: { item: SaisieTracker }) => (
<View style={styles.saisieCard}>
<Card padding={Spacing.lg} style={styles.saisieCard}>
<View style={[styles.emotionIcon, { backgroundColor: `${item.emotion?.couleur}20` }]}>
<Text style={styles.emotionEmoji}>{item.emotion?.icone || '🔵'}</Text>
</View>
<View style={styles.saisieContent}>
<View style={styles.saisieHeader}>
<View style={[styles.badge, { backgroundColor: `${item.emotion?.couleur}20` }]}>
<Text style={[styles.badgeText, { color: item.emotion?.couleur }]}>{item.emotion?.nom}</Text>
</View>
<Text style={styles.intensityText}>Intensité: {item.intensite}/10</Text>
{item.emotion?.couleur ? (
<Badge label={item.emotion?.nom || ''} color={item.emotion.couleur} />
) : (
<Badge label={item.emotion?.nom || '—'} tone="neutral" />
)}
<Text style={styles.intensityText}>Intensité {item.intensite}/10</Text>
</View>
<View style={styles.intensityBar}>
<View style={[styles.intensityFill, { width: `${item.intensite * 10}%`, backgroundColor: item.emotion?.couleur || Colors.primary }]} />
<View
style={[
styles.intensityFill,
{ width: `${item.intensite * 10}%`, backgroundColor: item.emotion?.couleur || Colors.primary },
]}
/>
</View>
{item.note && <Text style={styles.note} numberOfLines={2}>{item.note}</Text>}
<Text style={styles.date}>{new Date(item.date_saisie).toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}</Text>
{item.note ? (
<Text style={styles.note} numberOfLines={2}>
{item.note}
</Text>
) : null}
<Text style={styles.date}>
{new Date(item.date_saisie).toLocaleDateString('fr-FR', {
weekday: 'long',
day: 'numeric',
month: 'long',
})}
</Text>
</View>
<View style={styles.actions}>
<TouchableOpacity style={styles.actionBtn} onPress={() => router.push({ pathname: '/(tabs)/journal/edit', params: { id: String(item.id) } })}>
<Ionicons name="create-outline" size={18} color={Colors.gray[400]} />
<TouchableOpacity
style={styles.actionBtn}
hitSlop={HIT_SLOP}
accessibilityLabel="Modifier la saisie"
onPress={() => router.push({ pathname: '/(tabs)/journal/edit', params: { id: String(item.id) } })}
>
<Ionicons name="create-outline" size={20} color={Colors.primary} />
</TouchableOpacity>
<TouchableOpacity style={styles.actionBtn} onPress={() => handleDelete(item.id)}>
<Ionicons name="trash-outline" size={18} color={Colors.gray[400]} />
<TouchableOpacity
style={styles.actionBtn}
hitSlop={HIT_SLOP}
accessibilityLabel="Supprimer la saisie"
onPress={() => handleDelete(item.id)}
>
<Ionicons name="trash-outline" size={20} color={Colors.error} />
</TouchableOpacity>
</View>
</View>
</Card>
);
return (
<View style={styles.container}>
<FlatList
data={saisies || []}
keyExtractor={(item) => String(item.id)}
renderItem={renderItem}
contentContainerStyle={styles.listContent}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={Colors.primary} />}
ListEmptyComponent={
<View style={styles.empty}>
<Ionicons name="book-outline" size={48} color={Colors.gray[300]} />
<Text style={styles.emptyTitle}>Aucune saisie</Text>
<Text style={styles.emptyText}>Commencez par enregistrer votre première émotion</Text>
</View>
}
/>
<TouchableOpacity style={styles.fab} onPress={() => router.push('/(tabs)/journal/new')}>
<Ionicons name="add" size={28} color={Colors.white} />
<View style={styles.screen}>
<AppBar title="Mon journal" subtitle="Vos émotions au fil du temps" />
{isLoading ? (
<Loader label="Chargement du journal…" />
) : (
<FlatList
data={saisies || []}
keyExtractor={(item) => String(item.id)}
renderItem={renderItem}
contentContainerStyle={styles.listContent}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={Colors.primary} />
}
ListEmptyComponent={
<EmptyState
icon="book-outline"
title="Aucune saisie"
message="Commencez par enregistrer votre première émotion."
actionLabel="Nouvelle saisie"
onAction={() => router.push('/(tabs)/journal/new')}
/>
}
/>
)}
<TouchableOpacity
style={styles.fab}
accessibilityLabel="Nouvelle saisie"
onPress={() => router.push('/(tabs)/journal/new')}
>
<Ionicons name="add" size={30} color={Colors.white} />
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: Colors.white },
listContent: { padding: 16, paddingBottom: 80 },
saisieCard: {
flexDirection: 'row', alignItems: 'flex-start', gap: 12, padding: 16,
backgroundColor: Colors.white, borderRadius: 4, marginBottom: 10,
borderWidth: 1, borderColor: Colors.gray[200],
},
emotionIcon: { width: 48, height: 48, borderRadius: 4, justifyContent: 'center', alignItems: 'center' },
screen: { flex: 1, backgroundColor: Colors.gray[50] },
listContent: { padding: Spacing.lg, paddingBottom: 96 },
saisieCard: { flexDirection: 'row', alignItems: 'flex-start', gap: Spacing.md, marginBottom: Spacing.md },
emotionIcon: { width: 48, height: 48, borderRadius: Radius.sm, justifyContent: 'center', alignItems: 'center' },
emotionEmoji: { fontSize: 24 },
saisieContent: { flex: 1 },
saisieHeader: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 6 },
badge: { paddingHorizontal: 10, paddingVertical: 3, borderRadius: 4 },
badgeText: { fontSize: 13, fontWeight: '600' },
intensityText: { fontSize: 12, color: Colors.gray[400] },
intensityBar: { height: 4, backgroundColor: Colors.gray[200], borderRadius: 2, marginBottom: 6 },
intensityFill: { height: 4, borderRadius: 2 },
note: { fontSize: 13, color: Colors.gray[600], marginBottom: 4 },
date: { fontSize: 12, color: Colors.gray[400] },
actions: { gap: 4 },
actionBtn: { padding: 6, borderRadius: 8 },
empty: { alignItems: 'center', paddingTop: 80 },
emptyTitle: { fontSize: 18, fontWeight: '600', color: Colors.gray[400], marginTop: 12 },
emptyText: { fontSize: 14, color: Colors.gray[400], marginTop: 4 },
saisieHeader: { flexDirection: 'row', alignItems: 'center', gap: Spacing.sm, marginBottom: Spacing.sm, flexWrap: 'wrap' },
intensityText: { fontSize: FontSize.xs, color: Colors.gray[500] },
intensityBar: { height: 6, backgroundColor: Colors.gray[200], borderRadius: Radius.sm, marginBottom: Spacing.sm },
intensityFill: { height: 6, borderRadius: Radius.sm },
note: { fontSize: FontSize.xs, color: Colors.gray[600], marginBottom: Spacing.xs, lineHeight: 19 },
date: { fontSize: FontSize.xs, color: Colors.gray[400], textTransform: 'capitalize' },
actions: { gap: Spacing.sm },
actionBtn: {
width: MIN_TOUCH,
height: MIN_TOUCH,
borderRadius: Radius.sm,
justifyContent: 'center',
alignItems: 'center',
},
fab: {
position: 'absolute', right: 20, bottom: 20,
width: 56, height: 56, borderRadius: 4,
backgroundColor: Colors.primary, justifyContent: 'center', alignItems: 'center',
shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.2, shadowRadius: 8,
elevation: 6,
position: 'absolute',
right: Spacing.lg,
bottom: Spacing.lg,
width: 56,
height: 56,
borderRadius: Radius.sm,
backgroundColor: Colors.primary,
justifyContent: 'center',
alignItems: 'center',
...Shadow.raised,
},
});
mobile/app/(tabs)/journal/new.tsx
+89 -95
View File
@@ -1,10 +1,13 @@
import { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, TextInput, ScrollView, Alert } from 'react-native';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Alert } from 'react-native';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useCreateSaisie } from '@/hooks/useTracker';
import EmotionPicker from '@/components/EmotionPicker';
import { Colors } from '@/lib/colors';
import { Spacing, Radius, FontSize, FontWeight } from '@/lib/theme';
import { Button, TextField } from '@/components/ui';
export default function NewEntryScreen() {
const router = useRouter();
const createSaisie = useCreateSaisie();
@@ -22,11 +25,9 @@ export default function NewEntryScreen() {
note: note.trim() || undefined,
date_saisie: new Date().toISOString().split('T')[0],
});
Alert.alert('Succès', 'Saisie enregistrée !', [
{ text: 'OK', onPress: () => router.back() },
]);
Alert.alert('Succès', 'Saisie enregistrée !', [{ text: 'OK', onPress: () => router.back() }]);
} catch {
Alert.alert('Erreur', 'Impossible d\'enregistrer la saisie');
Alert.alert('Erreur', "Impossible d'enregistrer la saisie");
}
};
@@ -38,7 +39,7 @@ export default function NewEntryScreen() {
<View key={s} style={styles.stepRow}>
<View style={[styles.stepCircle, step >= s && styles.stepActive]}>
{step > s ? (
<Ionicons name="checkmark" size={16} color={Colors.white} />
<Ionicons name="checkmark" size={18} color={Colors.white} />
) : (
<Text style={[styles.stepNumber, step >= s && styles.stepNumberActive]}>{s}</Text>
)}
@@ -48,23 +49,23 @@ export default function NewEntryScreen() {
))}
</View>
{/* Step 1: Emotion */}
{/* Step 1: Émotion */}
{step === 1 && (
<View>
<Text style={styles.stepTitle}>Comment vous sentez-vous ?</Text>
<EmotionPicker value={emotionId} onChange={setEmotionId} />
<TouchableOpacity
style={[styles.nextBtn, !emotionId && styles.btnDisabled]}
onPress={() => emotionId && setStep(2)}
disabled={!emotionId}
>
<Text style={styles.nextBtnText}>Suivant</Text>
<Ionicons name="arrow-forward" size={20} color={Colors.white} />
</TouchableOpacity>
<View style={styles.navRowEnd}>
<Button
title="Suivant"
icon="arrow-forward"
onPress={() => emotionId && setStep(2)}
disabled={!emotionId}
/>
</View>
</View>
)}
{/* Step 2: Intensity */}
{/* Step 2: Intensité */}
{step === 2 && (
<View>
<Text style={styles.stepTitle}>À quel point ressentez-vous cette émotion ?</Text>
@@ -72,37 +73,14 @@ export default function NewEntryScreen() {
<Text style={styles.intensityValue}>{intensite}</Text>
<Text style={styles.intensityLabel}>/10</Text>
</View>
<View style={styles.sliderContainer}>
<Text style={styles.sliderLabel}>Faible</Text>
<View style={styles.sliderWrapper}>
<View style={styles.nativeSlider}>
<View style={styles.sliderTrack}>
<View style={[styles.sliderFill, { width: `${(intensite - 1) * 11.11}%` }]} />
</View>
<View style={styles.sliderButtons}>
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((v) => (
<TouchableOpacity
key={v}
style={[styles.sliderDot, intensite === v && styles.sliderDotActive]}
onPress={() => setIntensite(v)}
>
<Text style={[styles.sliderDotText, intensite === v && styles.sliderDotTextActive]}>{v}</Text>
</TouchableOpacity>
))}
</View>
</View>
</View>
<Text style={styles.sliderLabel}>Forte</Text>
<IntensityPicker value={intensite} onChange={setIntensite} />
<View style={styles.scaleLabels}>
<Text style={styles.scaleLabel}>Faible</Text>
<Text style={styles.scaleLabel}>Forte</Text>
</View>
<View style={styles.navRow}>
<TouchableOpacity style={styles.backBtn} onPress={() => setStep(1)}>
<Ionicons name="arrow-back" size={20} color={Colors.primary} />
<Text style={styles.backBtnText}>Retour</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.nextBtn} onPress={() => setStep(3)}>
<Text style={styles.nextBtnText}>Suivant</Text>
<Ionicons name="arrow-forward" size={20} color={Colors.white} />
</TouchableOpacity>
<Button title="Retour" variant="secondary" icon="arrow-back" onPress={() => setStep(1)} />
<Button title="Suivant" icon="arrow-forward" onPress={() => setStep(3)} />
</View>
</View>
)}
@@ -111,28 +89,22 @@ export default function NewEntryScreen() {
{step === 3 && (
<View>
<Text style={styles.stepTitle}>Souhaitez-vous ajouter un commentaire ?</Text>
<TextInput
style={styles.textArea}
<TextField
label="Note (optionnel)"
value={note}
onChangeText={setNote}
placeholder="Décrivez ce que vous ressentez, ce qui a déclenché cette émotion..."
placeholder="Décrivez ce que vous ressentez, ce qui a déclenché cette émotion…"
multiline
numberOfLines={5}
textAlignVertical="top"
/>
<View style={styles.navRow}>
<TouchableOpacity style={styles.backBtn} onPress={() => setStep(2)}>
<Ionicons name="arrow-back" size={20} color={Colors.primary} />
<Text style={styles.backBtnText}>Retour</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.submitBtn, createSaisie.isPending && styles.btnDisabled]}
<Button title="Retour" variant="secondary" icon="arrow-back" onPress={() => setStep(2)} />
<Button
title="Enregistrer"
icon="checkmark"
loading={createSaisie.isPending}
onPress={handleSubmit}
disabled={createSaisie.isPending}
>
<Ionicons name="checkmark" size={20} color={Colors.white} />
<Text style={styles.nextBtnText}>{createSaisie.isPending ? 'Envoi...' : 'Enregistrer'}</Text>
</TouchableOpacity>
/>
</View>
</View>
)}
@@ -140,46 +112,68 @@ export default function NewEntryScreen() {
);
}
/** Sélecteur d'intensité 1–10, boutons ≥40px, sur deux rangées (wrap). */
export function IntensityPicker({ value, onChange }: { value: number; onChange: (v: number) => void }) {
return (
<View style={pickerStyles.grid}>
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((v) => {
const active = value === v;
return (
<TouchableOpacity
key={v}
style={[pickerStyles.dot, active && pickerStyles.dotActive]}
onPress={() => onChange(v)}
accessibilityLabel={`Intensité ${v}`}
>
<Text style={[pickerStyles.dotText, active && pickerStyles.dotTextActive]}>{v}</Text>
</TouchableOpacity>
);
})}
</View>
);
}
const pickerStyles = StyleSheet.create({
grid: { flexDirection: 'row', flexWrap: 'wrap', gap: Spacing.sm, justifyContent: 'center' },
dot: {
width: 44,
height: 44,
borderRadius: Radius.sm,
backgroundColor: Colors.gray[100],
borderWidth: 1,
borderColor: Colors.gray[200],
justifyContent: 'center',
alignItems: 'center',
},
dotActive: { backgroundColor: Colors.primary, borderColor: Colors.primary },
dotText: { fontSize: FontSize.sm, fontWeight: FontWeight.bold, color: Colors.gray[500] },
dotTextActive: { color: Colors.white },
});
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: Colors.white },
content: { padding: 20, paddingBottom: 40 },
stepper: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginBottom: 32 },
container: { flex: 1, backgroundColor: Colors.gray[50] },
content: { padding: Spacing.lg, paddingBottom: Spacing.xxxl },
stepper: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginBottom: Spacing.xxl },
stepRow: { flexDirection: 'row', alignItems: 'center' },
stepCircle: {
width: 32, height: 32, borderRadius: 16, backgroundColor: Colors.gray[200],
justifyContent: 'center', alignItems: 'center',
width: 36,
height: 36,
borderRadius: Radius.pill,
backgroundColor: Colors.gray[200],
justifyContent: 'center',
alignItems: 'center',
},
stepActive: { backgroundColor: Colors.primary },
stepNumber: { fontSize: 14, fontWeight: '700', color: Colors.gray[500] },
stepNumber: { fontSize: FontSize.md, fontWeight: FontWeight.bold, color: Colors.gray[500] },
stepNumberActive: { color: Colors.white },
stepLine: { width: 40, height: 3, backgroundColor: Colors.gray[200], marginHorizontal: 4 },
stepLine: { width: 40, height: 3, backgroundColor: Colors.gray[200], marginHorizontal: Spacing.xs },
stepLineActive: { backgroundColor: Colors.primary },
stepTitle: { fontSize: 20, fontWeight: '700', color: Colors.black, marginBottom: 20 },
intensityContainer: { flexDirection: 'row', alignItems: 'baseline', justifyContent: 'center', marginBottom: 24 },
intensityValue: { fontSize: 64, fontWeight: '800', color: Colors.black },
intensityLabel: { fontSize: 24, color: Colors.gray[400], marginLeft: 4 },
sliderContainer: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 32 },
sliderLabel: { fontSize: 12, color: Colors.gray[400] },
sliderWrapper: { flex: 1 },
nativeSlider: {},
sliderTrack: { height: 6, backgroundColor: Colors.gray[200], borderRadius: 3, marginBottom: 8 },
sliderFill: { height: 6, backgroundColor: Colors.primary, borderRadius: 3 },
sliderButtons: { flexDirection: 'row', justifyContent: 'space-between' },
sliderDot: { width: 28, height: 28, borderRadius: 4, backgroundColor: Colors.gray[100], justifyContent: 'center', alignItems: 'center' },
sliderDotActive: { backgroundColor: Colors.primary },
sliderDotText: { fontSize: 12, fontWeight: '600', color: Colors.gray[500] },
sliderDotTextActive: { color: Colors.white },
textArea: {
backgroundColor: Colors.gray[100], borderTopLeftRadius: 4, borderTopRightRadius: 4,
borderBottomWidth: 2, borderBottomColor: Colors.black,
padding: 16, fontSize: 15, color: Colors.black,
minHeight: 120, marginBottom: 24,
},
navRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 16 },
backBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 20, borderRadius: 4, backgroundColor: Colors.white, borderWidth: 1, borderColor: Colors.primary },
backBtnText: { fontSize: 15, fontWeight: '600', color: Colors.primary },
nextBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 24, borderRadius: 4, backgroundColor: Colors.primary },
submitBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 24, borderRadius: 4, backgroundColor: Colors.primary },
nextBtnText: { fontSize: 15, fontWeight: '700', color: Colors.white },
btnDisabled: { opacity: 0.5 },
stepTitle: { fontSize: FontSize.xl, fontWeight: FontWeight.bold, color: Colors.black, marginBottom: Spacing.xl },
intensityContainer: { flexDirection: 'row', alignItems: 'baseline', justifyContent: 'center', marginBottom: Spacing.xl },
intensityValue: { fontSize: FontSize.display, fontWeight: FontWeight.heavy, color: Colors.primary, lineHeight: 60 },
intensityLabel: { fontSize: FontSize.xxl, color: Colors.gray[400], marginLeft: Spacing.xs },
scaleLabels: { flexDirection: 'row', justifyContent: 'space-between', marginTop: Spacing.md, marginBottom: Spacing.xxl },
scaleLabel: { fontSize: FontSize.xs, color: Colors.gray[500] },
navRow: { flexDirection: 'row', justifyContent: 'space-between', gap: Spacing.md, marginTop: Spacing.md },
navRowEnd: { flexDirection: 'row', justifyContent: 'flex-end', marginTop: Spacing.xl },
});
mobile/app/(tabs)/journal/reports.tsx
+130 -119
View File
@@ -3,6 +3,8 @@ import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from 'react-nati
import { Ionicons } from '@expo/vector-icons';
import { useRapport } from '@/hooks/useRapport';
import { Colors } from '@/lib/colors';
import { Spacing, Radius, FontSize, FontWeight } from '@/lib/theme';
import { AppBar, Card, Badge, SectionTitle, EmptyState, Loader } from '@/components/ui';
import EmotionPieChart from '@/components/EmotionPieChart';
type Period = 'week' | 'month' | 'quarter' | 'year';
@@ -19,130 +21,139 @@ export default function ReportsScreen() {
const { data: rapport, isLoading } = useRapport(period);
return (
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
{/* Period selector */}
<View style={styles.periodRow}>
{PERIODS.map((p) => (
<TouchableOpacity
key={p.value}
style={[styles.periodBtn, period === p.value && styles.periodBtnActive]}
onPress={() => setPeriod(p.value)}
>
<Text style={[styles.periodText, period === p.value && styles.periodTextActive]}>
{p.label}
</Text>
</TouchableOpacity>
))}
</View>
{isLoading ? (
<View style={styles.loading}>
<Text style={styles.loadingText}>Chargement...</Text>
<View style={styles.screen}>
<AppBar title="Mes rapports" subtitle="Analyse de vos émotions" />
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
{/* Sélecteur de période — boutons segmentés */}
<View style={styles.segment}>
{PERIODS.map((p) => {
const active = period === p.value;
return (
<TouchableOpacity
key={p.value}
style={[styles.segmentBtn, active && styles.segmentBtnActive]}
onPress={() => setPeriod(p.value)}
accessibilityLabel={p.label}
>
<Text style={[styles.segmentText, active && styles.segmentTextActive]}>{p.label}</Text>
</TouchableOpacity>
);
})}
</View>
) : rapport ? (
<>
{/* Stats cards */}
<View style={styles.statsRow}>
<View style={styles.statCard}>
<Ionicons name="bar-chart" size={20} color={Colors.primary} />
<Text style={styles.statValue}>{rapport.stats.total_saisies}</Text>
<Text style={styles.statLabel}>Saisies</Text>
</View>
<View style={styles.statCard}>
<Ionicons name="trending-up" size={20} color={Colors.secondary} />
<Text style={styles.statValue}>{rapport.stats.intensite_moyenne?.toFixed(1) || '—'}</Text>
<Text style={styles.statLabel}>Intensité moy.</Text>
</View>
<View style={styles.statCard}>
<Ionicons name="heart" size={20} color={rapport.stats.emotion_dominante?.couleur || Colors.blueFranceSun} />
<Text style={styles.statValue}>{rapport.stats.emotion_dominante?.icone || '—'}</Text>
<Text style={styles.statLabel}>{rapport.stats.emotion_dominante?.nom || 'Aucune'}</Text>
</View>
</View>
{/* Period info */}
<View style={styles.periodInfo}>
<Text style={styles.periodInfoText}>
Du {new Date(rapport.date_debut).toLocaleDateString('fr-FR')} au {new Date(rapport.date_fin).toLocaleDateString('fr-FR')}
</Text>
</View>
{/* Repartition */}
{rapport.repartition.length > 0 && (
<View style={styles.section}>
<Text style={styles.sectionTitle}>Répartition des émotions</Text>
{/* Camembert (donut) — équivalent mobile du graphique Recharts du web */}
<EmotionPieChart
data={rapport.repartition.map((item) => ({
nom: item.nom,
couleur: item.couleur,
count: item.count,
pourcentage: item.pourcentage,
}))}
/>
<Text style={styles.subSectionTitle}>Détail par émotion</Text>
{rapport.repartition.map((item) => (
<View key={item.nom} style={styles.repartitionItem}>
<View style={styles.repartitionHeader}>
<View style={[styles.colorDot, { backgroundColor: item.couleur }]} />
<Text style={styles.repartitionName}>{item.nom}</Text>
<Text style={styles.repartitionPct}>{item.pourcentage}%</Text>
</View>
<View style={styles.progressBar}>
<View style={[styles.progressFill, { width: `${item.pourcentage}%`, backgroundColor: item.couleur }]} />
</View>
<View style={styles.repartitionFooter}>
<Text style={styles.repartitionDetail}>{item.count} saisies</Text>
<Text style={styles.repartitionDetail}>Moy: {item.intensite_moyenne.toFixed(1)}/10</Text>
</View>
{isLoading ? (
<Loader label="Chargement du rapport…" />
) : rapport && rapport.stats.total_saisies > 0 ? (
<>
{/* Stats */}
<Card padding={Spacing.lg} style={styles.statsCard}>
<View style={styles.statsRow}>
<View style={styles.statCell}>
<Ionicons name="bar-chart" size={20} color={Colors.primary} />
<Text style={styles.statValue}>{rapport.stats.total_saisies}</Text>
<Text style={styles.statLabel}>Saisies</Text>
</View>
))}
</View>
)}
</>
) : (
<View style={styles.empty}>
<Ionicons name="bar-chart-outline" size={48} color={Colors.gray[300]} />
<Text style={styles.emptyText}>Pas de données pour cette période</Text>
</View>
)}
</ScrollView>
<View style={styles.statDivider} />
<View style={styles.statCell}>
<Ionicons name="trending-up" size={20} color={Colors.primary} />
<Text style={styles.statValue}>{rapport.stats.intensite_moyenne?.toFixed(1) || '—'}</Text>
<Text style={styles.statLabel}>Intensité moy.</Text>
</View>
<View style={styles.statDivider} />
<View style={styles.statCell}>
<Text style={styles.statEmoji}>{rapport.stats.emotion_dominante?.icone || '—'}</Text>
<Text style={styles.statLabel} numberOfLines={1}>
{rapport.stats.emotion_dominante?.nom || 'Aucune'}
</Text>
</View>
</View>
<Text style={styles.periodInfo}>
Du {new Date(rapport.date_debut).toLocaleDateString('fr-FR')} au{' '}
{new Date(rapport.date_fin).toLocaleDateString('fr-FR')}
</Text>
</Card>
{/* Répartition */}
{rapport.repartition.length > 0 && (
<View style={styles.block}>
<SectionTitle>Répartition des émotions</SectionTitle>
<Card padding={Spacing.lg}>
<EmotionPieChart
data={rapport.repartition.map((item) => ({
nom: item.nom,
couleur: item.couleur,
count: item.count,
pourcentage: item.pourcentage,
}))}
/>
</Card>
<View style={styles.detailHeader}>
<SectionTitle>Détail par émotion</SectionTitle>
</View>
<Card padding={Spacing.lg}>
{rapport.repartition.map((item, idx) => (
<View
key={item.nom}
style={[styles.repItem, idx > 0 && styles.repItemBorder]}
>
<View style={styles.repHeader}>
<Badge label={item.nom} color={item.couleur} />
<Text style={styles.repPct}>{item.pourcentage}%</Text>
</View>
<View style={styles.progressBar}>
<View
style={[styles.progressFill, { width: `${item.pourcentage}%`, backgroundColor: item.couleur }]}
/>
</View>
<View style={styles.repFooter}>
<Text style={styles.repDetail}>{item.count} saisies</Text>
<Text style={styles.repDetail}>Moy. {item.intensite_moyenne.toFixed(1)}/10</Text>
</View>
</View>
))}
</Card>
</View>
)}
</>
) : (
<EmptyState
icon="bar-chart-outline"
title="Aucune donnée"
message="Pas de saisie pour cette période. Changez de période ou ajoutez une émotion."
/>
)}
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: Colors.white },
content: { padding: 20, paddingBottom: 40 },
periodRow: { flexDirection: 'row', backgroundColor: Colors.gray[100], borderRadius: 4, padding: 4, marginBottom: 20 },
periodBtn: { flex: 1, paddingVertical: 10, alignItems: 'center', borderRadius: 4 },
periodBtnActive: { backgroundColor: Colors.primary },
periodText: { fontSize: 13, fontWeight: '600', color: Colors.gray[500] },
periodTextActive: { color: Colors.white },
loading: { padding: 40, alignItems: 'center' },
loadingText: { color: Colors.gray[400] },
statsRow: { flexDirection: 'row', gap: 10, marginBottom: 16 },
statCard: {
flex: 1, backgroundColor: Colors.gray[50], borderRadius: 4, padding: 16,
alignItems: 'center', gap: 6, borderWidth: 1, borderColor: Colors.gray[200],
},
statValue: { fontSize: 22, fontWeight: '800', color: Colors.black },
statLabel: { fontSize: 11, color: Colors.gray[500] },
periodInfo: { marginBottom: 20 },
periodInfoText: { fontSize: 13, color: Colors.gray[400], textAlign: 'center' },
section: { marginBottom: 24 },
sectionTitle: { fontSize: 18, fontWeight: '700', color: Colors.black, marginBottom: 16 },
subSectionTitle: { fontSize: 14, fontWeight: '700', color: Colors.gray[600], marginBottom: 12, marginTop: 4 },
repartitionItem: { marginBottom: 16 },
repartitionHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 6 },
colorDot: { width: 10, height: 10, borderRadius: 5, marginRight: 8 },
repartitionName: { flex: 1, fontSize: 14, fontWeight: '600', color: Colors.black },
repartitionPct: { fontSize: 14, fontWeight: '700', color: Colors.black },
progressBar: { height: 6, backgroundColor: Colors.gray[200], borderRadius: 3, marginBottom: 4 },
progressFill: { height: 6, borderRadius: 3 },
repartitionFooter: { flexDirection: 'row', justifyContent: 'space-between' },
repartitionDetail: { fontSize: 12, color: Colors.gray[400] },
empty: { alignItems: 'center', paddingTop: 60 },
emptyText: { fontSize: 16, color: Colors.gray[400], marginTop: 12 },
screen: { flex: 1, backgroundColor: Colors.gray[50] },
container: { flex: 1 },
content: { padding: Spacing.lg, paddingBottom: Spacing.xxxl },
segment: { flexDirection: 'row', backgroundColor: Colors.gray[100], borderRadius: Radius.sm, padding: Spacing.xs, marginBottom: Spacing.lg },
segmentBtn: { flex: 1, paddingVertical: Spacing.sm, alignItems: 'center', borderRadius: Radius.sm, minHeight: 40, justifyContent: 'center' },
segmentBtnActive: { backgroundColor: Colors.primary },
segmentText: { fontSize: FontSize.xs, fontWeight: FontWeight.semibold, color: Colors.gray[500] },
segmentTextActive: { color: Colors.white },
statsCard: { marginBottom: Spacing.xl },
statsRow: { flexDirection: 'row', alignItems: 'center' },
statCell: { flex: 1, alignItems: 'center', gap: Spacing.xs },
statDivider: { width: 1, alignSelf: 'stretch', backgroundColor: Colors.gray[200], marginVertical: Spacing.xs },
statValue: { fontSize: FontSize.xxl, fontWeight: FontWeight.heavy, color: Colors.black },
statEmoji: { fontSize: FontSize.xxl },
statLabel: { fontSize: FontSize.tiny, color: Colors.gray[500], textAlign: 'center' },
periodInfo: { fontSize: FontSize.xs, color: Colors.gray[400], textAlign: 'center', marginTop: Spacing.md },
block: { marginBottom: Spacing.xl },
detailHeader: { marginTop: Spacing.lg },
repItem: { paddingVertical: Spacing.md },
repItemBorder: { borderTopWidth: 1, borderTopColor: Colors.gray[200] },
repHeader: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: Spacing.sm },
repPct: { fontSize: FontSize.sm, fontWeight: FontWeight.bold, color: Colors.black },
progressBar: { height: 6, backgroundColor: Colors.gray[200], borderRadius: Radius.sm, marginBottom: Spacing.xs },
progressFill: { height: 6, borderRadius: Radius.sm },
repFooter: { flexDirection: 'row', justifyContent: 'space-between' },
repDetail: { fontSize: FontSize.xs, color: Colors.gray[500] },
});