Xor290/projet_gestion_commande
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: fix UI

Browse Source
This commit is contained in:
Xor290
2026-04-26 19:07:26 +02:00
parent a120ad6391
commit d39c49cce6
10 changed files with 172 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-admin/src/screens/admin/SettingsScreen.tsx
+20 -15
View File
@@ -9,6 +9,7 @@ import {
ActivityIndicator,
TextInput,
Keyboard,
useWindowDimensions,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import { Ionicons } from "@expo/vector-icons";
@@ -101,7 +102,7 @@ function DeliveryScheduleSection({
<View style={{ flexDirection: "row", alignItems: "center", gap: spacing.s, marginTop: spacing.xs }}>
<Text style={s.thresholdSep}>Ouverture</Text>
<TextInput
style={[s.thresholdInput, { width: 72 }]}
style={[s.thresholdInput, { width: screenWidth < 380 ? 58 : 72 }]}
value={day.open_time}
onChangeText={(v) => updateDay(key, { open_time: v })}
placeholder="09:00"
@@ -112,7 +113,7 @@ function DeliveryScheduleSection({
<Text style={s.thresholdSep}>→</Text>
<Text style={s.thresholdSep}>Fermeture</Text>
<TextInput
style={[s.thresholdInput, { width: 72 }]}
style={[s.thresholdInput, { width: screenWidth < 380 ? 58 : 72 }]}
value={day.close_time}
onChangeText={(v) => updateDay(key, { close_time: v })}
placeholder="20:00"
@@ -240,7 +241,7 @@ function PostalZonesSection({
<View style={{ paddingHorizontal: spacing.l, paddingBottom: spacing.m, gap: spacing.m }}>
{/* Nom */}
<View style={{ flexDirection: "row", alignItems: "center", gap: spacing.s }}>
<Text style={[s.thresholdSep, { width: 48 }]}>Nom</Text>
<Text style={[s.thresholdSep, { width: screenWidth < 380 ? 38 : 48 }]}>Nom</Text>
<TextInput
style={[s.thresholdInput, { flex: 1, width: undefined, textAlign: "left", paddingHorizontal: spacing.m }]}
value={zone.name}
@@ -251,9 +252,9 @@ function PostalZonesSection({
</View>
{/* Minimum */}
<View style={{ flexDirection: "row", alignItems: "center", gap: spacing.s }}>
<Text style={[s.thresholdSep, { width: 48 }]}>Min €</Text>
<Text style={[s.thresholdSep, { width: screenWidth < 380 ? 38 : 48 }]}>Min €</Text>
<TextInput
style={[s.thresholdInput, { width: 80 }]}
style={[s.thresholdInput, { width: inputMd }]}
value={String(zone.min_amount)}
onChangeText={(v) => {
const n = parseFloat(v);
@@ -332,7 +333,7 @@ function PostalZonesSection({
<View style={{ gap: 4 }}>
<Text style={s.thresholdSep}>Montant minimum de commande (€) *</Text>
<TextInput
style={[s.thresholdInput, { width: 100, textAlign: "left", paddingHorizontal: spacing.m }]}
style={[s.thresholdInput, { width: inputLg, textAlign: "left", paddingHorizontal: spacing.m }]}
value={form.min_amount}
onChangeText={(v) => { setForm((f) => ({ ...f, min_amount: v })); setFormError(""); }}
keyboardType="decimal-pad"
@@ -564,9 +565,9 @@ function TiersSection({
{/* En-tête colonnes */}
<View style={{ flexDirection: "row", paddingHorizontal: spacing.l, paddingBottom: spacing.xs, gap: spacing.xs }}>
<Text style={[s.thresholdSep, { width: 56, textAlign: "center" }]}>Min €</Text>
<Text style={[s.thresholdSep, { width: 56, textAlign: "center" }]}>Max €</Text>
<Text style={[s.thresholdSep, { width: 44, textAlign: "center" }]}>Pts</Text>
<Text style={[s.thresholdSep, { width: inputSm, textAlign: "center" }]}>Min €</Text>
<Text style={[s.thresholdSep, { width: inputSm, textAlign: "center" }]}>Max €</Text>
<Text style={[s.thresholdSep, { width: screenWidth < 380 ? 36 : 44, textAlign: "center" }]}>Pts</Text>
</View>
{tiers.map((tier, i) => (
@@ -583,14 +584,14 @@ function TiersSection({
}}
>
<TextInput
style={[s.thresholdInput, { width: 56 }]}
style={[s.thresholdInput, { width: inputSm }]}
keyboardType="decimal-pad"
value={String(tier.min)}
onChangeText={(v) => updateTier(i, "min", v)}
/>
<Text style={s.thresholdSep}>→</Text>
<TextInput
style={[s.thresholdInput, { width: 56 }]}
style={[s.thresholdInput, { width: inputSm }]}
keyboardType="decimal-pad"
value={String(tier.max)}
onChangeText={(v) => updateTier(i, "max", v)}
@@ -599,7 +600,7 @@ function TiersSection({
/>
<Text style={s.thresholdSep}>=</Text>
<TextInput
style={[s.thresholdInput, { width: 44 }]}
style={[s.thresholdInput, { width: screenWidth < 380 ? 36 : 44 }]}
keyboardType="number-pad"
value={String(tier.points)}
onChangeText={(v) => updateTier(i, "points", v)}
@@ -640,6 +641,10 @@ export default function SettingsScreen() {
const { colors } = useTheme();
const { alert, showError, showSuccess, hideAlert } = useAlert();
const navigation = useNavigation();
const { width: screenWidth } = useWindowDimensions();
const inputSm = screenWidth < 380 ? 46 : 56;
const inputMd = screenWidth < 380 ? 64 : 80;
const inputLg = screenWidth < 380 ? 80 : 100;
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
@@ -811,7 +816,7 @@ export default function SettingsScreen() {
const s = StyleSheet.create({
container: { flex: 1, backgroundColor: colors.bgPrimary },
content: { padding: spacing.l, paddingBottom: spacing.xl * 2 },
content: { padding: screenWidth < 380 ? spacing.m : spacing.l, paddingBottom: spacing.xl * 2 },
section: {
backgroundColor: colors.bgSecondary,
borderRadius: borderRadius.lg,
@@ -988,7 +993,7 @@ export default function SettingsScreen() {
</View>
<View style={{ flexDirection: "row", width: "100%", marginBottom: 2 }}>
<Text style={[s.rowDesc, { flex: 1 }]}>À partir de (annul.)</Text>
<Text style={[s.rowDesc, { width: 80, textAlign: "center" }]}>Montant</Text>
<Text style={[s.rowDesc, { width: inputMd, textAlign: "center" }]}>Montant</Text>
<View style={{ width: 28 }} />
</View>
{settings.penalty_tiers.map((tier, i) => (
@@ -1008,7 +1013,7 @@ export default function SettingsScreen() {
placeholderTextColor={colors.textMuted}
/>
<TextInput
style={[s.thresholdInput, { width: 80, textAlign: "center" }]}
style={[s.thresholdInput, { width: inputMd, textAlign: "center" }]}
value={String(tier.amount)}
onChangeText={(v) => {
const n = parseInt(v, 10);