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

chore: build

Browse Source
This commit is contained in:
Xor290
2026-06-19 19:42:37 +02:00
parent f576db7cdd
commit 1d0e396776
8 changed files with 177 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-admin/src/api/api_admin.ts
+10
View File
@@ -1066,6 +1066,16 @@ export interface AppSettings {
delivery_mode: DeliveryModeConfig;
shop_name: string;
contact_telegram: string;
admin_color_primary: string;
admin_color_secondary: string;
admin_color_success: string;
admin_color_danger: string;
admin_color_warning: string;
client_color_primary: string;
client_color_secondary: string;
client_color_success: string;
client_color_danger: string;
client_color_warning: string;
}
export const getSettings = async (): Promise<{
frontend-admin/src/context/ThemeContext.tsx
+40 -3
View File
@@ -1,6 +1,8 @@
import React, { createContext, useContext, useState, useEffect, type ReactNode } from "react";
import React, { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react";
import { AppState } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { darkColors, lightColors, type Colors } from "../theme/colors";
import { getSettings } from "../api/api_admin";
type ThemeMode = "dark" | "light";
@@ -12,16 +14,48 @@ interface ThemeContextType {
}
const STORAGE_KEY = "@theme_mode";
const COLORS_CACHE_KEY = "@admin_colors_cache";
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
export function ThemeProvider({ children }: { children: ReactNode }) {
const [mode, setMode] = useState<ThemeMode>("dark");
const [colorOverrides, setColorOverrides] = useState<Partial<Colors>>({});
const fetchAdminColors = useCallback(async () => {
try {
const result = await getSettings();
if (result.success && result.settings) {
const s = result.settings;
const overrides: Partial<Colors> = {};
if (s.admin_color_primary) overrides.accent = s.admin_color_primary;
if (s.admin_color_secondary) overrides.secondary = s.admin_color_secondary;
if (s.admin_color_success) overrides.success = s.admin_color_success;
if (s.admin_color_danger) overrides.danger = s.admin_color_danger;
if (s.admin_color_warning) overrides.warning = s.admin_color_warning;
setColorOverrides(overrides);
AsyncStorage.setItem(COLORS_CACHE_KEY, JSON.stringify(overrides)).catch(() => {});
}
} catch {}
}, []);
useEffect(() => {
AsyncStorage.getItem(STORAGE_KEY).then((val) => {
if (val === "light" || val === "dark") setMode(val);
});
}, []);
AsyncStorage.getItem(COLORS_CACHE_KEY).then((val) => {
if (val) {
try { setColorOverrides(JSON.parse(val)); } catch {}
}
});
fetchAdminColors();
}, [fetchAdminColors]);
useEffect(() => {
const sub = AppState.addEventListener("change", (state) => {
if (state === "active") fetchAdminColors();
});
return () => sub.remove();
}, [fetchAdminColors]);
const toggleTheme = () => {
const next = mode === "dark" ? "light" : "dark";
@@ -29,8 +63,11 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
AsyncStorage.setItem(STORAGE_KEY, next);
};
const baseColors = mode === "dark" ? darkColors : lightColors;
const colors: Colors = { ...baseColors, ...colorOverrides };
const value: ThemeContextType = {
colors: mode === "dark" ? darkColors : lightColors,
colors,
mode,
toggleTheme,
isDark: mode === "dark",
frontend-admin/src/screens/admin/SettingsScreen.tsx
+70
View File
@@ -1194,6 +1194,16 @@ export default function SettingsScreen() {
shop_name: "Milieu-Nantais",
contact_telegram: "",
points_reward: null,
admin_color_primary: "#7c3aed",
admin_color_secondary: "#22d3ee",
admin_color_success: "#4ade80",
admin_color_danger: "#ef4444",
admin_color_warning: "#f59e0b",
client_color_primary: "#7c3aed",
client_color_secondary: "#22d3ee",
client_color_success: "#4ade80",
client_color_danger: "#ef4444",
client_color_warning: "#f59e0b",
});
const [showApiKey, setShowApiKey] = useState(false);
const [showIpnSecret, setShowIpnSecret] = useState(false);
@@ -2182,6 +2192,66 @@ export default function SettingsScreen() {
)}
</AccordionSection>
{/* ============================================ */}
{/* 🎨 COULEURS DE L'INTERFACE */}
{/* ============================================ */}
<AccordionSection title="Couleurs de l'interface" colors={colors} s={s}>
<Text style={[s.hint, { paddingTop: spacing.s, paddingHorizontal: spacing.l }]}>
Personnalisez les couleurs de l'espace admin et de l'app client / site web.
</Text>
{(["admin", "client"] as const).map((scope) => (
<View key={scope}>
<Text style={[s.rowLabel, { paddingHorizontal: spacing.l, paddingTop: spacing.l, paddingBottom: spacing.xs }]}>
{scope === "admin" ? "Espace admin" : "App client & site web"}
</Text>
{([
{ label: "Principale", key: `${scope}_color_primary` as const },
{ label: "Secondaire", key: `${scope}_color_secondary` as const },
{ label: "Succès", key: `${scope}_color_success` as const },
{ label: "Danger", key: `${scope}_color_danger` as const },
{ label: "Avertissement", key: `${scope}_color_warning` as const },
] as { label: string; key: keyof typeof settings }[]).map(({ label, key }) => (
<View key={key as string} style={{ paddingHorizontal: spacing.l, paddingBottom: spacing.m }}>
<Text style={[s.rowDesc, { marginBottom: spacing.xs }]}>{label}</Text>
<View style={{ flexDirection: "row", alignItems: "center", gap: spacing.m }}>
<View style={{
width: 36, height: 36,
borderRadius: borderRadius.sm,
backgroundColor: (settings[key] as string) || "#7c3aed",
borderWidth: 1,
borderColor: colors.border,
}} />
<TextInput
style={[s.input, { flex: 1 }]}
value={settings[key] as string}
onChangeText={(v) => setSettings((p) => ({ ...p, [key]: v }))}
placeholder="#7c3aed"
placeholderTextColor={colors.textMuted}
autoCapitalize="none"
autoCorrect={false}
/>
</View>
<View style={{ flexDirection: "row", gap: spacing.xs, marginTop: spacing.xs, flexWrap: "wrap" }}>
{["#7c3aed", "#2563eb", "#0891b2", "#059669", "#d97706", "#dc2626", "#db2777", "#f59e0b", "#4ade80", "#ef4444", "#22d3ee", "#0f172a"].map((color) => (
<TouchableOpacity
key={color}
onPress={() => setSettings((p) => ({ ...p, [key]: color }))}
style={{
width: 26, height: 26, borderRadius: 13,
backgroundColor: color,
borderWidth: (settings[key] as string) === color ? 2.5 : 1,
borderColor: (settings[key] as string) === color ? colors.textPrimary : colors.border,
}}
/>
))}
</View>
</View>
))}
</View>
))}
</AccordionSection>
<TouchableOpacity
style={s.saveButton}
onPress={handleSave}
frontend-admin/src/theme/colors.ts
+2
View File
@@ -16,6 +16,7 @@ export const darkColors = {
accent: "#7c3aed",
accentDark: "#6d28d9",
accentLight: "#8b5cf6",
secondary: "#22d3ee",
// Status
success: "#4ade80",
@@ -62,6 +63,7 @@ export const lightColors: Colors = {
accent: "#7c3aed",
accentDark: "#6d28d9",
accentLight: "#8b5cf6",
secondary: "#0891b2",
// Status
success: "#16a34a",
frontend-prep/src/pages/User/ConsultationHistorique.tsx
+1 -1
View File
@@ -290,7 +290,7 @@ function ConsultationHistorique() {
<p
className={`stat-value ${penaltyCount >= 3 ? "value-danger" : penaltyCount > 0 ? "value-warning" : ""}`}
>
{penaltyCount}
{penaltyCount} €
</p>
<p className="stat-label">Score amendes</p>
</div>
mobile/src/api/api.ts
+15
View File
@@ -778,6 +778,11 @@ export interface PublicSettings {
telegram_notifications_enabled: boolean;
two_fa_enabled: boolean;
contact_telegram: string;
client_color_primary: string;
client_color_secondary: string;
client_color_success: string;
client_color_danger: string;
client_color_warning: string;
}
export const getPublicSettings = async (): Promise<PublicSettings> => {
@@ -794,6 +799,11 @@ export const getPublicSettings = async (): Promise<PublicSettings> => {
telegram_notifications_enabled: false,
two_fa_enabled: false,
contact_telegram: "",
client_color_primary: "#7c3aed",
client_color_secondary: "#22d3ee",
client_color_success: "#4ade80",
client_color_danger: "#ef4444",
client_color_warning: "#f59e0b",
};
try {
const { data } = await apiClient.get(`${V1}/app-settings`);
@@ -816,6 +826,11 @@ export const getPublicSettings = async (): Promise<PublicSettings> => {
data.telegram_notifications_enabled ?? false,
two_fa_enabled: data.two_fa_enabled ?? false,
contact_telegram: data.contact_telegram || "",
client_color_primary: data.client_color_primary || "#7c3aed",
client_color_secondary: data.client_color_secondary || "#22d3ee",
client_color_success: data.client_color_success || "#4ade80",
client_color_danger: data.client_color_danger || "#ef4444",
client_color_warning: data.client_color_warning || "#f59e0b",
};
} catch {
return defaults;
mobile/src/context/ThemeContext.tsx
+37 -3
View File
@@ -1,6 +1,8 @@
import React, { createContext, useContext, useState, useEffect, type ReactNode } from "react";
import React, { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react";
import { AppState } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { darkColors, lightColors, type Colors } from "../theme/colors";
import { getPublicSettings } from "../api/api";
type ThemeMode = "dark" | "light";
@@ -12,16 +14,45 @@ interface ThemeContextType {
}
const STORAGE_KEY = "@theme_mode";
const COLORS_CACHE_KEY = "@client_colors_cache";
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
export function ThemeProvider({ children }: { children: ReactNode }) {
const [mode, setMode] = useState<ThemeMode>("dark");
const [colorOverrides, setColorOverrides] = useState<Partial<Colors>>({});
const fetchClientColors = useCallback(async () => {
try {
const s = await getPublicSettings();
const overrides: Partial<Colors> = {};
if (s.client_color_primary) overrides.accent = s.client_color_primary;
if (s.client_color_secondary) overrides.secondary = s.client_color_secondary;
if (s.client_color_success) overrides.success = s.client_color_success;
if (s.client_color_danger) overrides.danger = s.client_color_danger;
if (s.client_color_warning) overrides.warning = s.client_color_warning;
setColorOverrides(overrides);
AsyncStorage.setItem(COLORS_CACHE_KEY, JSON.stringify(overrides)).catch(() => {});
} catch {}
}, []);
useEffect(() => {
AsyncStorage.getItem(STORAGE_KEY).then((val) => {
if (val === "light" || val === "dark") setMode(val);
});
}, []);
AsyncStorage.getItem(COLORS_CACHE_KEY).then((val) => {
if (val) {
try { setColorOverrides(JSON.parse(val)); } catch {}
}
});
fetchClientColors();
}, [fetchClientColors]);
useEffect(() => {
const sub = AppState.addEventListener("change", (state) => {
if (state === "active") fetchClientColors();
});
return () => sub.remove();
}, [fetchClientColors]);
const toggleTheme = () => {
const next = mode === "dark" ? "light" : "dark";
@@ -29,8 +60,11 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
AsyncStorage.setItem(STORAGE_KEY, next);
};
const baseColors = mode === "dark" ? darkColors : lightColors;
const colors: Colors = { ...baseColors, ...colorOverrides };
const value: ThemeContextType = {
colors: mode === "dark" ? darkColors : lightColors,
colors,
mode,
toggleTheme,
isDark: mode === "dark",
mobile/src/theme/colors.ts
+2
View File
@@ -16,6 +16,7 @@ export const darkColors = {
accent: "#7c3aed",
accentDark: "#6d28d9",
accentLight: "#8b5cf6",
secondary: "#22d3ee",
// Status
success: "#4ade80",
@@ -62,6 +63,7 @@ export const lightColors: Colors = {
accent: "#7c3aed",
accentDark: "#6d28d9",
accentLight: "#8b5cf6",
secondary: "#0891b2",
// Status
success: "#16a34a",