+ {/* Fond décoratif */}
+
+
+
+ {/* Contenu */}
+
+ );
+};
+
+export default RoleSelector;
+export { ROLE_CONFIG, normalizeRole };
+export type { RoleSelectorProps };
\ No newline at end of file
diff --git a/ndf/src/components/RoleSwitcher.tsx b/ndf/src/components/RoleSwitcher.tsx
new file mode 100644
index 0000000..ba0a626
--- /dev/null
+++ b/ndf/src/components/RoleSwitcher.tsx
@@ -0,0 +1,191 @@
+import { useState } from 'react';
+import { useAuth } from '../context/AuthContext';
+
+// ── CONFIG ROLES (couleurs & icônes) ──────────────────
+const ROLE_STYLE: Record
+
+ {/* En-tête */}
+
+
+
+
+
+
+ {/* Cartes de rôles */}
+ 📋
+
+
+
+
+ {initials}
+
+ {userName}
+
+ + Choisir votre mode +
++ Votre compte dispose de {uniqueRoles.length} profils — sélectionnez celui à activer +
+
+ {uniqueRoles.map(role => {
+ const cfg = ROLE_CONFIG[role] ?? {
+ label: role, sublabel: '', icon: '🔑',
+ gradient: 'linear-gradient(135deg,#64748b,#475569)',
+ accent: '#64748b', features: [],
+ };
+ const isHovered = hovered === role;
+ const isSelected = selected === role;
+
+ return (
+
+ );
+ })}
+
+
+ {/* Footer */}
+ + Vous pourrez changer de mode à tout moment depuis l'interface +
+
+ {/* Bouton mode actif */}
+
+
+ {/* Dropdown des autres rôles */}
+ {open && (
+
+ );
+};
+
+// ══════════════════════════════════════════════════════
+// VERSION BADGE (dans le header, compact)
+// ══════════════════════════════════════════════════════
+export const RoleSwitcherBadge = () => {
+ const { activeRole, allRoles, switchRole, isMultiRole } = useAuth();
+ const [open, setOpen] = useState(false);
+
+ if (!activeRole) return null;
+
+ const current = getStyle(activeRole);
+ const others = allRoles.filter(r => r !== activeRole);
+
+ return (
+
+
+ )}
+
+ Changer de mode
+
+ {others.map(role => {
+ const s = getStyle(role);
+ return (
+
+ );
+ })}
+
+
+
+ {open && isMultiRole && (
+ <>
+ {/* Overlay pour fermer */}
+ (null);
+ const cameraRef = useRef(null);
+ const [dragOver, setDragOver] = useState(false);
+ const allowed = ['image/jpeg', 'image/jpg', 'image/png', 'application/pdf'];
+
+ const add = (list: FileList | null) => {
+ if (!list) return;
+ const filtered = Array.from(list).filter(f => allowed.includes(f.type));
+ setFiles([...files, ...filtered]);
+ };
+
+ return (
+
+
+
+ );
+};
diff --git a/ndf/src/components/ndf/StatutStepper.tsx b/ndf/src/components/ndf/StatutStepper.tsx
new file mode 100644
index 0000000..f6dab5f
--- /dev/null
+++ b/ndf/src/components/ndf/StatutStepper.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { normalizeStatut } from './helpers';
+
+const STEPS = [
+ { key: 'enattente', label: 'Soumise', icon: '\u{1F4CB}' },
+ { key: 'validen1', label: 'Validée N1', icon: '\u2705' },
+ { key: 'validen2', label: 'Validée N2', icon: '\u2705' },
+ { key: 'approuve', label: 'Approuvée', icon: '\u{1F389}' },
+ { key: 'paiementenattente', label: 'En att. paiement', icon: '\u23F3' },
+ { key: 'payee', label: 'Payée', icon: '\u{1F4B6}' },
+];
+
+function getActiveIndex(s: string): number {
+ if (s === 'refuse' || s === 'refus') return -1;
+ if (s === 'payee') return 5;
+ if (s === 'paiementenattente' || s === 'paiement_en_attente') return 4;
+ if (s === 'approuve') return 3;
+ if (['validen2', 'valide_n2', 'validn2'].includes(s)) return 2;
+ if (['validen1', 'valide_n1', 'validn1'].includes(s)) return 1;
+ return 0;
+}
+
+export const StatutStepper = ({ statut }: { statut: string }) => {
+ const s = normalizeStatut(statut);
+ const active = getActiveIndex(s);
+
+ if (active === -1) {
+ return (
+ = {
+ enattente: { bg: '#fef9c3', color: '#a16207', label: 'En attente' },
+ en_attente: { bg: '#fef9c3', color: '#a16207', label: 'En attente' },
+ 'en attente': { bg: '#fef9c3', color: '#a16207', label: 'En attente' },
+ validn1: { bg: '#dbeafe', color: '#1d4ed8', label: 'Validé N1' },
+ validen1: { bg: '#dbeafe', color: '#1d4ed8', label: 'Validé N1' },
+ valide_n1: { bg: '#dbeafe', color: '#1d4ed8', label: 'Validé N1' },
+ validn2: { bg: '#ede9fe', color: '#7c3aed', label: 'Validé N2' },
+ validen2: { bg: '#ede9fe', color: '#7c3aed', label: 'Validé N2' },
+ valide_n2: { bg: '#ede9fe', color: '#7c3aed', label: 'Validé N2' },
+ approuve: { bg: '#dcfce7', color: '#15803d', label: 'Approuvé' },
+ paiementenattente: { bg: '#fef9c3', color: '#b45309', label: 'Paiement en attente' },
+ paiement_en_attente: { bg: '#fef9c3', color: '#b45309', label: 'Paiement en attente' },
+ payee: { bg: '#f0fdf4', color: '#16a34a', label: 'Payée' },
+ refuse: { bg: '#fee2e2', color: '#dc2626', label: 'Refusée' },
+ refus: { bg: '#fee2e2', color: '#dc2626', label: 'Refusée' },
+ brouillon: { bg: '#f1f5f9', color: 'var(--text-secondary)', label: 'Brouillon' },
+ valide: { bg: '#dcfce7', color: '#15803d', label: 'Validé' },
+};
+
+export const TagStatut = ({ statut }: { statut: string }) => {
+ const key = normalizeStatut(statut);
+ const s = STATUT_MAP[key] ?? STATUT_MAP['brouillon'];
+ return (
+
+ {s.label}
+
+ );
+};
+
+/** Alias fonction pour compatibilité avec l'ancien code inline */
+export const tagStatut = (statut: string) => = {
+ 3: { t1: 0.529, t2_a: 0.316, t2_b: 1061, t3: 0.369, label: '3 CV et moins' },
+ 4: { t1: 0.606, t2_a: 0.340, t2_b: 1330, t3: 0.408, label: '4 CV' },
+ 5: { t1: 0.636, t2_a: 0.356, t2_b: 1391, t3: 0.427, label: '5 CV' },
+ 6: { t1: 0.665, t2_a: 0.374, t2_b: 1457, t3: 0.448, label: '6 CV' },
+ 7: { t1: 0.697, t2_a: 0.394, t2_b: 1512, t3: 0.470, label: '7 CV et plus' },
+};
+
+export function getIndemniteKm(kmTotal: number, chevaux: number | string): number {
+ const cv = Math.min(Math.max(parseInt(String(chevaux)) || 7, 3), 7) as keyof typeof BAREME_KM;
+ const b = BAREME_KM[cv];
+ if (kmTotal <= 0) return 0;
+ if (kmTotal <= 5000) return parseFloat((kmTotal * b.t1).toFixed(2));
+ if (kmTotal <= 20000) return parseFloat((kmTotal * b.t2_a + b.t2_b).toFixed(2));
+ return parseFloat((kmTotal * b.t3).toFixed(2));
+}
+
+export function getTarifUnitaireKm(kmTotal: number, chevaux: number | string): number {
+ if (kmTotal <= 0) return 0;
+ return parseFloat((getIndemniteKm(kmTotal, chevaux) / kmTotal).toFixed(4));
+}
+
+export function newLigne(date: string): LigneNote {
+ return {
+ idTemp: crypto.randomUUID(),
+ date,
+ categorie: '',
+ libelle: '',
+ montant: '',
+ tvaItems: [{ taux: '', montantTTC: '' }],
+ tauxTVA: '',
+ km: '',
+ chevaux: '7',
+ description: '',
+ files: [],
+ participants: [{ nom: '', prenom: '', societe: '' }],
+ nombreParticipants: '',
+ qrLink: null,
+ qrUploaded: false,
+ qrNoteRef: '',
+ };
+}
diff --git a/ndf/src/components/ndf/types.ts b/ndf/src/components/ndf/types.ts
new file mode 100644
index 0000000..da5626c
--- /dev/null
+++ b/ndf/src/components/ndf/types.ts
@@ -0,0 +1,145 @@
+// ── TYPES & INTERFACES NDF ─────────────────────────────────────────────────
+
+export interface Note {
+ id: number;
+ reference?: string;
+ libelle?: string;
+ categorie?: string;
+ date?: string;
+ montant?: number;
+ statut?: string;
+ collaborateur?: string;
+ collaborateurEmail?: string;
+ departement?: string;
+ campus?: string;
+ justificatif?: string;
+ sharepointUrl?: string;
+ fichiers?: string;
+ participants?: string;
+ nombreParticipants?: number;
+ validateurN1Id?: number;
+ validateurN2Id?: number;
+ nomValidateurN1?: string;
+ nomValidateurN2?: string;
+ datePaiement?: string;
+ moisPaiement?: number;
+ anneePaiement?: number;
+ commentaireN1?: string;
+ commentaireN2?: string;
+ motifRefus?: string;
+ montantHT?: number;
+ tauxTVA?: number;
+ km?: number;
+ indemniteKm?: number;
+ lignesJson?: string;
+ montantTTC?: number;
+ sharepointFiles?: { fileName: string; uploadUrl: string }[];
+}
+
+export interface Profile {
+ prenom?: string;
+ nom?: string;
+ email?: string;
+ role?: string;
+ departement?: string;
+ campus?: string;
+ poste?: string;
+ TypeContrat?: string;
+ DateEntree?: string;
+}
+
+export interface Categorie {
+ id: number;
+ Nom: string;
+ Detail?: string;
+ Icone?: string;
+ PlafondParPersonne?: number;
+ DescriptionPlafond?: string;
+}
+
+export interface TauxTVA {
+ taux: number;
+ libelle: string;
+ categorie: string | null;
+}
+
+export interface Notification {
+ id: number;
+ Type: string;
+ Titre: string;
+ Message: string;
+ NoteDeFraisId?: number;
+ Lu: boolean;
+ DateCreation: string;
+}
+
+export interface Participant {
+ nom: string;
+ prenom: string;
+ societe?: string;
+}
+
+export interface Exception {
+ id: number;
+ reference?: string;
+ montant?: number;
+ libelle?: string;
+ collaborateur?: string;
+ email?: string;
+ Motif?: string;
+ Statut?: string;
+ DateDemande?: string;
+}
+
+export interface PaiementConfig {
+ JourPaiement: number;
+}
+
+export interface HistoriqueValidation {
+ id: number;
+ reference: string;
+ libelle: string;
+ montant: number;
+ categorie: string;
+ collaborateur: string;
+ departement?: string;
+ campus?: string;
+ Niveau: string;
+ Action: string;
+ Commentaire?: string;
+ MotifRefus?: string;
+ NouveauStatut: string;
+ DateAction: string;
+}
+
+export interface LigneNote {
+ idTemp: string;
+ date: string;
+ categorie: string;
+ libelle: string;
+ montant: string;
+ /** TVA multiple : tableau de { taux, montantTTC } */
+ tvaItems: { taux: string; montantTTC: string }[];
+ /** Rétrocompatibilité anciens brouillons */
+ tauxTVA?: string;
+ km: string;
+ /** Puissance fiscale 3-7 CV */
+ chevaux: string;
+ description: string;
+ files: File[];
+ participants: Participant[];
+ nombreParticipants: string;
+ qrLink: string | null;
+ qrUploaded: boolean;
+ qrNoteRef: string;
+}
+
+export type DocStatut = 'en_attente' | 'valide' | 'refuse' | 'absent';
+
+export type DocInfo = {
+ fileName: string;
+ sharepointUrl: string;
+ updatedAt: string;
+ statut: DocStatut;
+ commentaire?: string | null;
+} | null;
diff --git a/ndf/src/components/ndf/ui/styles.ts b/ndf/src/components/ndf/ui/styles.ts
new file mode 100644
index 0000000..b640d16
--- /dev/null
+++ b/ndf/src/components/ndf/ui/styles.ts
@@ -0,0 +1,59 @@
+import React from 'react';
+
+export const inputStyle: React.CSSProperties = {
+ width: '100%', padding: '10px 14px',
+ border: '1.5px solid var(--border-input)', borderRadius: 8,
+ background: 'var(--bg-input)', fontFamily: '"Inter","Segoe UI",sans-serif',
+ fontSize: 14, color: 'var(--text-primary)', outline: 'none',
+ boxSizing: 'border-box', transition: 'border-color 0.2s',
+};
+
+export const inputSm: React.CSSProperties = {
+ ...inputStyle,
+ padding: '9px 12px',
+ fontSize: 13,
+ background: 'var(--bg-input-sm)',
+};
+
+export const labelStyle: React.CSSProperties = {
+ display: 'block', fontSize: 12, fontWeight: 700,
+ color: 'var(--text-secondary)', textTransform: 'uppercase',
+ letterSpacing: '0.6px', marginBottom: 6,
+};
+
+export const labelSm: React.CSSProperties = {
+ ...labelStyle,
+ fontSize: 10,
+ color: 'var(--text-muted)',
+ marginBottom: 4,
+};
+
+export const cardStyle: React.CSSProperties = {
+ background: 'var(--bg-card)', borderRadius: 16,
+ border: '1px solid var(--border-card)',
+ boxShadow: 'var(--shadow-card)',
+ overflow: 'hidden',
+};
+
+export const btnPrimary: React.CSSProperties = {
+ display: 'flex', alignItems: 'center', gap: 8,
+ padding: '11px 22px',
+ background: 'linear-gradient(135deg,#6366f1,#4f46e5)',
+ color: '#fff', border: 'none', borderRadius: 10,
+ cursor: 'pointer', fontFamily: '"Inter","Segoe UI",sans-serif',
+ fontSize: 14, fontWeight: 600,
+ boxShadow: '0 4px 14px rgba(99,102,241,.4)',
+ whiteSpace: 'nowrap',
+};
+
+export const btnSuccess: React.CSSProperties = {
+ padding: '7px 16px', background: '#dcfce7', color: '#15803d',
+ border: '1px solid #bbf7d0', borderRadius: 7, cursor: 'pointer',
+ fontFamily: 'inherit', fontSize: 13, fontWeight: 600,
+};
+
+export const btnDanger: React.CSSProperties = {
+ padding: '7px 16px', background: '#fee2e2', color: '#dc2626',
+ border: '1px solid #fecaca', borderRadius: 7, cursor: 'pointer',
+ fontFamily: 'inherit', fontSize: 13, fontWeight: 600,
+};
diff --git a/ndf/src/context/AuthContext.tsx b/ndf/src/context/AuthContext.tsx
new file mode 100644
index 0000000..847dc7a
--- /dev/null
+++ b/ndf/src/context/AuthContext.tsx
@@ -0,0 +1,233 @@
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+// ── TYPES ──────────────────────────────────────────────
+interface User {
+ id: number;
+ name: string;
+ email: string;
+ role: string; // chaîne brute ex: "Collaboratrice,Finance"
+ roles: string[]; // tableau ex: ["Collaboratrice", "Finance"]
+}
+
+interface AuthContextType {
+ user: User | null;
+ activeRole: string | null;
+ allRoles: string[];
+ isMultiRole: boolean;
+ needsRoleSelection: boolean;
+
+ handleCallback: (token: string) => void;
+ logout: () => void;
+ selectRole: (role: string) => void;
+ switchRole: (role: string) => void;
+
+ hasRole: (...roles: string[]) => boolean;
+ isCollaborateur: boolean;
+ isValidateur: boolean;
+ isFinance: boolean;
+ isSuperUser: boolean;
+ isVerificateurFinance: boolean;
+ isValidateurFinance: boolean;
+}
+
+const AuthContext = createContext(undefined);
+
+const API = 'myndf.ensup-adm.net';
+
+const VALID_ROLES = [
+ 'Collaborateur', 'Collaboratrice',
+ 'Validateur', 'Validatrice',
+ 'Finance', 'VerificateurFinance', 'ValidateurFinance',
+ 'superUtilisateur'
+];
+
+function parseRoles(input: string | string[]): string[] {
+ // ✅ Gère les deux cas : tableau JWT ou chaîne BDD
+ if (Array.isArray(input)) {
+ return input.filter(r => VALID_ROLES.includes(r));
+ }
+ if (!input) return [];
+ return input
+ .split(',')
+ .map(r => r.trim())
+ .filter(r => VALID_ROLES.includes(r));
+}
+
+// ── PROVIDER ───────────────────────────────────────────
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+
+ const [user, setUser] = useState(() => {
+ const saved = localStorage.getItem('user');
+ if (!saved) return null;
+ const u = JSON.parse(saved);
+ if (!u.roles || !u.roles.length) u.roles = parseRoles(u.role || '');
+ return u;
+ });
+
+ const [activeRole, setActiveRole] = useState(() => {
+ return localStorage.getItem('activeRole');
+ });
+
+ const [needsRoleSelection, setNeedsRoleSelection] = useState(() => {
+ const saved = localStorage.getItem('user');
+ const savedRole = localStorage.getItem('activeRole');
+ if (!saved) return false;
+ const u = JSON.parse(saved);
+ const roles = parseRoles(u.roles || u.role || '');
+ return roles.length > 1 && !savedRole;
+ });
+
+ // ── Revalidation du profil au démarrage ───────────
+ useEffect(() => {
+ const token = localStorage.getItem('token');
+ if (!token) return;
+
+ try {
+ const payload = JSON.parse(atob(token.split('.')[1]));
+ if (payload.exp * 1000 < Date.now()) {
+ _clearSession();
+ return;
+ }
+ } catch {
+ _clearSession();
+ return;
+ }
+
+ fetch(`${API}/api/profile`, {
+ headers: { Authorization: `Bearer ${token}` }
+ })
+ .then(r => r.ok ? r.json() : null)
+ .then(profile => {
+ if (!profile) return;
+
+ // ✅ On lit profile.roles (tableau depuis UtilisateurRoles)
+ // avec fallback sur profile.role (ancienne colonne)
+ const roles = parseRoles(profile.roles || profile.role || '');
+ const rawRole = roles.join(',');
+
+ const refreshed: User = {
+ id: profile.id,
+ name: `${profile.prenom} ${profile.nom}`.trim(),
+ email: profile.email,
+ role: rawRole,
+ roles,
+ };
+ setUser(refreshed);
+ localStorage.setItem('user', JSON.stringify(refreshed));
+
+ const savedRole = localStorage.getItem('activeRole');
+ if (savedRole && !roles.includes(savedRole)) {
+ localStorage.removeItem('activeRole');
+ setActiveRole(null);
+ setNeedsRoleSelection(roles.length > 1);
+ }
+ })
+ .catch(() => { });
+ }, []);
+
+ // ── handleCallback ────────────────────────────────
+ const handleCallback = (token: string) => {
+ localStorage.setItem('token', token);
+
+ const payload = JSON.parse(atob(token.split('.')[1]));
+
+ // ✅ Le JWT contient `roles` (tableau), pas `role` (chaîne)
+ const roles = parseRoles(payload.roles || payload.role || '');
+ const rawRole = roles.join(',');
+
+ const newUser: User = {
+ id: payload.id,
+ name: `${payload.prenom} ${payload.nom}`.trim(),
+ email: payload.email,
+ role: rawRole,
+ roles,
+ };
+
+ setUser(newUser);
+ localStorage.setItem('user', JSON.stringify(newUser));
+
+ if (roles.length > 1) {
+ localStorage.removeItem('activeRole');
+ setActiveRole(null);
+ setNeedsRoleSelection(true);
+ } else {
+ const single = roles[0] ?? 'Collaborateur';
+ setActiveRole(single);
+ localStorage.setItem('activeRole', single);
+ setNeedsRoleSelection(false);
+ }
+ };
+
+ // ── selectRole ────────────────────────────────────
+ const selectRole = (role: string) => {
+ setActiveRole(role);
+ localStorage.setItem('activeRole', role);
+ setNeedsRoleSelection(false);
+ setUser(prev => prev ? { ...prev, role } : prev);
+ };
+
+ // ── switchRole ────────────────────────────────────
+ const switchRole = (role: string) => {
+ selectRole(role);
+ };
+
+ // ── logout ────────────────────────────────────────
+ const logout = () => {
+ _clearSession();
+ window.location.href = '/login';
+ };
+
+ const _clearSession = () => {
+ localStorage.removeItem('token');
+ localStorage.removeItem('user');
+ localStorage.removeItem('activeRole');
+ setUser(null);
+ setActiveRole(null);
+ setNeedsRoleSelection(false);
+ };
+
+ // ── Dérivés ───────────────────────────────────────
+ const allRoles = user?.roles ?? [];
+ const isMultiRole = allRoles.length > 1;
+
+ const hasRole = (...roles: string[]): boolean =>
+ !!activeRole && roles.includes(activeRole);
+
+ const isCollaborateur = hasRole('Collaborateur', 'Collaboratrice');
+ const isValidateur = hasRole('Validateur', 'Validatrice');
+ const isFinance = hasRole('Finance');
+ const isSuperUser = hasRole('superUtilisateur');
+ const isVerificateurFinance = hasRole('VerificateurFinance');
+ const isValidateurFinance = hasRole('ValidateurFinance');
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useAuth = () => {
+ const context = useContext(AuthContext);
+ if (context === undefined) {
+ throw new Error('useAuth must be used within an AuthProvider');
+ }
+ return context;
+};
\ No newline at end of file
diff --git a/ndf/src/context/ThemeContext.tsx b/ndf/src/context/ThemeContext.tsx
new file mode 100644
index 0000000..33b5e2a
--- /dev/null
+++ b/ndf/src/context/ThemeContext.tsx
@@ -0,0 +1,162 @@
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { Sun, Moon } from 'lucide-react';
+
+// ── TYPES ──────────────────────────────────────────────
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+ theme: Theme;
+ toggleTheme: () => void;
+ isDark: boolean;
+}
+
+const ThemeContext = createContext(undefined);
+
+// ── TOKENS CSS PAR THÈME ──────────────────────────────
+const THEMES = {
+ light: {
+ // Backgrounds
+ '--bg-app': '#f1f5f9',
+ '--bg-main': '#ffffff',
+ '--bg-card': '#ffffff',
+ '--bg-input': '#f8fafc',
+ '--bg-input-sm': '#ffffff',
+ '--bg-hover': '#f8fafc',
+ '--bg-thead': '#f8fafc',
+ '--bg-row-hover': '#f8fafc',
+ '--bg-notif-unread': '#f0f9ff',
+ '--bg-sidebar': 'linear-gradient(160deg,#6366f1 0%,#4f46e5 100%)',
+
+ // Borders
+ '--border-main': '#e2e8f0',
+ '--border-input': '#e2e8f0',
+ '--border-card': '#e2e8f0',
+ '--border-divider': '#f1f5f9',
+
+ // Text
+ '--text-primary': '#0f172a',
+ '--text-secondary': '#64748b',
+ '--text-muted': '#94a3b8',
+ '--text-heading': '#0f172a',
+
+ // Shadows
+ '--shadow-card': '0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04)',
+ '--shadow-notif': '0 8px 32px rgba(0,0,0,.12)',
+
+ // Stat cards
+ '--stat-bg': '#ffffff',
+
+ // Header
+ '--header-bg': 'transparent',
+ '--header-btn-bg': '#ffffff',
+ '--header-btn-border': '#e2e8f0',
+ },
+ dark: {
+ // Backgrounds
+ '--bg-app': '#0f172a',
+ '--bg-main': '#1e293b',
+ '--bg-card': '#1e293b',
+ '--bg-input': '#0f172a',
+ '--bg-input-sm': '#0f172a',
+ '--bg-hover': '#334155',
+ '--bg-thead': '#0f172a',
+ '--bg-row-hover': '#0f172a',
+ '--bg-notif-unread': '#1e3a5f',
+ '--bg-sidebar': 'linear-gradient(160deg,#312e81 0%,#1e1b4b 100%)',
+
+ // Borders
+ '--border-main': '#334155',
+ '--border-input': '#334155',
+ '--border-card': '#334155',
+ '--border-divider': '#1e293b',
+
+ // Text
+ '--text-primary': '#f1f5f9',
+ '--text-secondary': '#94a3b8',
+ '--text-muted': '#64748b',
+ '--text-heading': '#f8fafc',
+
+ // Shadows
+ '--shadow-card': '0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2)',
+ '--shadow-notif': '0 8px 32px rgba(0,0,0,.5)',
+
+ // Stat cards
+ '--stat-bg': '#1e293b',
+
+ // Header
+ '--header-bg': 'transparent',
+ '--header-btn-bg': '#1e293b',
+ '--header-btn-border': '#334155',
+ },
+};
+
+// ── INJECTION CSS VARIABLES ───────────────────────────
+function applyTheme(theme: Theme) {
+ const root = document.documentElement;
+ const tokens = THEMES[theme];
+ Object.entries(tokens).forEach(([key, val]) => {
+ root.style.setProperty(key, val);
+ });
+ root.setAttribute('data-theme', theme);
+}
+
+// ── PROVIDER ──────────────────────────────────────────
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+ const [theme, setTheme] = useState(() => {
+ const saved = localStorage.getItem('theme') as Theme | null;
+ if (saved === 'light' || saved === 'dark') return saved;
+ // Détecte la préférence système
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+ });
+
+ // Applique les tokens au montage et à chaque changement
+ useEffect(() => {
+ applyTheme(theme);
+ localStorage.setItem('theme', theme);
+ }, [theme]);
+
+ const toggleTheme = () => setTheme(t => t === 'light' ? 'dark' : 'light');
+ const isDark = theme === 'dark';
+
+ return (
+
+ {children}
+
+ );
+};
+
+// ── HOOK ──────────────────────────────────────────────
+export const useTheme = () => {
+ const ctx = useContext(ThemeContext);
+ if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
+ return ctx;
+};
+
+// ── BOUTON TOGGLE (réutilisable partout) ──────────────
+export const ThemeToggleButton = ({ style }: { style?: React.CSSProperties }) => {
+ const { toggleTheme, isDark } = useTheme();
+
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/ndf/src/index.css b/ndf/src/index.css
new file mode 100644
index 0000000..6d8de26
--- /dev/null
+++ b/ndf/src/index.css
@@ -0,0 +1,21 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ background: linear-gradient(135deg, #f5f5dc 0%, #e8d7c3 100%);
+ min-height: 100vh;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+#root {
+ min-height: 100vh;
+}
diff --git a/ndf/src/main.tsx b/ndf/src/main.tsx
new file mode 100644
index 0000000..3b08b76
--- /dev/null
+++ b/ndf/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+ ,
+)
diff --git a/ndf/src/pages/AuthCallback.tsx b/ndf/src/pages/AuthCallback.tsx
new file mode 100644
index 0000000..2defeb7
--- /dev/null
+++ b/ndf/src/pages/AuthCallback.tsx
@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const AuthCallback = (): JSX.Element => {
+ const [searchParams] = useSearchParams();
+ const { handleCallback } = useAuth();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ const token = searchParams.get('token');
+ const error = searchParams.get('error');
+
+ if (error) {
+ navigate(`/login?error=${error}`);
+ return;
+ }
+
+ if (token) {
+ handleCallback(token);
+ navigate('/dashboard', { replace: true });
+ } else {
+ navigate('/login?error=no_token');
+ }
+ }, []);
+
+ return (
+ = {
+ 3: { t1: 0.529, t2_a: 0.316, t2_b: 1061, t3: 0.369, label: '3 CV et moins' },
+ 4: { t1: 0.606, t2_a: 0.340, t2_b: 1330, t3: 0.408, label: '4 CV' },
+ 5: { t1: 0.636, t2_a: 0.356, t2_b: 1391, t3: 0.427, label: '5 CV' },
+ 6: { t1: 0.665, t2_a: 0.374, t2_b: 1457, t3: 0.448, label: '6 CV' },
+ 7: { t1: 0.697, t2_a: 0.394, t2_b: 1512, t3: 0.470, label: '7 CV et plus' },
+};
+
+const BAREME_KM_DASHBOARD = [
+ { cv: 3, label: "3 CV et moins", t1: 0.529 },
+ { cv: 4, label: "4 CV", t1: 0.606 },
+ { cv: 5, label: "5 CV", t1: 0.636 },
+ { cv: 6, label: "6 CV", t1: 0.665 },
+ { cv: 7, label: "7 CV et plus", t1: 0.697 },
+];
+
+
+function getIndemniteKm(kmTotal: number, chevaux: number | string): number {
+ const cv = Math.min(Math.max(parseInt(String(chevaux)) || 7, 3), 7) as keyof typeof BAREME_KM;
+ const b = BAREME_KM[cv];
+ if (kmTotal <= 0) return 0;
+ if (kmTotal <= 5000) return parseFloat((kmTotal * b.t1).toFixed(2));
+ if (kmTotal <= 20000) return parseFloat((kmTotal * b.t2_a + b.t2_b).toFixed(2));
+ return parseFloat((kmTotal * b.t3).toFixed(2));
+}
+// Ajoute cette fonction en haut du Dashboard
+const normalizeCampus = (campus?: string): string => {
+ if (!campus) return campus || '';
+ const c = campus.toUpperCase();
+ if (c.includes('SQY')) return 'SQY';
+ if (c.includes('CGY') || c.includes('CERGY')) return 'CGY';
+ if (c.includes('MRS') || c.includes('MARSEILLE')) return 'MRS';
+ if (c.includes('NTE') || c.includes('NANTES')) return 'NTE';
+ return campus;
+};
+
+// ── STYLES ─────────────────────────────────────────────
+const inputStyle: React.CSSProperties = {
+ width: '100%', padding: '10px 14px',
+ border: '1.5px solid var(--border-input)', borderRadius: 8,
+ background: 'var(--bg-input)', fontFamily: '"Inter","Segoe UI",sans-serif',
+ fontSize: 14, color: 'var(--text-primary)', outline: 'none',
+ boxSizing: 'border-box', transition: 'border-color 0.2s',
+};
+
+const inputSm: React.CSSProperties = {
+ ...inputStyle,
+ padding: '9px 12px',
+ fontSize: 13,
+ background: 'var(--bg-input-sm)',
+};
+
+const labelStyle: React.CSSProperties = {
+ display: 'block', fontSize: 12, fontWeight: 700,
+ color: 'var(--text-secondary)', textTransform: 'uppercase',
+ letterSpacing: '0.6px', marginBottom: 6,
+};
+
+const labelSm: React.CSSProperties = {
+ ...labelStyle,
+ fontSize: 10,
+ color: 'var(--text-muted)',
+ marginBottom: 4,
+};
+
+const cardStyle: React.CSSProperties = {
+ background: 'var(--bg-card)', borderRadius: 16,
+ border: '1px solid var(--border-card)',
+ boxShadow: 'var(--shadow-card)',
+ overflow: 'hidden',
+};
+
+const btnPrimary: React.CSSProperties = {
+ display: 'flex', alignItems: 'center', gap: 8,
+ padding: '11px 22px',
+ background: 'linear-gradient(135deg,#6366f1,#4f46e5)',
+ color: '#fff', border: 'none', borderRadius: 10,
+ cursor: 'pointer', fontFamily: '"Inter","Segoe UI",sans-serif',
+ fontSize: 14, fontWeight: 600,
+ boxShadow: '0 4px 14px rgba(99,102,241,.4)',
+ whiteSpace: 'nowrap',
+};
+
+const btnSuccess: React.CSSProperties = {
+ padding: '7px 16px', background: '#dcfce7', color: '#15803d',
+ border: '1px solid #bbf7d0', borderRadius: 7, cursor: 'pointer',
+ fontFamily: 'inherit', fontSize: 13, fontWeight: 600,
+};
+
+const btnDanger: React.CSSProperties = {
+ padding: '7px 16px', background: '#fee2e2', color: '#dc2626',
+ border: '1px solid #fecaca', borderRadius: 7, cursor: 'pointer',
+ fontFamily: 'inherit', fontSize: 13, fontWeight: 600,
+};
+
+const btnPurple: React.CSSProperties = {
+ padding: '8px 18px',
+ background: 'linear-gradient(135deg,#7c3aed,#6d28d9)',
+ color: '#fff', border: 'none', borderRadius: 8,
+ cursor: 'pointer', fontFamily: 'inherit', fontSize: 13, fontWeight: 700,
+ boxShadow: '0 4px 12px rgba(124,58,237,.3)',
+};
+
+// ── TAG STATUT ─────────────────────────────────────────
+const tagStatut = (statut: string) => {
+ const map: Record = {
+ 'enattente': { bg: '#fef9c3', color: '#a16207', label: 'En attente' },
+ 'en_attente': { bg: '#fef9c3', color: '#a16207', label: 'En attente' },
+ 'en attente': { bg: '#fef9c3', color: '#a16207', label: 'En attente' },
+ 'validn1': { bg: '#dbeafe', color: '#1d4ed8', label: 'Valide N1' },
+ 'validen1': { bg: '#dbeafe', color: '#1d4ed8', label: 'Valide N1' },
+ 'valide_n1': { bg: '#dbeafe', color: '#1d4ed8', label: 'Valide N1' },
+ 'validn2': { bg: '#ede9fe', color: '#7c3aed', label: 'Valide N2' },
+ 'validen2': { bg: '#ede9fe', color: '#7c3aed', label: 'Valide N2' },
+ 'valide_n2': { bg: '#ede9fe', color: '#7c3aed', label: 'Valide N2' },
+ 'approuve': { bg: '#dcfce7', color: '#15803d', label: 'Approuve' },
+ 'verifie': { bg: '#ede9fe', color: '#7c3aed', label: 'Vérifié' },
+ 'paiementenattente': { bg: '#fef9c3', color: '#b45309', label: 'Paiement en attente' },
+ 'paiement_en_attente': { bg: '#fef9c3', color: '#b45309', label: 'Paiement en attente' },
+ 'payee': { bg: '#f0fdf4', color: '#16a34a', label: 'Payee' },
+ 'refuse': { bg: '#fee2e2', color: '#dc2626', label: 'Refusee' },
+ 'refus': { bg: '#fee2e2', color: '#dc2626', label: 'Refusee' },
+ 'brouillon': { bg: '#f1f5f9', color: 'var(--text-secondary)', label: 'Brouillon' },
+ 'valide': { bg: '#dcfce7', color: '#15803d', label: 'Valide' },
+ 'non_conforme_verif': { bg: '#fff7ed', color: '#c2410c', label: 'Justificatif non conforme' },
+ };
+ const key = normalizeStatut(statut);
+ const s = map[key] ?? map['brouillon'];
+ return (
+
+ {s.label}
+
+ );
+};
+
+// ── STATUT STEPPER ─────────────────────────────────────
+const StatutStepper = ({ statut }: { statut: string }) => {
+ const s = normalizeStatut(statut);
+
+ const steps = [
+ { key: 'enattente', label: 'Soumise', icon: '📋' },
+ { key: 'validen1', label: 'Validée N1', icon: '✅' },
+ { key: 'validen2', label: 'Validée N2', icon: '✅' },
+ { key: 'approuve', label: 'Approuvée', icon: '🎉' },
+ { key: 'verifie', label: 'Vérifiée', icon: '🔍' },
+ { key: 'paiementenattente', label: 'En att. paiement', icon: '⏳' },
+ { key: 'payee', label: 'Payée', icon: '💶' },
+ ];
+
+ const getActiveIndex = () => {
+ if (s === 'refuse' || s === 'refus') return -1;
+ if (s === 'payee') return 6;
+ if (s === 'paiementenattente' || s === 'paiement_en_attente') return 5;
+ if (s === 'verifie') return 4;
+ if (s === 'approuve') return 3;
+ if (['validen2', 'valide_n2', 'validn2'].includes(s)) return 2;
+ if (['validen1', 'valide_n1', 'validn1'].includes(s)) return 1;
+ if (s === 'non_conforme_verif') return -1;
+ return 0;
+ };
+
+ const active = getActiveIndex();
+
+ if (active === -1) {
+ const isNonConforme = s === 'non_conforme_verif';
+ return (
+
setOpen(false)}
+ />
+
+ );
+};
+
+// Export default = version sidebar (la plus courante)
+export default RoleSwitcherSidebar;
\ No newline at end of file
diff --git a/ndf/src/components/ndf/FileUploadZone.tsx b/ndf/src/components/ndf/FileUploadZone.tsx
new file mode 100644
index 0000000..6e61711
--- /dev/null
+++ b/ndf/src/components/ndf/FileUploadZone.tsx
@@ -0,0 +1,101 @@
+import React, { useRef, useState } from 'react';
+import { Upload, FileText, Receipt } from 'lucide-react';
+
+interface FileUploadZoneProps {
+ files: File[];
+ setFiles: (f: File[]) => void;
+}
+
+const fileSize = (b: number) =>
+ b < 1048576 ? `${(b / 1024).toFixed(1)} Ko` : `${(b / 1048576).toFixed(1)} Mo`;
+
+export const FileUploadZone = ({ files, setFiles }: FileUploadZoneProps) => {
+ const inputRef = useRef
+
+
+ )}
+
+ Changer de mode
+
+ {others.map(role => {
+ const s = getStyle(role);
+ return (
+
+ );
+ })}
+
+
+ );
+};
diff --git a/ndf/src/components/ndf/JustificatifPopup.tsx b/ndf/src/components/ndf/JustificatifPopup.tsx
new file mode 100644
index 0000000..4a9ce71
--- /dev/null
+++ b/ndf/src/components/ndf/JustificatifPopup.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+
+interface JustificatifPopupProps {
+ file: File | null;
+ onClose: () => void;
+}
+
+export const JustificatifPopup = ({ file, onClose }: JustificatifPopupProps) => {
+ if (!file) return null;
+ const url = URL.createObjectURL(file);
+ const isPDF = file.type === 'application/pdf';
+ const isImage = file.type.startsWith('image/');
+
+ return (
+ { e.preventDefault(); setDragOver(true); }}
+ onDragLeave={() => setDragOver(false)}
+ onDrop={e => { e.preventDefault(); setDragOver(false); add(e.dataTransfer.files); }}
+ onClick={() => inputRef.current?.click()}
+ style={{
+ border: `2px dashed ${dragOver ? '#6366f1' : '#cbd5e1'}`,
+ borderRadius: 10, padding: '28px 20px', textAlign: 'center',
+ cursor: 'pointer',
+ background: dragOver ? 'rgba(99,102,241,.05)' : '#f8fafc',
+ transition: 'all 0.2s',
+ }}>
+
+
+
+ add(e.target.files)} style={{ display: 'none' }} />
+
+ {files.length > 0 && (
+
+
+
+ Glissez vos fichiers ici
+
+
+ ou cliquez pour parcourir
+
+
+ PDF, JPG, PNG — max 10 Mo
+
+ add(e.target.files)} style={{ display: 'none' }} />
+
+ {files.map((f, i) => (
+
+ )}
+
+
+ {f.type === 'application/pdf'
+ ? })
+ )}
+
+
+ ))}
+
+
+ {f.type.startsWith('image/') && (
+ {f.name}
+ {fileSize(f.size)}
+
+
+ );
+};
diff --git a/ndf/src/components/ndf/LigneRow.tsx b/ndf/src/components/ndf/LigneRow.tsx
new file mode 100644
index 0000000..af86229
--- /dev/null
+++ b/ndf/src/components/ndf/LigneRow.tsx
@@ -0,0 +1,769 @@
+import { useState, useRef } from "react";
+
+const BAREME_KM = [
+ { cv: 3, label: "3 CV et moins", t1: 0.529, t2_a: 0.316, t2_b: 1061, t3: 0.369 },
+ { cv: 4, label: "4 CV", t1: 0.606, t2_a: 0.340, t2_b: 1330, t3: 0.408 },
+ { cv: 5, label: "5 CV", t1: 0.636, t2_a: 0.356, t2_b: 1391, t3: 0.427 },
+ { cv: 6, label: "6 CV", t1: 0.665, t2_a: 0.374, t2_b: 1457, t3: 0.448 },
+ { cv: 7, label: "7 CV et plus", t1: 0.697, t2_a: 0.394, t2_b: 1512, t3: 0.470 },
+];
+
+const CATEGORIES_DEFAULT = ["Deplacement kilometrique", "Repas", "Hebergement", "Transport", "Autre"];
+
+const TAUX_TVA = [
+ { taux: 0, libelle: "Exonéré (0%)" },
+ { taux: 10, libelle: "Taux réduit (10%)" },
+ { taux: 15, libelle: "Taux intermédiaire (15%)" },
+ { taux: 20, libelle: "Taux normal (20%)" },
+];
+
+function fmt(val) {
+ return new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" }).format(val);
+}
+function getHT(ttc, taux) { return ttc / (1 + taux / 100); }
+function getTVA(ttc, taux) { return ttc - getHT(ttc, taux); }
+function calcIndemnite(km, cv) {
+ const b = BAREME_KM.find(r => r.cv === cv) ?? BAREME_KM[4];
+ if (km <= 0) return 0;
+ if (km <= 5000) return parseFloat((km * b.t1).toFixed(2));
+ if (km <= 20000) return parseFloat((km * b.t2_a + b.t2_b).toFixed(2));
+ return parseFloat((km * b.t3).toFixed(2));
+}
+function getTranche(km) {
+ if (km <= 0) return 0;
+ if (km <= 5000) return 1;
+ if (km <= 20000) return 2;
+ return 3;
+}
+
+function newDepense() {
+ return {
+ id: Math.random(),
+ categorie: "Repas",
+ date: "",
+ libelle: "",
+ description: "",
+ km: "",
+ // FIX 1 : chevaux stocké en number pour cohérence avec BAREME_KM
+ chevaux: 7,
+ // FIX 2 : taux initial aligné avec les options TAUX_TVA (on utilise "" pour forcer un choix explicite)
+ tvaItems: [{ taux: "", montantTTC: "" }],
+ nombreParticipants: "",
+ participants: [{ nom: "", prenom: "", societe: "" }],
+ files: [],
+ };
+}
+
+const css = `
+ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
+
+ * { box-sizing: border-box; margin: 0; padding: 0; }
+
+ :root {
+ --bg: #f4f4f5;
+ --bg-card: #ffffff;
+ --bg-input: #f9f9fa;
+ --bg-sidebar: #ffffff;
+ --border: rgba(0,0,0,0.07);
+ --border-light: rgba(0,0,0,0.11);
+ --text-primary: #111111;
+ --text-secondary: #6b7280;
+ --accent-orange: #c8933a;
+ --accent-purple: #7c3aed;
+ --accent-green: #16a34a;
+ --accent-indigo: #4f46e5;
+ --accent-yellow: #d97706;
+ font-family: 'DM Sans', sans-serif;
+ }
+
+ body { background: var(--bg); color: var(--text-primary); min-height: 100vh; }
+
+ .app { display: flex; min-height: 100vh; }
+
+ /* ── Main ── */
+ .main { flex: 1; padding: 28px; max-width: 740px; }
+
+ /* ── Header ── */
+ .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
+ .header-left { display: flex; align-items: center; gap: 14px; }
+ .header-title { font-size: 20px; font-weight: 800; color: var(--text-primary); }
+ .badge-brouillon {
+ background: rgba(200,147,58,0.12);
+ color: var(--accent-orange);
+ border: 1px solid rgba(200,147,58,0.35);
+ border-radius: 20px;
+ padding: 4px 14px;
+ font-size: 12px;
+ font-weight: 700;
+ }
+ .btn-save {
+ background: #111111;
+ color: #ffffff;
+ border: none;
+ border-radius: 10px;
+ padding: 10px 24px;
+ font-size: 14px;
+ font-weight: 700;
+ cursor: pointer;
+ font-family: inherit;
+ transition: opacity 0.15s;
+ }
+ .btn-save:hover { opacity: 0.85; }
+
+ /* ── Meta fields ── */
+ .meta-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 100px;
+ gap: 12px;
+ align-items: start;
+ margin-bottom: 24px;
+ background: var(--bg-card);
+ border: 1px solid var(--border-light);
+ border-radius: 14px;
+ padding: 18px;
+ }
+ .meta-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.3; margin-bottom: 6px; }
+ .meta-label span { color: #ef4444; }
+
+ .input-field {
+ background: var(--bg-input);
+ border: 1px solid var(--border-light);
+ border-radius: 8px;
+ padding: 10px 14px;
+ font-size: 13px;
+ font-family: inherit;
+ color: var(--text-primary);
+ width: 100%;
+ outline: none;
+ transition: border-color 0.15s;
+ }
+ .input-field:focus { border-color: rgba(0,0,0,0.25); }
+ .input-field::placeholder { color: var(--text-secondary); }
+
+ .logo-box {
+ width: 52px; height: 52px;
+ background: var(--bg-input);
+ border: 1px solid var(--border-light);
+ border-radius: 10px;
+ display: flex; align-items: center; justify-content: center;
+ cursor: pointer;
+ font-size: 22px;
+ transition: border-color 0.15s;
+ }
+ .logo-box:hover { border-color: rgba(0,0,0,0.25); }
+
+ /* ── Section Dépenses ── */
+ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
+ .section-title { font-size: 11px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; }
+ .btn-add-depense {
+ background: #111111;
+ color: #ffffff;
+ border: none;
+ border-radius: 10px;
+ padding: 10px 20px;
+ font-size: 13px;
+ font-weight: 700;
+ cursor: pointer;
+ font-family: inherit;
+ transition: opacity 0.15s;
+ }
+ .btn-add-depense:hover { opacity: 0.85; }
+
+ /* ── Dépense card ── */
+ .depense-card {
+ border: 1px solid var(--border-light);
+ border-radius: 14px;
+ overflow: hidden;
+ background: var(--bg-card);
+ margin-bottom: 16px;
+ box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+ }
+
+ .card-header {
+ display: flex; align-items: center; justify-content: space-between;
+ padding: 14px 18px;
+ border-bottom: 1px solid var(--border);
+ }
+ .card-header-left { display: flex; align-items: center; gap: 10px; }
+ .dot-orange { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-orange); flex-shrink: 0; }
+ .card-title { font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
+ .card-subtitle { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
+ .card-header-right { display: flex; align-items: center; gap: 10px; }
+ .status-chip { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
+
+ .card-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
+
+ .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+ .form-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 6px; }
+
+ select.input-field { appearance: none; cursor: pointer; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
+
+ /* ── TVA block ── */
+ .tva-block {
+ background: var(--bg-input);
+ border: 1px solid var(--border);
+ border-radius: 10px;
+ padding: 14px;
+ }
+ .tva-block-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+ .tva-block-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
+ .btn-ajouter-taux {
+ display: flex; align-items: center; gap: 6px;
+ padding: 6px 14px;
+ background: rgba(255,255,255,0.07);
+ border: 1px solid var(--border-light);
+ border-radius: 7px;
+ cursor: pointer;
+ font-size: 12px;
+ color: var(--text-primary);
+ font-weight: 600;
+ font-family: inherit;
+ transition: background 0.15s;
+ }
+ .btn-ajouter-taux:hover { background: rgba(0,0,0,0.05); }
+
+ .tva-cols { display: grid; grid-template-columns: 1fr 1fr 80px 80px 32px; gap: 8px; margin-bottom: 6px; align-items: center; }
+ .tva-col-label { font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
+
+ .tva-val { display: flex; align-items: center; justify-content: center; height: 38px; font-size: 13px; font-weight: 700; }
+ .tva-val.green { color: #7c3aed; }
+ .tva-val.indigo { color: #4f46e5; }
+ .tva-val.muted { color: var(--text-secondary); }
+
+ .btn-remove {
+ width: 28px; height: 28px; border-radius: 6px; border: none;
+ background: rgba(220,38,38,0.1);
+ color: #dc2626;
+ cursor: pointer;
+ display: flex; align-items: center; justify-content: center;
+ font-size: 13px;
+ transition: background 0.15s;
+ font-family: inherit;
+ }
+ .btn-remove:hover { background: rgba(220,38,38,0.2); }
+ .btn-remove:disabled { background: transparent; color: rgba(0,0,0,0.15); cursor: default; }
+
+ .totals-row {
+ margin-top: 12px; padding: 10px 14px;
+ background: rgba(0,0,0,0.02);
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
+ }
+ .total-col { text-align: center; }
+ .total-col + .total-col { border-left: 1px solid var(--border); }
+ .total-col-label { font-size: 9px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 3px; }
+ .total-col-val { font-size: 14px; font-weight: 900; }
+
+ /* ── Repas block ── */
+ .repas-block {
+ background: rgba(124,58,237,0.05);
+ border: 1.5px solid rgba(124,58,237,0.2);
+ border-radius: 10px; padding: 14px;
+ }
+ .repas-title { font-size: 12px; font-weight: 700; color: #7c3aed; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
+
+ /* ── KM block ── */
+ .km-block {
+ background: rgba(124,58,237,0.05);
+ border: 1.5px solid rgba(124,58,237,0.2);
+ border-radius: 10px; padding: 16px;
+ }
+ .km-title { font-size: 12px; font-weight: 800; color: #7c3aed; margin-bottom: 14px; }
+ .km-table { width: 100%; border-collapse: collapse; font-size: 12px; overflow: hidden; border-radius: 8px; margin-bottom: 16px; }
+ .km-table thead tr { background: #7c3aed; }
+ .km-table thead th { padding: 8px 12px; color: #fff; font-weight: 700; text-align: left; }
+ .km-table thead th:not(:first-child) { text-align: center; }
+ .km-table tbody tr { cursor: pointer; transition: background 0.1s; }
+ .km-table tbody td { padding: 10px 12px; color: var(--text-secondary); }
+ .km-table tbody td:not(:first-child) { text-align: center; }
+ .km-table tbody tr.selected { background: rgba(124,58,237,0.12); outline: 2px solid #7c3aed; outline-offset: -1px; }
+ .km-table tbody tr.selected td { color: #7c3aed; font-weight: 800; }
+ .km-active-badge { font-size: 9px; color: #7c3aed; font-weight: 700; }
+
+ .indemnite-box {
+ padding: 10px 16px;
+ min-height: 42px;
+ border-radius: 8px;
+ border: 1.5px solid rgba(124,58,237,0.3);
+ display: flex; align-items: center; justify-content: space-between;
+ }
+ .indemnite-box.active { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
+ .indemnite-box.empty { background: rgba(124,58,237,0.05); }
+
+ /* ── Justificatif ── */
+ .drop-zone {
+ border: 1.5px dashed rgba(0,0,0,0.15);
+ border-radius: 8px;
+ padding: 16px;
+ text-align: center;
+ cursor: pointer;
+ font-size: 12px;
+ color: var(--text-secondary);
+ font-weight: 500;
+ transition: all 0.2s;
+ }
+ .drop-zone:hover { border-color: rgba(0,0,0,0.3); }
+ .drop-zone.has-files { border-color: rgba(22,163,74,0.5); color: var(--accent-green); }
+
+ /* ── Btn supprimer ── */
+ .btn-supprimer {
+ width: 100%; padding: 12px;
+ background: rgba(0,0,0,0.02);
+ border: 1px solid rgba(0,0,0,0.08);
+ border-radius: 8px;
+ cursor: pointer;
+ color: var(--text-primary);
+ font-size: 13px; font-weight: 600;
+ font-family: inherit;
+ transition: background 0.15s;
+ }
+ .btn-supprimer:hover { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.3); color: #dc2626; }
+
+ /* ── Sidebar ── */
+ .sidebar {
+ width: 280px;
+ background: var(--bg-sidebar);
+ border-left: 1px solid var(--border);
+ padding: 24px 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ position: sticky;
+ top: 0;
+ height: 100vh;
+ overflow-y: auto;
+ }
+ .sidebar-title { font-size: 11px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
+
+ .recap-item {
+ display: flex; align-items: flex-start; gap: 10px;
+ padding: 10px 12px;
+ border-radius: 8px;
+ background: rgba(0,0,0,0.03);
+ }
+ .recap-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-orange); flex-shrink: 0; margin-top: 3px; }
+ .recap-label { font-size: 13px; font-weight: 700; color: var(--text-primary); }
+ .recap-cat { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
+
+ .sidebar-totals { margin-top: auto; }
+ .sidebar-totals-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-secondary); font-weight: 500; }
+ .sidebar-totals-main { display: flex; justify-content: space-between; padding: 12px 0; font-size: 15px; font-weight: 800; color: var(--text-primary); }
+
+ .btn-soumettre {
+ width: 100%;
+ padding: 13px;
+ background: #111111;
+ color: #ffffff;
+ border: none;
+ border-radius: 10px;
+ font-size: 14px; font-weight: 800;
+ cursor: pointer;
+ font-family: inherit;
+ transition: opacity 0.15s;
+ margin-top: 8px;
+ }
+ .btn-soumettre:hover { opacity: 0.85; }
+ .btn-soumettre-note { font-size: 11px; color: var(--text-secondary); text-align: center; margin-top: 6px; }
+
+ .input-with-suffix { position: relative; }
+ .input-with-suffix .suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--accent-purple); font-weight: 700; pointer-events: none; }
+ .input-with-suffix .suffix-eur { color: var(--text-secondary); }
+`;
+
+function DepenseCard({ depense, total, onChange, onDelete }) {
+ const fileRef = useRef();
+ const isKm = depense.categorie.toLowerCase().includes("kilom");
+ const isRepas = depense.categorie.toLowerCase().includes("repas");
+
+ const kmNum = parseFloat(depense.km) || 0;
+ // FIX 1 : chevaux est maintenant un number, parseInt reste en sécurité
+ const cv = typeof depense.chevaux === "number" ? depense.chevaux : parseInt(depense.chevaux) || 7;
+ const tranche = getTranche(kmNum);
+ const indemnite = calcIndemnite(kmNum, cv);
+
+ const tvaItems = depense.tvaItems?.length ? depense.tvaItems : [{ taux: "", montantTTC: "" }];
+ const totalTTC = isKm ? indemnite : tvaItems.reduce((s, i) => s + (parseFloat(i.montantTTC) || 0), 0);
+ const totalHT = isKm ? indemnite : tvaItems.reduce((s, i) => {
+ const t = parseFloat(i.montantTTC) || 0; const tx = parseFloat(i.taux) || 0;
+ return s + (tx > 0 ? getHT(t, tx) : t);
+ }, 0);
+ const totalTVA = isKm ? 0 : tvaItems.reduce((s, i) => {
+ const t = parseFloat(i.montantTTC) || 0; const tx = parseFloat(i.taux) || 0;
+ return s + (tx > 0 ? getTVA(t, tx) : 0);
+ }, 0);
+
+ const updateTvaItem = (idx, field, val) => {
+ const copy = [...tvaItems];
+ copy[idx] = { ...copy[idx], [field]: val };
+ // FIX 2 : suppression du onChange("montant", ...) — ce champ n'existe pas dans le modèle
+ onChange("tvaItems", copy);
+ };
+
+ const addTvaItem = () => onChange("tvaItems", [...tvaItems, { taux: "", montantTTC: "" }]);
+ const removeTvaItem = (idx) => {
+ if (tvaItems.length <= 1) return;
+ const copy = tvaItems.filter((_, i) => i !== idx);
+ // FIX 2 (suite) : suppression du onChange("montant", ...) orphelin
+ onChange("tvaItems", copy);
+ };
+
+ const updateParticipant = (i, field, val) => {
+ const updated = [...depense.participants];
+ updated[i] = { ...updated[i], [field]: val };
+ onChange("participants", updated);
+ };
+
+ const addFiles = (list) => {
+ if (!list) return;
+ const allowed = ["image/jpeg", "image/jpg", "image/png", "application/pdf"];
+ onChange("files", [...depense.files, ...Array.from(list).filter(f => allowed.includes(f.type))]);
+ };
+
+ return (
+ e.stopPropagation()} style={{
+ background: '#fff', borderRadius: 16,
+ boxShadow: '0 24px 80px rgba(0,0,0,.4)',
+ maxWidth: '90vw', maxHeight: '90vh',
+ width: isPDF ? 800 : 'auto',
+ display: 'flex', flexDirection: 'column', overflow: 'hidden',
+ }}>
+ {/* Header */}
+
+
+
+ {/* Body */}
+
+ {isPDF ? '📄' : '🖼️'}
+
+
+
+
+ {file.name}
+
+ {file.type} — {file.size < 1048576
+ ? `${(file.size / 1024).toFixed(1)} Ko`
+ : `${(file.size / 1048576).toFixed(1)} Mo`}
+
+
+ {isPDF && (
+
+ )}
+ {isImage && (
+ 
+ )}
+
+ {/* Footer */}
+
+ Cliquez en dehors pour fermer
+ ⬇ Télécharger
+
+
+ {/* Header */}
+
+ );
+}
+
+export default function App() {
+ // FIX 3 : titre est maintenant lié à un vrai dans le JSX
+ const [titre, setTitre] = useState("");
+ const [dateDebut, setDateDebut] = useState("");
+ const [dateFin, setDateFin] = useState("");
+ const [commentaire, setCommentaire] = useState("");
+ const [depenses, setDepenses] = useState([newDepense()]);
+
+ const updateDepense = (id, field, val) => {
+ setDepenses(prev => prev.map(d => d.id === id ? { ...d, [field]: val } : d));
+ };
+ const deleteDepense = (id) => setDepenses(prev => prev.filter(d => d.id !== id));
+ const addDepense = () => setDepenses(prev => [...prev, newDepense()]);
+
+ // Totaux sidebar
+ const totalTTC = depenses.reduce((s, d) => {
+ const isKm = d.categorie.toLowerCase().includes("kilom");
+ if (isKm) return s + calcIndemnite(parseFloat(d.km) || 0, typeof d.chevaux === "number" ? d.chevaux : parseInt(d.chevaux) || 7);
+ return s + (d.tvaItems || []).reduce((ss, i) => ss + (parseFloat(i.montantTTC) || 0), 0);
+ }, 0);
+ const totalHT = depenses.reduce((s, d) => {
+ const isKm = d.categorie.toLowerCase().includes("kilom");
+ if (isKm) return s + calcIndemnite(parseFloat(d.km) || 0, typeof d.chevaux === "number" ? d.chevaux : parseInt(d.chevaux) || 7);
+ return s + (d.tvaItems || []).reduce((ss, i) => {
+ const t = parseFloat(i.montantTTC) || 0; const tx = parseFloat(i.taux) || 0;
+ return ss + (tx > 0 ? getHT(t, tx) : t);
+ }, 0);
+ }, 0);
+ const totalTVA = totalTTC - totalHT;
+
+ return (
+ <>
+
+
+
+
+ {/* Body */}
+
+
+
+
+
+ Nouvelle dépense
+ {depense.categorie || "Sans catégorie"}
+
+ À saisir
+
+
+
+ {/* Catégorie + Date */}
+
+
+
+
+ {/* Libellé */}
+
+
+
+
+
+
+ onChange("date", e.target.value)} />
+
+
+
+ onChange("libelle", e.target.value)} placeholder="Ex: Déjeuner client, Train Paris-Lyon..." />
+
+
+ {/* Commentaire */}
+
+
+ onChange("description", e.target.value)} placeholder="Précision, contexte..." />
+
+
+ {/* KM block */}
+ {isKm && (
+
+
+ )}
+
+ {/* TVA block */}
+ {!isKm && (
+ 🚗 Barème kilométrique fiscal
+
+
+
+
+
+ | Puissance fiscale | +≤ 5 000 km | +5 001 → 20 000 km | +> 20 000 km | +
|---|---|---|---|
| {b.label} | +d × {b.t1.toString().replace(".", ",")}{sel && tranche === 1 && ▲ active } |
+ (d × {b.t2_a.toString().replace(".", ",")}) + {b.t2_b.toLocaleString("fr-FR")}{sel && tranche === 2 && ▲ active } |
+ d × {b.t3.toString().replace(".", ",")}{sel && tranche === 3 && ▲ active } |
+
+
+
+
+
+
+ onChange("km", e.target.value)} placeholder="0" />
+ km
+
+ {kmNum > 0 && tranche > 0 && (
+
+ 🔢 Tranche {tranche} = {fmt(indemnite)}
+
+ )}
+
+
+
+ 0 ? "active" : "empty"}`}>
+ 0 ? "#fff" : "#6b7280" }}>
+ {indemnite > 0 ? fmt(indemnite) : "—"}
+
+ {kmNum > 0 && tranche > 0 && (
+
+ {cv} CV
Tranche {tranche} + + )} +
+ Tranche {tranche} + + )} +
+
+ )}
+
+ {/* Participants (repas) */}
+ {isRepas && (
+
+ Montant & TVA
+
+
+
+
+ {tvaItems.map((item, idx) => {
+ const ttc = parseFloat(item.montantTTC) || 0;
+ const taux = parseFloat(item.taux) || 0;
+ const ht = taux > 0 ? getHT(ttc, taux) : ttc;
+ const tva = taux > 0 ? getTVA(ttc, taux) : 0;
+ return (
+ Taux TVA
+ Montant TTC
+ HT
+ TVA
+
+
+ {/* FIX 2 : option vide cohérente avec le state initial taux: "" */}
+
+
+ );
+ })}
+ {tvaItems.length > 1 && totalTTC > 0 && (
+
+ updateTvaItem(idx, "montantTTC", e.target.value)} placeholder="0,00" />
+ €
+
+ 0 ? "green" : "muted"}`}>{ttc > 0 ? fmt(ht) : "—"}
+ 0 ? "indigo" : "muted"}`}>{tva > 0 ? fmt(tva) : "—"}
+
+
+
+
+
+
+ )}
+ Total HT
{fmt(totalHT)}
Total TVA
{fmt(totalTVA)}
Total TTC
{fmt(totalTTC)}
+
+ )}
+
+ {/* Justificatif */}
+
+ 🍽️ Participants au repas
+
+
+
+ onChange("nombreParticipants", e.target.value)} placeholder="Ex: 3" />
+
+
+ {depense.participants.map((p, i) => (
+
+
+
+
+ ))}
+
+ {i === 0 &&
+ Nom *
}
+ updateParticipant(i, "nom", e.target.value)} placeholder="Nom" />
+
+ {i === 0 &&
+ Prénom *
}
+ updateParticipant(i, "prenom", e.target.value)} placeholder="Prénom" />
+
+ {i === 0 &&
+ {depense.participants.length > 1 && (
+
+ )}
+ Société
}
+ updateParticipant(i, "societe", e.target.value)} placeholder="Société (opt.)" />
+
+
+
+
+ {/* Supprimer */}
+ {total > 1 && (
+
+ )}
+ 0 ? "has-files" : ""}`}
+ onClick={() => fileRef.current?.click()}
+ onDragOver={e => e.preventDefault()}
+ onDrop={e => { e.preventDefault(); addFiles(e.dataTransfer.files); }}>
+ {depense.files.length > 0 ? `${depense.files.length} fichier${depense.files.length > 1 ? "s" : ""} joint${depense.files.length > 1 ? "s" : ""}` : "Glisser un fichier ou cliquer — PDF, JPG, PNG"}
+ addFiles(e.target.files)} style={{ display: "none" }} />
+
+ {isKm && depense.files.length === 0 && (
+
+ Déplacement kilométrique — le justificatif est facultatif
+
+ )}
+
+ {/* Main */}
+
+
+ );
+}
\ No newline at end of file
diff --git a/ndf/src/components/ndf/NotesTable.tsx b/ndf/src/components/ndf/NotesTable.tsx
new file mode 100644
index 0000000..962f3e0
--- /dev/null
+++ b/ndf/src/components/ndf/NotesTable.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import type { Note } from './types';
+import { fmt } from './helpers';
+import { tagStatut } from './TagStatut';
+
+const API = '';
+
+interface NotesTableProps {
+ notes: Note[];
+}
+
+const getJustificatifUrl = (note: Note): string | null => {
+ try {
+ const isKmOnly = note.lignesJson
+ ? JSON.parse(note.lignesJson || '[]').every((l: any) =>
+ (l.categorie || '').toLowerCase().includes('kilom') &&
+ parseFloat(l.montant || 0) === 0)
+ : (note.km ?? 0) > 0 && parseFloat(String(note.montantTTC || 0)) === 0;
+ if (isKmOnly) return 'KILOMETRIQUE';
+ } catch { }
+
+ let files: { fileName: string; uploadUrl: string }[] = note.sharepointFiles || [];
+ if (!files.length && note.fichiers) {
+ try { files = JSON.parse(note.fichiers); } catch { files = []; }
+ }
+ if (!Array.isArray(files)) files = [];
+
+ const isApprouve = ['approuve', 'payee'].includes(note.statut || '');
+ const file = files.find(f =>
+ f.fileName.includes(isApprouve ? 'signe_approuve' : 'soumission')
+ );
+ return file?.uploadUrl || null;
+};
+
+export const NotesTable = ({ notes }: NotesTableProps) => {
+ if (!notes.length) return (
+
+ {/* Header */}
+ updateDepense(d.id, field, val)}
+ onDelete={() => deleteDepense(d.id)}
+ />
+ ))}
+
+
+ {/* Sidebar */}
+
+
+
+ {/* Meta — FIX 3 : champ titre désormais fonctionnel avec input lié */}
+
+ Nouvelle note de frais
+ Brouillon
+
+
+
+
+
+ {/* Dépenses */}
+
+
+ Titre *
+ setTitre(e.target.value)}
+ placeholder="Ex: Mission Lyon mars"
+ />
+
+
+ Période
+
+ setDateDebut(e.target.value)} style={{ flex: 1 }} />
+ setDateFin(e.target.value)} style={{ flex: 1 }} />
+
+
+
+ Commentaire
+ setCommentaire(e.target.value)} placeholder="Projet" />
+
+
+ 🏢
+
+ Dépenses
+
+
+
+ {depenses.map(d => (
+
+
+ Récapitulatif
+ {depenses.map(d => (
+
+
+
+ ))}
+
+
+
+ {d.libelle || "Sans libellé"}
+ {d.categorie}
+
+
+
+ Total HT
+ {totalHT > 0 ? fmt(totalHT) : "—"}
+
+
+ Total TVA
+ {totalTVA > 0 ? fmt(totalTVA) : "—"}
+
+
+ Total TTC
+ {totalTTC > 0 ? fmt(totalTTC) : "—"}
+
+
+ Justificatifs vérifiés avant validation
+
+
+ );
+
+ const HEADERS = ['Référence', 'Libellé', 'Catégorie', 'Date', 'Montant TTC', 'HT', 'TVA', 'Statut', 'Justificatif'];
+
+ return (
+ —
+ Aucune note de frais
+| {h} | + ))} +||||||||
|---|---|---|---|---|---|---|---|---|
| + {n.reference || `#${n.id}`} + | ++ {n.libelle || '—'} + {n.nombreParticipants && ( + + {n.nombreParticipants} pers. + + )} + {n.km && ( + + {n.km} km + + )} + | +{n.categorie || '—'} | ++ {n.date ? new Date(n.date).toLocaleDateString('fr-FR') : '—'} + | ++ {fmt(n.montant || 0)} + | ++ {n.montantHT ? fmt(n.montantHT) : '—'} + | ++ {n.tauxTVA ? `${n.tauxTVA}%` : n.km ? 'Km' : '—'} + | +{tagStatut(n.statut || 'brouillon')} | ++ {(() => { + const url = getJustificatifUrl(n); + if (url === 'KILOMETRIQUE') + return Kilométrique; + if (url) + return ( + + {['approuve', 'payee'].includes(n.statut || '') + ? 'Justificatif approuvé' + : 'Justificatif soumission'} + + ); + if (n.justificatif) + return ( + + Justificatif de soumission + + ); + return —; + })()} + | +
+ \u274C
+
+ );
+ }
+
+ return (
+
+
+ Note refusée
+ Consultez le motif de refus ci-dessous
+
+
+ );
+};
diff --git a/ndf/src/components/ndf/TagStatut.tsx b/ndf/src/components/ndf/TagStatut.tsx
new file mode 100644
index 0000000..e23e11e
--- /dev/null
+++ b/ndf/src/components/ndf/TagStatut.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { normalizeStatut } from './helpers';
+
+const STATUT_MAP: Record
+ {STEPS.map((step, i) => {
+ const isDone = i < active;
+ const isCurrent = i === active;
+ return (
+
+
+
+ );
+ })}
+
+
+ {i < STEPS.length - 1 && (
+
+ )}
+
+ {isDone ? '\u2713' : step.icon}
+
+
+ {step.label}
+
+
+
+ );
+};
diff --git a/ndf/src/components/ndf/helpers.ts b/ndf/src/components/ndf/helpers.ts
new file mode 100644
index 0000000..57b21fc
--- /dev/null
+++ b/ndf/src/components/ndf/helpers.ts
@@ -0,0 +1,60 @@
+// ── HELPERS & UTILITAIRES NDF ──────────────────────────────────────────────
+import type { LigneNote } from './types';
+
+export const fmt = (n: number) =>
+ new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(n || 0);
+
+export function getHT(ttc: number, taux: number): number {
+ if (!taux) return ttc;
+ return parseFloat((ttc / (1 + taux / 100)).toFixed(2));
+}
+
+export function getMontantTVA(ttc: number, taux: number): number {
+ return parseFloat((ttc - getHT(ttc, taux)).toFixed(2));
+}
+
+export const normalizeStatut = (s?: string): string =>
+ s?.trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '') ?? '';
+
+export const BAREME_KM: Record e.stopPropagation()} style={{
+ background: '#fff', borderRadius: 16,
+ boxShadow: '0 32px 100px rgba(0,0,0,.5)',
+ width: isPDF ? 860 : 'auto',
+ maxWidth: '94vw', maxHeight: '94vh',
+ display: 'flex', flexDirection: 'column', overflow: 'hidden',
+ }}>
+ {/* Header */}
+
+
+
+ {/* Body */}
+
+
+ {isPDF ? '📄' : isImage ? '🖼️' : '📎'}
+
+
+ {item.name}
+
+ ↗ Ouvrir dans un onglet
+
+
+
+ {isPDF && (
+
+ )}
+ {isImage && (
+ 
+ )}
+ {!isPDF && !isImage && (
+
+ )}
+
+ {/* Footer */}
+
+ Cliquez en dehors pour fermer
+ ⬇ Télécharger
+
+
+ ⏳ Connexion en cours...
+
+ );
+};
+
+export default AuthCallback;
\ No newline at end of file
diff --git a/ndf/src/pages/Dashboard.tsx b/ndf/src/pages/Dashboard.tsx
new file mode 100644
index 0000000..f4b0f90
--- /dev/null
+++ b/ndf/src/pages/Dashboard.tsx
@@ -0,0 +1,5049 @@
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { useAuth } from '../context/AuthContext';
+import { RoleSwitcherSidebar } from '../components/RoleSwitcher';
+import { ThemeToggleButton } from '../context/ThemeContext';
+import NouvelleNote from './NouvelleNote';
+import VerificateurFinanceLight from './VerificateurFinanceLight';
+import QRCode from 'react-qr-code';
+
+import {
+ LayoutDashboard, PlusCircle, FileText, CheckSquare, History,
+ CreditCard, User, LogOut, Receipt, Upload, Send,
+ ClipboardList, ShieldCheck, Eye,
+} from 'lucide-react';
+
+const API = '';
+
+// ── FORMATTERS ─────────────────────────────────────────
+const fmt = (n: number) =>
+ new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(n || 0);
+
+// ── HELPERS TVA ────────────────────────────────────────
+function getHT(ttc: number, taux: number) {
+ if (!taux) return ttc;
+ return parseFloat((ttc / (1 + taux / 100)).toFixed(2));
+}
+function getMontantTVA(ttc: number, taux: number) {
+ return parseFloat((ttc - getHT(ttc, taux)).toFixed(2));
+}
+
+// ── NORMALISATION STATUT ──────────────────────────────
+const normalizeStatut = (s?: string) =>
+ s?.trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '') ?? '';
+
+
+// ── INTERFACES ─────────────────────────────────────────
+interface Note {
+ id: number;
+ reference?: string;
+ libelle?: string;
+ categorie?: string;
+ date?: string;
+ montant?: number;
+ statut?: string;
+ collaborateur?: string;
+ collaborateurEmail?: string;
+ departement?: string;
+ campus?: string;
+ societe?: string;
+ justificatif?: string;
+ sharepointUrl?: string;
+ fichiers?: string;
+ participants?: string;
+ nombreParticipants?: number;
+ validateurN1Id?: number;
+ validateurN2Id?: number;
+ nomValidateurN1?: string;
+ nomValidateurN2?: string;
+ nomVerificateur?: string;
+ datePaiement?: string;
+ moisPaiement?: number;
+ anneePaiement?: number;
+ commentaireN1?: string;
+ commentaireN2?: string;
+ commentaireVerification?: string;
+ dateVerification?: string;
+ motifRefus?: string;
+ montantHT?: number;
+ tauxTVA?: number;
+ km?: number;
+ indemniteKm?: number;
+ lignesJson?: string;
+ montantTTC?: number;
+ sharepointFiles?: { fileName: string; uploadUrl: string }[];
+ description?: string;
+ DateModification?: string;
+ dateXml?: string;
+}
+
+interface HistoriquePaiement {
+ id: number;
+ reference: string;
+ libelle: string;
+ montant: number;
+ datePaiement: string;
+ collaborateur: string;
+ campus?: string;
+ societe?: string;
+ date?: string;
+ categorie?: string;
+ lignesJson?: string;
+ indemniteKm?: number;
+ km?: number;
+ statut?: string;
+ banque?: string;
+}
+interface Profile {
+ prenom?: string; nom?: string; email?: string;
+ role?: string; departement?: string; campus?: string; poste?: string;
+ TypeContrat?: string; DateEntree?: string; societe?: string;
+ adresse_rue?: string; adresse_cp?: string;
+ adresse_ville?: string; adresse_pays?: string;
+}
+
+interface Categorie {
+ id: number;
+ Nom: string;
+ Detail?: string;
+ Icone?: string;
+ PlafondParPersonne?: number;
+ DescriptionPlafond?: string;
+}
+
+interface TauxTVA {
+ taux: number;
+ libelle: string;
+ categorie: string | null;
+}
+
+interface Notification {
+ id: number;
+ Type: string;
+ Titre: string;
+ Message: string;
+ NoteDeFraisId?: number;
+ Lu: boolean;
+ DateCreation: string;
+}
+
+interface Participant {
+ nom: string;
+ prenom: string;
+ societe?: string;
+}
+
+interface Exception {
+ id: number;
+ reference?: string;
+ montant?: number;
+ libelle?: string;
+ collaborateur?: string;
+ email?: string;
+ Motif?: string;
+ Statut?: string;
+ DateDemande?: string;
+}
+
+interface PaiementConfig {
+ JourPaiement: number;
+}
+
+interface HistoriqueValidation {
+ id: number;
+ reference: string;
+ libelle: string;
+ montant: number;
+ categorie: string;
+ collaborateur: string;
+ departement?: string;
+ campus?: string;
+ Niveau: string;
+ Action: string;
+ Commentaire?: string;
+ MotifRefus?: string;
+ NouveauStatut: string;
+ DateAction: string;
+}
+
+// ── LIGNE NOTE (multi-dépenses) ────────────────────────
+interface LigneNote {
+ idTemp: string;
+ date: string;
+ categorie: string;
+ libelle: string;
+ montant: string;
+ tvaItems: { taux: string; montantTTC: string }[];
+ tauxTVA?: string;
+ km: string;
+ chevaux: string;
+ description: string;
+ files: File[];
+ participants: Participant[];
+ nombreParticipants: string;
+ qrLink: string | null;
+ qrUploaded: boolean;
+ qrNoteRef: string;
+ qrFiles?: { fileName: string; uploadUrl: string }[] // ← ajouter cette ligne
+}
+
+const newLigne = (date: string): LigneNote => ({
+ idTemp: crypto.randomUUID(),
+ date,
+ categorie: '',
+ libelle: '',
+ montant: '',
+ tvaItems: [{ taux: '', montantTTC: '' }],
+ tauxTVA: '',
+ km: '',
+ chevaux: '7',
+ description: '',
+ files: [],
+ participants: [{ nom: '', prenom: '', societe: '' }],
+ nombreParticipants: '',
+ qrLink: null,
+ qrUploaded: false,
+ qrNoteRef: '',
+});
+
+const BAREME_KM: Record
+ {isNonConforme ? '⚠️' : '❌'}
+
+ );
+ }
+
+
+ return (
+
+
+
+ {isNonConforme ? 'Justificatif non conforme — action requise' : 'Note refusée'}
+
+
+ {isNonConforme
+ ? 'Le vérificateur Finance a signalé un justificatif non conforme. Contactez votre responsable.'
+ : 'Consultez le motif de refus ci-dessous'}
+
+
+
+ );
+};
+
+// ── NOTES TABLE ────────────────────────────────────────
+const NotesTable = ({ notes }: { notes: Note[] }) => {
+ if (!notes.length) return (
+
+ {steps.map((step, i) => {
+ const isDone = i < active;
+ const isCurrent = i === active;
+ return (
+
+
+
+ );
+ })}
+
+
+ {i < steps.length - 1 && (
+
+ )}
+
+ {isDone ? '✓' : step.icon}
+
+
+ {step.label}
+
+
+
+ );
+
+ const getJustificatifUrl = (note: Note) => {
+ try {
+ const isKmOnly = note.lignesJson
+ ? JSON.parse(note.lignesJson || '[]').every((l: any) =>
+ (l.categorie || '').toLowerCase().includes('kilom') &&
+ parseFloat(l.montant || 0) === 0)
+ : (note.km ?? 0) > 0 && parseFloat(String(note.montantTTC || 0)) === 0;
+ if (isKmOnly) return 'KILOMETRIQUE';
+ } catch { }
+
+ let files: { fileName: string; uploadUrl: string }[] = note.sharepointFiles || [];
+ if (!files.length && note.fichiers) {
+ try { files = JSON.parse(note.fichiers); } catch { files = []; }
+ }
+ if (!Array.isArray(files)) files = [];
+ const isApprouve = ['approuve', 'payee'].includes(note.statut || '');
+ const file = files.find(f => f.fileName.includes(isApprouve ? 'signe_approuve' : 'soumission'));
+ return file?.uploadUrl || null;
+ };
+
+ return (
+ Aucune note de frais
+
+
+
+
+
+ );
+};
+
+// ── URL PREVIEW POPUP ─────────────────────────────
+const UrlPreviewPopup = ({ item, onClose }: { item: { url: string; name: string } | null; onClose: () => void; }) => {
+ const [loaded, setLoaded] = useState(false);
+
+ useEffect(() => {
+ // Reset à chaque ouverture
+ setLoaded(false);
+ }, [item?.url]);
+
+ if (!item) return null;
+ const isPDF = /\.pdf$/i.test(item.name);
+ const isImage = /\.(jpg|jpeg|png|gif|webp)$/i.test(item.name);
+ return (
+ | {h} | + ))} +||||||
|---|---|---|---|---|---|---|
| + {n.reference || `#${n.id}`} + | ++ {n.libelle || '-'} + {n.km && {n.km} km} + | +{n.categorie || '-'} | ++ {n.date ? new Date(n.date).toLocaleDateString('fr-FR') : '-'} + | +{fmt(n.montant || 0)} | +{tagStatut(n.statut || 'brouillon')} | ++ {(() => { + const url = getJustificatifUrl(n); + if (url === 'KILOMETRIQUE') return Kilométrique; + if (url) return Voir justificatif; + return -; + })()} + | +
+
e.stopPropagation()} style={{ background: '#fff', borderRadius: 16, boxShadow: '0 32px 100px rgba(0,0,0,.5)', width: isPDF ? 860 : 'auto', maxWidth: '94vw', maxHeight: '94vh', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+
+
+
+ {isPDF ? '📄' : isImage ? '🖼️' : '📎'}
+
+ {item.name}
+
+ ↗ Ouvrir
+
+
+
+ {/* ✅ Spinner pendant le chargement */}
+ {!loaded && (
+
+
+ )}
+
+ {isPDF &&
+
+
+ Chargement…
+