+
+ );
+ }
+ return null;
+};
+
+// ============================================
+// CUSTOM LABEL POUR LES VALEURS SUR LE GRAPHIQUE
+// ============================================
+
+const CustomLabel = (props: any) => {
+ const { x, y, value, index } = props;
+ return (
+ {label}
+ {payload.map((entry, index) => ( +
+
+ {entry.name}:
+
+ {formatCurrency(entry.value)}
+
+
+ ))}
+
+
+ );
+ }
+
+ // Calculer le total pour l'afficher
+ const total = data.reduce((sum, item) => sum + (item.value || 0), 0) / 1000
+
+ return (
+ {title}
+
+ Pas de données
+
+
+
+
+ {/* Label de l'axe Y */}
+ {showYAxisLabel && (type === 'line' || type === 'area' || type === 'bar') && (
+
+
+
+ {title}
+ {showTotal && ( ++ Total: {total.toFixed(0)} K € +
+ )} +{yAxisLabel}
+ )} + +
+
+ {type === 'line' && (
+
+
+ {showLabels && (
+
+
+ )}
+
+ {type === 'area' && (
+
+
+
+
+
+
+
+
+ )}
+
+ {type === 'bar' && (
+
+
+ {data.map((entry, index) => (
+ |
+ ))}
+ {showLabels && (
+
+
+ )}
+
+ {type === 'donut' && (
+
+
+ {data.map((entry, index) => (
+ |
+ ))}
+
+
+ )}
+
+ {type === 'radial' && (
+
+
+ )}
+
+
+
+
+ );
+};
+
+export default DataTable;
diff --git a/src/components/DropdownMenu.tsx b/src/components/DropdownMenu.tsx
new file mode 100644
index 0000000..959792f
--- /dev/null
+++ b/src/components/DropdownMenu.tsx
@@ -0,0 +1,159 @@
+import { useState, useEffect, useRef } from 'react';
+import { Edit, Download, FileSignature, MoreVertical, Trash2, CircleDot, Copy } from 'lucide-react';
+
+export const DropdownMenuTable = ({
+ row,
+ onEdit,
+ onStatus,
+ onESign,
+ onDownload,
+ onDelete,
+ onDulipcate
+}: {
+ row: any;
+ onEdit?: () => void;
+ onStatus?: () => void;
+ onESign?: () => void;
+ onDownload?: () => void;
+ onDelete?: () => void;
+ onDulipcate?: () => void;
+}) => {
+ const [isOpen, setIsOpen] = useState(false);
+ const dropdownRef = useRef
+
+
+
+
+
+
+
+ {totalPages > 1 && (
+
+
+
+
+
+ | column.sortable && handleSort(column.key)}
+ className={cn(
+ "px-6 py-3 text-left text-xs font-bold text-black dark:text-gray-400 uppercase tracking-wider",
+ column.sortable && "cursor-pointer hover:text-gray-900 dark:hover:text-white"
+ )}
+ >
+
+ {column.label}
+ {column.sortable && sortColumn === column.key && (
+ sortDirection === 'asc' ?
+ |
+ ))}
+ {actions && Actions | } +
|---|---|
|
+
+
+ |
+ |
| + Empty + | +|
| + {column.render + ? column.render(row[column.key], row) + : row[column.key]} + | + ))} + + {actions && ( +
+ e.stopPropagation()}
+ >
+ {actions(row)}
+
+ |
+ )}
+
+
+
+ {isOpen && (
+
+ );
+};
diff --git a/src/components/FormModal.jsx b/src/components/FormModal.jsx
new file mode 100644
index 0000000..e639f32
--- /dev/null
+++ b/src/components/FormModal.jsx
@@ -0,0 +1,146 @@
+
+import React from 'react';
+import { X } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+export const FormSection = ({ title, description, children, className }) => (
+
+
+
+ {
+ onEdit && (
+
+ )
+ }
+
+ {
+ onDulipcate && (
+
+ )
+ }
+
+ {
+ onStatus && (
+
+ )
+ }
+
+
+ {
+ onESign && (
+
+ )
+ }
+
+ {
+ onDownload && (
+
+ )
+ }
+
+
+ {
+ onDelete && (
+ <>
+
+
+
+
+ )
+ }
+
+
+
+
+ )}
+
+
+);
+
+
+export const FormField = ({ label, children, required, error, fullWidth, className }) => (
+ {title}
+ {description &&{description}
} +
+ {children}
+
+
+
+ {children}
+ {error &&
+);
+
+export const Input = React.forwardRef(({ className, error, ...props }, ref) => (
+
+));
+Input.displayName = "Input";
+
+export const Select = React.forwardRef(({ className, error, children, ...props }, ref) => (
+
+));
+Select.displayName = "Select";
+
+export const Textarea = React.forwardRef(({ className, error, ...props }, ref) => (
+
+));
+Textarea.displayName = "Textarea";
+
+
+const FormModal = ({ isOpen, onClose, title, children, onSubmit, loading, submitLabel = "Enregistrer", cancelLabel = "Annuler", size = "md" }) => {
+ if (!isOpen) return null;
+
+ const sizeClasses = {
+ sm: "max-w-md",
+ md: "max-w-2xl",
+ lg: "max-w-4xl",
+ xl: "max-w-6xl",
+ full: "max-w-[95vw]"
+ };
+
+ return (
+ {error}
} +
+
+
+
+
+
+
+ {title}
+ +
+ {children}
+
+
+
+
+ {onSubmit && (
+
+ )}
+
+
+
+
+ );
+};
+
+export default HeroImage;
diff --git a/src/components/KPIBar.tsx b/src/components/KPIBar.tsx
new file mode 100644
index 0000000..80b6729
--- /dev/null
+++ b/src/components/KPIBar.tsx
@@ -0,0 +1,154 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { RefreshCw } from 'lucide-react';
+import KpiCard from '@/components/KpiCard';
+import PeriodFilter from '@/components/PeriodFilter';
+
+export type PeriodType = 'all' | 'today' | 'week' | 'month' | 'quarter' | 'year' | CustomPeriod;
+
+export interface CustomPeriod {
+ id: 'custom';
+ start: string;
+ end: string;
+}
+
+interface KPIBarProps {
+ kpis: any;
+ period?: PeriodType;
+ onPeriodChange?: (period: PeriodType) => void;
+ loading?: 'idle' | 'loading' | 'succeeded' | 'failed';
+ onRefresh?: () => void | Promise
+
+ );
+};
+
+export default KPIBar;
+
+
diff --git a/src/components/KanbanBoard.jsx b/src/components/KanbanBoard.jsx
new file mode 100644
index 0000000..53dfcc2
--- /dev/null
+++ b/src/components/KanbanBoard.jsx
@@ -0,0 +1,158 @@
+
+import React from 'react';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
+import { motion } from 'framer-motion';
+import { MoreHorizontal, Calendar, DollarSign, User, StickyNote, FileText, CheckSquare } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { toast } from '@/components/ui/use-toast';
+
+const KanbanCard = ({ item, index, onClick, onAction }) => {
+ const handleAction = (e, action) => {
+ e.stopPropagation();
+ onAction && onAction(action, item);
+ };
+
+ return (
+
+ {/* Period Filter */}
+ {onPeriodChange && (
+
+
+ )}
+
+ {/* Refresh Button */}
+ {showRefreshButton && (
+
+
+ )}
+
+
+ {/* KPI Cards */}
+
+
+ )}
+
+ {/* Loading State */}
+ {isLoading && (
+
+
+ {kpis.map((kpi: any, index: number) => (
+
+
+
+ ))}
+ onClick(item)}
+ style={{ ...provided.draggableProps.style }}
+ className={cn(
+ "bg-white dark:bg-gray-900 p-4 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm mb-3 group transition-all",
+ snapshot.isDragging ? "shadow-xl ring-2 ring-[#941403] rotate-2" : "hover:shadow-md hover:-translate-y-1"
+ )}
+ >
+
+ )}
+
+ {item.client}
+
+
+ {item.name}
+ +
+
+
+
+
+ = 75 ? "bg-green-100 text-green-700" :
+ item.probability >= 50 ? "bg-yellow-100 text-yellow-700" :
+ "bg-gray-100 text-gray-700"
+ )}>
+ {item.probability}%
+
+
+
+
+
+
+
+
+
+
+
+
+ {item.owner && (
+
+ {item.owner.charAt(0)}
+
+ )}
+
+
+ {(provided, snapshot) => (
+
+
+ );
+};
+
+const KanbanBoard = ({ columns, items, onDragEnd, onItemClick, onActionItem }) => {
+ return (
+
+
+
+
+
+ {totalAmount > 0 && (
+
+ {totalAmount.toLocaleString()}€
+
+ )}
+ {column.title}
+ + {items.length} + +
+ {items.map((item, index) => (
+
+ )}
+
+ {columns.map(col => (
+ i.stage === col.id)}
+ onClickItem={onItemClick}
+ onActionItem={onActionItem}
+ />
+ ))}
+
+
+
+
+ {Icon &&
+ {change && (
+
+ {trend === 'up' ?
+ )}
+
+
+ {title}
+ {tooltip && ( +
+
+ )}
+ {value}
+
+
+ Notifications
+
+ {devisSigned.length > 0 ? (
+ devisSigned.map((notif) => (
+
+ {/*
+
+ ))
+ ) : (
+
+
+
+
+
+
+
+ + Devis signé +
++ {/* {notif.message} */} + {`Le devis ${notif.sage_document_id} a été signé`} +
++ {formatDateFRCourt(notif.signed_at)} +
+
+ Aucune notification
+
+ )}
+
+
+
+
*/}
+
+
+ );
+};
+
+export default Pagination;
diff --git a/src/components/PeriodFilter.jsx b/src/components/PeriodFilter.jsx
new file mode 100644
index 0000000..2344dff
--- /dev/null
+++ b/src/components/PeriodFilter.jsx
@@ -0,0 +1,258 @@
+import React, { useState, useEffect } from 'react';
+import { Calendar as CalendarIcon, ChevronDown, X, CalendarDays } from 'lucide-react';
+import {
+ DropdownMenu,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const STORAGE_KEY = 'erp_selected_period';
+
+const PeriodFilter = ({ value, onChange }) => {
+ const [isCustomOpen, setIsCustomOpen] = useState(false);
+ const [tempStart, setTempStart] = useState('');
+ const [tempEnd, setTempEnd] = useState('');
+ const [error, setError] = useState('');
+
+ // Initialize from localStorage on mount
+ useEffect(() => {
+ try {
+ const saved = localStorage.getItem(STORAGE_KEY);
+ if (saved) {
+ const parsed = JSON.parse(saved);
+ onChange(parsed);
+ }
+ } catch (e) {
+ console.error('Failed to load period from storage', e);
+ }
+ }, []);
+
+ // Save to localStorage whenever value changes
+ useEffect(() => {
+ if (value) {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(value));
+ }
+ }, [value]);
+
+ // Initialize temp dates when opening custom modal
+ useEffect(() => {
+ if (isCustomOpen && typeof value === 'object' && value.id === 'custom') {
+ setTempStart(value.start);
+ setTempEnd(value.end);
+ }
+ }, [isCustomOpen, value]);
+
+ const periods = [
+ { id: 'today', label: "Aujourd'hui" },
+ { id: 'week', label: "Cette semaine" },
+ { id: 'month', label: "Ce mois-ci" },
+ { id: 'quarter', label: "Ce trimestre" },
+ { id: 'year', label: "Cette année" },
+ { id: 'all', label: "Tout" },
+ ];
+
+ const handleValueChange = (newValue) => {
+ if (newValue === 'custom') {
+ setIsCustomOpen(true);
+ setError('');
+ } else {
+ onChange(newValue);
+ }
+ };
+
+ const handleCustomSubmit = () => {
+ if (!tempStart || !tempEnd) {
+ setError('Veuillez sélectionner les deux dates');
+ return;
+ }
+ if (new Date(tempStart) > new Date(tempEnd)) {
+ setError('La date de début doit être avant la date de fin');
+ return;
+ }
+
+ onChange({ id: 'custom', start: tempStart, end: tempEnd });
+ setIsCustomOpen(false);
+ setError('');
+ };
+
+ const handleClose = () => {
+ setIsCustomOpen(false);
+ setError('');
+ setTempStart('');
+ setTempEnd('');
+ };
+
+ const formatDate = (dateStr) => {
+ if (!dateStr) return '';
+ const d = new Date(dateStr);
+ return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
+ };
+
+ const getLabel = () => {
+ if (typeof value === 'object' && value.id === 'custom') {
+ return `${formatDate(value.start)} - ${formatDate(value.end)}`;
+ }
+ return periods.find(p => p.id === value)?.label || "Période";
+ };
+
+ const isCustomActive = typeof value === 'object' && value.id === 'custom';
+
+ return (
+ <>
+ + Page {currentPage} sur {totalPages} +
+
+
+ {pages.map((page, index) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ {/* Content */}
+
+
+
+
+ {/* Error Message */}
+ {error && (
+
+
+ {error}
+
+ )}
+
+ {/* Date Inputs */}
+
+
+
+
+ {/* Actions */}
+
+
+ {
+ setTempStart(e.target.value);
+ setError('');
+ }}
+ className={cn(
+ "w-full px-3 py-2.5 bg-white dark:bg-gray-900 border rounded-xl outline-none transition-all text-sm",
+ "border-gray-200 dark:border-gray-700",
+ "focus:ring-2 focus:ring-[#007E45]/20 focus:border-[#007E45]",
+ "dark:text-white dark:[color-scheme:dark]"
+ )}
+ />
+
+
+
+ {
+ setTempEnd(e.target.value);
+ setError('');
+ }}
+ className={cn(
+ "w-full px-3 py-2.5 bg-white dark:bg-gray-900 border rounded-xl outline-none transition-all text-sm",
+ "border-gray-200 dark:border-gray-700",
+ "focus:ring-2 focus:ring-[#007E45]/20 focus:border-[#007E45]",
+ "dark:text-white dark:[color-scheme:dark]"
+ )}
+ />
+
+
+
+
+
+
+
+
+ {/* Module Switcher (Gesco / Compta) - Now primary element on left */}
+
+
+ {/* Right: Actions & Search */}
+
+
+
+
+
+
+ {/* Search */}
+ {/*
+
+
+
+
+ Mon Compte
+ Profil
+ Paramètres
+ Déconnexion
+
+
+
+
+
*/}
+
+ {/* Announcements Trigger */}
+
+
+
+
+
+ {/* User Menu */}
+
+
+
+ {priorityBanner.dismissible && (
+
+ )}
+
+
+
+ {secondaryBanner.dismissible && (
+
+ )}
+
+ {segments.map((segment) => (
+
+ ))}
+
+ );
+};
+
+export default SegmentedControl;
diff --git a/src/components/SmartForm.jsx b/src/components/SmartForm.jsx
new file mode 100644
index 0000000..552ed9b
--- /dev/null
+++ b/src/components/SmartForm.jsx
@@ -0,0 +1,145 @@
+
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader2, AlertCircle, CheckCircle2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import PrimaryButton from '@/components/PrimaryButton';
+
+const SmartForm = ({
+ schema,
+ defaultValues,
+ onSubmit,
+ fields,
+ loading = false,
+ submitLabel = "Enregistrer",
+ cancelLabel = "Annuler",
+ onCancel
+}) => {
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isDirty, isValid },
+ watch
+ } = useForm({
+ resolver: zodResolver(schema),
+ defaultValues,
+ mode: "onChange"
+ });
+
+ return (
+
+ );
+};
+
+export default SmartForm;
diff --git a/src/components/StatusBadget.jsx b/src/components/StatusBadget.jsx
new file mode 100644
index 0000000..e91464b
--- /dev/null
+++ b/src/components/StatusBadget.jsx
@@ -0,0 +1,95 @@
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+const statusStyles = {
+ // Quotes
+ draft: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300',
+ sent: 'bg-blue-100 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300',
+ accepted: 'bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-300',
+ refused: 'bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-300',
+ expired: 'bg-orange-100 dark:bg-orange-900/20 text-orange-700 dark:text-orange-300',
+
+ // Orders & Invoices
+ pending: 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-300',
+ validated: 'bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-300',
+ paid: 'bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-300',
+ partial: 'bg-orange-100 dark:bg-orange-900/20 text-orange-700 dark:text-orange-300',
+ cancelled: 'bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-300',
+
+ // Tickets
+ open: 'bg-blue-100 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300',
+ 'in-progress': 'bg-purple-100 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300',
+ resolved: 'bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-300',
+ closed: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300',
+
+ // Priorities
+ low: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300',
+ normal: 'bg-blue-100 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300',
+ high: 'bg-orange-100 dark:bg-orange-900/20 text-orange-700 dark:text-orange-300',
+ critical: 'bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-300',
+
+ // Opportunities
+ new: 'bg-blue-100 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300',
+ qualification: 'bg-purple-100 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300',
+ proposal: 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-300',
+ negotiation: 'bg-orange-100 dark:bg-orange-900/20 text-orange-700 dark:text-orange-300',
+ won: 'bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-300',
+ lost: 'bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-300',
+};
+
+const statusLabels = {
+ draft: 'Brouillon',
+ sent: 'Envoyé',
+ accepted: 'Accepté',
+ refused: 'Refusé',
+ expired: 'Expiré',
+ pending: 'En attente',
+ validated: 'Validé',
+ paid: 'Payé',
+ partial: 'Partiel',
+ cancelled: 'Annulé',
+ open: 'Ouvert',
+ 'in-progress': 'En cours',
+ resolved: 'Résolu',
+ closed: 'Fermé',
+ low: 'Basse',
+ normal: 'Normale',
+ high: 'Haute',
+ critical: 'Critique',
+ new: 'Nouveau',
+ qualification: 'Qualification',
+ proposal: 'Proposition',
+ negotiation: 'Négociation',
+ won: 'Gagné',
+ lost: 'Perdu',
+};
+
+const labels = {
+ 0: { label: 'Saisi', color: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300' },
+ 1: { label: 'Confirmé', color: 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-300' },
+ 2: { label: 'Accepté', color: 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800' },
+ 3: { label: 'Perdu', color: 'bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-300' },
+ 4: { label: 'Archivé', color: 'bg-orange-100 dark:bg-orange-900/20 text-orange-700 dark:text-orange-300' },
+ 5: { label: 'Transformé', color: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300' },
+}
+
+
+ const StatusBadge = ({ status }) => {
+ const info = labels[status];
+
+ return (
+
+ {info?.label ?? `Statut ${status}`}
+
+ );
+};
+
+
+export default StatusBadge
+
diff --git a/src/components/StatusBadgetCommande.jsx b/src/components/StatusBadgetCommande.jsx
new file mode 100644
index 0000000..479bab2
--- /dev/null
+++ b/src/components/StatusBadgetCommande.jsx
@@ -0,0 +1,29 @@
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+
+
+const labelsCommande = {
+ 0: { label: 'Préparation', color: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300' },
+ 1: { label: 'En cours', color: 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-300' },
+ 2: { label: 'Livrée', color: 'bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-300' },
+ 5: { label: 'Facturée', color: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300' },
+}
+
+const StatusBadgeCommande = ({ status }) => {
+ const info = labelsCommande[status];
+
+ return (
+
+ {info?.label ?? `Statut ${status}`}
+
+ );
+};
+
+export default StatusBadgeCommande;
\ No newline at end of file
diff --git a/src/components/StatusBadgetLettre.tsx b/src/components/StatusBadgetLettre.tsx
new file mode 100644
index 0000000..64ae054
--- /dev/null
+++ b/src/components/StatusBadgetLettre.tsx
@@ -0,0 +1,107 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+type Status =
+ | 'actif'
+ | 'inactif'
+ | 'Saisi'
+ | 'Brouillon'
+ | 'Envoyé'
+ | 'Vu'
+ | 'Signé'
+ | 'Transformé en commande'
+ | 'Annulé'
+ | 'Refusé'
+ | 'Enregistrée'
+ | 'Préparée'
+ | 'Livrée'
+ | 'Facturée'
+ | 'Validée'
+ | 'Payée'
+ | 'Partiellement payée'
+ | 'En retard'
+ | 'draft'
+ | 'sent'
+ | 'accepted'
+ | 'paid'
+ | 'overdue'
+ | 'prospect'
+ | 'vip'
+
+const statusStyles: Record
+
+ );
+};
+
+export default Tabs;
\ No newline at end of file
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
new file mode 100644
index 0000000..13cf1ac
--- /dev/null
+++ b/src/components/Timeline.jsx
@@ -0,0 +1,115 @@
+
+import React from 'react';
+import { Mail, Phone, Calendar, FileText, User } from 'lucide-react';
+import { cn, formatDateFR } from '@/lib/utils';
+import StatusBadge from './StatusBadget';
+import { useNavigate } from 'react-router-dom';
+import { useAppDispatch } from '@/store/hooks';
+import { selectCommandeAsync } from '@/store/features/commande/thunk';
+import { selectDevis } from '@/store/features/devis/slice';
+import { motion } from 'framer-motion';
+import {
+ CheckCircle2, AlertCircle,
+ ArrowRight, Truck, PenTool, FileCheck, XCircle, Plus
+} from 'lucide-react';
+
+const iconMap = {
+ email: Mail,
+ call: Phone,
+ meeting: Calendar,
+ quote: FileText,
+ task: User,
+};
+
+const getEventIcon = (type) => {
+ switch (type) {
+ case 'creation': return Plus;
+ case 'email': return Mail;
+ case 'viewed': return CheckCircle2;
+ case 'signature': return PenTool;
+ case 'transform': return ArrowRight;
+ case 'delivery': return Truck;
+ case 'payment': return FileCheck;
+ case 'cancellation': return XCircle;
+ case 'update': return FileText;
+ default: return Calendar;
+ }
+};
+
+const getEventColor = (type) => {
+ switch (type) {
+ case 'creation': return 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400';
+ case 'email': return 'bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400';
+ case 'signature': return 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400';
+ case 'delivery': return 'bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400';
+ case 'cancellation': return 'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400';
+ default: return 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400';
+ }
+};
+
+
+const Timeline = ({ events }) => {
+ const navigate = useNavigate();
+ const dispatch = useAppDispatch()
+
+ return (
+
+ {tabs.map((tab) => (
+
+ ))}
+
+
+
+ );
+};
+
+export default Timeline;
diff --git a/src/components/UserAvatar.jsx b/src/components/UserAvatar.jsx
new file mode 100644
index 0000000..b40a0eb
--- /dev/null
+++ b/src/components/UserAvatar.jsx
@@ -0,0 +1,24 @@
+
+import React from 'react';
+
+const UserAvatar = ({ name, role, image }) => {
+ const initials = name
+ .split(' ')
+ .map(n => n[0])
+ .join('')
+ .toUpperCase();
+
+ return (
+
+ {events.map((event, index) => {
+ const Icon = getEventIcon(event.type);
+ const colorClass = getEventColor(event.type);
+
+ return (
+ navigate(event.link)}
+ >
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+ + {event.title} +
+ + {new Date(event.date).toLocaleDateString()} + {event.time && ` • ${event.time}`} + +
+ {/* Tiny triangle for speech bubble effect */}
+
+
+
+ + {event.description || 'Aucun détail supplémentaire.'} +
+ +
+
+
+ J
+
+
+ Jean Dupont
+
+
+
+ );
+};
+
+export default UserAvatar;
diff --git a/src/components/UserMenu.jsx b/src/components/UserMenu.jsx
new file mode 100644
index 0000000..5dd8e77
--- /dev/null
+++ b/src/components/UserMenu.jsx
@@ -0,0 +1,63 @@
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {
+ DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel,
+ DropdownMenuSeparator, DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+import { User, Settings, Bell, LogOut, Moon, Sun } from 'lucide-react';
+import UserAvatar from '@/components/UserAvatar';
+import { useTheme } from '@/contexts/ThemeContext';
+import { currentUser } from '@/data/mockData';
+
+const UserMenu = () => {
+ const { isDark, toggleTheme } = useTheme();
+
+ return (
+
+
+ {name}
+{role}
+
+ {image ? 
: initials}
+
+
+
+
+
+ {currentUser.name}
+{currentUser.email}
+
+ {/* Bouton Filtres */}
+
+
+
+
+
+
+ Filtres avancés
+
+
+
+ {/* Container scrollable pour les badges */}
+ {activeBadges.length > 0 && (
+
+ )
+}
+
+export default AdvancedFilters
\ No newline at end of file
diff --git a/src/components/common/ColumnSelector.tsx b/src/components/common/ColumnSelector.tsx
new file mode 100644
index 0000000..6c09c09
--- /dev/null
+++ b/src/components/common/ColumnSelector.tsx
@@ -0,0 +1,135 @@
+import { useState, useRef, useEffect } from 'react';
+import { Check, Columns, RotateCcw } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export interface ColumnConfig {
+ key: string;
+ label: string;
+ visible: boolean;
+ locked?: boolean; // Colonnes qui ne peuvent pas être masquées
+}
+
+interface ColumnSelectorProps {
+ columns: ColumnConfig[];
+ onChange: (columns: ColumnConfig[]) => void;
+ className?: string;
+}
+
+export function ColumnSelector({ columns, onChange, className }: ColumnSelectorProps) {
+ const [isOpen, setIsOpen] = useState(false);
+ const dropdownRef = useRef
+
+ )
+ })}
+
+ {activeCount > 0 && (
+
+ {filter.label}
+ {hasScroll && (
+
+ {filter.options.length} options
+
+ )}
+
+
+
+ {filter.options.map(option => (
+ handleFilterToggle(filter.key, option.value)}
+ className="cursor-pointer"
+ >
+
+ {option.label}
+
+ ))}
+
+
+
+
+
+ )}
+
+ {/* Bouton scroll gauche */}
+ {showScrollButtons && canScrollLeft && (
+
+ )}
+
+ {/* Badges scrollables */}
+
+ )}
+
+ {/* Bouton reset rapide (visible uniquement sur grand écran) */}
+ {/* {activeCount > 0 && (
+
+ )} */}
+
+ {activeBadges.map(badge => {
+ if (!badge) return null
+ const { key, values, filterDef } = badge
+
+ return (
+
+
+ {/* Bouton scroll droite */}
+ {showScrollButtons && canScrollRight && (
+
+ )}
+
+ {/* Gradient fade effect */}
+ {showScrollButtons && canScrollLeft && (
+
+ )}
+ {showScrollButtons && canScrollRight && (
+
+ )}
+
+ {filterDef.label}:
+
+ {values.length > 2
+ ? `${values.length} sélectionnés`
+ : values
+ .map(v => filterDef.options.find(o => o.value === v)?.label)
+ .join(', ')}
+
+
+
+ )
+ })}
+
+
+
+ {isOpen && (
+
+ );
+}
+
+export default ColumnSelector;
\ No newline at end of file
diff --git a/src/components/common/CompanySelector.tsx b/src/components/common/CompanySelector.tsx
new file mode 100644
index 0000000..e7822a0
--- /dev/null
+++ b/src/components/common/CompanySelector.tsx
@@ -0,0 +1,279 @@
+import React, { useState, useEffect } from 'react';
+import { ChevronDown, Check, Server, Loader2, AlertCircle, Building2, Plus } from 'lucide-react';
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+import { Gateways } from '@/types/gateways';
+import { gatewaysStatus, getAllGateways, getSociete } from '@/store/features/gateways/selectors';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { selectgateways } from '@/store/features/gateways/slice';
+import ModalGateway from '../modal/ModalGateway';
+import { Societe } from '@/types/societeType';
+
+interface GatewaySelectorProps {
+ className?: string;
+ onGatewayChange?: (gateway: Gateways) => void;
+ onAddGateway?: () => void;
+}
+
+const CompanySelector: React.FC
+ {/* Header */}
+
+ )}
+
+
+ Afficher les colonnes
+
+
+
+
+ {/* Liste des colonnes */}
+
+ {columns.map((column) => (
+
+ ))}
+
+
+ {/* Footer */}
+
+
+ + {visibleCount} colonne{visibleCount > 1 ? 's' : ''} visible{visibleCount > 1 ? 's' : ''} +
+
+
+ );
+ }
+
+ // Si erreur
+ if (status === 'failed') {
+ return (
+
+
+ Entreprise
+
+
+
+
+
+
+ );
+ }
+
+
+ // console.log("gateways : ",gateways);
+
+ // Si aucune gateway - afficher directement le bouton Ajouter
+ if (gateways.length === 0) {
+ return (
+
+
+ Entreprise
+
+
+
+
+
+ setIsCreateModalOpen(false)}
+ />
+
+ );
+ }
+
+ // Affichage normal avec dropdown
+ return (
+
+
+ Entreprise
+
+
+
+
+
+ {/* */}
+
+
+
+
+
+ {societe?.raison_sociale || ""}
+
+ {societe?.forme_juridique && (
+
+ {societe.forme_juridique}
+
+ )}
+
+
+
+ Défaut
+
+
+
+
+
+
+
+
+
+
+
+ Vos organisations
+
+
+ {gateways.map((gateway) => (
+ handleSelectGateway(gateway)}
+ className={cn(
+ 'flex items-center gap-3 px-2 py-2.5 rounded-lg cursor-pointer transition-colors outline-none',
+ selectedGateway?.id === gateway.id ? 'bg-green-50/50' : 'hover:bg-gray-50'
+ )}
+ >
+
+ ))}
+
+ {/* Séparateur et bouton Ajouter */}
+
+ */}
+
+
+
+ setIsCreateModalOpen(false)}
+ />
+
+
+ );
+};
+
+export default CompanySelector;
\ No newline at end of file
diff --git a/src/components/common/ExportDropdown.tsx b/src/components/common/ExportDropdown.tsx
new file mode 100644
index 0000000..073bd46
--- /dev/null
+++ b/src/components/common/ExportDropdown.tsx
@@ -0,0 +1,353 @@
+import React, { useState, useRef } from 'react';
+import { Download, FileText, FileSpreadsheet, Printer, ChevronDown, File } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ColumnConfig } from '@/components/common/ColumnSelector';
+import { Button } from '../ui/buttonTsx';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface ExportColumnConfig {
+ key: string;
+ label: string;
+ format?: (value: any, row: any) => string;
+}
+
+interface ExportDropdownProps {
+ data: any[];
+ columns: ColumnConfig[]; // Colonnes du ColumnSelector
+ columnFormatters?: Record
+
+ Entreprise
+
+
+
+
+
+
+ {selectedGateway?.name}
+
+
+
+
+
+
+
+ {gateway.name}
+
+ {gateway.sage_company && (
+
+ {gateway.sage_company}
+
+ )}
+
+
+ {gateway.is_default && selectedGateway?.id !== gateway.id && (
+
+ Défaut
+
+ )}
+
+ {selectedGateway?.id === gateway.id && (
+
+
+
+ Ajouter une entreprise
+
+ ${title}
+ +
+ {/* Bouton principal */}
+
+
+ {/* Dropdown menu */}
+
+ {isOpen && (
+
+
+ )}
+
+
+ );
+};
+
+export default ExportDropdown;
\ No newline at end of file
diff --git a/src/components/common/InfoTooltip.jsx b/src/components/common/InfoTooltip.jsx
new file mode 100644
index 0000000..125b260
--- /dev/null
+++ b/src/components/common/InfoTooltip.jsx
@@ -0,0 +1,42 @@
+
+import React from 'react';
+import { Info } from 'lucide-react';
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '@/components/ui/tooltip';
+
+const InfoTooltip = ({ content, source, calculation }) => {
+ return (
+
+ {exportOptions.map(({ format, label, icon: Icon }) => (
+
+ ))}
+
+
+ {/* Footer avec infos */}
+
+
+ + {data.length} ligne{data.length > 1 ? 's' : ''} +
++ {visibleColumnsCount} colonne{visibleColumnsCount > 1 ? 's' : ''} sélectionnée{visibleColumnsCount > 1 ? 's' : ''} +
+
+ {content &&
+ {content}
} + {calculation && ( +
+ Calcul
+
+ )}
+ {source && (
+ {calculation}
+
+ Source
+
+ )}
+ {source}
+
+
+
+
+
+
+ {/* Content */}
+
+
+
+
+ {/* Error Message */}
+ {error && (
+
+
+ {error}
+
+ )}
+
+ {/* Date Inputs */}
+
+
+
+
+ {/* Actions */}
+
+
+ {
+ setTempStart(e.target.value);
+ setError('');
+ }}
+ className={cn(
+ "w-full px-3 py-2.5 bg-white dark:bg-gray-900 border rounded-xl outline-none transition-all text-sm",
+ "border-gray-200 dark:border-gray-700",
+ "focus:ring-2 focus:ring-[#007E45]/20 focus:border-[#007E45]",
+ "dark:text-white dark:[color-scheme:dark]"
+ )}
+ />
+
+
+
+ {
+ setTempEnd(e.target.value);
+ setError('');
+ }}
+ className={cn(
+ "w-full px-3 py-2.5 bg-white dark:bg-gray-900 border rounded-xl outline-none transition-all text-sm",
+ "border-gray-200 dark:border-gray-700",
+ "focus:ring-2 focus:ring-[#007E45]/20 focus:border-[#007E45]",
+ "dark:text-white dark:[color-scheme:dark]"
+ )}
+ />
+
+
+
+
+
+
+ {/* New Sage Logo image */}
+ 
+
+ );
+};
+
+export default ProductLogo;
diff --git a/src/components/document-entry/DocumentHeader.jsx b/src/components/document-entry/DocumentHeader.jsx
new file mode 100644
index 0000000..4e0cad0
--- /dev/null
+++ b/src/components/document-entry/DocumentHeader.jsx
@@ -0,0 +1,207 @@
+import React from 'react';
+import { useDisplayMode } from '@/context/DisplayModeContext';
+import { ArrowLeft, Save, Eye, EyeOff, Maximize2, Minimize2, MoreVertical } from 'lucide-react';
+import StatusBadge from '@/components/StatusBadge';
+import ClientSearchInput from '@/components/inputs/ClientSearchInput';
+import RepresentativeSearchInput from '@/components/inputs/RepresentativeSearchInput';
+import { Input } from '@/components/FormModal';
+import { cn } from '@/lib/utils';
+import PrimaryButton from '@/components/PrimaryButton';
+import { useNavigate } from 'react-router-dom';
+
+const DocumentHeader = ({
+ documentNumber,
+ status,
+ client,
+ onClientChange,
+ onCreateClient,
+ date,
+ onDateChange,
+ dueDate,
+ onDueDateChange,
+ reference,
+ onReferenceChange,
+ representative,
+ onRepresentativeChange,
+ isEditMode,
+ isNew,
+ onSave,
+ onCancel,
+ onEdit,
+ backPath,
+ actions
+}) => {
+ const { displayMode, toggleDisplayMode, isPdfPreviewVisible, togglePdfPreview } = useDisplayMode();
+ const navigate = useNavigate();
+ const isCompact = displayMode === 'compact';
+
+ return (
+
+
+ );
+};
+
+export default DocumentHeader;
\ No newline at end of file
diff --git a/src/components/document-entry/DocumentLinesTable.jsx b/src/components/document-entry/DocumentLinesTable.jsx
new file mode 100644
index 0000000..fb76cdc
--- /dev/null
+++ b/src/components/document-entry/DocumentLinesTable.jsx
@@ -0,0 +1,255 @@
+
+import React, { useRef } from 'react';
+import { useDisplayMode } from '@/context/DisplayModeContext';
+import { Plus, GripVertical, FilePlus, Package, PenLine, Trash2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import ArticleSearchInput from '../molecules/ArticleAutocomplete';
+
+// Helper for currency formatting
+const formatCurrency = (amount) => {
+ if (amount === undefined || amount === null) return '0,00 €';
+ return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(amount);
+};
+
+const DocumentLinesTable = ({
+ lines,
+ onChangeLine,
+ onRemoveLine,
+ onAddLine,
+ onAddManualLine,
+ onArticleSelect,
+ onCreateArticle,
+ readOnly = false
+}) => {
+ const { displayMode } = useDisplayMode();
+ const isCompact = displayMode === 'compact';
+
+ const toggleMode = (line) => {
+ const isCurrentlyManual = line.type === 'manual' || (!line.code && !line.type);
+ const newType = isCurrentlyManual ? 'article' : 'manual';
+ onChangeLine(line.id, 'type', newType);
+ if (newType === 'manual') onChangeLine(line.id, 'code', '');
+ };
+
+ return (
+
+
+
+
+ {/* Main Info Area - Optimized Grid/Flex */}
+
+
+
+ {/* Row 1: Title & Primary Fields */}
+
+
+ {/* Right Section: Actions & Controls */}
+
+ {/* Back & Title */}
+
+
+ {/* Row 2: Secondary Fields (Collapsible or always visible based on design) */}
+ {isEditMode && (
+
+
+
+
+
+
+ {/* Client Field - Dominant */}
+
+
+
+
+ {documentNumber}
+
+ {isEditMode ? (
+
+
+ {/* Date & Rep Fields - Compact */}
+
+
+ ) : (
+
+ Client
+
+ {client ? (client.company || `${client.firstName} ${client.lastName}`) : '—'}
+
+
+ )}
+
+
+
+ {isEditMode ? (
+
+ ) : (
+
+
+ Date
+ {new Date(date).toLocaleDateString()}
+
+ )}
+
+ {isEditMode ? (
+
+
+ Commercial
+
+ {representative ? `${representative.firstName} ${representative.lastName}` : '—'}
+
+
+ )}
+
+
+ )}
+
+
+
+
+
+
+
+
+ {/* View Controls */}
+
+
+
+
+
+
+
+ {/* Primary Actions */}
+ {!isEditMode && !isNew ? (
+ <>
+ {actions}
+
+
+ ) : (
+
+
+
+ Enregistrer
+
+
+ )}
+
+ {/* Table Header - Sticky */}
+
+
+
+ {/* Table Body */}
+
+ {!readOnly && } {/* Grip */}
+ {/* Mode Toggle */}
+
+ Désignation
+ Description détaillée
+ Qté
+ P.U. HT
+ Rem. %
+ TVA
+ Total HT
+ {/* Actions */}
+
+ {lines.map((line, index) => {
+ const isManual = line.type === 'manual' || (!line.code && line.type === 'manual');
+
+ return (
+
+ {/* Drag Handle */}
+ {!readOnly && (
+
+
+ )}
+
+ {/* Mode Toggle */}
+ {!readOnly && (
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Designation (Article or Manual Title) */}
+ Mode: {isManual ? 'Libre' : 'Article'}
+
+ {readOnly ? (
+ onChangeLine(line.id, 'designation', val)}
+ onArticleSelect={(article) => onArticleSelect(line.id, article)}
+ onCreateArticle={onCreateArticle}
+ placeholder="Rechercher article..."
+ />
+ )
+ )}
+
+
+ {/* Description (Textarea) */}
+
+ {line.designation || line.code || '—'}
+
+ ) : (
+ isManual ? (
+ onChangeLine(line.id, 'designation', e.target.value)}
+ className="w-full bg-transparent border-b border-transparent focus:border-[#2A6F4F] focus:ring-0 p-0 py-1 text-sm font-medium"
+ placeholder="Titre..."
+ />
+ ) : (
+
+ {readOnly ? (
+
+ {line.description}
+
+ ) : (
+