From 322882d58736f9c3fb96a2952906d1f1b796cb79 Mon Sep 17 00:00:00 2001
From: Xor290 <free6nk33@gmail.com>
Date: Thu, 23 Apr 2026 08:56:33 +0200
Subject: [PATCH] chore: update UI

---
 frontend-admin/src/components/ui/Modal.tsx    |   7 +
 .../src/screens/admin/UsersScreen.tsx         |  10 +-
 .../src/screens/cabine/UsersScreen.tsx        |   4 +-
 mobile/src/components/ui/Modal.tsx            | 142 ++++++++++--------
 .../src/screens/client/OrderHistoryScreen.tsx |   4 +-
 5 files changed, 94 insertions(+), 73 deletions(-)

diff --git a/frontend-admin/src/components/ui/Modal.tsx b/frontend-admin/src/components/ui/Modal.tsx
index 2687f4cc..de13de14 100644
--- a/frontend-admin/src/components/ui/Modal.tsx
+++ b/frontend-admin/src/components/ui/Modal.tsx
@@ -3,10 +3,12 @@ import {
     Modal as RNModal,
     View,
     ScrollView,
+    KeyboardAvoidingView,
     TouchableOpacity,
     Text,
     StyleSheet,
     Animated,
+    Platform,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { spacing, borderRadius, fontSize } from "../../theme";
@@ -133,6 +135,10 @@ export default function Modal({
             animationType="fade"
             onRequestClose={onClose}
         >
+            <KeyboardAvoidingView
+                style={{ flex: 1 }}
+                behavior={Platform.OS === "ios" ? "padding" : "height"}
+            >
             <View style={styles.overlay}>
                 <Animated.View
                     style={[
@@ -186,6 +192,7 @@ export default function Modal({
                     </ScrollView>
                 </Animated.View>
             </View>
+            </KeyboardAvoidingView>
         </RNModal>
     );
 }
diff --git a/frontend-admin/src/screens/admin/UsersScreen.tsx b/frontend-admin/src/screens/admin/UsersScreen.tsx
index ebb40e15..0b5a2131 100644
--- a/frontend-admin/src/screens/admin/UsersScreen.tsx
+++ b/frontend-admin/src/screens/admin/UsersScreen.tsx
@@ -974,9 +974,9 @@ export default function UsersScreen() {
                                             { color: colors.warning },
                                         ]}
                                     >
-                                        {item.clientData.amende}
+                                        {item.clientData.amende} €
                                     </Text>
-                                    <Text style={styles.statLabel}>Amendes</Text>
+                                    <Text style={styles.statLabel}>Amende</Text>
                                 </View>
                             )}
                             <View style={styles.stat}>
@@ -1456,16 +1456,16 @@ export default function UsersScreen() {
                                 Amende actuelle
                             </Text>
                             <Text style={{ color: colors.warning, fontSize: fontSize.lg, fontWeight: "700" }}>
-                                {sanctionModal.client?.amende ?? 0} pts
+                                {sanctionModal.client?.amende ?? 0} €
                             </Text>
                         </View>
 
                         {/* Ajouter amende */}
                         <TextInput
-                            label="Points à ajouter"
+                            label="Montant à ajouter (€)"
                             value={amendeAmount}
                             onChangeText={setAmendeAmount}
-                            keyboardType="numeric"
+                            keyboardType="decimal-pad"
                             icon={<Ionicons name="add-circle-outline" size={18} color={colors.textMuted} />}
                         />
                         <TextInput
diff --git a/frontend-admin/src/screens/cabine/UsersScreen.tsx b/frontend-admin/src/screens/cabine/UsersScreen.tsx
index 2335c8cf..15db6309 100644
--- a/frontend-admin/src/screens/cabine/UsersScreen.tsx
+++ b/frontend-admin/src/screens/cabine/UsersScreen.tsx
@@ -150,9 +150,9 @@ export default function UsersScreen() {
                 {appSettings.show_amende_score && (
                     <View style={styles.stat}>
                         <Text style={[styles.statValue, { color: colors.warning }]}>
-                            {item.amende}
+                            {item.amende} €
                         </Text>
-                        <Text style={styles.statLabel}>Amendes</Text>
+                        <Text style={styles.statLabel}>Amende</Text>
                     </View>
                 )}
                 <View style={styles.stat}>
diff --git a/mobile/src/components/ui/Modal.tsx b/mobile/src/components/ui/Modal.tsx
index 27c5365d..f0abc142 100644
--- a/mobile/src/components/ui/Modal.tsx
+++ b/mobile/src/components/ui/Modal.tsx
@@ -2,10 +2,13 @@ import React, { type ReactNode, useEffect, useRef } from "react";
 import {
     Modal as RNModal,
     View,
+    ScrollView,
+    KeyboardAvoidingView,
     TouchableOpacity,
     Text,
     StyleSheet,
     Animated,
+    Platform,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { spacing, borderRadius, fontSize } from "../../theme";
@@ -60,74 +63,86 @@ export default function Modal({
             animationType="fade"
             onRequestClose={onClose}
         >
-            <View style={styles.overlay}>
-                <Animated.View
-                    style={[
-                        styles.content,
-                        {
-                            backgroundColor: colors.bgSecondary,
-                            borderColor: colors.borderSubtle,
-                            shadowColor: colors.accent,
-                            transform: [{ scale }],
-                            opacity,
-                        },
-                    ]}
-                >
-                    <View
+            <KeyboardAvoidingView
+                style={{ flex: 1 }}
+                behavior={Platform.OS === "ios" ? "padding" : "height"}
+            >
+                <View style={styles.overlay}>
+                    <Animated.View
                         style={[
-                            styles.accentBar,
-                            { backgroundColor: colors.accent },
+                            styles.content,
+                            {
+                                backgroundColor: colors.bgSecondary,
+                                borderColor: colors.borderSubtle,
+                                shadowColor: colors.accent,
+                                transform: [{ scale }],
+                                opacity,
+                            },
                         ]}
-                    />
-                    <View style={styles.header}>
-                        <View style={styles.titleRow}>
-                            {icon && (
-                                <View
-                                    style={[
-                                        styles.iconCircle,
-                                        {
-                                            backgroundColor:
-                                                (iconColor || colors.accent) +
-                                                "20",
-                                        },
-                                    ]}
-                                >
-                                    <Ionicons
-                                        name={icon}
-                                        size={20}
-                                        color={iconColor || colors.accent}
-                                    />
-                                </View>
-                            )}
-                            {title && (
-                                <Text
-                                    style={[
-                                        styles.title,
-                                        { color: colors.textWhite },
-                                    ]}
-                                >
-                                    {title}
-                                </Text>
-                            )}
-                        </View>
-                        <TouchableOpacity
-                            onPress={onClose}
+                    >
+                        <View
                             style={[
-                                styles.closeBtn,
-                                { backgroundColor: colors.borderSubtle },
+                                styles.accentBar,
+                                { backgroundColor: colors.accent },
                             ]}
-                            activeOpacity={0.7}
+                        />
+                        <View style={styles.header}>
+                            <View style={styles.titleRow}>
+                                {icon && (
+                                    <View
+                                        style={[
+                                            styles.iconCircle,
+                                            {
+                                                backgroundColor:
+                                                    (iconColor || colors.accent) +
+                                                    "20",
+                                            },
+                                        ]}
+                                    >
+                                        <Ionicons
+                                            name={icon}
+                                            size={20}
+                                            color={iconColor || colors.accent}
+                                        />
+                                    </View>
+                                )}
+                                {title && (
+                                    <Text
+                                        style={[
+                                            styles.title,
+                                            { color: colors.textWhite },
+                                        ]}
+                                    >
+                                        {title}
+                                    </Text>
+                                )}
+                            </View>
+                            <TouchableOpacity
+                                onPress={onClose}
+                                style={[
+                                    styles.closeBtn,
+                                    { backgroundColor: colors.borderSubtle },
+                                ]}
+                                activeOpacity={0.7}
+                            >
+                                <Ionicons
+                                    name="close"
+                                    size={20}
+                                    color={colors.textMuted}
+                                />
+                            </TouchableOpacity>
+                        </View>
+                        <ScrollView
+                            style={styles.body}
+                            contentContainerStyle={{ paddingBottom: spacing.xl }}
+                            showsVerticalScrollIndicator={false}
+                            keyboardShouldPersistTaps="handled"
                         >
-                            <Ionicons
-                                name="close"
-                                size={20}
-                                color={colors.textMuted}
-                            />
-                        </TouchableOpacity>
-                    </View>
-                    <View style={styles.body}>{children}</View>
-                </Animated.View>
-            </View>
+                            {children}
+                        </ScrollView>
+                    </Animated.View>
+                </View>
+            </KeyboardAvoidingView>
         </RNModal>
     );
 }
@@ -190,6 +205,5 @@ const styles = StyleSheet.create({
     },
     body: {
         paddingHorizontal: spacing.xl,
-        paddingBottom: spacing.xl,
     },
 });
diff --git a/mobile/src/screens/client/OrderHistoryScreen.tsx b/mobile/src/screens/client/OrderHistoryScreen.tsx
index c44e8be3..0d4f0179 100644
--- a/mobile/src/screens/client/OrderHistoryScreen.tsx
+++ b/mobile/src/screens/client/OrderHistoryScreen.tsx
@@ -333,10 +333,10 @@ export default function OrderHistoryScreen() {
                                             penaltyCount > 0 && penaltyCount < 3 && { color: colors.warning },
                                         ]}
                                     >
-                                        {penaltyCount}
+                                        {penaltyCount} €
                                     </Text>
                                     <Text style={styles.statLabel}>
-                                        Score amendes
+                                        Amende
                                     </Text>
                                 </View>
                             )}