chore: add mobile app

frontend-admin/src/screens/cabine/DashboardScreen.tsx

@@ -0,0 +1,187 @@
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import {
+    View,
+    Text,
+    StyleSheet,
+    ScrollView,
+    RefreshControl,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { spacing, fontSize, borderRadius } from "../../theme";
+import { useTheme } from "../../context/ThemeContext";
+import { shadows } from "../../theme/shadows";
+import { useAuth } from "../../auth/AuthContext";
+import { getAllCommands } from "../../api/api_admin";
+import { getAllDeliveryPersonsWithDetails } from "../../api/api_cabine";
+import LoadingSpinner from "../../components/ui/LoadingSpinner";
+
+export default function DashboardScreen() {
+    const { colors } = useTheme();
+    const { username } = useAuth();
+    const [stats, setStats] = useState<
+        Array<{
+            label: string;
+            value: number;
+            icon: keyof typeof Ionicons.glyphMap;
+            color: string;
+        }>
+    >([]);
+    const [loading, setLoading] = useState(true);
+    const [refreshing, setRefreshing] = useState(false);
+
+    const loadStats = useCallback(async () => {
+        try {
+            const [allCmd, livreursRes] = await Promise.all([
+                getAllCommands(),
+                getAllDeliveryPersonsWithDetails(),
+            ]);
+            const cmds = allCmd.commands;
+            setStats([
+                {
+                    label: "Commandes actives",
+                    value: cmds.filter(
+                        (c: any) =>
+                            !["approved", "cancelled"].includes(c.status),
+                    ).length,
+                    icon: "receipt-outline",
+                    color: colors.info,
+                },
+                {
+                    label: "En route",
+                    value: cmds.filter((c: any) => c.status === "en_route")
+                        .length,
+                    icon: "navigate-outline",
+                    color: colors.warning,
+                },
+                {
+                    label: "En attente",
+                    value: cmds.filter((c: any) => c.status === "pending")
+                        .length,
+                    icon: "time-outline",
+                    color: colors.accent,
+                },
+                {
+                    label: "Livreurs dispo",
+                    value: livreursRes.stats.available,
+                    icon: "bicycle-outline",
+                    color: colors.success,
+                },
+                {
+                    label: "Livreurs occupés",
+                    value: livreursRes.stats.busy,
+                    icon: "bicycle",
+                    color: colors.warning,
+                },
+                {
+                    label: "Total terminées",
+                    value: cmds.filter((c: any) => c.status === "approved")
+                        .length,
+                    icon: "checkmark-circle-outline",
+                    color: colors.successDark,
+                },
+            ]);
+        } catch {
+            /* ignore */
+        }
+        setLoading(false);
+    }, [colors]);
+
+    useEffect(() => {
+        loadStats();
+    }, [loadStats]);
+    const onRefresh = async () => {
+        setRefreshing(true);
+        await loadStats();
+        setRefreshing(false);
+    };
+
+    const styles = useMemo(
+        () =>
+            StyleSheet.create({
+                container: {
+                    flex: 1,
+                    backgroundColor: colors.bgPrimary,
+                    padding: spacing.l,
+                },
+                welcome: {
+                    fontSize: fontSize.xl,
+                    fontWeight: "bold",
+                    color: colors.textWhite,
+                    marginBottom: spacing.xs,
+                },
+                subtitle: {
+                    fontSize: fontSize.md,
+                    color: colors.textSecondary,
+                    marginBottom: spacing.xl,
+                },
+                grid: {
+                    flexDirection: "row",
+                    flexWrap: "wrap",
+                    gap: spacing.m,
+                },
+                card: {
+                    width: "47%",
+                    backgroundColor: colors.bgCard,
+                    borderRadius: borderRadius.md,
+                    padding: spacing.l,
+                    borderWidth: 1,
+                    borderColor: colors.borderLight,
+                    alignItems: "center",
+                },
+                iconCircle: {
+                    width: 48,
+                    height: 48,
+                    borderRadius: 24,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    marginBottom: spacing.s,
+                },
+                cardValue: {
+                    fontSize: fontSize.xxl,
+                    fontWeight: "bold",
+                    color: colors.textWhite,
+                },
+                cardLabel: {
+                    fontSize: fontSize.sm,
+                    color: colors.textSecondary,
+                    marginTop: spacing.xs,
+                    textAlign: "center",
+                },
+            }),
+        [colors],
+    );
+
+    if (loading) return <LoadingSpinner message="Chargement..." />;
+
+    return (
+        <ScrollView
+            style={styles.container}
+            refreshControl={
+                <RefreshControl
+                    refreshing={refreshing}
+                    onRefresh={onRefresh}
+                    tintColor={colors.info}
+                />
+            }
+        >
+            <Text style={styles.welcome}>Cabine - {username}</Text>
+            <Text style={styles.subtitle}>Suivi des opérations</Text>
+            <View style={styles.grid}>
+                {stats.map((s, i) => (
+                    <View key={i} style={[styles.card, shadows.md]}>
+                        <View
+                            style={[
+                                styles.iconCircle,
+                                { backgroundColor: s.color + "20" },
+                            ]}
+                        >
+                            <Ionicons name={s.icon} size={24} color={s.color} />
+                        </View>
+                        <Text style={styles.cardValue}>{s.value}</Text>
+                        <Text style={styles.cardLabel}>{s.label}</Text>
+                    </View>
+                ))}
+            </View>
+        </ScrollView>
+    );
+}