199 lines
11 KiB
HTML
199 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Gestion Comptable</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">Gestion Comptable</h1>
|
|
<div class="flex space-x-4">
|
|
<a href="/dashboard" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
|
|
Dashboard
|
|
</a>
|
|
<a href="/generator" class="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600">
|
|
Nouvelle Facture
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistiques -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
|
|
<div class="bg-white rounded-lg shadow p-4">
|
|
<h3 class="text-gray-500 text-sm">Revenus</h3>
|
|
<p class="text-2xl font-bold text-green-500" id="totalRevenue">0 €</p>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow p-4">
|
|
<h3 class="text-gray-500 text-sm">Dépenses</h3>
|
|
<p class="text-2xl font-bold text-red-500" id="totalExpenses">0 €</p>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow p-4">
|
|
<h3 class="text-gray-500 text-sm">Solde</h3>
|
|
<p class="text-2xl font-bold" id="balanceAmount">0 €</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filtres -->
|
|
<div class="bg-white rounded-lg shadow p-4 mb-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Année</label>
|
|
<select id="yearFilter" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
<option value="">Toutes</option>
|
|
<option value="2023">2023</option>
|
|
<option value="2024">2024</option>
|
|
<option value="2025">2025</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Catégorie</label>
|
|
<select id="categoryFilter" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
<option value="">Toutes</option>
|
|
<!-- Les catégories seront ajoutées dynamiquement -->
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Type</label>
|
|
<select id="typeFilter" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
<option value="">Tous</option>
|
|
<option value="revenue">Revenus</option>
|
|
<option value="expense">Dépenses</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex items-end">
|
|
<button id="applyFilters" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 w-full">
|
|
Appliquer les filtres
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Onglets -->
|
|
<div class="mb-4">
|
|
<div class="border-b border-gray-200">
|
|
<nav class="-mb-px flex">
|
|
<button id="tabTransactions" class="tab-button active w-1/3 py-4 px-1 text-center border-b-2 border-blue-500 font-medium text-sm text-blue-600">
|
|
Transactions
|
|
</button>
|
|
<button id="tabRevenues" class="tab-button w-1/3 py-4 px-1 text-center border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
|
|
Revenus par catégorie
|
|
</button>
|
|
<button id="tabExpenses" class="tab-button w-1/3 py-4 px-1 text-center border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
|
|
Dépenses par catégorie
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contenu des onglets -->
|
|
<div id="tabContent">
|
|
<!-- Transactions -->
|
|
<div id="transactionsContent" class="tab-content">
|
|
<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">Date</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</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">Catégorie</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200" id="transactionsList">
|
|
<!-- Les transactions seront ajoutées ici dynamiquement -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Revenus par catégorie -->
|
|
<div id="revenuesContent" class="tab-content hidden">
|
|
<div class="bg-white rounded-lg shadow p-4">
|
|
<div id="revenuesByCategoryChart" class="h-64">
|
|
<!-- Le graphique sera ajouté ici dynamiquement -->
|
|
</div>
|
|
<div class="mt-4">
|
|
<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">Catégorie</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">Pourcentage</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200" id="revenuesByCategoryList">
|
|
<!-- Les données seront ajoutées ici dynamiquement -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dépenses par catégorie -->
|
|
<div id="expensesContent" class="tab-content hidden">
|
|
<div class="bg-white rounded-lg shadow p-4">
|
|
<div id="expensesByCategoryChart" class="h-64">
|
|
<!-- Le graphique sera ajouté ici dynamiquement -->
|
|
</div>
|
|
<div class="mt-4">
|
|
<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">Catégorie</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">Pourcentage</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200" id="expensesByCategoryList">
|
|
<!-- Les données seront ajoutées ici dynamiquement -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bouton d'importation -->
|
|
<div class="mt-8 flex justify-center">
|
|
<button id="importButton" class="bg-purple-500 text-white px-6 py-2 rounded-md hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
|
|
Importer des données
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal pour l'importation -->
|
|
<div id="importModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden">
|
|
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
|
<div class="mt-3 text-center">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Importer des données</h3>
|
|
<div class="mt-2 px-7 py-3">
|
|
<p class="text-sm text-gray-500 mb-4">Sélectionnez le type de données à importer.</p>
|
|
<div class="space-y-4">
|
|
<button id="importRevenues" class="w-full bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600">
|
|
Importer les revenus
|
|
</button>
|
|
<button id="importExpenses" class="w-full bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600">
|
|
Importer les dépenses
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="items-center px-4 py-3">
|
|
<button id="closeImportModal" class="px-4 py-2 bg-gray-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300">
|
|
Fermer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Script pour les graphiques -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="/static/accounting.js"></script>
|
|
</body>
|
|
</html> |