110 lines
6.2 KiB
HTML
110 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Générateur de Factures</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/styles.css">
|
|
</head>
|
|
<body class="bg-gray-100 min-h-screen">
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<h1 class="text-3xl font-bold">Générateur de Factures</h1>
|
|
<a href="/dashboard" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
|
|
Dashboard
|
|
</a>
|
|
</div>
|
|
|
|
<form id="invoiceForm" class="max-w-2xl mx-auto bg-white rounded-lg shadow-md p-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Informations générales -->
|
|
<div class="space-y-4">
|
|
<h2 class="text-xl font-semibold mb-4">Informations générales</h2>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Langue</label>
|
|
<select name="language" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
<option value="français">Français</option>
|
|
<option value="deutsch">Deutsch</option>
|
|
<option value="english">English</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Numéro de facture</label>
|
|
<input type="text" name="invoice_number" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="001">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Montant</label>
|
|
<input type="number" step="0.01" name="amount" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="0.00">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Devise</label>
|
|
<select name="currency" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
<option value="EUR">EUR</option>
|
|
<option value="CHF">CHF</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Éléments de facture -->
|
|
<div class="mt-6">
|
|
<h3 class="text-lg font-medium text-gray-700 mb-2">Lignes de facturation</h3>
|
|
<div id="invoiceItems" class="space-y-3">
|
|
<!-- Les lignes de facturation seront ajoutées ici -->
|
|
</div>
|
|
<button type="button" id="addItemButton" class="mt-3 inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
|
|
+ Ajouter une ligne
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Informations du destinataire -->
|
|
<div class="space-y-4">
|
|
<h2 class="text-xl font-semibold mb-4">Destinataire</h2>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Nom</label>
|
|
<input type="text" name="recipient_name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Adresse</label>
|
|
<input type="text" name="recipient_address" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Code postal</label>
|
|
<input type="text" name="recipient_postal_code" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Ville</label>
|
|
<input type="text" name="recipient_town" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Pays</label>
|
|
<input type="text" name="recipient_country" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Numéro de TVA (optionnel)</label>
|
|
<input type="text" name="recipient_vat_number" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 flex justify-center">
|
|
<button type="submit" class="bg-blue-500 text-white px-6 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
|
|
Générer la facture
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<script src="/static/script.js"></script>
|
|
</body>
|
|
</html> |