Initial commit - Facturation SANTINOVA
This commit is contained in:
manus-admin
13
frontend/index.html
Normal file
13
frontend/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Facturation SANTINOVA</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
3035
frontend/package-lock.json
generated
Normal file
3035
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
31
frontend/package.json
Normal file
31
frontend/package.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "facturation-santinova-frontend",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.1.5",
|
||||
"axios": "^1.7.7",
|
||||
"chart.js": "^4.4.4",
|
||||
"react": "^18.3.1",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hot-toast": "^2.4.1",
|
||||
"react-router-dom": "^6.26.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.5",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.4.45",
|
||||
"tailwindcss": "^3.4.10",
|
||||
"typescript": "^5.6.2",
|
||||
"vite": "^5.4.3"
|
||||
}
|
||||
}
|
||||
6
frontend/postcss.config.js
Normal file
6
frontend/postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
80
frontend/src/App.tsx
Normal file
80
frontend/src/App.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import { Toaster } from 'react-hot-toast';
|
||||
import { AuthProvider, useAuth } from './context/AuthContext';
|
||||
import Layout from './components/Layout';
|
||||
import Login from './pages/Login';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import InvoiceList from './pages/InvoiceList';
|
||||
import InvoiceDetail from './pages/InvoiceDetail';
|
||||
import InvoiceUpload from './pages/InvoiceUpload';
|
||||
import SupplierList from './pages/SupplierList';
|
||||
import PurchaseOrderList from './pages/PurchaseOrderList';
|
||||
import PurchaseOrderDetail from './pages/PurchaseOrderDetail';
|
||||
import Exports from './pages/Exports';
|
||||
import UserList from './pages/UserList';
|
||||
|
||||
function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
||||
const { user, isLoading } = useAuth();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="text-center">
|
||||
<svg className="animate-spin h-10 w-10 text-santinova-600 mx-auto mb-4" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
<p className="text-gray-500">Chargement...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return <Navigate to="/login" replace />;
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
function AdminRoute({ children }: { children: React.ReactNode }) {
|
||||
const { user } = useAuth();
|
||||
if (user?.role !== 'admin') {
|
||||
return <Navigate to="/" replace />;
|
||||
}
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
function AppRoutes() {
|
||||
const { user } = useAuth();
|
||||
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/login" element={user ? <Navigate to="/" replace /> : <Login />} />
|
||||
<Route path="/" element={<ProtectedRoute><Layout /></ProtectedRoute>}>
|
||||
<Route index element={<Dashboard />} />
|
||||
<Route path="invoices" element={<InvoiceList />} />
|
||||
<Route path="invoices/upload" element={<InvoiceUpload />} />
|
||||
<Route path="invoices/:id" element={<InvoiceDetail />} />
|
||||
<Route path="suppliers" element={<SupplierList />} />
|
||||
<Route path="purchase-orders" element={<PurchaseOrderList />} />
|
||||
<Route path="purchase-orders/:id" element={<PurchaseOrderDetail />} />
|
||||
<Route path="exports" element={<Exports />} />
|
||||
<Route path="users" element={<AdminRoute><UserList /></AdminRoute>} />
|
||||
</Route>
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<AuthProvider>
|
||||
<Toaster position="top-right" toastOptions={{ duration: 4000 }} />
|
||||
<AppRoutes />
|
||||
</AuthProvider>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
166
frontend/src/components/Layout.tsx
Normal file
166
frontend/src/components/Layout.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useLocation, Outlet, useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Tableau de bord', href: '/', icon: HomeIcon },
|
||||
{ name: 'Factures', href: '/invoices', icon: DocumentIcon },
|
||||
{ name: 'Fournisseurs', href: '/suppliers', icon: BuildingIcon },
|
||||
{ name: 'Bons de commande', href: '/purchase-orders', icon: ClipboardIcon },
|
||||
{ name: 'Exports', href: '/exports', icon: DownloadIcon },
|
||||
];
|
||||
|
||||
const adminNav = [
|
||||
{ name: 'Utilisateurs', href: '/users', icon: UsersIcon },
|
||||
];
|
||||
|
||||
function HomeIcon() {
|
||||
return (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function DocumentIcon() {
|
||||
return (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function BuildingIcon() {
|
||||
return (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function ClipboardIcon() {
|
||||
return (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25Z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function DownloadIcon() {
|
||||
return (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function UsersIcon() {
|
||||
return (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Layout() {
|
||||
const { user, logout } = useAuth();
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
navigate('/login');
|
||||
};
|
||||
|
||||
const allNav = user?.role === 'admin' ? [...navigation, ...adminNav] : navigation;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex">
|
||||
{/* Mobile sidebar overlay */}
|
||||
{sidebarOpen && (
|
||||
<div className="fixed inset-0 z-40 lg:hidden" onClick={() => setSidebarOpen(false)}>
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-75" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sidebar */}
|
||||
<aside className={`fixed inset-y-0 left-0 z-50 w-64 bg-santinova-900 transform transition-transform duration-200 ease-in-out lg:translate-x-0 lg:static lg:inset-0 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-3 px-6 py-5 border-b border-santinova-800">
|
||||
<div className="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
|
||||
<span className="text-santinova-900 font-bold text-sm">S</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-white font-bold text-lg leading-tight">SANTINOVA</h1>
|
||||
<p className="text-santinova-300 text-xs">Facturation</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
|
||||
{allNav.map((item) => {
|
||||
const isActive = location.pathname === item.href ||
|
||||
(item.href !== '/' && location.pathname.startsWith(item.href));
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
|
||||
isActive
|
||||
? 'bg-santinova-700 text-white'
|
||||
: 'text-santinova-200 hover:bg-santinova-800 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<item.icon />
|
||||
{item.name}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* User info */}
|
||||
<div className="px-4 py-4 border-t border-santinova-800">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-santinova-600 rounded-full flex items-center justify-center text-white text-sm font-medium">
|
||||
{user?.firstName?.[0]}{user?.lastName?.[0]}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-white text-sm font-medium truncate">{user?.firstName} {user?.lastName}</p>
|
||||
<p className="text-santinova-300 text-xs truncate">{user?.role}</p>
|
||||
</div>
|
||||
<button onClick={handleLogout} className="text-santinova-300 hover:text-white" title="Déconnexion">
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
{/* Top bar */}
|
||||
<header className="bg-white border-b border-gray-200 px-4 py-3 lg:px-6 flex items-center gap-4">
|
||||
<button
|
||||
className="lg:hidden text-gray-500 hover:text-gray-700"
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div className="flex-1" />
|
||||
</header>
|
||||
|
||||
{/* Page content */}
|
||||
<main className="flex-1 p-4 lg:p-6 overflow-auto">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
77
frontend/src/context/AuthContext.tsx
Normal file
77
frontend/src/context/AuthContext.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
|
||||
import { User } from '../types';
|
||||
import { authAPI } from '../services/api';
|
||||
|
||||
interface AuthContextType {
|
||||
user: User | null;
|
||||
token: string | null;
|
||||
login: (email: string, password: string) => Promise<void>;
|
||||
logout: () => void;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
||||
|
||||
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [token, setToken] = useState<string | null>(localStorage.getItem('token'));
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const savedUser = localStorage.getItem('user');
|
||||
if (token && savedUser) {
|
||||
try {
|
||||
setUser(JSON.parse(savedUser));
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
if (token) {
|
||||
authAPI.me()
|
||||
.then((res) => {
|
||||
setUser(res.data);
|
||||
localStorage.setItem('user', JSON.stringify(res.data));
|
||||
})
|
||||
.catch(() => {
|
||||
setToken(null);
|
||||
setUser(null);
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
} else {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const login = async (email: string, password: string) => {
|
||||
const res = await authAPI.login(email, password);
|
||||
const { token: newToken, user: newUser } = res.data;
|
||||
setToken(newToken);
|
||||
setUser(newUser);
|
||||
localStorage.setItem('token', newToken);
|
||||
localStorage.setItem('user', JSON.stringify(newUser));
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
setToken(null);
|
||||
setUser(null);
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ user, token, login, logout, isLoading }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAuth() {
|
||||
const context = useContext(AuthContext);
|
||||
if (!context) {
|
||||
throw new Error('useAuth must be used within an AuthProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
33
frontend/src/index.css
Normal file
33
frontend/src/index.css
Normal file
@@ -0,0 +1,33 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply bg-gray-50 text-gray-900 antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn-primary {
|
||||
@apply bg-santinova-600 hover:bg-santinova-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 inline-flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
.btn-secondary {
|
||||
@apply bg-white hover:bg-gray-50 text-gray-700 font-medium py-2 px-4 rounded-lg border border-gray-300 transition-colors duration-200 inline-flex items-center gap-2;
|
||||
}
|
||||
.btn-danger {
|
||||
@apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 inline-flex items-center gap-2;
|
||||
}
|
||||
.btn-success {
|
||||
@apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 inline-flex items-center gap-2;
|
||||
}
|
||||
.input-field {
|
||||
@apply block w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-400 focus:border-santinova-500 focus:ring-1 focus:ring-santinova-500 focus:outline-none text-sm;
|
||||
}
|
||||
.card {
|
||||
@apply bg-white rounded-xl shadow-sm border border-gray-200 p-6;
|
||||
}
|
||||
.badge {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||||
}
|
||||
}
|
||||
10
frontend/src/main.tsx
Normal file
10
frontend/src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
231
frontend/src/pages/Dashboard.tsx
Normal file
231
frontend/src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, PointElement, LineElement } from 'chart.js';
|
||||
import { Doughnut, Bar, Line } from 'react-chartjs-2';
|
||||
import { dashboardAPI } from '../services/api';
|
||||
import { DashboardData } from '../types';
|
||||
import { formatCurrency, formatDate, statusLabels, statusColors } from '../utils/helpers';
|
||||
|
||||
ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, PointElement, LineElement);
|
||||
|
||||
export default function Dashboard() {
|
||||
const [data, setData] = useState<DashboardData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadDashboard();
|
||||
}, []);
|
||||
|
||||
const loadDashboard = async () => {
|
||||
try {
|
||||
const res = await dashboardAPI.get();
|
||||
setData(res.data);
|
||||
} catch (error) {
|
||||
console.error('Erreur chargement dashboard:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<svg className="animate-spin h-8 w-8 text-santinova-600" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) return <p className="text-gray-500">Erreur de chargement</p>;
|
||||
|
||||
const statusChartData = {
|
||||
labels: data.statusCounts.map(s => statusLabels[s.status] || s.status),
|
||||
datasets: [{
|
||||
data: data.statusCounts.map(s => s.count),
|
||||
backgroundColor: ['#3b82f6', '#f59e0b', '#6366f1', '#22c55e', '#10b981', '#ef4444', '#9ca3af'],
|
||||
borderWidth: 0,
|
||||
}],
|
||||
};
|
||||
|
||||
const monthlyChartData = {
|
||||
labels: data.monthlyEvolution.map(m => {
|
||||
const [year, month] = m.month.split('-');
|
||||
return `${month}/${year.slice(2)}`;
|
||||
}),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Montant TTC',
|
||||
data: data.monthlyEvolution.map(m => m.total),
|
||||
borderColor: '#2563eb',
|
||||
backgroundColor: 'rgba(37, 99, 235, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const supplierChartData = {
|
||||
labels: data.topSuppliers.map(s => s.supplier_name?.length > 20 ? s.supplier_name.slice(0, 20) + '...' : s.supplier_name),
|
||||
datasets: [{
|
||||
label: 'Montant total',
|
||||
data: data.topSuppliers.map(s => s.total),
|
||||
backgroundColor: '#2563eb',
|
||||
borderRadius: 6,
|
||||
}],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Tableau de bord</h1>
|
||||
<Link to="/invoices/upload" className="btn-primary">
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
Nouvelle facture
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* KPI Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Total factures actives</p>
|
||||
<p className="text-2xl font-bold text-gray-900 mt-1">{data.activeTotals.count}</p>
|
||||
<p className="text-sm text-gray-500 mt-1">{formatCurrency(data.activeTotals.total)}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-santinova-100 rounded-xl flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-santinova-600" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">En retard</p>
|
||||
<p className="text-2xl font-bold text-red-600 mt-1">{data.overdue.count}</p>
|
||||
<p className="text-sm text-red-500 mt-1">{formatCurrency(data.overdue.total)}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-red-600" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Échéance 7 jours</p>
|
||||
<p className="text-2xl font-bold text-amber-600 mt-1">{data.dueSoon.count}</p>
|
||||
<p className="text-sm text-amber-500 mt-1">{formatCurrency(data.dueSoon.total)}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-amber-600" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Échéance 30 jours</p>
|
||||
<p className="text-2xl font-bold text-gray-900 mt-1">{data.dueMonth.count}</p>
|
||||
<p className="text-sm text-gray-500 mt-1">{formatCurrency(data.dueMonth.total)}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-gray-600" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pending actions */}
|
||||
{data.pendingForUser.length > 0 && (
|
||||
<div className="card bg-santinova-50 border-santinova-200">
|
||||
<h3 className="font-semibold text-santinova-900 mb-3">Actions en attente</h3>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{data.pendingForUser.map((p, i) => (
|
||||
<div key={i} className="flex items-center gap-2">
|
||||
<span className="inline-flex items-center justify-center w-8 h-8 bg-santinova-600 text-white rounded-full text-sm font-bold">
|
||||
{p.count}
|
||||
</span>
|
||||
<span className="text-sm text-santinova-800">{p.action}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Charts */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="card">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Répartition par statut</h3>
|
||||
<div className="h-64 flex items-center justify-center">
|
||||
<Doughnut data={statusChartData} options={{ responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, padding: 8, font: { size: 11 } } } } }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card lg:col-span-2">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Évolution mensuelle</h3>
|
||||
<div className="h-64">
|
||||
<Line data={monthlyChartData} options={{ responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { callback: (v) => `${Number(v).toLocaleString('fr-FR')} €` } } } }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div className="card">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Top fournisseurs</h3>
|
||||
<div className="h-64">
|
||||
<Bar data={supplierChartData} options={{ responsive: true, maintainAspectRatio: false, indexAxis: 'y', plugins: { legend: { display: false } }, scales: { x: { ticks: { callback: (v) => `${Number(v).toLocaleString('fr-FR')} €` } } } }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent invoices */}
|
||||
<div className="card">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-gray-900">Dernières factures</h3>
|
||||
<Link to="/invoices" className="text-sm text-santinova-600 hover:text-santinova-700">Voir tout</Link>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{data.recentInvoices.map((inv) => (
|
||||
<Link
|
||||
key={inv.id}
|
||||
to={`/invoices/${inv.id}`}
|
||||
className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
{inv.invoiceNumber || `#${inv.id}`}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 truncate">{inv.supplierName || 'Fournisseur inconnu'}</p>
|
||||
</div>
|
||||
<div className="text-right ml-4">
|
||||
<p className="text-sm font-medium text-gray-900">{formatCurrency(inv.amountTTC)}</p>
|
||||
<span className={`badge ${statusColors[inv.status] || 'bg-gray-100 text-gray-800'}`}>
|
||||
{statusLabels[inv.status] || inv.status}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
{data.recentInvoices.length === 0 && (
|
||||
<p className="text-sm text-gray-500 text-center py-4">Aucune facture</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
178
frontend/src/pages/Exports.tsx
Normal file
178
frontend/src/pages/Exports.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
import React, { useState } from 'react';
|
||||
import { exportAPI } from '../services/api';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
export default function Exports() {
|
||||
const [filters, setFilters] = useState({
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
status: '',
|
||||
});
|
||||
const [loading, setLoading] = useState('');
|
||||
|
||||
const handleExportCSV = async () => {
|
||||
setLoading('csv');
|
||||
try {
|
||||
const res = await exportAPI.csv(filters);
|
||||
const blob = new Blob([res.data], { type: 'text/csv;charset=utf-8' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `export_factures_${new Date().toISOString().slice(0, 10)}.csv`;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
toast.success('Export CSV téléchargé');
|
||||
} catch (error) {
|
||||
toast.error('Erreur d\'export');
|
||||
} finally {
|
||||
setLoading('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleExportExcel = async () => {
|
||||
setLoading('excel');
|
||||
try {
|
||||
const res = await exportAPI.excel(filters);
|
||||
const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `export_factures_${new Date().toISOString().slice(0, 10)}.xlsx`;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
toast.success('Export Excel téléchargé');
|
||||
} catch (error) {
|
||||
toast.error('Erreur d\'export');
|
||||
} finally {
|
||||
setLoading('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleExportCEGI = async () => {
|
||||
setLoading('cegi');
|
||||
try {
|
||||
const res = await exportAPI.cegi(filters);
|
||||
toast.success(`Export CEGI préparé: ${res.data.count} écritures`);
|
||||
// Download as JSON for now
|
||||
const blob = new Blob([JSON.stringify(res.data, null, 2)], { type: 'application/json' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `export_cegi_${new Date().toISOString().slice(0, 10)}.json`;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
} catch (error) {
|
||||
toast.error('Erreur d\'export');
|
||||
} finally {
|
||||
setLoading('');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Exports comptables</h1>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="card">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Filtres d'export</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Date début</label>
|
||||
<input
|
||||
type="date"
|
||||
value={filters.startDate}
|
||||
onChange={(e) => setFilters({ ...filters, startDate: e.target.value })}
|
||||
className="input-field"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Date fin</label>
|
||||
<input
|
||||
type="date"
|
||||
value={filters.endDate}
|
||||
onChange={(e) => setFilters({ ...filters, endDate: e.target.value })}
|
||||
className="input-field"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Statut</label>
|
||||
<select
|
||||
value={filters.status}
|
||||
onChange={(e) => setFilters({ ...filters, status: e.target.value })}
|
||||
className="input-field"
|
||||
>
|
||||
<option value="">Tous</option>
|
||||
<option value="approuvee">Approuvées</option>
|
||||
<option value="payee">Payées</option>
|
||||
<option value="validee">Validées</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Export options */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* CSV */}
|
||||
<div className="card text-center">
|
||||
<div className="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Export CSV</h3>
|
||||
<p className="text-sm text-gray-500 mb-4">
|
||||
Format CSV compatible avec la plupart des logiciels comptables et tableurs.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleExportCSV}
|
||||
disabled={loading === 'csv'}
|
||||
className="btn-primary w-full justify-center"
|
||||
>
|
||||
{loading === 'csv' ? 'Export en cours...' : 'Télécharger CSV'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Excel */}
|
||||
<div className="card text-center">
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-blue-600" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 13.125c0-.621.504-1.125 1.125-1.125" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Export Excel</h3>
|
||||
<p className="text-sm text-gray-500 mb-4">
|
||||
Format XLSX avec mise en forme pour analyse dans Microsoft Excel ou LibreOffice.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleExportExcel}
|
||||
disabled={loading === 'excel'}
|
||||
className="btn-primary w-full justify-center"
|
||||
>
|
||||
{loading === 'excel' ? 'Export en cours...' : 'Télécharger Excel'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* CEGI */}
|
||||
<div className="card text-center border-2 border-dashed border-gray-300">
|
||||
<div className="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-purple-600" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">CEGI Compta First</h3>
|
||||
<p className="text-sm text-gray-500 mb-4">
|
||||
Export préparatoire pour l'intégration future avec CEGI Compta First.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleExportCEGI}
|
||||
disabled={loading === 'cegi'}
|
||||
className="btn-secondary w-full justify-center"
|
||||
>
|
||||
{loading === 'cegi' ? 'Export en cours...' : 'Préparer export CEGI'}
|
||||
</button>
|
||||
<p className="text-xs text-gray-400 mt-2">Intégration en cours de développement</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
475
frontend/src/pages/InvoiceDetail.tsx
Normal file
475
frontend/src/pages/InvoiceDetail.tsx
Normal file
@@ -0,0 +1,475 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { invoiceAPI, purchaseOrderAPI } from '../services/api';
|
||||
import { Invoice, PurchaseOrder } from '../types';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { formatCurrency, formatDate, formatDateTime, statusLabels, statusColors, sourceLabels, matchingLabels, matchingColors } from '../utils/helpers';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
export default function InvoiceDetail() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
const [invoice, setInvoice] = useState<Invoice | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [editData, setEditData] = useState<any>({});
|
||||
const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrder[]>([]);
|
||||
const [selectedPO, setSelectedPO] = useState<number | ''>('');
|
||||
const [statusNote, setStatusNote] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (id) loadInvoice();
|
||||
}, [id]);
|
||||
|
||||
const loadInvoice = async () => {
|
||||
try {
|
||||
const res = await invoiceAPI.get(parseInt(id!));
|
||||
setInvoice(res.data);
|
||||
setEditData({
|
||||
invoiceNumber: res.data.invoiceNumber || '',
|
||||
supplierName: res.data.supplierName || '',
|
||||
supplierSiret: res.data.supplierSiret || '',
|
||||
supplierAddress: res.data.supplierAddress || '',
|
||||
invoiceDate: res.data.invoiceDate ? res.data.invoiceDate.slice(0, 10) : '',
|
||||
dueDate: res.data.dueDate ? res.data.dueDate.slice(0, 10) : '',
|
||||
amountHT: res.data.amountHT || '',
|
||||
amountTVA: res.data.amountTVA || '',
|
||||
amountTTC: res.data.amountTTC || '',
|
||||
tvaRate: res.data.tvaRate || '',
|
||||
notes: res.data.notes || '',
|
||||
});
|
||||
|
||||
// Load POs for matching
|
||||
const poRes = await purchaseOrderAPI.list({ limit: 100 });
|
||||
setPurchaseOrders(poRes.data.data);
|
||||
} catch (error) {
|
||||
toast.error('Erreur de chargement');
|
||||
navigate('/invoices');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
await invoiceAPI.update(parseInt(id!), editData);
|
||||
toast.success('Facture mise à jour');
|
||||
setEditing(false);
|
||||
loadInvoice();
|
||||
} catch (error: any) {
|
||||
toast.error(error.response?.data?.error || 'Erreur de mise à jour');
|
||||
}
|
||||
};
|
||||
|
||||
const handleStatusChange = async (newStatus: string) => {
|
||||
try {
|
||||
await invoiceAPI.changeStatus(parseInt(id!), newStatus, statusNote);
|
||||
toast.success(`Statut mis à jour: ${statusLabels[newStatus]}`);
|
||||
setStatusNote('');
|
||||
loadInvoice();
|
||||
} catch (error: any) {
|
||||
toast.error(error.response?.data?.error || 'Erreur de changement de statut');
|
||||
}
|
||||
};
|
||||
|
||||
const handleMatch = async () => {
|
||||
if (!selectedPO) return;
|
||||
try {
|
||||
const res = await invoiceAPI.match(parseInt(id!), selectedPO as number);
|
||||
toast.success(`Rapprochement effectué: ${res.data.matchingStatus === 'rapproche' ? 'OK' : 'Écart détecté'}`);
|
||||
loadInvoice();
|
||||
} catch (error: any) {
|
||||
toast.error(error.response?.data?.error || 'Erreur de rapprochement');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!confirm('Supprimer cette facture ?')) return;
|
||||
try {
|
||||
await invoiceAPI.delete(parseInt(id!));
|
||||
toast.success('Facture supprimée');
|
||||
navigate('/invoices');
|
||||
} catch (error: any) {
|
||||
toast.error(error.response?.data?.error || 'Erreur de suppression');
|
||||
}
|
||||
};
|
||||
|
||||
const getAvailableActions = () => {
|
||||
if (!invoice || !user) return [];
|
||||
const actions: Array<{ status: string; label: string; color: string }> = [];
|
||||
const role = user.role;
|
||||
const s = invoice.status;
|
||||
|
||||
if (s === 'recue' && ['operateur', 'validateur', 'approbateur', 'admin'].includes(role)) {
|
||||
actions.push({ status: 'en_verification', label: 'Passer en vérification', color: 'btn-primary' });
|
||||
}
|
||||
if (s === 'en_verification' && ['validateur', 'approbateur', 'admin'].includes(role)) {
|
||||
actions.push({ status: 'validee', label: 'Valider', color: 'btn-success' });
|
||||
}
|
||||
if (s === 'validee' && ['approbateur', 'admin'].includes(role)) {
|
||||
actions.push({ status: 'approuvee', label: 'Approuver', color: 'btn-success' });
|
||||
}
|
||||
if (s === 'approuvee' && role === 'admin') {
|
||||
actions.push({ status: 'payee', label: 'Marquer comme payée', color: 'btn-success' });
|
||||
}
|
||||
if (s === 'payee' && role === 'admin') {
|
||||
actions.push({ status: 'archivee', label: 'Archiver', color: 'btn-secondary' });
|
||||
}
|
||||
if (!['payee', 'archivee', 'rejetee'].includes(s) && ['validateur', 'approbateur', 'admin'].includes(role)) {
|
||||
actions.push({ status: 'rejetee', label: 'Rejeter', color: 'btn-danger' });
|
||||
}
|
||||
if (s === 'rejetee' && ['operateur', 'validateur', 'approbateur', 'admin'].includes(role)) {
|
||||
actions.push({ status: 'recue', label: 'Remettre en réception', color: 'btn-secondary' });
|
||||
}
|
||||
|
||||
return actions;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<svg className="animate-spin h-8 w-8 text-santinova-600" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!invoice) return null;
|
||||
|
||||
const actions = getAvailableActions();
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={() => navigate('/invoices')} className="text-gray-400 hover:text-gray-600">
|
||||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
||||
</svg>
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
Facture {invoice.invoiceNumber || `#${invoice.id}`}
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500">{invoice.supplierName || 'Fournisseur inconnu'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`badge text-sm px-3 py-1 ${statusColors[invoice.status]}`}>
|
||||
{statusLabels[invoice.status]}
|
||||
</span>
|
||||
{!editing ? (
|
||||
<button onClick={() => setEditing(true)} className="btn-secondary text-sm">Modifier</button>
|
||||
) : (
|
||||
<>
|
||||
<button onClick={handleSave} className="btn-primary text-sm">Enregistrer</button>
|
||||
<button onClick={() => setEditing(false)} className="btn-secondary text-sm">Annuler</button>
|
||||
</>
|
||||
)}
|
||||
{user?.role === 'admin' && (
|
||||
<button onClick={handleDelete} className="btn-danger text-sm">Supprimer</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Workflow actions */}
|
||||
{actions.length > 0 && (
|
||||
<div className="card bg-gray-50">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">Actions de workflow</h3>
|
||||
<div className="flex flex-wrap gap-3 items-end">
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<label className="block text-xs text-gray-500 mb-1">Note (optionnelle)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={statusNote}
|
||||
onChange={(e) => setStatusNote(e.target.value)}
|
||||
placeholder="Ajouter une note..."
|
||||
className="input-field text-sm"
|
||||
/>
|
||||
</div>
|
||||
{actions.map(action => (
|
||||
<button
|
||||
key={action.status}
|
||||
onClick={() => handleStatusChange(action.status)}
|
||||
className={`${action.color} text-sm`}
|
||||
>
|
||||
{action.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Main info */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<div className="card">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Informations générales</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">N° Facture</label>
|
||||
{editing ? (
|
||||
<input type="text" value={editData.invoiceNumber} onChange={(e) => setEditData({ ...editData, invoiceNumber: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-sm font-medium">{invoice.invoiceNumber || '-'}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Fournisseur</label>
|
||||
{editing ? (
|
||||
<input type="text" value={editData.supplierName} onChange={(e) => setEditData({ ...editData, supplierName: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-sm font-medium">{invoice.supplierName || '-'}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">SIRET</label>
|
||||
{editing ? (
|
||||
<input type="text" value={editData.supplierSiret} onChange={(e) => setEditData({ ...editData, supplierSiret: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-sm">{invoice.supplierSiret || '-'}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Adresse fournisseur</label>
|
||||
{editing ? (
|
||||
<input type="text" value={editData.supplierAddress} onChange={(e) => setEditData({ ...editData, supplierAddress: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-sm">{invoice.supplierAddress || '-'}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Date de facture</label>
|
||||
{editing ? (
|
||||
<input type="date" value={editData.invoiceDate} onChange={(e) => setEditData({ ...editData, invoiceDate: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-sm">{formatDate(invoice.invoiceDate)}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Date d'échéance</label>
|
||||
{editing ? (
|
||||
<input type="date" value={editData.dueDate} onChange={(e) => setEditData({ ...editData, dueDate: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-sm">{formatDate(invoice.dueDate)}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Amounts */}
|
||||
<div className="card">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Montants</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Montant HT</label>
|
||||
{editing ? (
|
||||
<input type="number" step="0.01" value={editData.amountHT} onChange={(e) => setEditData({ ...editData, amountHT: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-lg font-semibold">{formatCurrency(invoice.amountHT)}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">TVA</label>
|
||||
{editing ? (
|
||||
<input type="number" step="0.01" value={editData.amountTVA} onChange={(e) => setEditData({ ...editData, amountTVA: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-lg font-semibold">{formatCurrency(invoice.amountTVA)}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Montant TTC</label>
|
||||
{editing ? (
|
||||
<input type="number" step="0.01" value={editData.amountTTC} onChange={(e) => setEditData({ ...editData, amountTTC: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-lg font-bold text-santinova-600">{formatCurrency(invoice.amountTTC)}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Taux TVA</label>
|
||||
{editing ? (
|
||||
<input type="number" step="0.01" value={editData.tvaRate} onChange={(e) => setEditData({ ...editData, tvaRate: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-sm">{invoice.tvaRate ? `${invoice.tvaRate}%` : '-'}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Invoice lines */}
|
||||
{invoice.lines && invoice.lines.length > 0 && (
|
||||
<div className="card overflow-hidden p-0">
|
||||
<div className="px-6 py-4 border-b border-gray-200">
|
||||
<h3 className="font-semibold text-gray-900">Lignes de facture</h3>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Description</th>
|
||||
<th className="text-right text-xs font-medium text-gray-500 uppercase px-6 py-3">Qté</th>
|
||||
<th className="text-right text-xs font-medium text-gray-500 uppercase px-6 py-3">P.U.</th>
|
||||
<th className="text-right text-xs font-medium text-gray-500 uppercase px-6 py-3">HT</th>
|
||||
<th className="text-right text-xs font-medium text-gray-500 uppercase px-6 py-3">TVA</th>
|
||||
<th className="text-right text-xs font-medium text-gray-500 uppercase px-6 py-3">TTC</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{invoice.lines.map((line, idx) => (
|
||||
<tr key={idx}>
|
||||
<td className="px-6 py-3 text-sm">{line.description || '-'}</td>
|
||||
<td className="px-6 py-3 text-sm text-right">{line.quantity || '-'}</td>
|
||||
<td className="px-6 py-3 text-sm text-right">{line.unitPrice ? formatCurrency(line.unitPrice) : '-'}</td>
|
||||
<td className="px-6 py-3 text-sm text-right">{line.amountHT ? formatCurrency(line.amountHT) : '-'}</td>
|
||||
<td className="px-6 py-3 text-sm text-right">{line.amountTVA ? formatCurrency(line.amountTVA) : '-'}</td>
|
||||
<td className="px-6 py-3 text-sm text-right font-medium">{line.amountTTC ? formatCurrency(line.amountTTC) : '-'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Notes */}
|
||||
<div className="card">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">Notes</h3>
|
||||
{editing ? (
|
||||
<textarea
|
||||
value={editData.notes}
|
||||
onChange={(e) => setEditData({ ...editData, notes: e.target.value })}
|
||||
className="input-field"
|
||||
rows={3}
|
||||
/>
|
||||
) : (
|
||||
<p className="text-sm text-gray-600">{invoice.notes || 'Aucune note'}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* File preview */}
|
||||
<div className="card">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">Document original</h3>
|
||||
{invoice.filePath ? (
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 mb-2">{invoice.originalFileName}</p>
|
||||
<a
|
||||
href={`/api/invoices/${invoice.id}/file`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="btn-secondary text-sm w-full justify-center"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
</svg>
|
||||
Voir le document
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-gray-400">Aucun document</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="card">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">Métadonnées</h3>
|
||||
<dl className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-gray-500">Source</dt>
|
||||
<dd>{sourceLabels[invoice.source]}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-gray-500">Réception</dt>
|
||||
<dd>{formatDate(invoice.receptionDate)}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-gray-500">Confiance OCR</dt>
|
||||
<dd>{invoice.ocrConfidence ? `${invoice.ocrConfidence}%` : '-'}</dd>
|
||||
</div>
|
||||
{invoice.validatedAt && (
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-gray-500">Validée le</dt>
|
||||
<dd>{formatDateTime(invoice.validatedAt)}</dd>
|
||||
</div>
|
||||
)}
|
||||
{invoice.approvedAt && (
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-gray-500">Approuvée le</dt>
|
||||
<dd>{formatDateTime(invoice.approvedAt)}</dd>
|
||||
</div>
|
||||
)}
|
||||
{invoice.paidAt && (
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-gray-500">Payée le</dt>
|
||||
<dd>{formatDateTime(invoice.paidAt)}</dd>
|
||||
</div>
|
||||
)}
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
{/* Matching */}
|
||||
<div className="card">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">Rapprochement BC</h3>
|
||||
{invoice.purchaseOrderId ? (
|
||||
<div>
|
||||
<span className={`badge ${matchingColors[invoice.matchingStatus || 'non_rapproche']}`}>
|
||||
{matchingLabels[invoice.matchingStatus || 'non_rapproche']}
|
||||
</span>
|
||||
<p className="text-sm text-gray-600 mt-2">{invoice.matchingNotes}</p>
|
||||
<Link to={`/purchase-orders/${invoice.purchaseOrderId}`} className="text-sm text-santinova-600 hover:underline mt-1 block">
|
||||
Voir le bon de commande
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 mb-3">Non rapproché</p>
|
||||
<select
|
||||
value={selectedPO}
|
||||
onChange={(e) => setSelectedPO(e.target.value ? parseInt(e.target.value) : '')}
|
||||
className="input-field text-sm mb-2"
|
||||
>
|
||||
<option value="">Sélectionner un BC...</option>
|
||||
{purchaseOrders.map(po => (
|
||||
<option key={po.id} value={po.id}>
|
||||
{po.orderNumber} - {po.supplierName} ({formatCurrency(po.amountTTC)})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button onClick={handleMatch} disabled={!selectedPO} className="btn-primary text-sm w-full justify-center">
|
||||
Rapprocher
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Audit log */}
|
||||
{invoice.auditLog && invoice.auditLog.length > 0 && (
|
||||
<div className="card">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">Historique</h3>
|
||||
<div className="space-y-3">
|
||||
{invoice.auditLog.map((entry) => (
|
||||
<div key={entry.id} className="flex gap-3">
|
||||
<div className="w-2 h-2 bg-santinova-400 rounded-full mt-1.5 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-900">{entry.action.replace(/_/g, ' ')}</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{entry.userName && `${entry.userName} - `}{formatDateTime(entry.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
185
frontend/src/pages/InvoiceList.tsx
Normal file
185
frontend/src/pages/InvoiceList.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Link, useSearchParams } from 'react-router-dom';
|
||||
import { invoiceAPI } from '../services/api';
|
||||
import { Invoice, PaginatedResponse } from '../types';
|
||||
import { formatCurrency, formatDate, statusLabels, statusColors, sourceLabels, isOverdue, isDueSoon } from '../utils/helpers';
|
||||
|
||||
export default function InvoiceList() {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [invoices, setInvoices] = useState<Invoice[]>([]);
|
||||
const [pagination, setPagination] = useState({ total: 0, page: 1, limit: 20, totalPages: 0 });
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState(searchParams.get('search') || '');
|
||||
const [statusFilter, setStatusFilter] = useState(searchParams.get('status') || '');
|
||||
|
||||
useEffect(() => {
|
||||
loadInvoices();
|
||||
}, [searchParams]);
|
||||
|
||||
const loadInvoices = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params: any = {
|
||||
page: searchParams.get('page') || 1,
|
||||
limit: 20,
|
||||
};
|
||||
if (searchParams.get('status')) params.status = searchParams.get('status');
|
||||
if (searchParams.get('search')) params.search = searchParams.get('search');
|
||||
|
||||
const res = await invoiceAPI.list(params);
|
||||
setInvoices(res.data.data);
|
||||
setPagination(res.data.pagination);
|
||||
} catch (error) {
|
||||
console.error('Erreur chargement factures:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const params = new URLSearchParams();
|
||||
if (search) params.set('search', search);
|
||||
if (statusFilter) params.set('status', statusFilter);
|
||||
params.set('page', '1');
|
||||
setSearchParams(params);
|
||||
};
|
||||
|
||||
const handleStatusFilter = (status: string) => {
|
||||
const params = new URLSearchParams(searchParams);
|
||||
if (status) {
|
||||
params.set('status', status);
|
||||
} else {
|
||||
params.delete('status');
|
||||
}
|
||||
params.set('page', '1');
|
||||
setStatusFilter(status);
|
||||
setSearchParams(params);
|
||||
};
|
||||
|
||||
const goToPage = (page: number) => {
|
||||
const params = new URLSearchParams(searchParams);
|
||||
params.set('page', page.toString());
|
||||
setSearchParams(params);
|
||||
};
|
||||
|
||||
const statuses = ['', 'recue', 'en_verification', 'validee', 'approuvee', 'payee', 'rejetee'];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Factures</h1>
|
||||
<Link to="/invoices/upload" className="btn-primary">
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
Importer une facture
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="card">
|
||||
<form onSubmit={handleSearch} className="flex flex-wrap gap-4">
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Rechercher (n° facture, fournisseur...)"
|
||||
className="input-field"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => handleStatusFilter(e.target.value)}
|
||||
className="input-field"
|
||||
>
|
||||
<option value="">Tous les statuts</option>
|
||||
{statuses.filter(s => s).map(s => (
|
||||
<option key={s} value={s}>{statusLabels[s]}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" className="btn-primary">Rechercher</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="card overflow-hidden p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">N° Facture</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Fournisseur</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Date</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Échéance</th>
|
||||
<th className="text-right text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Montant TTC</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Statut</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Source</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{loading ? (
|
||||
<tr><td colSpan={7} className="px-6 py-12 text-center text-gray-500">Chargement...</td></tr>
|
||||
) : invoices.length === 0 ? (
|
||||
<tr><td colSpan={7} className="px-6 py-12 text-center text-gray-500">Aucune facture trouvée</td></tr>
|
||||
) : invoices.map((inv) => (
|
||||
<tr key={inv.id} className="hover:bg-gray-50 transition-colors">
|
||||
<td className="px-6 py-4">
|
||||
<Link to={`/invoices/${inv.id}`} className="text-sm font-medium text-santinova-600 hover:text-santinova-700">
|
||||
{inv.invoiceNumber || `#${inv.id}`}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<p className="text-sm text-gray-900">{inv.supplierName || '-'}</p>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-500">{formatDate(inv.invoiceDate)}</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`text-sm ${isOverdue(inv.dueDate, inv.status) ? 'text-red-600 font-medium' : isDueSoon(inv.dueDate, inv.status) ? 'text-amber-600' : 'text-gray-500'}`}>
|
||||
{formatDate(inv.dueDate)}
|
||||
{isOverdue(inv.dueDate, inv.status) && ' ⚠'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right text-sm font-medium text-gray-900">{formatCurrency(inv.amountTTC)}</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`badge ${statusColors[inv.status] || 'bg-gray-100 text-gray-800'}`}>
|
||||
{statusLabels[inv.status] || inv.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-500">{sourceLabels[inv.source] || inv.source}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{pagination.totalPages > 1 && (
|
||||
<div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-gray-50">
|
||||
<p className="text-sm text-gray-500">
|
||||
{pagination.total} facture{pagination.total > 1 ? 's' : ''} - Page {pagination.page}/{pagination.totalPages}
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => goToPage(pagination.page - 1)}
|
||||
disabled={pagination.page <= 1}
|
||||
className="btn-secondary text-sm py-1 px-3 disabled:opacity-50"
|
||||
>
|
||||
Précédent
|
||||
</button>
|
||||
<button
|
||||
onClick={() => goToPage(pagination.page + 1)}
|
||||
disabled={pagination.page >= pagination.totalPages}
|
||||
className="btn-secondary text-sm py-1 px-3 disabled:opacity-50"
|
||||
>
|
||||
Suivant
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
203
frontend/src/pages/InvoiceUpload.tsx
Normal file
203
frontend/src/pages/InvoiceUpload.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { invoiceAPI } from '../services/api';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
export default function InvoiceUpload() {
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
const [source, setSource] = useState('upload');
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [progress, setProgress] = useState<Record<string, 'pending' | 'uploading' | 'done' | 'error'>>({});
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
const droppedFiles = Array.from(e.dataTransfer.files).filter(f =>
|
||||
f.type === 'application/pdf' || f.type.startsWith('image/')
|
||||
);
|
||||
setFiles(prev => [...prev, ...droppedFiles]);
|
||||
};
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files) {
|
||||
const selectedFiles = Array.from(e.target.files);
|
||||
setFiles(prev => [...prev, ...selectedFiles]);
|
||||
}
|
||||
};
|
||||
|
||||
const removeFile = (index: number) => {
|
||||
setFiles(prev => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (files.length === 0) {
|
||||
toast.error('Veuillez sélectionner au moins un fichier');
|
||||
return;
|
||||
}
|
||||
|
||||
setUploading(true);
|
||||
const newProgress: Record<string, 'pending' | 'uploading' | 'done' | 'error'> = {};
|
||||
files.forEach(f => { newProgress[f.name] = 'pending'; });
|
||||
setProgress(newProgress);
|
||||
|
||||
let successCount = 0;
|
||||
|
||||
for (const file of files) {
|
||||
setProgress(prev => ({ ...prev, [file.name]: 'uploading' }));
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('source', source);
|
||||
|
||||
await invoiceAPI.upload(formData);
|
||||
setProgress(prev => ({ ...prev, [file.name]: 'done' }));
|
||||
successCount++;
|
||||
} catch (error: any) {
|
||||
setProgress(prev => ({ ...prev, [file.name]: 'error' }));
|
||||
toast.error(`Erreur pour ${file.name}: ${error.response?.data?.error || 'Erreur inconnue'}`);
|
||||
}
|
||||
}
|
||||
|
||||
setUploading(false);
|
||||
|
||||
if (successCount > 0) {
|
||||
toast.success(`${successCount} facture${successCount > 1 ? 's' : ''} importée${successCount > 1 ? 's' : ''} avec succès`);
|
||||
setTimeout(() => navigate('/invoices'), 1500);
|
||||
}
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes: number) => {
|
||||
if (bytes < 1024) return `${bytes} o`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} Ko`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} Mo`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto space-y-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Importer des factures</h1>
|
||||
|
||||
{/* Source selection */}
|
||||
<div className="card">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Source du document</label>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{[
|
||||
{ value: 'upload', label: 'Upload manuel', icon: '📄' },
|
||||
{ value: 'scan', label: 'Scan papier', icon: '📷' },
|
||||
{ value: 'email', label: 'Email', icon: '📧' },
|
||||
{ value: 'portail', label: 'Portail fournisseur', icon: '🌐' },
|
||||
].map(s => (
|
||||
<button
|
||||
key={s.value}
|
||||
onClick={() => setSource(s.value)}
|
||||
className={`p-3 rounded-lg border-2 text-center transition-colors ${
|
||||
source === s.value
|
||||
? 'border-santinova-500 bg-santinova-50 text-santinova-700'
|
||||
: 'border-gray-200 hover:border-gray-300 text-gray-600'
|
||||
}`}
|
||||
>
|
||||
<span className="text-2xl block mb-1">{s.icon}</span>
|
||||
<span className="text-sm font-medium">{s.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Drop zone */}
|
||||
<div
|
||||
onDrop={handleDrop}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="card border-2 border-dashed border-gray-300 hover:border-santinova-400 cursor-pointer transition-colors text-center py-12"
|
||||
>
|
||||
<svg className="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
|
||||
</svg>
|
||||
<p className="text-gray-600 font-medium">Glissez-déposez vos fichiers ici</p>
|
||||
<p className="text-sm text-gray-400 mt-1">ou cliquez pour sélectionner</p>
|
||||
<p className="text-xs text-gray-400 mt-2">PDF, JPEG, PNG, TIFF - Max 20 Mo par fichier</p>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
accept=".pdf,.jpg,.jpeg,.png,.tiff,.tif,.webp,.bmp"
|
||||
onChange={handleFileSelect}
|
||||
className="hidden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* File list */}
|
||||
{files.length > 0 && (
|
||||
<div className="card">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">Fichiers sélectionnés ({files.length})</h3>
|
||||
<div className="space-y-2">
|
||||
{files.map((file, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className="w-8 h-8 bg-santinova-100 rounded flex items-center justify-center text-santinova-600 text-xs font-medium">
|
||||
{file.name.split('.').pop()?.toUpperCase()}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">{file.name}</p>
|
||||
<p className="text-xs text-gray-500">{formatFileSize(file.size)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{progress[file.name] === 'uploading' && (
|
||||
<svg className="animate-spin h-5 w-5 text-santinova-600" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
)}
|
||||
{progress[file.name] === 'done' && (
|
||||
<svg className="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
||||
</svg>
|
||||
)}
|
||||
{progress[file.name] === 'error' && (
|
||||
<svg className="w-5 h-5 text-red-500" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
)}
|
||||
{!uploading && (
|
||||
<button onClick={() => removeFile(index)} className="text-gray-400 hover:text-red-500">
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex gap-3">
|
||||
<button
|
||||
onClick={handleUpload}
|
||||
disabled={uploading}
|
||||
className="btn-primary flex-1 justify-center"
|
||||
>
|
||||
{uploading ? 'Import en cours...' : `Importer ${files.length} fichier${files.length > 1 ? 's' : ''}`}
|
||||
</button>
|
||||
{!uploading && (
|
||||
<button onClick={() => setFiles([])} className="btn-secondary">
|
||||
Tout effacer
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Info box */}
|
||||
<div className="card bg-blue-50 border-blue-200">
|
||||
<h3 className="font-semibold text-blue-900 mb-2">Extraction automatique par IA</h3>
|
||||
<p className="text-sm text-blue-700">
|
||||
Après l'import, l'IA analysera automatiquement vos documents pour extraire les informations clés :
|
||||
fournisseur, numéro de facture, dates, montants et lignes de détail.
|
||||
Vous pourrez ensuite vérifier et corriger les données extraites.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
94
frontend/src/pages/Login.tsx
Normal file
94
frontend/src/pages/Login.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
export default function Login() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { login } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
try {
|
||||
await login(email, password);
|
||||
toast.success('Connexion réussie');
|
||||
navigate('/');
|
||||
} catch (error: any) {
|
||||
toast.error(error.response?.data?.error || 'Identifiants incorrects');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-santinova-900 via-santinova-800 to-santinova-700 px-4">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-white rounded-2xl shadow-lg mb-4">
|
||||
<span className="text-santinova-900 font-bold text-2xl">S</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white">SANTINOVA</h1>
|
||||
<p className="text-santinova-200 mt-1">Gestion de Facturation</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-xl p-8">
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-6">Connexion</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Adresse email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="input-field"
|
||||
placeholder="votre@email.com"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Mot de passe
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="input-field"
|
||||
placeholder="••••••••"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="btn-primary w-full justify-center py-2.5"
|
||||
>
|
||||
{loading ? (
|
||||
<svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
) : 'Se connecter'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-santinova-300 text-sm mt-6">
|
||||
Facturation SANTINOVA v1.0
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
242
frontend/src/pages/PurchaseOrderDetail.tsx
Normal file
242
frontend/src/pages/PurchaseOrderDetail.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { purchaseOrderAPI } from '../services/api';
|
||||
import { PurchaseOrder } from '../types';
|
||||
import { formatCurrency, formatDate, poStatusLabels, poStatusColors, statusLabels, matchingLabels } from '../utils/helpers';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
export default function PurchaseOrderDetail() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [po, setPO] = useState<PurchaseOrder | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [editData, setEditData] = useState<any>({});
|
||||
|
||||
useEffect(() => {
|
||||
if (id) loadPO();
|
||||
}, [id]);
|
||||
|
||||
const loadPO = async () => {
|
||||
try {
|
||||
const res = await purchaseOrderAPI.get(parseInt(id!));
|
||||
setPO(res.data);
|
||||
setEditData({
|
||||
orderNumber: res.data.orderNumber,
|
||||
supplierName: res.data.supplierName || '',
|
||||
orderDate: res.data.orderDate ? res.data.orderDate.slice(0, 10) : '',
|
||||
expectedDeliveryDate: res.data.expectedDeliveryDate ? res.data.expectedDeliveryDate.slice(0, 10) : '',
|
||||
amountHT: res.data.amountHT || '',
|
||||
amountTVA: res.data.amountTVA || '',
|
||||
amountTTC: res.data.amountTTC || '',
|
||||
status: res.data.status,
|
||||
description: res.data.description || '',
|
||||
notes: res.data.notes || '',
|
||||
});
|
||||
} catch (error) {
|
||||
toast.error('Erreur de chargement');
|
||||
navigate('/purchase-orders');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
await purchaseOrderAPI.update(parseInt(id!), editData);
|
||||
toast.success('Bon de commande mis à jour');
|
||||
setEditing(false);
|
||||
loadPO();
|
||||
} catch (error: any) {
|
||||
toast.error(error.response?.data?.error || 'Erreur');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!confirm('Supprimer ce bon de commande ?')) return;
|
||||
try {
|
||||
await purchaseOrderAPI.delete(parseInt(id!));
|
||||
toast.success('Bon de commande supprimé');
|
||||
navigate('/purchase-orders');
|
||||
} catch (error: any) {
|
||||
toast.error('Erreur');
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<svg className="animate-spin h-8 w-8 text-santinova-600" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!po) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={() => navigate('/purchase-orders')} className="text-gray-400 hover:text-gray-600">
|
||||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
||||
</svg>
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">BC {po.orderNumber}</h1>
|
||||
<p className="text-sm text-gray-500">{po.supplierName || 'Fournisseur inconnu'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`badge text-sm px-3 py-1 ${poStatusColors[po.status]}`}>
|
||||
{poStatusLabels[po.status]}
|
||||
</span>
|
||||
{!editing ? (
|
||||
<button onClick={() => setEditing(true)} className="btn-secondary text-sm">Modifier</button>
|
||||
) : (
|
||||
<>
|
||||
<button onClick={handleSave} className="btn-primary text-sm">Enregistrer</button>
|
||||
<button onClick={() => setEditing(false)} className="btn-secondary text-sm">Annuler</button>
|
||||
</>
|
||||
)}
|
||||
<button onClick={handleDelete} className="btn-danger text-sm">Supprimer</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<div className="card">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Informations</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">N° Commande</label>
|
||||
{editing ? (
|
||||
<input type="text" value={editData.orderNumber} onChange={(e) => setEditData({ ...editData, orderNumber: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-sm font-medium">{po.orderNumber}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Fournisseur</label>
|
||||
{editing ? (
|
||||
<input type="text" value={editData.supplierName} onChange={(e) => setEditData({ ...editData, supplierName: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-sm font-medium">{po.supplierName || '-'}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Date commande</label>
|
||||
{editing ? (
|
||||
<input type="date" value={editData.orderDate} onChange={(e) => setEditData({ ...editData, orderDate: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-sm">{formatDate(po.orderDate)}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Livraison prévue</label>
|
||||
{editing ? (
|
||||
<input type="date" value={editData.expectedDeliveryDate} onChange={(e) => setEditData({ ...editData, expectedDeliveryDate: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-sm">{formatDate(po.expectedDeliveryDate)}</p>
|
||||
)}
|
||||
</div>
|
||||
{editing && (
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">Statut</label>
|
||||
<select value={editData.status} onChange={(e) => setEditData({ ...editData, status: e.target.value })} className="input-field">
|
||||
{Object.entries(poStatusLabels).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Montants</h3>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">HT</label>
|
||||
{editing ? (
|
||||
<input type="number" step="0.01" value={editData.amountHT} onChange={(e) => setEditData({ ...editData, amountHT: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-lg font-semibold">{formatCurrency(po.amountHT)}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">TVA</label>
|
||||
{editing ? (
|
||||
<input type="number" step="0.01" value={editData.amountTVA} onChange={(e) => setEditData({ ...editData, amountTVA: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-lg font-semibold">{formatCurrency(po.amountTVA)}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">TTC</label>
|
||||
{editing ? (
|
||||
<input type="number" step="0.01" value={editData.amountTTC} onChange={(e) => setEditData({ ...editData, amountTTC: e.target.value })} className="input-field" />
|
||||
) : (
|
||||
<p className="text-lg font-bold text-santinova-600">{formatCurrency(po.amountTTC)}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">Description</h3>
|
||||
{editing ? (
|
||||
<textarea value={editData.description} onChange={(e) => setEditData({ ...editData, description: e.target.value })} className="input-field" rows={3} />
|
||||
) : (
|
||||
<p className="text-sm text-gray-600">{po.description || 'Aucune description'}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Linked invoices */}
|
||||
<div className="card">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">Factures liées</h3>
|
||||
{po.linkedInvoices && po.linkedInvoices.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{po.linkedInvoices.map((inv: any) => (
|
||||
<Link
|
||||
key={inv.id}
|
||||
to={`/invoices/${inv.id}`}
|
||||
className="block p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<p className="text-sm font-medium text-gray-900">{inv.invoiceNumber || `#${inv.id}`}</p>
|
||||
<div className="flex justify-between mt-1">
|
||||
<span className="text-xs text-gray-500">{formatCurrency(inv.amountTTC)}</span>
|
||||
<span className="text-xs text-gray-500">{statusLabels[inv.status]}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-gray-400">Aucune facture liée</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Lines */}
|
||||
{po.lines && po.lines.length > 0 && (
|
||||
<div className="card">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">Lignes de commande</h3>
|
||||
<div className="space-y-2">
|
||||
{po.lines.map((line, idx) => (
|
||||
<div key={idx} className="p-2 bg-gray-50 rounded text-sm">
|
||||
<p className="font-medium">{line.description || '-'}</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Qté: {line.quantity || '-'} | PU: {line.unitPrice ? formatCurrency(line.unitPrice) : '-'} | HT: {line.amountHT ? formatCurrency(line.amountHT) : '-'}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
188
frontend/src/pages/PurchaseOrderList.tsx
Normal file
188
frontend/src/pages/PurchaseOrderList.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { purchaseOrderAPI, supplierAPI } from '../services/api';
|
||||
import { PurchaseOrder, Supplier } from '../types';
|
||||
import { formatCurrency, formatDate, poStatusLabels, poStatusColors } from '../utils/helpers';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
export default function PurchaseOrderList() {
|
||||
const [orders, setOrders] = useState<PurchaseOrder[]>([]);
|
||||
const [suppliers, setSuppliers] = useState<Supplier[]>([]);
|
||||
const [pagination, setPagination] = useState({ total: 0, page: 1, limit: 20, totalPages: 0 });
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState('');
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [form, setForm] = useState({
|
||||
orderNumber: '', supplierId: '', supplierName: '', orderDate: new Date().toISOString().slice(0, 10),
|
||||
expectedDeliveryDate: '', amountHT: '', amountTVA: '', amountTTC: '', description: '', notes: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
loadOrders();
|
||||
loadSuppliers();
|
||||
}, []);
|
||||
|
||||
const loadOrders = async () => {
|
||||
try {
|
||||
const res = await purchaseOrderAPI.list({ search: search || undefined });
|
||||
setOrders(res.data.data);
|
||||
setPagination(res.data.pagination);
|
||||
} catch (error) {
|
||||
console.error('Erreur:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadSuppliers = async () => {
|
||||
try {
|
||||
const res = await supplierAPI.list({ active: 'true' });
|
||||
setSuppliers(res.data);
|
||||
} catch (error) {
|
||||
console.error('Erreur:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
loadOrders();
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!form.orderNumber || !form.orderDate) {
|
||||
toast.error('Numéro et date requis');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const selectedSupplier = suppliers.find(s => s.id === parseInt(form.supplierId));
|
||||
await purchaseOrderAPI.create({
|
||||
...form,
|
||||
supplierId: form.supplierId ? parseInt(form.supplierId) : null,
|
||||
supplierName: selectedSupplier?.name || form.supplierName,
|
||||
});
|
||||
toast.success('Bon de commande créé');
|
||||
setShowModal(false);
|
||||
loadOrders();
|
||||
} catch (error: any) {
|
||||
toast.error(error.response?.data?.error || 'Erreur');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Bons de commande</h1>
|
||||
<button onClick={() => { setForm({ orderNumber: '', supplierId: '', supplierName: '', orderDate: new Date().toISOString().slice(0, 10), expectedDeliveryDate: '', amountHT: '', amountTVA: '', amountTTC: '', description: '', notes: '' }); setShowModal(true); }} className="btn-primary">
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
Nouveau BC
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<form onSubmit={handleSearch} className="flex gap-4">
|
||||
<input type="text" value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Rechercher..." className="input-field flex-1" />
|
||||
<button type="submit" className="btn-primary">Rechercher</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="card overflow-hidden p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">N° Commande</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Fournisseur</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Date</th>
|
||||
<th className="text-right text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Montant TTC</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Statut</th>
|
||||
<th className="text-right text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{loading ? (
|
||||
<tr><td colSpan={6} className="px-6 py-12 text-center text-gray-500">Chargement...</td></tr>
|
||||
) : orders.length === 0 ? (
|
||||
<tr><td colSpan={6} className="px-6 py-12 text-center text-gray-500">Aucun bon de commande</td></tr>
|
||||
) : orders.map((po) => (
|
||||
<tr key={po.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4">
|
||||
<Link to={`/purchase-orders/${po.id}`} className="text-sm font-medium text-santinova-600 hover:text-santinova-700">
|
||||
{po.orderNumber}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-900">{po.supplierName || '-'}</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-500">{formatDate(po.orderDate)}</td>
|
||||
<td className="px-6 py-4 text-right text-sm font-medium text-gray-900">{formatCurrency(po.amountTTC)}</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`badge ${poStatusColors[po.status] || 'bg-gray-100 text-gray-800'}`}>
|
||||
{poStatusLabels[po.status] || po.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<Link to={`/purchase-orders/${po.id}`} className="text-santinova-600 hover:text-santinova-700 text-sm">Détails</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Create Modal */}
|
||||
{showModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50">
|
||||
<div className="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<div className="px-6 py-4 border-b border-gray-200">
|
||||
<h2 className="text-lg font-semibold">Nouveau bon de commande</h2>
|
||||
</div>
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">N° Commande *</label>
|
||||
<input type="text" value={form.orderNumber} onChange={(e) => setForm({ ...form, orderNumber: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Fournisseur</label>
|
||||
<select value={form.supplierId} onChange={(e) => setForm({ ...form, supplierId: e.target.value })} className="input-field">
|
||||
<option value="">Sélectionner...</option>
|
||||
{suppliers.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Date commande *</label>
|
||||
<input type="date" value={form.orderDate} onChange={(e) => setForm({ ...form, orderDate: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Date livraison prévue</label>
|
||||
<input type="date" value={form.expectedDeliveryDate} onChange={(e) => setForm({ ...form, expectedDeliveryDate: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Montant HT</label>
|
||||
<input type="number" step="0.01" value={form.amountHT} onChange={(e) => setForm({ ...form, amountHT: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">TVA</label>
|
||||
<input type="number" step="0.01" value={form.amountTVA} onChange={(e) => setForm({ ...form, amountTVA: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Montant TTC</label>
|
||||
<input type="number" step="0.01" value={form.amountTTC} onChange={(e) => setForm({ ...form, amountTTC: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
|
||||
<textarea value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} className="input-field" rows={2} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
|
||||
<button onClick={() => setShowModal(false)} className="btn-secondary">Annuler</button>
|
||||
<button onClick={handleCreate} className="btn-primary">Créer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
219
frontend/src/pages/SupplierList.tsx
Normal file
219
frontend/src/pages/SupplierList.tsx
Normal file
@@ -0,0 +1,219 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { supplierAPI } from '../services/api';
|
||||
import { Supplier } from '../types';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
export default function SupplierList() {
|
||||
const [suppliers, setSuppliers] = useState<Supplier[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState('');
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingSupplier, setEditingSupplier] = useState<Supplier | null>(null);
|
||||
const [form, setForm] = useState({
|
||||
name: '', siret: '', address: '', city: '', postalCode: '', country: 'France',
|
||||
email: '', phone: '', contactName: '', iban: '', notes: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
loadSuppliers();
|
||||
}, []);
|
||||
|
||||
const loadSuppliers = async () => {
|
||||
try {
|
||||
const res = await supplierAPI.list({ search: search || undefined });
|
||||
setSuppliers(res.data);
|
||||
} catch (error) {
|
||||
console.error('Erreur:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
loadSuppliers();
|
||||
};
|
||||
|
||||
const openCreate = () => {
|
||||
setEditingSupplier(null);
|
||||
setForm({ name: '', siret: '', address: '', city: '', postalCode: '', country: 'France', email: '', phone: '', contactName: '', iban: '', notes: '' });
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const openEdit = (supplier: Supplier) => {
|
||||
setEditingSupplier(supplier);
|
||||
setForm({
|
||||
name: supplier.name || '',
|
||||
siret: supplier.siret || '',
|
||||
address: supplier.address || '',
|
||||
city: supplier.city || '',
|
||||
postalCode: supplier.postalCode || '',
|
||||
country: supplier.country || 'France',
|
||||
email: supplier.email || '',
|
||||
phone: supplier.phone || '',
|
||||
contactName: supplier.contactName || '',
|
||||
iban: supplier.iban || '',
|
||||
notes: supplier.notes || '',
|
||||
});
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!form.name) {
|
||||
toast.error('Le nom est requis');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (editingSupplier) {
|
||||
await supplierAPI.update(editingSupplier.id, form);
|
||||
toast.success('Fournisseur mis à jour');
|
||||
} else {
|
||||
await supplierAPI.create(form);
|
||||
toast.success('Fournisseur créé');
|
||||
}
|
||||
setShowModal(false);
|
||||
loadSuppliers();
|
||||
} catch (error: any) {
|
||||
toast.error(error.response?.data?.error || 'Erreur');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!confirm('Désactiver ce fournisseur ?')) return;
|
||||
try {
|
||||
await supplierAPI.delete(id);
|
||||
toast.success('Fournisseur désactivé');
|
||||
loadSuppliers();
|
||||
} catch (error: any) {
|
||||
toast.error('Erreur');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Fournisseurs</h1>
|
||||
<button onClick={openCreate} className="btn-primary">
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
Nouveau fournisseur
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<form onSubmit={handleSearch} className="flex gap-4">
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Rechercher un fournisseur..."
|
||||
className="input-field flex-1"
|
||||
/>
|
||||
<button type="submit" className="btn-primary">Rechercher</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="card overflow-hidden p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Nom</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">SIRET</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Ville</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Email</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Téléphone</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Statut</th>
|
||||
<th className="text-right text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{loading ? (
|
||||
<tr><td colSpan={7} className="px-6 py-12 text-center text-gray-500">Chargement...</td></tr>
|
||||
) : suppliers.length === 0 ? (
|
||||
<tr><td colSpan={7} className="px-6 py-12 text-center text-gray-500">Aucun fournisseur</td></tr>
|
||||
) : suppliers.map((s) => (
|
||||
<tr key={s.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 text-sm font-medium text-gray-900">{s.name}</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-500">{s.siret || '-'}</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-500">{s.city || '-'}</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-500">{s.email || '-'}</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-500">{s.phone || '-'}</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`badge ${s.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
|
||||
{s.isActive ? 'Actif' : 'Inactif'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<button onClick={() => openEdit(s)} className="text-santinova-600 hover:text-santinova-700 text-sm mr-3">Modifier</button>
|
||||
<button onClick={() => handleDelete(s.id)} className="text-red-600 hover:text-red-700 text-sm">Désactiver</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
{showModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50">
|
||||
<div className="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<div className="px-6 py-4 border-b border-gray-200">
|
||||
<h2 className="text-lg font-semibold">{editingSupplier ? 'Modifier le fournisseur' : 'Nouveau fournisseur'}</h2>
|
||||
</div>
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Nom *</label>
|
||||
<input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">SIRET</label>
|
||||
<input type="text" value={form.siret} onChange={(e) => setForm({ ...form, siret: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Adresse</label>
|
||||
<input type="text" value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Ville</label>
|
||||
<input type="text" value={form.city} onChange={(e) => setForm({ ...form, city: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Code postal</label>
|
||||
<input type="text" value={form.postalCode} onChange={(e) => setForm({ ...form, postalCode: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
||||
<input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Téléphone</label>
|
||||
<input type="text" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Contact</label>
|
||||
<input type="text" value={form.contactName} onChange={(e) => setForm({ ...form, contactName: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">IBAN</label>
|
||||
<input type="text" value={form.iban} onChange={(e) => setForm({ ...form, iban: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Notes</label>
|
||||
<textarea value={form.notes} onChange={(e) => setForm({ ...form, notes: e.target.value })} className="input-field" rows={2} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
|
||||
<button onClick={() => setShowModal(false)} className="btn-secondary">Annuler</button>
|
||||
<button onClick={handleSave} className="btn-primary">Enregistrer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
194
frontend/src/pages/UserList.tsx
Normal file
194
frontend/src/pages/UserList.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { authAPI } from '../services/api';
|
||||
import { User } from '../types';
|
||||
import { roleLabels } from '../utils/helpers';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
export default function UserList() {
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingUser, setEditingUser] = useState<User | null>(null);
|
||||
const [form, setForm] = useState({
|
||||
email: '', password: '', firstName: '', lastName: '', role: 'operateur',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
loadUsers();
|
||||
}, []);
|
||||
|
||||
const loadUsers = async () => {
|
||||
try {
|
||||
const res = await authAPI.getUsers();
|
||||
setUsers(res.data);
|
||||
} catch (error) {
|
||||
console.error('Erreur:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openCreate = () => {
|
||||
setEditingUser(null);
|
||||
setForm({ email: '', password: '', firstName: '', lastName: '', role: 'operateur' });
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const openEdit = (user: User) => {
|
||||
setEditingUser(user);
|
||||
setForm({
|
||||
email: user.email,
|
||||
password: '',
|
||||
firstName: user.firstName,
|
||||
lastName: user.lastName,
|
||||
role: user.role,
|
||||
});
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!form.email || !form.firstName || !form.lastName) {
|
||||
toast.error('Tous les champs sont requis');
|
||||
return;
|
||||
}
|
||||
if (!editingUser && !form.password) {
|
||||
toast.error('Le mot de passe est requis');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (editingUser) {
|
||||
await authAPI.updateUser(editingUser.id, {
|
||||
email: form.email,
|
||||
firstName: form.firstName,
|
||||
lastName: form.lastName,
|
||||
role: form.role,
|
||||
isActive: true,
|
||||
password: form.password || undefined,
|
||||
});
|
||||
toast.success('Utilisateur mis à jour');
|
||||
} else {
|
||||
await authAPI.createUser(form);
|
||||
toast.success('Utilisateur créé');
|
||||
}
|
||||
setShowModal(false);
|
||||
loadUsers();
|
||||
} catch (error: any) {
|
||||
toast.error(error.response?.data?.error || 'Erreur');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeactivate = async (id: number) => {
|
||||
if (!confirm('Désactiver cet utilisateur ?')) return;
|
||||
try {
|
||||
await authAPI.deleteUser(id);
|
||||
toast.success('Utilisateur désactivé');
|
||||
loadUsers();
|
||||
} catch (error) {
|
||||
toast.error('Erreur');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Gestion des utilisateurs</h1>
|
||||
<button onClick={openCreate} className="btn-primary">
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
Nouvel utilisateur
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="card overflow-hidden p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Nom</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Email</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Rôle</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Statut</th>
|
||||
<th className="text-right text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-3">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{loading ? (
|
||||
<tr><td colSpan={5} className="px-6 py-12 text-center text-gray-500">Chargement...</td></tr>
|
||||
) : users.map((u) => (
|
||||
<tr key={u.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-santinova-100 rounded-full flex items-center justify-center text-santinova-600 text-sm font-medium">
|
||||
{u.firstName?.[0]}{u.lastName?.[0]}
|
||||
</div>
|
||||
<span className="text-sm font-medium text-gray-900">{u.firstName} {u.lastName}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-500">{u.email}</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="badge bg-santinova-100 text-santinova-800">{roleLabels[u.role] || u.role}</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`badge ${u.isActive !== false ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
|
||||
{u.isActive !== false ? 'Actif' : 'Inactif'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<button onClick={() => openEdit(u)} className="text-santinova-600 hover:text-santinova-700 text-sm mr-3">Modifier</button>
|
||||
<button onClick={() => handleDeactivate(u.id)} className="text-red-600 hover:text-red-700 text-sm">Désactiver</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
{showModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50">
|
||||
<div className="bg-white rounded-xl shadow-xl w-full max-w-lg">
|
||||
<div className="px-6 py-4 border-b border-gray-200">
|
||||
<h2 className="text-lg font-semibold">{editingUser ? 'Modifier l\'utilisateur' : 'Nouvel utilisateur'}</h2>
|
||||
</div>
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Prénom *</label>
|
||||
<input type="text" value={form.firstName} onChange={(e) => setForm({ ...form, firstName: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Nom *</label>
|
||||
<input type="text" value={form.lastName} onChange={(e) => setForm({ ...form, lastName: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Email *</label>
|
||||
<input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Mot de passe {editingUser ? '(laisser vide pour ne pas changer)' : '*'}
|
||||
</label>
|
||||
<input type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} className="input-field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Rôle</label>
|
||||
<select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })} className="input-field">
|
||||
{Object.entries(roleLabels).map(([k, v]) => (
|
||||
<option key={k} value={k}>{v}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
|
||||
<button onClick={() => setShowModal(false)} className="btn-secondary">Annuler</button>
|
||||
<button onClick={handleSave} className="btn-primary">Enregistrer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
99
frontend/src/services/api.ts
Normal file
99
frontend/src/services/api.ts
Normal file
@@ -0,0 +1,99 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const API_BASE = import.meta.env.VITE_API_URL || '/api';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: API_BASE,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
// Request interceptor - add auth token
|
||||
api.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
// Response interceptor - handle 401
|
||||
api.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error) => {
|
||||
if (error.response?.status === 401) {
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
if (window.location.pathname !== '/login') {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default api;
|
||||
|
||||
// Auth
|
||||
export const authAPI = {
|
||||
login: (email: string, password: string) => api.post('/auth/login', { email, password }),
|
||||
me: () => api.get('/auth/me'),
|
||||
getUsers: () => api.get('/auth/users'),
|
||||
createUser: (data: any) => api.post('/auth/users', data),
|
||||
updateUser: (id: number, data: any) => api.put(`/auth/users/${id}`, data),
|
||||
deleteUser: (id: number) => api.delete(`/auth/users/${id}`),
|
||||
};
|
||||
|
||||
// Invoices
|
||||
export const invoiceAPI = {
|
||||
list: (params?: any) => api.get('/invoices', { params }),
|
||||
get: (id: number) => api.get(`/invoices/${id}`),
|
||||
upload: (formData: FormData) => api.post('/invoices/upload', formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
}),
|
||||
update: (id: number, data: any) => api.put(`/invoices/${id}`, data),
|
||||
updateLines: (id: number, lines: any[]) => api.put(`/invoices/${id}/lines`, { lines }),
|
||||
changeStatus: (id: number, status: string, notes?: string) => api.post(`/invoices/${id}/status`, { status, notes }),
|
||||
match: (id: number, purchaseOrderId: number) => api.post(`/invoices/${id}/match`, { purchaseOrderId }),
|
||||
delete: (id: number) => api.delete(`/invoices/${id}`),
|
||||
stats: () => api.get('/invoices/stats'),
|
||||
};
|
||||
|
||||
// Suppliers
|
||||
export const supplierAPI = {
|
||||
list: (params?: any) => api.get('/suppliers', { params }),
|
||||
get: (id: number) => api.get(`/suppliers/${id}`),
|
||||
create: (data: any) => api.post('/suppliers', data),
|
||||
update: (id: number, data: any) => api.put(`/suppliers/${id}`, data),
|
||||
delete: (id: number) => api.delete(`/suppliers/${id}`),
|
||||
};
|
||||
|
||||
// Purchase Orders
|
||||
export const purchaseOrderAPI = {
|
||||
list: (params?: any) => api.get('/purchase-orders', { params }),
|
||||
get: (id: number) => api.get(`/purchase-orders/${id}`),
|
||||
create: (data: any) => api.post('/purchase-orders', data),
|
||||
update: (id: number, data: any) => api.put(`/purchase-orders/${id}`, data),
|
||||
delete: (id: number) => api.delete(`/purchase-orders/${id}`),
|
||||
};
|
||||
|
||||
// Dashboard
|
||||
export const dashboardAPI = {
|
||||
get: () => api.get('/dashboard'),
|
||||
};
|
||||
|
||||
// Exports
|
||||
export const exportAPI = {
|
||||
csv: (params?: any) => api.get('/exports/invoices/csv', { params, responseType: 'blob' }),
|
||||
excel: (params?: any) => api.get('/exports/invoices/excel', { params, responseType: 'blob' }),
|
||||
cegi: (params?: any) => api.get('/exports/cegi', { params }),
|
||||
};
|
||||
|
||||
// Notifications
|
||||
export const notificationAPI = {
|
||||
list: (params?: any) => api.get('/notifications', { params }),
|
||||
markRead: (id: number) => api.put(`/notifications/${id}/read`),
|
||||
markAllRead: () => api.put('/notifications/read-all'),
|
||||
count: () => api.get('/notifications/count'),
|
||||
};
|
||||
168
frontend/src/types/index.ts
Normal file
168
frontend/src/types/index.ts
Normal file
@@ -0,0 +1,168 @@
|
||||
export interface User {
|
||||
id: number;
|
||||
email: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
role: 'admin' | 'approbateur' | 'validateur' | 'operateur';
|
||||
isActive?: boolean;
|
||||
createdAt?: string;
|
||||
updatedAt?: string;
|
||||
}
|
||||
|
||||
export interface AuthResponse {
|
||||
token: string;
|
||||
user: User;
|
||||
}
|
||||
|
||||
export type InvoiceStatus = 'recue' | 'en_verification' | 'validee' | 'approuvee' | 'payee' | 'rejetee' | 'archivee';
|
||||
export type InvoiceSource = 'upload' | 'email' | 'portail' | 'scan';
|
||||
export type MatchingStatus = 'non_rapproche' | 'rapproche' | 'ecart_detecte';
|
||||
|
||||
export interface Invoice {
|
||||
id: number;
|
||||
invoiceNumber?: string;
|
||||
supplierId?: number;
|
||||
supplierName?: string;
|
||||
supplierSiret?: string;
|
||||
supplierAddress?: string;
|
||||
invoiceDate?: string;
|
||||
dueDate?: string;
|
||||
receptionDate: string;
|
||||
amountHT?: string;
|
||||
amountTVA?: string;
|
||||
amountTTC?: string;
|
||||
tvaRate?: string;
|
||||
currency?: string;
|
||||
status: InvoiceStatus;
|
||||
source: InvoiceSource;
|
||||
originalFileName?: string;
|
||||
filePath?: string;
|
||||
fileType?: string;
|
||||
ocrRawData?: any;
|
||||
ocrConfidence?: string;
|
||||
purchaseOrderId?: number;
|
||||
matchingStatus?: MatchingStatus;
|
||||
matchingNotes?: string;
|
||||
notes?: string;
|
||||
fullText?: string;
|
||||
createdBy?: number;
|
||||
validatedBy?: number;
|
||||
approvedBy?: number;
|
||||
validatedAt?: string;
|
||||
approvedAt?: string;
|
||||
paidAt?: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
lines?: InvoiceLine[];
|
||||
auditLog?: AuditEntry[];
|
||||
}
|
||||
|
||||
export interface InvoiceLine {
|
||||
id?: number;
|
||||
description?: string;
|
||||
quantity?: number;
|
||||
unitPrice?: number;
|
||||
amountHT?: number;
|
||||
tvaRate?: number;
|
||||
amountTVA?: number;
|
||||
amountTTC?: number;
|
||||
lineOrder?: number;
|
||||
}
|
||||
|
||||
export interface Supplier {
|
||||
id: number;
|
||||
name: string;
|
||||
siret?: string;
|
||||
address?: string;
|
||||
city?: string;
|
||||
postalCode?: string;
|
||||
country?: string;
|
||||
email?: string;
|
||||
phone?: string;
|
||||
contactName?: string;
|
||||
iban?: string;
|
||||
notes?: string;
|
||||
isActive: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export type POStatus = 'brouillon' | 'envoyee' | 'recue' | 'facturee' | 'annulee';
|
||||
|
||||
export interface PurchaseOrder {
|
||||
id: number;
|
||||
orderNumber: string;
|
||||
supplierId?: number;
|
||||
supplierName?: string;
|
||||
orderDate: string;
|
||||
expectedDeliveryDate?: string;
|
||||
amountHT?: string;
|
||||
amountTVA?: string;
|
||||
amountTTC?: string;
|
||||
status: POStatus;
|
||||
description?: string;
|
||||
notes?: string;
|
||||
createdBy?: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
lines?: POLine[];
|
||||
linkedInvoices?: any[];
|
||||
}
|
||||
|
||||
export interface POLine {
|
||||
id?: number;
|
||||
description?: string;
|
||||
quantity?: number;
|
||||
unitPrice?: number;
|
||||
amountHT?: number;
|
||||
lineOrder?: number;
|
||||
}
|
||||
|
||||
export interface AuditEntry {
|
||||
id: number;
|
||||
action: string;
|
||||
details?: any;
|
||||
userName?: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface Notification {
|
||||
id: number;
|
||||
title: string;
|
||||
message: string;
|
||||
type: 'info' | 'warning' | 'error' | 'success';
|
||||
isRead: boolean;
|
||||
link?: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface PaginatedResponse<T> {
|
||||
data: T[];
|
||||
pagination: {
|
||||
total: number;
|
||||
page: number;
|
||||
limit: number;
|
||||
totalPages: number;
|
||||
};
|
||||
}
|
||||
|
||||
export interface DashboardData {
|
||||
statusCounts: Array<{ status: string; count: number; total: number }>;
|
||||
activeTotals: { count: number; total: number };
|
||||
overdue: { count: number; total: number };
|
||||
dueSoon: { count: number; total: number };
|
||||
dueMonth: { count: number; total: number };
|
||||
recentInvoices: Array<{
|
||||
id: number;
|
||||
invoiceNumber?: string;
|
||||
supplierName?: string;
|
||||
amountTTC?: string;
|
||||
status: string;
|
||||
dueDate?: string;
|
||||
createdAt: string;
|
||||
}>;
|
||||
topSuppliers: Array<{ supplier_name: string; invoice_count: number; total: number }>;
|
||||
monthlyEvolution: Array<{ month: string; count: number; total: number }>;
|
||||
sourceCounts: Array<{ source: string; count: number }>;
|
||||
pendingForUser: Array<{ action: string; count: number }>;
|
||||
}
|
||||
102
frontend/src/utils/helpers.ts
Normal file
102
frontend/src/utils/helpers.ts
Normal file
@@ -0,0 +1,102 @@
|
||||
export function formatCurrency(amount: string | number | undefined | null): string {
|
||||
if (amount === undefined || amount === null || amount === '') return '0,00 €';
|
||||
const num = typeof amount === 'string' ? parseFloat(amount) : amount;
|
||||
if (isNaN(num)) return '0,00 €';
|
||||
return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(num);
|
||||
}
|
||||
|
||||
export function formatDate(date: string | undefined | null): string {
|
||||
if (!date) return '-';
|
||||
try {
|
||||
return new Intl.DateTimeFormat('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(new Date(date));
|
||||
} catch {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
|
||||
export function formatDateTime(date: string | undefined | null): string {
|
||||
if (!date) return '-';
|
||||
try {
|
||||
return new Intl.DateTimeFormat('fr-FR', {
|
||||
day: '2-digit', month: '2-digit', year: 'numeric',
|
||||
hour: '2-digit', minute: '2-digit',
|
||||
}).format(new Date(date));
|
||||
} catch {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
|
||||
export const statusLabels: Record<string, string> = {
|
||||
recue: 'Reçue',
|
||||
en_verification: 'En vérification',
|
||||
validee: 'Validée',
|
||||
approuvee: 'Approuvée',
|
||||
payee: 'Payée',
|
||||
rejetee: 'Rejetée',
|
||||
archivee: 'Archivée',
|
||||
};
|
||||
|
||||
export const statusColors: Record<string, string> = {
|
||||
recue: 'bg-blue-100 text-blue-800',
|
||||
en_verification: 'bg-yellow-100 text-yellow-800',
|
||||
validee: 'bg-indigo-100 text-indigo-800',
|
||||
approuvee: 'bg-green-100 text-green-800',
|
||||
payee: 'bg-emerald-100 text-emerald-800',
|
||||
rejetee: 'bg-red-100 text-red-800',
|
||||
archivee: 'bg-gray-100 text-gray-800',
|
||||
};
|
||||
|
||||
export const sourceLabels: Record<string, string> = {
|
||||
upload: 'Upload',
|
||||
email: 'Email',
|
||||
portail: 'Portail',
|
||||
scan: 'Scan',
|
||||
};
|
||||
|
||||
export const matchingLabels: Record<string, string> = {
|
||||
non_rapproche: 'Non rapproché',
|
||||
rapproche: 'Rapproché',
|
||||
ecart_detecte: 'Écart détecté',
|
||||
};
|
||||
|
||||
export const matchingColors: Record<string, string> = {
|
||||
non_rapproche: 'bg-gray-100 text-gray-800',
|
||||
rapproche: 'bg-green-100 text-green-800',
|
||||
ecart_detecte: 'bg-orange-100 text-orange-800',
|
||||
};
|
||||
|
||||
export const poStatusLabels: Record<string, string> = {
|
||||
brouillon: 'Brouillon',
|
||||
envoyee: 'Envoyée',
|
||||
recue: 'Reçue',
|
||||
facturee: 'Facturée',
|
||||
annulee: 'Annulée',
|
||||
};
|
||||
|
||||
export const poStatusColors: Record<string, string> = {
|
||||
brouillon: 'bg-gray-100 text-gray-800',
|
||||
envoyee: 'bg-blue-100 text-blue-800',
|
||||
recue: 'bg-green-100 text-green-800',
|
||||
facturee: 'bg-purple-100 text-purple-800',
|
||||
annulee: 'bg-red-100 text-red-800',
|
||||
};
|
||||
|
||||
export const roleLabels: Record<string, string> = {
|
||||
admin: 'Administrateur',
|
||||
approbateur: 'Approbateur',
|
||||
validateur: 'Validateur',
|
||||
operateur: 'Opérateur',
|
||||
};
|
||||
|
||||
export function isOverdue(dueDate: string | undefined | null, status: string): boolean {
|
||||
if (!dueDate || ['payee', 'archivee', 'rejetee'].includes(status)) return false;
|
||||
return new Date(dueDate) < new Date();
|
||||
}
|
||||
|
||||
export function isDueSoon(dueDate: string | undefined | null, status: string, days: number = 7): boolean {
|
||||
if (!dueDate || ['payee', 'archivee', 'rejetee'].includes(status)) return false;
|
||||
const due = new Date(dueDate);
|
||||
const now = new Date();
|
||||
const future = new Date(now.getTime() + days * 24 * 60 * 60 * 1000);
|
||||
return due >= now && due <= future;
|
||||
}
|
||||
1
frontend/src/vite-env.d.ts
vendored
Normal file
1
frontend/src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
26
frontend/tailwind.config.js
Normal file
26
frontend/tailwind.config.js
Normal file
@@ -0,0 +1,26 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
santinova: {
|
||||
50: '#eff6ff',
|
||||
100: '#dbeafe',
|
||||
200: '#bfdbfe',
|
||||
300: '#93c5fd',
|
||||
400: '#60a5fa',
|
||||
500: '#2563eb',
|
||||
600: '#1d4ed8',
|
||||
700: '#1e40af',
|
||||
800: '#1e3a8a',
|
||||
900: '#172554',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
21
frontend/tsconfig.json
Normal file
21
frontend/tsconfig.json
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
23
frontend/vite.config.ts
Normal file
23
frontend/vite.config.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3001',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/uploads': {
|
||||
target: 'http://localhost:3001',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
sourcemap: false,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user