JB Compta v1.1 - multi-activité
This commit is contained in:
@@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>JB Compta — Tableau de bord</title>
|
||||
<style>
|
||||
:root { --bg:#0f172a; --card:#1e293b; --txt:#e2e8f0; --muted:#94a3b8;
|
||||
--accent:#38bdf8; --ok:#34d399; --warn:#fbbf24; --bad:#f87171; }
|
||||
* { box-sizing:border-box; }
|
||||
body { margin:0; font-family:system-ui,Segoe UI,Roboto,sans-serif;
|
||||
background:var(--bg); color:var(--txt); padding:24px; }
|
||||
h1 { margin:0 0 4px; font-size:22px; }
|
||||
h2 { font-size:15px; color:var(--muted); margin:24px 0 10px; font-weight:600; }
|
||||
a { color:var(--accent); }
|
||||
.sub { color:var(--muted); margin-bottom:20px; }
|
||||
form.filters { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
|
||||
select, button { background:var(--card); color:var(--txt); border:1px solid #334155;
|
||||
border-radius:8px; padding:8px 12px; font-size:14px; }
|
||||
button { cursor:pointer; }
|
||||
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
|
||||
gap:16px; margin-bottom:8px; }
|
||||
.card { background:var(--card); border:1px solid #334155; border-radius:12px;
|
||||
padding:16px; }
|
||||
.card .label { color:var(--muted); font-size:13px; }
|
||||
.card .value { font-size:26px; font-weight:600; margin-top:6px; }
|
||||
.card .hint { color:var(--muted); font-size:12px; margin-top:4px; }
|
||||
.ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)}
|
||||
.bar { height:8px; background:#334155; border-radius:99px; overflow:hidden; margin-top:8px;}
|
||||
.bar > span { display:block; height:100%; background:var(--accent); }
|
||||
.row { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-top:8px; }
|
||||
@media(max-width:800px){ .row{grid-template-columns:1fr;} }
|
||||
.exports a { display:inline-block; margin-right:12px; }
|
||||
canvas { max-width:100%; }
|
||||
table { width:100%; border-collapse:collapse; font-size:14px; }
|
||||
td,th { padding:8px; border-bottom:1px solid #334155; text-align:right; }
|
||||
th:first-child, td:first-child { text-align:left; }
|
||||
tr.total td { font-weight:600; border-top:2px solid #475569; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
{% if not entreprise %}
|
||||
<h1>Aucune entreprise</h1>
|
||||
<p class="sub">Crée une entreprise et des factures dans
|
||||
<a href="/admin/">l'administration</a>, puis reviens ici.</p>
|
||||
{% else %}
|
||||
<h1>{{ entreprise.nom }}</h1>
|
||||
<div class="sub">{{ entreprise.get_activite_display }} (principale) ·
|
||||
{% if entreprise.franchise_tva %}Franchise de TVA{% else %}Assujetti TVA{% endif %}
|
||||
{% if entreprise.versement_liberatoire %}· Versement libératoire{% endif %}
|
||||
· Exercice {{ annee }}</div>
|
||||
|
||||
<form class="filters" method="get">
|
||||
<select name="entreprise" onchange="this.form.submit()">
|
||||
{% for e in entreprises %}
|
||||
<option value="{{ e.pk }}" {% if e.pk == entreprise.pk %}selected{% endif %}>{{ e.nom }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<select name="annee" onchange="this.form.submit()">
|
||||
{% for a in annees %}
|
||||
<option value="{{ a }}" {% if a == annee %}selected{% endif %}>{{ a }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<a href="/admin/"><button type="button">Saisie / Admin</button></a>
|
||||
</form>
|
||||
|
||||
{% if bareme_manquant %}
|
||||
<div class="card bad" style="margin-bottom:16px;">
|
||||
Une activité avec du CA n'a pas de barème {{ annee }}. Ajoute-le dans
|
||||
<a href="/admin/compta/bareme/">Barèmes</a>.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Totaux entreprise -->
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="label">CA HT encaissé (total)</div>
|
||||
<div class="value">{{ ca_ht }} €</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="label">Cotisations URSSAF (total)</div>
|
||||
<div class="value">{{ cotisations_urssaf|default:"—" }} €</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="label">Impôt — versement libératoire</div>
|
||||
<div class="value">{{ versement_liberatoire|default:"—" }} €</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="label">TVA à reverser</div>
|
||||
<div class="value">{{ tva_a_reverser }} €</div>
|
||||
<div class="hint">{{ tva_collectee }} collectée − {{ tva_deductible }} déductible</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ventilation par activité -->
|
||||
<h2>Ventilation par activité</h2>
|
||||
<div class="card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Activité</th><th>CA HT</th><th>% plafond</th>
|
||||
<th>URSSAF</th><th>Impôt (VL)</th><th>Revenu imposable</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for l in lignes_activite %}
|
||||
<tr>
|
||||
<td>{{ l.label }}</td>
|
||||
<td>{{ l.ca_ht }} €</td>
|
||||
<td class="{% if l.depasse_seuil_ca %}bad{% endif %}">
|
||||
{% if l.pct_seuil_ca is not None %}{{ l.pct_seuil_ca }} %{% else %}—{% endif %}
|
||||
</td>
|
||||
<td>{% if l.cotisations is not None %}{{ l.cotisations }} €{% else %}—{% endif %}</td>
|
||||
<td>{% if l.versement_liberatoire is not None %}{{ l.versement_liberatoire }} €{% else %}—{% endif %}</td>
|
||||
<td>{% if l.revenu_imposable is not None %}{{ l.revenu_imposable }} €{% else %}—{% endif %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tr class="total">
|
||||
<td>Total</td>
|
||||
<td>{{ ca_ht }} €</td>
|
||||
<td></td>
|
||||
<td>{{ cotisations_urssaf|default:"—" }} €</td>
|
||||
<td>{{ versement_liberatoire|default:"—" }} €</td>
|
||||
<td>{{ revenu_imposable|default:"—" }} €</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="card">
|
||||
<div class="label" style="margin-bottom:8px;">CA HT mensuel (toutes activités)</div>
|
||||
<canvas id="caChart" height="120"></canvas>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="label" style="margin-bottom:8px;">À provisionner (année)</div>
|
||||
<table>
|
||||
<tr><th>Poste</th><th>Montant</th></tr>
|
||||
<tr><td>URSSAF</td><td>{{ cotisations_urssaf|default:"—" }} €</td></tr>
|
||||
<tr><td>Impôt (VL)</td><td>{{ versement_liberatoire|default:"—" }} €</td></tr>
|
||||
<tr><td>TVA</td><td>{{ tva_a_reverser }} €</td></tr>
|
||||
</table>
|
||||
<div class="exports" style="margin-top:16px;">
|
||||
<div class="label" style="margin-bottom:6px;">Exports CSV</div>
|
||||
<a href="{% url 'export_ventes' %}?entreprise={{ entreprise.pk }}&annee={{ annee }}">Ventes</a>
|
||||
<a href="{% url 'export_tva' %}?entreprise={{ entreprise.pk }}&annee={{ annee }}">TVA</a>
|
||||
<a href="{% url 'export_urssaf' %}?entreprise={{ entreprise.pk }}&annee={{ annee }}">URSSAF</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
||||
<script>
|
||||
const ctx = document.getElementById('caChart');
|
||||
new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: {{ mois_labels|safe }},
|
||||
datasets: [{ label: 'CA HT (€)', data: {{ ca_mensuel_json|safe }},
|
||||
backgroundColor: '#38bdf8' }]
|
||||
},
|
||||
options: { plugins:{legend:{display:false}},
|
||||
scales:{ x:{ticks:{color:'#94a3b8'}}, y:{ticks:{color:'#94a3b8'}} } }
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user