templates/subscription/index.html.twig line 1

Open in your IDE?
  1. {% extends 'layout/backEndLayout.html.twig' %}
  3. {% block stylesheets %}
  4. {{ parent() }}
  5. <style>
  6. :root {
  7. --sb-card : #ffffff;
  8. --sb-border : rgba(0,0,0,.08);
  9. --sb-border-hi: rgba(0,0,0,.15);
  10. --sb-ink : #111827;
  11. --sb-dim : #4b5563;
  12. --sb-muted : #9ca3af;
  13. --sb-blue : #1d4ed8;
  14. --sb-blue-lt: rgba(29,78,216,.1);
  15. --sb-teal : #0d9488;
  16. --sb-teal-lt: rgba(13,148,136,.1);
  17. --sb-amber : #b45309;
  18. --sb-amber-lt:rgba(180,83,9,.1);
  19. --sb-rose : #be123c;
  20. --sb-rose-lt: rgba(190,18,60,.1);
  21. --sb-green : #15803d;
  22. --sb-green-lt:rgba(21,128,61,.1);
  23. --sb-violet : #7c3aed;
  24. --sb-violet-lt:rgba(124,58,237,.1);
  25. --sb-r : 12px; --sb-rs: 8px;
  26. --sb-shadow: 0 1px 4px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.07);
  27. }
  28. .sb-page { font-family:'DM Sans','Segoe UI',sans-serif; color:var(--sb-ink); }
  29. /* topbar */
  30. .sb-topbar { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px; }
  31. .sb-topbar__title { font-size:20px;font-weight:700;display:flex;align-items:center;gap:10px; }
  32. .sb-topbar__title i { color:var(--sb-blue); }
  33. .sb-topbar__sub { font-size:13px;color:var(--sb-muted);margin-top:2px; }
  34. /* kpis */
  35. .sb-kpis { display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:20px; }
  36. .sb-kpi { background:var(--sb-card);border:1px solid var(--sb-border);border-radius:var(--sb-r);padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--sb-shadow);transition:transform .2s; }
  37. .sb-kpi:hover { transform:translateY(-2px); }
  38. .sb-kpi__icon { width:38px;height:38px;border-radius:var(--sb-rs);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0; }
  39. .ki-blue { background:var(--sb-blue-lt);color:var(--sb-blue); }
  40. .ki-green { background:var(--sb-green-lt);color:var(--sb-green); }
  41. .ki-amber { background:var(--sb-amber-lt);color:var(--sb-amber); }
  42. .ki-violet { background:var(--sb-violet-lt);color:var(--sb-violet); }
  43. .sb-kpi__val { font-size:20px;font-weight:700;color:var(--sb-ink);line-height:1; }
  44. .sb-kpi__lbl { font-size:11.5px;color:var(--sb-muted);margin-top:2px; }
  45. /* table card */
  46. .sb-table-card { background:var(--sb-card);border:1px solid var(--sb-border);border-radius:var(--sb-r);overflow:hidden;box-shadow:var(--sb-shadow); }
  47. .sb-table-head { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:14px 20px;border-bottom:1px solid var(--sb-border);background:#fafbfc; }
  48. .sb-table-head__title { font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px; }
  49. .sb-dot { width:8px;height:8px;border-radius:50%;background:var(--sb-blue);box-shadow:0 0 6px var(--sb-blue); }
  50. /* bouton ajout */
  51. .btn-add { display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:var(--sb-blue);color:#fff;border-radius:var(--sb-rs);font-size:13px;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:background .18s; }
  52. .btn-add:hover { background:#1e40af;color:#fff; }
  53. /* table */
  54. table.sb-tbl { width:100%;border-collapse:collapse;font-size:13px; }
  55. table.sb-tbl thead th { padding:10px 14px;color:var(--sb-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;background:#fafbfc;border-bottom:1px solid var(--sb-border);white-space:nowrap; }
  56. table.sb-tbl tbody td { padding:11px 14px;border-bottom:1px solid rgba(0,0,0,.04);vertical-align:middle; }
  57. table.sb-tbl tbody tr:last-child td { border-bottom:none; }
  58. table.sb-tbl tbody tr:hover td { background:rgba(29,78,216,.025); }
  59. /* student cell */
  60. .std-cell { display:flex;align-items:center;gap:9px; }
  61. .std-avatar { width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#1d4ed8,#0d9488);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
  62. .std-name { font-weight:600;font-size:13px; }
  63. .std-mat { font-size:11px;color:var(--sb-muted); }
  64. /* chips */
  65. .chip { display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600; }
  66. .chip-teal { background:var(--sb-teal-lt);color:var(--sb-teal);border:1px solid rgba(13,148,136,.2); }
  67. .chip-violet { background:var(--sb-violet-lt);color:var(--sb-violet);border:1px solid rgba(124,58,237,.2); }
  68. /* montant */
  69. .amount-cell { font-weight:700;font-size:14px;color:var(--sb-blue); }
  70. /* résultat examen */
  71. .exam-chip { display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid; }
  72. .ec-success { background:rgba(21,128,61,.1);color:var(--sb-green);border-color:rgba(21,128,61,.25); }
  73. .ec-fail { background:var(--sb-rose-lt);color:var(--sb-rose);border-color:rgba(190,18,60,.25); }
  74. .ec-neutral { background:rgba(0,0,0,.05);color:var(--sb-muted);border-color:var(--sb-border); }
  75. /* actions */
  76. .row-actions { display:flex;align-items:center;gap:4px;justify-content:flex-end; }
  77. .ra-btn { display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:7px;font-size:11.5px;font-weight:500;text-decoration:none;border:1px solid var(--sb-border);cursor:pointer;background:#fff;color:var(--sb-dim);transition:background .15s,border-color .15s,color .15s; }
  78. .ra-btn:hover { border-color:var(--sb-border-hi); }
  79. .ra-blue { background:var(--sb-blue-lt);color:var(--sb-blue);border-color:rgba(29,78,216,.25); } .ra-blue:hover { background:var(--sb-blue);color:#fff; }
  80. .ra-amber { background:var(--sb-amber-lt);color:var(--sb-amber);border-color:rgba(180,83,9,.25); } .ra-amber:hover { background:var(--sb-amber);color:#fff; }
  81. .ra-rose { background:var(--sb-rose-lt);color:var(--sb-rose);border-color:rgba(190,18,60,.25); } .ra-rose:hover { background:var(--sb-rose);color:#fff; }
  82. /* pagination */
  83. .pag-bar { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:14px 20px;border-top:1px solid var(--sb-border);background:#fafbfc; }
  84. .pag-info { font-size:12.5px;color:var(--sb-muted); }
  85. .pag-list { display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0; }
  86. .pag-list li a,.pag-list li span { display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 6px;border-radius:8px;border:1px solid var(--sb-border);font-size:13px;font-weight:500;color:var(--sb-dim);text-decoration:none;background:#fff;transition:background .15s,border-color .15s,color .15s; }
  87. .pag-list li a:hover { border-color:var(--sb-blue);color:var(--sb-blue); }
  88. .pag-list li.pg-on span { background:var(--sb-blue);color:#fff;border-color:var(--sb-blue);font-weight:700; }
  89. .pag-list li.pg-off span { opacity:.4;pointer-events:none; }
  90. .pag-list li.pg-dots span { border:none;background:transparent;color:var(--sb-muted);min-width:auto; }
  91. /* vide */
  92. .sb-empty { text-align:center;padding:64px 24px;color:var(--sb-muted); }
  93. .sb-empty i { font-size:40px;margin-bottom:12px;display:block; }
  94. .sb-empty strong { display:block;font-size:15px;color:var(--sb-dim);margin-bottom:6px; }
  95. @keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
  96. .sb-table-card { animation:fadeUp .4s ease both; }
  97. </style>
  98. {% endblock %}
  100. {% block content %}
  101. <div class="sb-page">
  103. {# ── Topbar ─────────────────────────────────────────────────── #}
  104. <div class="sb-topbar">
  105. <div>
  106. <div class="sb-topbar__title"><i class="fa fa-exchange"></i> Inscriptions</div>
  107. <div class="sb-topbar__sub">
  108. Gestion des inscriptions{% if year is defined %} — Année {{ year.code }}{% endif %}
  109. </div>
  110. </div>
  111. {% if is_granted('ROLE_ADMIN') %}
  112. <a href="{{ path('admin_subscriptions_new') }}" class="btn-add">
  113. <i class="fa fa-plus"></i> Nouvelle inscription
  114. </a>
  115. {% endif %}
  116. </div>
  118. {# ── KPIs ────────────────────────────────────────────────────── #}
  119. {% set total = subscriptions.totalItemCount %}
  120. {% set total_amount = 0 %}
  121. {% for sub in subscriptions %}
  122. {% set total_amount = total_amount + sub.amount %}
  123. {% endfor %}
  125. <div class="sb-kpis">
  126. <div class="sb-kpi">
  127. <div class="sb-kpi__icon ki-blue"><i class="fa fa-exchange"></i></div>
  128. <div><div class="sb-kpi__val">{{ total }}</div><div class="sb-kpi__lbl">Total inscriptions</div></div>
  129. </div>
  130. <div class="sb-kpi">
  131. <div class="sb-kpi__icon ki-green"><i class="fa fa-money"></i></div>
  132. <div><div class="sb-kpi__val">{{ total_amount|number_format(0, ',', ' ') }}</div><div class="sb-kpi__lbl">Montant encaissé (page)</div></div>
  133. </div>
  134. <div class="sb-kpi">
  135. <div class="sb-kpi__icon ki-violet"><i class="fa fa-graduation-cap"></i></div>
  136. <div><div class="sb-kpi__val">{{ subscriptions.currentPageNumber }}/{{ subscriptions.pageCount }}</div><div class="sb-kpi__lbl">Page courante</div></div>
  137. </div>
  138. </div>
  140. {# ── Table ───────────────────────────────────────────────────── #}
  141. <div class="sb-table-card">
  142. <div class="sb-table-head">
  143. <div class="sb-table-head__title">
  144. <span class="sb-dot"></span>
  145. Liste des inscriptions
  146. <span style="font-size:11.5px;color:var(--sb-muted);font-weight:400">({{ total }} au total)</span>
  147. </div>
  148. <span style="font-size:12px;color:var(--sb-muted)">Page {{ subscriptions.currentPageNumber }}/{{ subscriptions.pageCount }}</span>
  149. </div>
  151. {% if total == 0 %}
  152. <div class="sb-empty">
  153. <i class="fa fa-inbox"></i>
  154. <strong>Aucune inscription enregistrée</strong>
  155. Commencez par inscrire un élève.
  156. </div>
  157. {% else %}
  158. <div style="overflow-x:auto">
  159. <table class="sb-tbl">
  160. <thead>
  161. <tr>
  162. <th style="width:4%">#</th>
  163. <th style="width:24%">Élève</th>
  164. <th style="width:14%">Classe</th>
  165. <th style="width:14%">Année scolaire</th>
  166. <th style="width:11%" class="text-right">Montant</th>
  167. <th style="width:14%" class="text-center">Résultat examen</th>
  168. <th style="width:12%" class="text-center">Date</th>
  169. <th style="width:10%" class="text-right">Actions</th>
  170. </tr>
  171. </thead>
  172. <tbody>
  173. {% set offset = (subscriptions.currentPageNumber - 1) * subscriptions.itemNumberPerPage %}
  174. {% for sub in subscriptions %}
  175. {% set initials = sub.student.lastname|slice(0,1)|upper ~ sub.student.firstname|slice(0,1)|upper %}
  176. {% set exam = sub.officialExamResult %}
  177. <tr>
  178. <td style="color:var(--sb-muted);font-size:12px">{{ offset + loop.index }}</td>
  180. <td>
  181. <div class="std-cell">
  182. <div class="std-avatar">{{ initials }}</div>
  183. <div>
  184. <div class="std-name">
  185. <a href="{{ path('admin_students_show', {id: sub.student.id}) }}"
  186. style="color:var(--sb-ink);text-decoration:none">
  187. {{ sub.student.lastname }} {{ sub.student.firstname }}
  188. </a>
  189. </div>
  190. <div class="std-mat">{{ sub.student.matricule }}</div>
  191. </div>
  192. </div>
  193. </td>
  195. <td>
  196. <a href="{{ path('admin_classrooms_show', {id: sub.classRoom.id}) }}" style="text-decoration:none">
  197. <span class="chip chip-teal">{{ sub.classRoom.name }}</span>
  198. </a>
  199. </td>
  201. <td>
  202. <span class="chip chip-violet">{{ sub.schoolYear.code }}</span>
  203. </td>
  205. <td class="text-right">
  206. <span class="amount-cell">{{ sub.amount|number_format(0, ',', ' ') }} F</span>
  207. </td>
  209. <td class="text-center">
  210. {% if exam == '0' %}
  211. <span class="exam-chip ec-fail">ÉCHEC</span>
  212. {% elseif exam starts with '1' %}
  213. <span class="exam-chip ec-success">{{ sub.verbalOfficialExamResult }}</span>
  214. {% else %}
  215. <span class="exam-chip ec-neutral">{{ sub.verbalOfficialExamResult }}</span>
  216. {% endif %}
  217. </td>
  219. <td class="text-center" style="font-size:12px;color:var(--sb-dim)">
  220. {% if sub.createdAt is defined and sub.createdAt %}
  221. {{ sub.createdAt|date('d/m/Y') }}
  222. {% else %}—{% endif %}
  223. </td>
  225. <td>
  226. <div class="row-actions">
  227. <a class="ra-btn ra-blue" href="{{ path('admin_subscriptions_show', {id: sub.id}) }}" title="Voir">
  228. <i class="fa fa-eye"></i>
  229. </a>
  230. {% if is_granted('ROLE_ADMIN') %}
  231. <a class="ra-btn ra-amber" href="{{ path('admin_subscriptions_edit', {id: sub.id}) }}" title="Modifier">
  232. <i class="fa fa-pencil"></i>
  233. </a>
  234. <form method="post" action="{{ path('admin_subscriptions_delete', {id: sub.id}) }}"
  235. onsubmit="return confirm('Supprimer cette inscription ?')" style="display:inline">
  236. <input type="hidden" name="_method" value="DELETE">
  237. <input type="hidden" name="csrf_token" value="{{ csrf_token('subscriptions_deletion' ~ sub.id) }}">
  238. <button class="ra-btn ra-rose" type="submit" title="Supprimer"><i class="fa fa-trash"></i></button>
  239. </form>
  240. {% endif %}
  241. </div>
  242. </td>
  243. </tr>
  244. {% endfor %}
  245. </tbody>
  246. </table>
  247. </div>
  249. {# ── Pagination ───────────────────────────────────────────── #}
  250. {% set pg = subscriptions.currentPageNumber %}
  251. {% set pgTotal = subscriptions.pageCount %}
  252. {% set perPage = subscriptions.itemNumberPerPage %}
  253. {% set from = (pg - 1) * perPage + 1 %}
  254. {% set to = (pg * perPage) < total ? (pg * perPage) : total %}
  256. <div class="pag-bar">
  257. <div class="pag-info">Affichage {{ from }}–{{ to }} sur {{ total }} inscription{{ total > 1 ? 's' : '' }}</div>
  258. <ul class="pag-list">
  259. <li class="{{ pg <= 1 ? 'pg-off' : '' }}">
  260. {% if pg > 1 %}<a href="{{ path('admin_subscriptions', {page: pg - 1}) }}"><i class="fa fa-chevron-left"></i></a>
  261. {% else %}<span><i class="fa fa-chevron-left"></i></span>{% endif %}
  262. </li>
  263. {% for p in 1..pgTotal %}
  264. {% if p == pg %}
  265. <li class="pg-on"><span>{{ p }}</span></li>
  266. {% elseif p == 1 or p == pgTotal or (p >= pg - 2 and p <= pg + 2) %}
  267. <li><a href="{{ path('admin_subscriptions', {page: p}) }}">{{ p }}</a></li>
  268. {% elseif p == pg - 3 or p == pg + 3 %}
  269. <li class="pg-dots"><span>…</span></li>
  270. {% endif %}
  271. {% endfor %}
  272. <li class="{{ pg >= pgTotal ? 'pg-off' : '' }}">
  273. {% if pg < pgTotal %}<a href="{{ path('admin_subscriptions', {page: pg + 1}) }}"><i class="fa fa-chevron-right"></i></a>
  274. {% else %}<span><i class="fa fa-chevron-right"></i></span>{% endif %}
  275. </li>
  276. </ul>
  277. </div>
  278. {% endif %}
  280. </div>
  281. </div>
  282. {% endblock %}