|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SamVTC - Gestion des devis et factures pour chauffeurs VTC</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.sidebar.collapsed { |
|
|
width: 70px; |
|
|
} |
|
|
.sidebar.collapsed .sidebar-text { |
|
|
display: none; |
|
|
} |
|
|
.sidebar.collapsed .logo-text { |
|
|
display: none; |
|
|
} |
|
|
.sidebar.collapsed .nav-item { |
|
|
justify-content: center; |
|
|
} |
|
|
.main-content { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.main-content.expanded { |
|
|
margin-left: 70px; |
|
|
} |
|
|
.pdf-preview { |
|
|
height: calc(100vh - 200px); |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
position: fixed; |
|
|
z-index: 50; |
|
|
height: 100vh; |
|
|
} |
|
|
.sidebar.collapsed { |
|
|
transform: translateX(-100%); |
|
|
} |
|
|
.main-content.expanded { |
|
|
margin-left: 0; |
|
|
} |
|
|
} |
|
|
.page { |
|
|
display: none; |
|
|
} |
|
|
.page.active { |
|
|
display: block; |
|
|
} |
|
|
#pdfContent { |
|
|
background-color: white; |
|
|
padding: 2rem; |
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-indigo-800 text-white w-64 flex flex-col"> |
|
|
<div class="p-4 flex items-center space-x-2 border-b border-indigo-700"> |
|
|
<i class="fas fa-taxi text-2xl text-indigo-300"></i> |
|
|
<span class="logo-text text-xl font-bold">SamVTC</span> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-b border-indigo-700"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-indigo-300"></i> |
|
|
</div> |
|
|
<div class="sidebar-text"> |
|
|
<div class="font-medium">John Doe</div> |
|
|
<div class="text-xs text-indigo-300">Chauffeur VTC</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<nav class="flex-1 overflow-y-auto p-4 space-y-1"> |
|
|
<a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-indigo-700 text-indigo-200 hover:text-white" onclick="showPage('dashboard')"> |
|
|
<i class="fas fa-home w-6 text-center"></i> |
|
|
<span class="sidebar-text">Tableau de bord</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-indigo-700 text-white" onclick="showPage('quotes')"> |
|
|
<i class="fas fa-file-invoice-dollar w-6 text-center"></i> |
|
|
<span class="sidebar-text">Devis</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-indigo-700 text-indigo-200 hover:text-white" onclick="showPage('invoices')"> |
|
|
<i class="fas fa-receipt w-6 text-center"></i> |
|
|
<span class="sidebar-text">Factures</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-indigo-700 text-indigo-200 hover:text-white" onclick="showPage('clients')"> |
|
|
<i class="fas fa-users w-6 text-center"></i> |
|
|
<span class="sidebar-text">Clients</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-indigo-700 text-indigo-200 hover:text-white" onclick="showPage('stats')"> |
|
|
<i class="fas fa-chart-line w-6 text-center"></i> |
|
|
<span class="sidebar-text">Statistiques</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-indigo-700 text-indigo-200 hover:text-white" onclick="showPage('settings')"> |
|
|
<i class="fas fa-cog w-6 text-center"></i> |
|
|
<span class="sidebar-text">Paramètres</span> |
|
|
</a> |
|
|
</nav> |
|
|
|
|
|
<div class="p-4 border-t border-indigo-700"> |
|
|
<button onclick="toggleSidebar()" class="flex items-center space-x-3 p-2 rounded hover:bg-indigo-700 text-indigo-200 hover:text-white w-full"> |
|
|
<i class="fas fa-chevron-left w-6 text-center"></i> |
|
|
<span class="sidebar-text">Réduire</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="main-content flex-1 overflow-y-auto"> |
|
|
|
|
|
<div id="dashboard" class="page active"> |
|
|
<header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button onclick="toggleSidebar()" class="md:hidden text-gray-600"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Tableau de bord</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-700"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="p-4 md:p-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Chiffre d'affaires</p> |
|
|
<p class="text-2xl font-semibold text-gray-800 mt-1">€3,450</p> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
|
<i class="fas fa-euro-sign"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-2">+12% ce mois-ci</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Courses effectuées</p> |
|
|
<p class="text-2xl font-semibold text-gray-800 mt-1">42</p> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-taxi"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-2">+5% ce mois-ci</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Devis en attente</p> |
|
|
<p class="text-2xl font-semibold text-gray-800 mt-1">3</p> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> |
|
|
<i class="fas fa-file-invoice"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-2">À traiter</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Clients actifs</p> |
|
|
<p class="text-2xl font-semibold text-gray-800 mt-1">18</p> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-users"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-2">+2 ce mois-ci</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
<div class="lg:col-span-2 bg-white rounded-lg shadow p-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">Activité récente</h2> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/06/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Pierre Martin</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€85.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">14/06/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Sarah Dupont</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€120.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">En attente</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12/06/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Entreprise XYZ</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€350.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">Prochains paiements</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="text-sm font-medium text-gray-900">Cotisation URSSAF</p> |
|
|
<p class="text-sm text-gray-500">Échéance: 30/06/2023</p> |
|
|
<p class="text-xs text-gray-500 mt-1">Montant estimé: €450</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="text-sm font-medium text-gray-900">Assurance véhicule</p> |
|
|
<p class="text-sm text-gray-500">Échéance: 05/07/2023</p> |
|
|
<p class="text-xs text-gray-500 mt-1">Montant: €120</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="quotes" class="page"> |
|
|
<header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button onclick="toggleSidebar()" class="md:hidden text-gray-600"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Devis</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-700"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="p-4 md:p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<div class="relative w-full max-w-md"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-search text-gray-400"></i> |
|
|
</div> |
|
|
<input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Rechercher un devis..."> |
|
|
</div> |
|
|
<button onclick="showPage('new-quote')" class="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 flex items-center justify-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Nouveau devis |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">N° Devis</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> |
|
|
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DEV-2023-001</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Pierre Martin</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/06/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€85.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Accepté</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button onclick="showQuoteDetails('DEV-2023-001')" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button> |
|
|
<button onclick="generatePDF('DEV-2023-001')" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-file-pdf"></i></button> |
|
|
<button onclick="convertToInvoice('DEV-2023-001')" class="text-indigo-600 hover:text-indigo-900"><i class="fas fa-exchange-alt"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DEV-2023-002</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Dupont</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">14/06/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€120.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">En attente</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button onclick="showQuoteDetails('DEV-2023-002')" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button> |
|
|
<button onclick="generatePDF('DEV-2023-002')" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-file-pdf"></i></button> |
|
|
<button onclick="convertToInvoice('DEV-2023-002')" class="text-indigo-600 hover:text-indigo-900"><i class="fas fa-exchange-alt"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DEV-2023-003</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Entreprise XYZ</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12/06/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€350.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Refusé</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button onclick="showQuoteDetails('DEV-2023-003')" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button> |
|
|
<button onclick="generatePDF('DEV-2023-003')" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-file-pdf"></i></button> |
|
|
<button onclick="convertToInvoice('DEV-2023-003')" class="text-indigo-600 hover:text-indigo-900"><i class="fas fa-exchange-alt"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="new-quote" class="page"> |
|
|
<header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button onclick="toggleSidebar()" class="md:hidden text-gray-600"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Créer un nouveau devis</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-700"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="p-4 md:p-6"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-2 space-y-6"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-user-circle text-indigo-500 mr-2"></i> |
|
|
Informations client |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Nom complet</label> |
|
|
<input type="text" id="clientName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Entreprise (optionnel)</label> |
|
|
<input type="text" id="clientCompany" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label> |
|
|
<input type="email" id="clientEmail" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label> |
|
|
<input type="tel" id="clientPhone" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-route text-indigo-500 mr-2"></i> |
|
|
Détails de la course |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Date de la course</label> |
|
|
<input type="date" id="rideDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Heure de prise en charge</label> |
|
|
<input type="time" id="rideTime" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Lieu de départ</label> |
|
|
<input type="text" id="rideFrom" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Lieu d'arrivée</label> |
|
|
<input type="text" id="rideTo" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Distance (km)</label> |
|
|
<input type="number" step="0.1" id="rideDistance" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Durée estimée</label> |
|
|
<input type="text" id="rideDuration" placeholder="HH:MM" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-euro-sign text-indigo-500 mr-2"></i> |
|
|
Tarification |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Prix HT (€)</label> |
|
|
<input type="number" step="0.01" id="priceHT" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Taux TVA</label> |
|
|
<select id="tvaRate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<option value="0">0% (TVA non applicable)</option> |
|
|
<option value="10">10%</option> |
|
|
<option value="20">20%</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Prix TTC (€)</label> |
|
|
<input type="number" step="0.01" id="priceTTC" class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100" readonly> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Notes supplémentaires</label> |
|
|
<textarea rows="3" id="quoteNotes" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col sm:flex-row justify-between space-y-3 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 flex items-center justify-center"> |
|
|
<i class="fas fa-save mr-2"></i> Enregistrer comme brouillon |
|
|
</button> |
|
|
<div class="flex space-x-4"> |
|
|
<button onclick="previewQuote()" class="px-4 py-2 border border-indigo-500 text-indigo-500 rounded-md hover:bg-indigo-50 flex items-center justify-center"> |
|
|
<i class="fas fa-eye mr-2"></i> Prévisualiser |
|
|
</button> |
|
|
<button onclick="saveQuote()" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 flex items-center justify-center"> |
|
|
<i class="fas fa-file-pdf mr-2"></i> Générer le devis |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden lg:block"> |
|
|
<div class="bg-white rounded-lg shadow p-6 sticky top-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-file-pdf text-indigo-500 mr-2"></i> |
|
|
Aperçu du devis |
|
|
</h2> |
|
|
<div id="pdfPreview" class="pdf-preview border-2 border-dashed border-gray-300 rounded-md flex items-center justify-center bg-gray-50"> |
|
|
<div class="text-center p-6"> |
|
|
<i class="fas fa-file-alt text-4xl text-gray-400 mb-3"></i> |
|
|
<p class="text-gray-500">L'aperçu du devis apparaîtra ici</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 text-sm text-gray-500"> |
|
|
<p><i class="fas fa-info-circle text-indigo-400 mr-1"></i> Le devis sera généré avec votre logo et vos coordonnées.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="quote-details" class="page"> |
|
|
<header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button onclick="toggleSidebar()" class="md:hidden text-gray-600"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Détails du devis</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-700"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="p-4 md:p-6"> |
|
|
<div class="bg-white rounded-lg shadow overflow-hidden mb-6"> |
|
|
<div id="pdfContent" class="p-6"> |
|
|
<div class="flex justify-between items-start mb-8"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold text-indigo-600">SamVTC</h2> |
|
|
<p class="text-gray-600">Service de transport avec chauffeur</p> |
|
|
<p class="text-gray-600 mt-2">SIRET: 123 456 789 00010</p> |
|
|
<p class="text-gray-600">TVA non applicable - article 293 B du CGI</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<h1 class="text-xl font-bold text-gray-800">DEVIS</h1> |
|
|
<p class="text-gray-600">N° <span id="quoteNumber">DEV-2023-001</span></p> |
|
|
<p class="text-gray-600">Date: <span id="quoteDate">15/06/2023</span></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-8 mb-8"> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-500 uppercase mb-2">Émetteur</h3> |
|
|
<p class="font-medium">John Doe</p> |
|
|
<p>123 Rue des Chauffeurs</p> |
|
|
<p>75001 Paris, France</p> |
|
|
<p>Tél: 01 23 45 67 89</p> |
|
|
<p>Email: contact@samvtc.fr</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-500 uppercase mb-2">Client</h3> |
|
|
<p class="font-medium" id="quoteClientName">Pierre Martin</p> |
|
|
<p id="quoteClientCompany">Entreprise ABC</p> |
|
|
<p id="quoteClientAddress">45 Avenue des Clients</p> |
|
|
<p id="quoteClientCity">75002 Paris, France</p> |
|
|
<p>Tél: <span id="quoteClientPhone">06 12 34 56 78</span></p> |
|
|
<p>Email: <span id="quoteClientEmail">pierre.martin@example.com</span></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h3 class="text-sm font-semibold text-gray-500 uppercase mb-2">Détails de la course</h3> |
|
|
<div class="grid grid-cols-3 gap-4"> |
|
|
<div> |
|
|
<p class="text-gray-600">Date:</p> |
|
|
<p class="font-medium" id="quoteRideDate">15/06/2023</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Heure:</p> |
|
|
<p class="font-medium" id="quoteRideTime">14:30</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Distance:</p> |
|
|
<p class="font-medium" id="quoteRideDistance">25 km</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4 mt-4"> |
|
|
<div> |
|
|
<p class="text-gray-600">Départ:</p> |
|
|
<p class="font-medium" id="quoteRideFrom">Aéroport Charles de Gaulle</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Arrivée:</p> |
|
|
<p class="font-medium" id="quoteRideTo">Hôtel Plaza, Paris</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prix HT</th> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">TVA</th> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prix TTC</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">Course VTC</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500" id="quotePriceHT">€85.00</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500" id="quoteTVA">0%</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900 font-medium" id="quotePriceTTC">€85.00</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="text-right mb-8"> |
|
|
<div class="inline-block text-right"> |
|
|
<div class="flex justify-between py-2"> |
|
|
<span class="font-medium">Total HT:</span> |
|
|
<span class="font-medium ml-8" id="quoteTotalHT">€85.00</span> |
|
|
</div> |
|
|
<div class="flex justify-between py-2"> |
|
|
<span>TVA:</span> |
|
|
<span class="ml-8" id="quoteTotalTVA">€0.00</span> |
|
|
</div> |
|
|
<div class="flex justify-between py-2 border-t border-gray-200"> |
|
|
<span class="font-bold">Total TTC:</span> |
|
|
<span class="font-bold ml-8" id="quoteTotalTTC">€85.00</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-sm text-gray-500"> |
|
|
<p id="quoteNotesText">Conditions de paiement: Paiement à réception par virement bancaire ou espèces.</p> |
|
|
<p class="mt-2">Validité du devis: 30 jours à partir de la date d'émission.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end space-x-4"> |
|
|
<button onclick="showPage('quotes')" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 flex items-center justify-center"> |
|
|
<i class="fas fa-arrow-left mr-2"></i> Retour |
|
|
</button> |
|
|
<button onclick="generatePDF('current')" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 flex items-center justify-center"> |
|
|
<i class="fas fa-file-pdf mr-2"></i> Télécharger PDF |
|
|
</button> |
|
|
<button onclick="convertToInvoice('current')" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center justify-center"> |
|
|
<i class="fas fa-exchange-alt mr-2"></i> Convertir en facture |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="invoices" class="page"> |
|
|
<header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button onclick="toggleSidebar()" class="md:hidden text-gray-600"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Factures</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-700"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="p-4 md:p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<div class="relative w-full max-w-md"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-search text-gray-400"></i> |
|
|
</div> |
|
|
<input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Rechercher une facture..."> |
|
|
</div> |
|
|
<button onclick="showPage('new-invoice')" class="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 flex items-center justify-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Nouvelle facture |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">N° Facture</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> |
|
|
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">FAC-2023-001</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Pierre Martin</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/06/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€85.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button onclick="showInvoiceDetails('FAC-2023-001')" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button> |
|
|
<button onclick="generatePDF('FAC-2023-001')" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-file-pdf"></i></button> |
|
|
<button class="text-indigo-600 hover:text-indigo-900"><i class="fas fa-envelope"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">FAC-2023-002</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Dupont</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">14/06/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€120.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">En attente</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button onclick="showInvoiceDetails('FAC-2023-002')" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button> |
|
|
<button onclick="generatePDF('FAC-2023-002')" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-file-pdf"></i></button> |
|
|
<button class="text-indigo-600 hover:text-indigo-900"><i class="fas fa-envelope"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">FAC-2023-003</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Entreprise XYZ</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12/06/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€350.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">En retard</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button onclick="showInvoiceDetails('FAC-2023-003')" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button> |
|
|
<button onclick="generatePDF('FAC-2023-003')" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-file-pdf"></i></button> |
|
|
<button class="text-indigo-600 hover:text-indigo-900"><i class="fas fa-envelope"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="invoice-details" class="page"> |
|
|
<header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button onclick="toggleSidebar()" class="md:hidden text-gray-600"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Détails de la facture</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-700"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="p-4 md:p-6"> |
|
|
<div class="bg-white rounded-lg shadow overflow-hidden mb-6"> |
|
|
<div id="invoicePdfContent" class="p-6"> |
|
|
<div class="flex justify-between items-start mb-8"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold text-indigo-600">SamVTC</h2> |
|
|
<p class="text-gray-600">Service de transport avec chauffeur</p> |
|
|
<p class="text-gray-600 mt-2">SIRET: 123 456 789 00010</p> |
|
|
<p class="text-gray-600">TVA non applicable - article 293 B du CGI</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<h1 class="text-xl font-bold text-gray-800">FACTURE</h1> |
|
|
<p class="text-gray-600">N° <span id="invoiceNumber">FAC-2023-001</span></p> |
|
|
<p class="text-gray-600">Date: <span id="invoiceDate">15/06/2023</span></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-8 mb-8"> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-500 uppercase mb-2">Émetteur</h3> |
|
|
<p class="font-medium">John Doe</p> |
|
|
<p>123 Rue des Chauffeurs</p> |
|
|
<p>75001 Paris, France</p> |
|
|
<p>Tél: 01 23 45 67 89</p> |
|
|
<p>Email: contact@samvtc.fr</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-500 uppercase mb-2">Client</h3> |
|
|
<p class="font-medium" id="invoiceClientName">Pierre Martin</p> |
|
|
<p id="invoiceClientCompany">Entreprise ABC</p> |
|
|
<p id="invoiceClientAddress">45 Avenue des Clients</p> |
|
|
<p id="invoiceClientCity">75002 Paris, France</p> |
|
|
<p>Tél: <span id="invoiceClientPhone">06 12 34 56 78</span></p> |
|
|
<p>Email: <span id="invoiceClientEmail">pierre.martin@example.com</span></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h3 class="text-sm font-semibold text-gray-500 uppercase mb-2">Détails de la course</h3> |
|
|
<div class="grid grid-cols-3 gap-4"> |
|
|
<div> |
|
|
<p class="text-gray-600">Date:</p> |
|
|
<p class="font-medium" id="invoiceRideDate">15/06/2023</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Heure:</p> |
|
|
<p class="font-medium" id="invoiceRideTime">14:30</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Distance:</p> |
|
|
<p class="font-medium" id="invoiceRideDistance">25 km</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4 mt-4"> |
|
|
<div> |
|
|
<p class="text-gray-600">Départ:</p> |
|
|
<p class="font-medium" id="invoiceRideFrom">Aéroport Charles de Gaulle</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Arrivée:</p> |
|
|
<p class="font-medium" id="invoiceRideTo">Hôtel Plaza, Paris</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prix HT</th> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">TVA</th> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prix TTC</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">Course VTC</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500" id="invoicePriceHT">€85.00</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500" id="invoiceTVA">0%</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900 font-medium" id="invoicePriceTTC">€85.00</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="text-right mb-8"> |
|
|
<div class="inline-block text-right"> |
|
|
<div class="flex justify-between py-2"> |
|
|
<span class="font-medium">Total HT:</span> |
|
|
<span class="font-medium ml-8" id="invoiceTotalHT">€85.00</span> |
|
|
</div> |
|
|
<div class="flex justify-between py-2"> |
|
|
<span>TVA:</span> |
|
|
<span class="ml-8" id="invoiceTotalTVA">€0.00</span> |
|
|
</div> |
|
|
<div class="flex justify-between py-2 border-t border-gray-200"> |
|
|
<span class="font-bold">Total TTC:</span> |
|
|
<span class="font-bold ml-8" id="invoiceTotalTTC">€85.00</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-sm text-gray-500"> |
|
|
<p id="invoiceNotesText">Conditions de paiement: Paiement à réception par virement bancaire ou espèces.</p> |
|
|
<p class="mt-2">Date limite de paiement: <span id="invoiceDueDate">30/06/2023</span></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end space-x-4"> |
|
|
<button onclick="showPage('invoices')" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 flex items-center justify-center"> |
|
|
<i class="fas fa-arrow-left mr-2"></i> Retour |
|
|
</button> |
|
|
<button onclick="generatePDF('current-invoice')" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 flex items-center justify-center"> |
|
|
<i class="fas fa-file-pdf mr-2"></i> Télécharger PDF |
|
|
</button> |
|
|
<button onclick="markAsPaid('current')" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center justify-center"> |
|
|
<i class="fas fa-check mr-2"></i> Marquer comme payé |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="clients" class="page"> |
|
|
<header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button onclick="toggleSidebar()" class="md:hidden text-gray-600"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Clients</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-700"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="p-4 md:p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<div class="relative w-full max-w-md"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-search text-gray-400"></i> |
|
|
</div> |
|
|
<input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Rechercher un client..."> |
|
|
</div> |
|
|
<button onclick="showPage('new-client')" class="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 flex items-center justify-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Nouveau client |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center space-x-4 mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-900">Pierre Martin</h3> |
|
|
<p class="text-sm text-gray-500">Entreprise ABC</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-2 text-sm"> |
|
|
<p class="flex items-center text-gray-600"> |
|
|
<i class="fas fa-envelope mr-2 text-indigo-500"></i> pierre.martin@example.com |
|
|
</p> |
|
|
<p class="flex items-center text-gray-600"> |
|
|
<i class="fas fa-phone mr-2 text-indigo-500"></i> 06 12 34 56 78 |
|
|
</p> |
|
|
<p class="flex items-center text-gray-600"> |
|
|
<i class="fas fa-map-marker-alt mr-2 text-indigo-500"></i> 45 Avenue des Clients, 75002 Paris |
|
|
</p> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t border-gray-200 flex justify-between"> |
|
|
<span class="text-sm text-gray-500">3 courses</span> |
|
|
<span class="text-sm font-medium text-gray-900">€450 total</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-6 py-3 flex justify-end space-x-3"> |
|
|
<button onclick="showClientDetails('1')" class="text-indigo-600 hover:text-indigo-900 text-sm font-medium"> |
|
|
<i class="fas fa-eye mr-1"></i> Voir |
|
|
</button> |
|
|
<button onclick="editClient('1')" class="text-indigo-600 hover:text-indigo-900 text-sm font-medium"> |
|
|
<i class="fas fa-edit mr-1"></i> Modifier |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center space-x-4 mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-900">Sarah Dupont</h3> |
|
|
<p class="text-sm text-gray-500">Particulier</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-2 text-sm"> |
|
|
<p class="flex items-center text-gray-600"> |
|
|
<i class="fas fa-envelope mr-2 text-indigo-500"></i> sarah.dupont@example.com |
|
|
</p> |
|
|
<p class="flex items-center text-gray-600"> |
|
|
<i class="fas fa-phone mr-2 text-indigo-500"></i> 07 23 45 67 89 |
|
|
</p> |
|
|
<p class="flex items-center text-gray-600"> |
|
|
<i class="fas fa-map-marker-alt mr-2 text-indigo-500"></i> 12 Rue des Particuliers, 75003 Paris |
|
|
</p> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t border-gray-200 flex justify-between"> |
|
|
<span class="text-sm text-gray-500">5 courses</span> |
|
|
<span class="text-sm font-medium text-gray-900">€720 total</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-6 py-3 flex justify-end space-x-3"> |
|
|
<button onclick="showClientDetails('2')" class="text-indigo-600 hover:text-indigo-900 text-sm font-medium"> |
|
|
<i class="fas fa-eye mr-1"></i> Voir |
|
|
</button> |
|
|
<button onclick="editClient('2')" class="text-indigo-600 hover:text-indigo-900 text-sm font-medium"> |
|
|
<i class="fas fa-edit mr-1"></i> Modifier |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center space-x-4 mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600"> |
|
|
<i class="fas fa-building"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-900">Entreprise XYZ</h3> |
|
|
<p class="text-sm text-gray-500">Contact: Jean Durand</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-2 text-sm"> |
|
|
<p class="flex items-center text-gray-600"> |
|
|
<i class="fas fa-envelope mr-2 text-indigo-500"></i> contact@xyz.com |
|
|
</p> |
|
|
<p class="flex items-center text-gray-600"> |
|
|
<i class="fas fa-phone mr-2 text-indigo-500"></i> 01 23 45 67 89 |
|
|
</p> |
|
|
<p class="flex items-center text-gray-600"> |
|
|
<i class="fas fa-map-marker-alt mr-2 text-indigo-500"></i> 78 Avenue des Entreprises, 75008 Paris |
|
|
</p> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t border-gray-200 flex justify-between"> |
|
|
<span class="text-sm text-gray-500">8 courses</span> |
|
|
<span class="text-sm font-medium text-gray-900">€1,250 total</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-6 py-3 flex justify-end space-x-3"> |
|
|
<button onclick="showClientDetails('3')" class="text-indigo-600 hover:text-indigo-900 text-sm font-medium"> |
|
|
<i class="fas fa-eye mr-1"></i> Voir |
|
|
</button> |
|
|
<button onclick="editClient('3')" class="text-indigo-600 hover:text-indigo-900 text-sm font-medium"> |
|
|
<i class="fas fa-edit mr-1"></i> Modifier |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="client-details" class="page"> |
|
|
<header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button onclick="toggleSidebar()" class="md:hidden text-gray-600"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Détails du client</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-700"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="p-4 md:p-6"> |
|
|
<div class="bg-white rounded-lg shadow overflow-hidden mb-6"> |
|
|
<div class="p-6"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between"> |
|
|
<div class="flex items-center space-x-4 mb-4 md:mb-0"> |
|
|
<div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 text-2xl"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h2 class="text-xl font-bold text-gray-900" id="clientDetailName">Pierre Martin</h2> |
|
|
<p class="text-gray-600" id="clientDetailCompany">Entreprise ABC</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<button onclick="editClient('current')" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 flex items-center justify-center"> |
|
|
<i class="fas fa-edit mr-2"></i> Modifier |
|
|
</button> |
|
|
<button onclick="showPage('clients')" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 flex items-center justify-center"> |
|
|
<i class="fas fa-arrow-left mr-2"></i> Retour |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Informations</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Email</p> |
|
|
<p class="text-gray-900" id="clientDetailEmail">pierre.martin@example.com</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Téléphone</p> |
|
|
<p class="text-gray-900" id="clientDetailPhone">06 12 34 56 78</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Adresse</p> |
|
|
<p class="text-gray-900" id="clientDetailAddress">45 Avenue des Clients</p> |
|
|
<p class="text-gray-900" id="clientDetailCity">75002 Paris, France</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Statistiques</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Nombre de courses</p> |
|
|
<p class="text-gray-900">3</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Total dépensé</p> |
|
|
<p class="text-gray-900">€450</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Dernière course</p> |
|
|
<p class="text-gray-900">15/06/2023</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div |
|
|
</html> |
