auto(wevia-generate) doctrine193 job=gen-20260424-175957 | prompt=wevia_gen ERP Contrats table 10 contrats societes dates montants badges
Some checks are pending
WEVAL NonReg / nonreg (push) Waiting to run

This commit is contained in:
Opus
2026-04-24 18:00:01 +02:00
parent bd11466cfa
commit 637415aece

View File

@@ -0,0 +1,213 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
@apply bg-slate-950 text-slate-100;
}
.bg-premium {
@apply bg-radial-gradient;
background-image: radial-gradient(circle at 20% 10%, rgba(0,229,160,0.06), transparent 50%), rgba(162,143,255,0.05);
}
.card-premium {
@apply border-radius-14 border-rgba-255-255-255-08 bg-#11162a;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.typo-code {
@apply font-JetBrainsMono;
}
.typo-title {
@apply font-PlayfairDisplay text-3xl font-bold;
}
.couleur-teal {
@apply text-teal-600;
}
.couleur-yellow {
@apply text-yellow-500;
}
.table-striped {
@apply bg-white;
}
.table-striped tr:nth-child(odd) {
@apply bg-gray-100;
}
.table-striped tr:hover {
@apply bg-gray-200;
}
.table-striped th {
@apply bg-gray-100;
}
.table-striped th:hover {
@apply bg-gray-200;
}
.badge-status {
@apply bg-teal-600 text-white p-1 rounded-full;
}
.badge-status:hover {
@apply bg-teal-700;
}
.badge-status:active {
@apply bg-teal-800;
}
.pulse {
@apply animate-pulse;
}
@keyframes pulse {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body class="bg-slate-950 text-slate-100">
<div class="container mx-auto p-4">
<h1 class="typo-title text-center mb-4">Contrats</h1>
<div class="bg-premium p-4 rounded-lg shadow-md">
<table class="table-striped w-full">
<thead>
<tr>
<th class="text-left p-2">Société</th>
<th class="text-left p-2">Date</th>
<th class="text-left p-2">Montant</th>
<th class="text-left p-2">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="typo-code p-2">TechCorp</td>
<td class="typo-code p-2">2026-04-15</td>
<td class="typo-code p-2">12 500 €</td>
<td class="p-2">
<span class="badge-status">Actif</span>
</td>
</tr>
<tr>
<td class="typo-code p-2">MediaPlus</td>
<td class="typo-code p-2">2026-03-20</td>
<td class="typo-code p-2">85 000 €</td>
<td class="p-2">
<span class="badge-status">En négo</span>
</td>
</tr>
<tr>
<td class="typo-code p-2">Acme</td>
<td class="typo-code p-2">2026-02-10</td>
<td class="typo-code p-2">3 200 €</td>
<td class="p-2">
<span class="badge-status">Signé</span>
</td>
</tr>
<tr>
<td class="typo-code p-2">TechCorp</td>
<td class="typo-code p-2">2026-01-25</td>
<td class="typo-code p-2">1 500 €</td>
<td class="p-2">
<span class="badge-status">Expiré</span>
</td>
</tr>
<tr>
<td class="typo-code p-2">MediaPlus</td>
<td class="typo-code p-2">2026-01-01</td>
<td class="typo-code p-2">4 500 €</td>
<td class="p-2">
<span class="badge-status">Actif</span>
</td>
</tr>
<tr>
<td class="typo-code p-2">Acme</td>
<td class="typo-code p-2">2025-12-15</td>
<td class="typo-code p-2">2 000 €</td>
<td class="p-2">
<span class="badge-status">En négo</span>
</td>
</tr>
<tr>
<td class="typo-code p-2">TechCorp</td>
<td class="typo-code p-2">2025-11-20</td>
<td class="typo-code p-2">6 000 €</td>
<td class="p-2">
<span class="badge-status">Signé</span>
</td>
</tr>
<tr>
<td class="typo-code p-2">MediaPlus</td>
<td class="typo-code p-2">2025-10-25</td>
<td class="typo-code p-2">9 000 €</td>
<td class="p-2">
<span class="badge-status">Expiré</span>
</td>
</tr>
<tr>
<td class="typo-code p-2">Acme</td>
<td class="typo-code p-2">2025-09-15</td>
<td class="typo-code p-2">1 800 €</td>
<td class="p-2">
<span class="badge-status">Actif</span>
</td>
</tr>
<tr>
<td class="typo-code p-2">TechCorp</td>
<td class="typo-code p-2">2025-08-20</td>
<td class="typo-code p-2">3 500 €</td>
<td class="p-2">
<span class="badge-status">En négo</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
datasets: [{
label: 'Montant',
data: [15000, 20000, 25000, 30000, 35000, 40000, 45000, 50000, 55000, 60000, 65000, 70000],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>