templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Tableau de bord{% endblock %}
  5. {% block body %}
  6.     <style>
  7.         .dashboard-page {
  8.             --dashboard-primary: #405189;
  9.             --dashboard-success: #0ab39c;
  10.             --dashboard-danger: #f06548;
  11.             --dashboard-warning: #f7b84b;
  12.             --dashboard-info: #299cdb;
  13.             --dashboard-border: #e7eaf3;
  14.             --dashboard-muted: #74788d;
  15.         }
  17.         .dashboard-hero {
  18.             border: 1px solid var(--dashboard-border);
  19.             border-radius: 8px;
  20.             background: linear-gradient(135deg, #ffffff 0%, #f8fbff 55%, #f4fbf9 100%);
  21.             box-shadow: 0 12px 28px rgba(15, 34, 58, .07);
  22.             padding: 24px;
  23.             position: relative;
  24.             overflow: hidden;
  25.         }
  27.         .dashboard-hero::before {
  28.             content: "";
  29.             position: absolute;
  30.             inset: 0 auto 0 0;
  31.             width: 5px;
  32.             background: linear-gradient(180deg, var(--dashboard-primary), var(--dashboard-success));
  33.         }
  35.         .dashboard-hero-kicker {
  36.             color: var(--dashboard-primary);
  37.             font-size: 12px;
  38.             font-weight: 700;
  39.             letter-spacing: .08em;
  40.             text-transform: uppercase;
  41.         }
  43.         .dashboard-hero-title {
  44.             color: #24324b;
  45.             font-size: 24px;
  46.             font-weight: 700;
  47.         }
  49.         .dashboard-hero-subtitle {
  50.             color: var(--dashboard-muted);
  51.             max-width: 720px;
  52.         }
  54.         .dashboard-hero-pill {
  55.             border: 1px solid rgba(64, 81, 137, .12);
  56.             border-radius: 999px;
  57.             background: rgba(255, 255, 255, .78);
  58.             color: #344050;
  59.             font-size: 13px;
  60.             font-weight: 600;
  61.             padding: 7px 12px;
  62.         }
  64.         .dashboard-reset-btn {
  65.             border: 1px solid var(--dashboard-border);
  66.             border-radius: 6px;
  67.             background: #fff;
  68.             color: #344050;
  69.             font-weight: 600;
  70.             min-height: 40px;
  71.         }
  73.         .dashboard-reset-btn:hover {
  74.             border-color: rgba(64, 81, 137, .28);
  75.             color: var(--dashboard-primary);
  76.         }
  78.         .dashboard-filter-card,
  79.         .dashboard-kpi-card,
  80.         .dashboard-type-card,
  81.         .dashboard-chart-card,
  82.         .dashboard-table-card {
  83.             border: 1px solid var(--dashboard-border);
  84.             border-radius: 8px;
  85.             box-shadow: 0 10px 24px rgba(15, 34, 58, .06);
  86.         }
  88.         .dashboard-filter-card {
  89.             overflow: visible;
  90.         }
  92.         .dashboard-filter-card .card-body {
  93.             padding: 18px;
  94.         }
  96.         .dashboard-filter-card .form-label {
  97.             color: #344050;
  98.             font-size: 12px;
  99.             font-weight: 700;
  100.             letter-spacing: .03em;
  101.             margin-bottom: .45rem;
  102.             text-transform: uppercase;
  103.         }
  105.         .dashboard-filter-card .form-control,
  106.         .dashboard-filter-card .form-select,
  107.         .dashboard-filter-card .select2-container--default .select2-selection--single {
  108.             border-color: #dce2ef;
  109.             border-radius: 6px;
  110.             min-height: 42px;
  111.         }
  113.         .dashboard-filter-card .form-control:focus,
  114.         .dashboard-filter-card .form-select:focus {
  115.             border-color: rgba(64, 81, 137, .45);
  116.             box-shadow: 0 0 0 .15rem rgba(64, 81, 137, .1);
  117.         }
  119.         .dashboard-filter-card .input-group .form-control {
  120.             border-radius: 6px 0 0 6px;
  121.         }
  123.         .dashboard-filter-card .select2-container--default .select2-selection--single .select2-selection__rendered {
  124.             line-height: 40px;
  125.         }
  127.         .dashboard-filter-card .select2-container--default .select2-selection--single .select2-selection__arrow {
  128.             height: 40px;
  129.         }
  131.         .dashboard-filter-card .btn {
  132.             border-radius: 6px;
  133.             font-weight: 700;
  134.             min-height: 42px;
  135.         }
  137.         #datePickerButton {
  138.             border-radius: 0 6px 6px 0;
  139.             cursor: pointer;
  140.             justify-content: center;
  141.             min-width: 48px;
  142.         }
  144.         .dashboard-payment-filter {
  145.             min-height: 42px;
  146.             padding: .55rem .8rem;
  147.             border: 1px solid #dce2ef;
  148.             border-radius: 6px;
  149.             background: #fff;
  150.         }
  152.         .dashboard-payment-filter .form-check-input {
  153.             cursor: pointer;
  154.             height: 1.1rem;
  155.             width: 2.15rem;
  156.         }
  158.         .dashboard-payment-filter .form-check-input:checked {
  159.             background-color: var(--dashboard-danger);
  160.             border-color: var(--dashboard-danger);
  161.         }
  163.         .dashboard-kpi-card {
  164.             overflow: hidden;
  165.             position: relative;
  166.         }
  168.         .dashboard-kpi-card::before {
  169.             content: "";
  170.             height: 3px;
  171.             left: 0;
  172.             position: absolute;
  173.             right: 0;
  174.             top: 0;
  175.         }
  177.         .dashboard-kpi-card.metric-info::before {
  178.             background: var(--dashboard-info);
  179.         }
  181.         .dashboard-kpi-card.metric-primary::before {
  182.             background: var(--dashboard-primary);
  183.         }
  185.         .dashboard-kpi-card.metric-success::before {
  186.             background: var(--dashboard-success);
  187.         }
  189.         .dashboard-kpi-card.metric-danger::before {
  190.             background: var(--dashboard-danger);
  191.         }
  193.         .dashboard-kpi-card .card-body {
  194.             min-height: 148px;
  195.             padding: 22px 20px;
  196.         }
  198.         .dashboard-kpi-label,
  199.         .dashboard-type-label {
  200.             color: var(--dashboard-muted);
  201.             font-size: 12px;
  202.             font-weight: 700;
  203.             letter-spacing: .04em;
  204.             text-transform: uppercase;
  205.         }
  207.         .dashboard-kpi-value {
  208.             color: #26364f;
  209.             font-size: 24px;
  210.             font-weight: 800;
  211.             line-height: 1.25;
  212.         }
  214.         .dashboard-kpi-copy {
  215.             color: var(--dashboard-muted);
  216.             font-size: 13px;
  217.         }
  219.         .dashboard-icon-badge {
  220.             border-radius: 8px;
  221.             height: 48px;
  222.             width: 48px;
  223.         }
  225.         .dashboard-type-card {
  226.             transition: transform .15s ease, box-shadow .15s ease;
  227.         }
  229.         .dashboard-type-card:hover {
  230.             box-shadow: 0 14px 28px rgba(15, 34, 58, .09);
  231.             transform: translateY(-2px);
  232.         }
  234.         .dashboard-type-card .card-body {
  235.             min-height: 188px;
  236.             padding: 20px;
  237.         }
  239.         .dashboard-type-value {
  240.             color: #26364f;
  241.             font-size: 21px;
  242.             font-weight: 800;
  243.         }
  245.         .dashboard-type-meta {
  246.             color: var(--dashboard-muted);
  247.             font-size: 13px;
  248.         }
  250.         .dashboard-progress {
  251.             background: #edf1f7;
  252.             border-radius: 999px;
  253.             display: flex;
  254.             height: 7px;
  255.             overflow: hidden;
  256.         }
  258.         .dashboard-progress-paid {
  259.             background: var(--dashboard-success);
  260.         }
  262.         .dashboard-progress-remaining {
  263.             background: var(--dashboard-danger);
  264.         }
  266.         .dashboard-chart-card .card-header,
  267.         .dashboard-table-card .card-header {
  268.             background: #fff;
  269.             border-bottom: 1px solid var(--dashboard-border);
  270.             padding: 18px 20px;
  271.         }
  273.         .dashboard-chart-card .card-title,
  274.         .dashboard-table-card .card-title {
  275.             color: #26364f;
  276.             font-weight: 700;
  277.         }
  279.         .dashboard-table-scroll {
  280.             max-height: 774px;
  281.             overflow: auto;
  282.             border: 1px solid var(--dashboard-border);
  283.             border-radius: 8px;
  284.         }
  286.         .dashboard-table-scroll table {
  287.             margin-bottom: 0;
  288.             min-width: 1060px;
  289.         }
  291.         .dashboard-table-scroll thead th {
  292.             position: sticky;
  293.             top: 0;
  294.             z-index: 2;
  295.             background: #f6f8fb;
  296.             box-shadow: inset 0 -1px 0 var(--dashboard-border);
  297.             color: #566176;
  298.             font-size: 12px;
  299.             letter-spacing: .03em;
  300.             text-transform: uppercase;
  301.         }
  303.         .dashboard-table-scroll tbody tr {
  304.             height: 48px;
  305.         }
  307.         .dashboard-table-scroll tbody tr:hover {
  308.             background: #f8fbff;
  309.         }
  311.         .dashboard-table-scroll .btn {
  312.             border-radius: 6px;
  313.             font-weight: 700;
  314.             white-space: nowrap;
  315.         }
  317.         .dashboard-client-cell {
  318.             max-width: 280px;
  319.             white-space: normal;
  320.         }
  322.         .dashboard-money {
  323.             font-variant-numeric: tabular-nums;
  324.             white-space: nowrap;
  325.         }
  327.         .dashboard-empty-state {
  328.             color: var(--dashboard-muted);
  329.             padding: 34px 16px;
  330.         }
  332.         @media (max-width: 575.98px) {
  333.             .dashboard-hero {
  334.                 padding: 18px;
  335.             }
  337.             .dashboard-hero-title {
  338.                 font-size: 21px;
  339.             }
  341.             .dashboard-filter-card .d-flex.gap-2 {
  342.                 flex-direction: column;
  343.             }
  344.         }
  345.     </style>
  347.     <div class="page-content dashboard-page">
  348.         <div class="container-fluid">
  349.             <div class="row mb-4">
  350.                 <div class="col-12">
  351.                     <div class="dashboard-hero d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
  352.                         <div>
  353.                             <div class="dashboard-hero-kicker mb-2">Suivi paiements</div>
  354.                             <h4 class="dashboard-hero-title mb-2">Tableau de bord des restes a payer</h4>
  355.                             <p class="dashboard-hero-subtitle mb-3">Consultez les factures, BL, BLP et BS avec recherche par periode, client, type de fichier et statut de paiement.</p>
  356.                             <div class="d-flex flex-wrap gap-2">
  357.                                 <span class="dashboard-hero-pill">
  358.                                     <i class="ri-file-list-3-line align-bottom me-1"></i>{{ totals.count }} document{{ totals.count > 1 ? 's' : '' }}
  359.                                 </span>
  360.                                 <span class="dashboard-hero-pill">
  361.                                     <i class="ri-error-warning-line align-bottom me-1"></i>{{ totals.remaining|number_format(3, '.', ' ') }} DT reste a payer
  362.                                 </span>
  363.                                 {% if filters.unpaid_only %}
  364.                                     <span class="dashboard-hero-pill text-danger">
  365.                                         <i class="ri-filter-3-line align-bottom me-1"></i>Non payes seulement
  366.                                     </span>
  367.                                 {% endif %}
  368.                             </div>
  369.                         </div>
  370.                         <div>
  371.                             <a href="{{ path('app_home') }}" class="btn dashboard-reset-btn">
  372.                                 <i class="ri-refresh-line align-bottom me-1"></i> Reinitialiser
  373.                             </a>
  374.                         </div>
  375.                     </div>
  376.                 </div>
  377.             </div>
  379.             <div class="card dashboard-filter-card mb-4">
  380.                 <div class="card-body">
  381.                     <form method="get" action="{{ path('app_home') }}" class="row g-3 align-items-end">
  382.                         <div class="col-xl-3 col-md-6">
  383.                             <label for="dashboard_client" class="form-label">Client</label>
  384.                             <select id="dashboard_client" name="client" class="form-select">
  385.                                 <option value="">Tous les clients</option>
  386.                                 {% for client in clients %}
  387.                                     {% set clientLabel = client.raisonsocial ?: ((client.nom ~ ' ' ~ client.prenom)|trim) %}
  388.                                     <option value="{{ client.id }}" {% if filters.client == client.id %}selected{% endif %}>
  389.                                         {{ clientLabel ?: ('Client #' ~ client.id) }}
  390.                                     </option>
  391.                                 {% endfor %}
  392.                             </select>
  393.                         </div>
  394.                         <div class="col-xl-3 col-md-6">
  395.                             <label for="dateRangePicker" class="form-label d-block">Période</label>
  396.                             <div class="input-group">
  397.                                 <input
  398.                                         id="dateRangePicker"
  399.                                         name="dateRangePicker"
  400.                                         type="text"
  401.                                         class="form-control"
  402.                                         placeholder="Choisissez une plage de dates"
  403.                                         readonly
  404.                                         value="{{ filters.date_range }}"
  405.                                 />
  406.                                 <span id="datePickerButton" class="input-group-text bg-primary border-primary text-white">
  407.                                     <i class="ri-calendar-2-line"></i>
  408.                                 </span>
  409.                             </div>
  410.                         </div>
  411.                         <div class="col-xl-2 col-md-6">
  412.                             <label for="dashboard_type" class="form-label">Type fichier</label>
  413.                             <select id="dashboard_type" name="type" class="form-select">
  414.                                 <option value="">Tous les types</option>
  415.                                 {% for type, item in stats %}
  416.                                     <option value="{{ type }}" {% if filters.type == type %}selected{% endif %}>
  417.                                         {{ item.shortLabel }} - {{ item.label }}
  418.                                     </option>
  419.                                 {% endfor %}
  420.                             </select>
  421.                         </div>
  422.                         <div class="col-xl-2 col-md-6">
  423.                             <label for="dashboard_unpaid_only" class="form-label">Paiement</label>
  424.                             <div class="form-check form-switch dashboard-payment-filter d-flex align-items-center gap-2">
  425.                                 <input class="form-check-input m-0" type="checkbox" id="dashboard_unpaid_only" name="unpaid_only" value="1" {% if filters.unpaid_only %}checked{% endif %}>
  426.                                 <label class="form-check-label small mb-0" for="dashboard_unpaid_only">Non payé</label>
  427.                             </div>
  428.                         </div>
  429.                         <div class="col-xl-2 col-md-12">
  430.                             <div class="d-flex gap-2">
  431.                                 <button type="submit" class="btn btn-primary flex-fill">
  432.                                     <i class="ri-search-line align-bottom me-1"></i> Filtrer
  433.                                 </button>
  434.                                 <button type="submit" formaction="{{ path('app_home_export_excel') }}" formmethod="get" class="btn btn-success flex-fill">
  435.                                     <i class="ri-file-excel-2-line align-bottom me-1"></i> Excel
  436.                                 </button>
  437.                             </div>
  438.                         </div>
  439.                     </form>
  440.                 </div>
  441.             </div>
  443.             <div class="row">
  444.                 <div class="col-xl-3 col-md-6">
  445.                     <div class="card card-animate dashboard-kpi-card metric-info">
  446.                         <div class="card-body">
  447.                             <div class="d-flex align-items-center">
  448.                                 <div class="flex-grow-1 overflow-hidden">
  449.                                     <p class="dashboard-kpi-label text-truncate mb-0">Total documents</p>
  450.                                 </div>
  451.                                 <div class="avatar-sm flex-shrink-0">
  452.                                     <span class="avatar-title dashboard-icon-badge bg-soft-info fs-3">
  453.                                         <i class="ri-stack-line text-info"></i>
  454.                                     </span>
  455.                                 </div>
  456.                             </div>
  457.                             <div class="mt-4">
  458.                                 <h4 class="dashboard-kpi-value ff-secondary mb-2">{{ totals.count }}</h4>
  459.                                 <p class="dashboard-kpi-copy mb-0">Documents trouves avec les filtres actifs.</p>
  460.                             </div>
  461.                         </div>
  462.                     </div>
  463.                 </div>
  465.                 <div class="col-xl-3 col-md-6">
  466.                     <div class="card card-animate dashboard-kpi-card metric-primary">
  467.                         <div class="card-body">
  468.                             <div class="d-flex align-items-center">
  469.                                 <div class="flex-grow-1 overflow-hidden">
  470.                                     <p class="dashboard-kpi-label text-truncate mb-0">Montant total</p>
  471.                                 </div>
  472.                                 <div class="avatar-sm flex-shrink-0">
  473.                                     <span class="avatar-title dashboard-icon-badge bg-soft-primary fs-3">
  474.                                         <i class="ri-money-dollar-circle-line text-primary"></i>
  475.                                     </span>
  476.                                 </div>
  477.                             </div>
  478.                             <div class="mt-4">
  479.                                 <h4 class="dashboard-kpi-value ff-secondary mb-2">{{ totals.total|number_format(3, '.', ' ') }} DT</h4>
  480.                                 <p class="dashboard-kpi-copy mb-0">Total TTC des documents.</p>
  481.                             </div>
  482.                         </div>
  483.                     </div>
  484.                 </div>
  486.                 <div class="col-xl-3 col-md-6">
  487.                     <div class="card card-animate dashboard-kpi-card metric-success">
  488.                         <div class="card-body">
  489.                             <div class="d-flex align-items-center">
  490.                                 <div class="flex-grow-1 overflow-hidden">
  491.                                     <p class="dashboard-kpi-label text-truncate mb-0">Montant paye</p>
  492.                                 </div>
  493.                                 <div class="avatar-sm flex-shrink-0">
  494.                                     <span class="avatar-title dashboard-icon-badge bg-soft-success fs-3">
  495.                                         <i class="ri-checkbox-circle-line text-success"></i>
  496.                                     </span>
  497.                                 </div>
  498.                             </div>
  499.                             <div class="mt-4">
  500.                                 <h4 class="dashboard-kpi-value ff-secondary mb-2">{{ totals.paid|number_format(3, '.', ' ') }} DT</h4>
  501.                                 <p class="dashboard-kpi-copy mb-0">Montant deja regle.</p>
  502.                             </div>
  503.                         </div>
  504.                     </div>
  505.                 </div>
  507.                 <div class="col-xl-3 col-md-6">
  508.                     <div class="card card-animate dashboard-kpi-card metric-danger">
  509.                         <div class="card-body">
  510.                             <div class="d-flex align-items-center">
  511.                                 <div class="flex-grow-1 overflow-hidden">
  512.                                     <p class="dashboard-kpi-label text-truncate mb-0">Reste a payer</p>
  513.                                 </div>
  514.                                 <div class="avatar-sm flex-shrink-0">
  515.                                     <span class="avatar-title dashboard-icon-badge bg-soft-danger fs-3">
  516.                                         <i class="ri-error-warning-line text-danger"></i>
  517.                                     </span>
  518.                                 </div>
  519.                             </div>
  520.                             <div class="mt-4">
  521.                                 <h4 class="dashboard-kpi-value ff-secondary mb-2">{{ totals.remaining|number_format(3, '.', ' ') }} DT</h4>
  522.                                 <p class="dashboard-kpi-copy mb-0">Somme restante sur la selection.</p>
  523.                             </div>
  524.                         </div>
  525.                     </div>
  526.                 </div>
  527.             </div>
  529.             <div class="row">
  530.                 {% for key, item in stats %}
  531.                     {% set paidPercent = item.total > 0 ? ((item.paid / item.total) * 100)|round(0, 'floor') : 0 %}
  532.                     {% set paidPercent = paidPercent > 100 ? 100 : paidPercent %}
  533.                     {% set remainingPercent = 100 - paidPercent %}
  534.                     <div class="col-xl-3 col-md-6">
  535.                         <div class="card dashboard-type-card">
  536.                             <div class="card-body">
  537.                                 <div class="d-flex align-items-center mb-3">
  538.                                     <div class="avatar-sm flex-shrink-0 me-3">
  539.                                         <span class="avatar-title dashboard-icon-badge bg-soft-{{ item.color }} text-{{ item.color }} fs-3">
  540.                                             <i class="{{ item.icon }}"></i>
  541.                                         </span>
  542.                                     </div>
  543.                                     <div class="flex-grow-1">
  544.                                         <h5 class="mb-1">{{ item.label }}</h5>
  545.                                         <p class="dashboard-type-meta mb-0">{{ item.count }} document{{ item.count > 1 ? 's' : '' }}</p>
  546.                                     </div>
  547.                                 </div>
  548.                                 <p class="dashboard-type-label mb-1">Reste a payer</p>
  549.                                 <h4 class="dashboard-type-value mb-2">{{ item.remaining|number_format(3, '.', ' ') }} DT</h4>
  550.                                 <div class="d-flex justify-content-between dashboard-type-meta">
  551.                                     <span>Total: {{ item.total|number_format(3, '.', ' ') }}</span>
  552.                                     <span>Paye: {{ item.paid|number_format(3, '.', ' ') }}</span>
  553.                                 </div>
  554.                                 <div class="dashboard-progress mt-3" aria-label="Progression paiement {{ item.shortLabel }}">
  555.                                     <span class="dashboard-progress-paid" style="width: {{ paidPercent }}%"></span>
  556.                                     <span class="dashboard-progress-remaining" style="width: {{ remainingPercent }}%"></span>
  557.                                 </div>
  558.                                 <div class="d-flex justify-content-between dashboard-type-meta mt-2">
  559.                                     <span>{{ paidPercent }}% paye</span>
  560.                                     <span>{{ remainingPercent }}% reste</span>
  561.                                 </div>
  562.                                 <div class="mt-3">
  563.                                     <a href="{{ path(item.route) }}" class="link-{{ item.color }}">
  564.                                         Voir la liste <i class="ri-arrow-right-line align-bottom"></i>
  565.                                     </a>
  566.                                 </div>
  567.                             </div>
  568.                         </div>
  569.                     </div>
  570.                 {% endfor %}
  571.             </div>
  573.             <div class="row">
  574.                 <div class="col-xl-8">
  575.                     <div class="card dashboard-chart-card">
  576.                         <div class="card-header">
  577.                             <h4 class="card-title mb-1">Reste a payer par type</h4>
  578.                             <p class="text-muted mb-0">Comparaison entre total TTC, montant paye et reste.</p>
  579.                         </div>
  580.                         <div class="card-body">
  581.                             <div id="dashboard_reste_bar" class="apex-charts" style="min-height: 330px;"></div>
  582.                         </div>
  583.                     </div>
  584.                 </div>
  585.                 <div class="col-xl-4">
  586.                     <div class="card dashboard-chart-card">
  587.                         <div class="card-header">
  588.                             <h4 class="card-title mb-1">Repartition du reste</h4>
  589.                             <p class="text-muted mb-0">Poids de chaque type dans le montant restant.</p>
  590.                         </div>
  591.                         <div class="card-body">
  592.                             <div id="dashboard_reste_donut" class="apex-charts" style="min-height: 330px;"></div>
  593.                         </div>
  594.                     </div>
  595.                 </div>
  596.             </div>
  598.             <div class="row">
  599.                 <div class="col-12">
  600.                     <div class="card dashboard-table-card">
  601.                         <div class="card-header d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-2">
  602.                             <div>
  603.                                 <h4 class="card-title mb-1">Documents avec reste a payer</h4>
  604.                                 <p class="text-muted mb-0">15 lignes visibles, puis defilement vertical pour le reste.</p>
  605.                             </div>
  606.                             <div class="d-flex flex-wrap align-items-center gap-2">
  607.                                 {% if filters.type %}
  608.                                     <span class="badge bg-soft-info text-info">Type: {{ stats[filters.type].shortLabel }}</span>
  609.                                 {% endif %}
  610.                                 {% if filters.unpaid_only %}
  611.                                     <span class="badge bg-soft-danger text-danger">Non payés seulement</span>
  612.                                 {% endif %}
  613.                                 <span class="badge bg-soft-primary text-primary">{{ documents|length }} ligne{{ documents|length > 1 ? 's' : '' }}</span>
  614.                             </div>
  615.                         </div>
  616.                         <div class="card-body">
  617.                             <div class="table-responsive dashboard-table-scroll">
  618.                                 <table class="table table-hover table-nowrap align-middle">
  619.                                     <thead class="table-light">
  620.                                     <tr>
  621.                                         <th>Type</th>
  622.                                         <th>Numero</th>
  623.                                         <th>Date</th>
  624.                                         <th>Client</th>
  625.                                         <th class="text-end">Total TTC</th>
  626.                                         <th class="text-end">Paye</th>
  627.                                         <th class="text-end">Reste a payer</th>
  628.                                         <th class="text-end">Action</th>
  629.                                     </tr>
  630.                                     </thead>
  631.                                     <tbody>
  632.                                     {% for document in documents %}
  633.                                         <tr>
  634.                                             <td>
  635.                                                 <span class="badge bg-soft-{{ document.typeColor }} text-{{ document.typeColor }}">{{ document.typeLabel }}</span>
  636.                                             </td>
  637.                                             <td class="fw-medium">{{ document.number }}</td>
  638.                                             <td>{{ document.date ? document.date|date('d/m/Y') : '-' }}</td>
  639.                                             <td class="dashboard-client-cell">{{ document.client }}</td>
  640.                                             <td class="text-end dashboard-money">{{ document.total|number_format(3, '.', ' ') }} DT</td>
  641.                                             <td class="text-end text-success dashboard-money">{{ document.paid|number_format(3, '.', ' ') }} DT</td>
  642.                                             <td class="text-end fw-semibold text-danger dashboard-money">{{ document.remaining|number_format(3, '.', ' ') }} DT</td>
  643.                                             <td class="text-end">
  644.                                                 <a href="{{ document.url }}" class="btn btn-sm btn-soft-primary">
  645.                                                     Voir
  646.                                                 </a>
  647.                                             </td>
  648.                                         </tr>
  649.                                     {% else %}
  650.                                         <tr>
  651.                                             <td colspan="8" class="text-center dashboard-empty-state">
  652.                                                 <div class="fs-2 mb-2"><i class="ri-search-eye-line"></i></div>
  653.                                                 <div class="fw-semibold">Aucun document trouve</div>
  654.                                                 <div class="small">Changez la periode, le client ou le type de fichier.</div>
  655.                                             </td>
  656.                                         </tr>
  657.                                     {% endfor %}
  658.                                     </tbody>
  659.                                 </table>
  660.                             </div>
  661.                         </div>
  662.                     </div>
  663.                 </div>
  664.             </div>
  665.         </div>
  666.     </div>
  668.     <script>
  669.         document.addEventListener('DOMContentLoaded', function () {
  670.             var dateRangeInput = document.getElementById('dateRangePicker');
  671.             var datePickerButton = document.getElementById('datePickerButton');
  673.             if (dateRangeInput && typeof flatpickr !== 'undefined') {
  674.                 var datePickerInstance = flatpickr(dateRangeInput, {
  675.                     mode: 'range',
  676.                     dateFormat: 'Y-m-d',
  677.                     allowInput: true
  678.                 });
  680.                 if (datePickerButton) {
  681.                     datePickerButton.addEventListener('click', function () {
  682.                         datePickerInstance.open();
  683.                     });
  684.                 }
  685.             }
  687.             if (window.jQuery && jQuery.fn.select2) {
  688.                 jQuery('#dashboard_client').select2({
  689.                     width: '100%',
  690.                     placeholder: 'Tous les clients',
  691.                     allowClear: true
  692.                 });
  694.                 jQuery('#dashboard_type').select2({
  695.                     width: '100%',
  696.                     minimumResultsForSearch: Infinity
  697.                 });
  698.             }
  700.             if (typeof ApexCharts === 'undefined') {
  701.                 return;
  702.             }
  704.             var labels = {{ chart.labels|json_encode|raw }};
  705.             var remaining = {{ chart.remaining|json_encode|raw }};
  706.             var paid = {{ chart.paid|json_encode|raw }};
  707.             var total = {{ chart.total|json_encode|raw }};
  708.             var colors = ['#405189', '#0ab39c', '#f7b84b', '#f06548'];
  710.             var barElement = document.querySelector('#dashboard_reste_bar');
  711.             if (barElement) {
  712.                 new ApexCharts(barElement, {
  713.                     series: [
  714.                         {name: 'Reste a payer', data: remaining},
  715.                         {name: 'Montant paye', data: paid},
  716.                         {name: 'Total TTC', data: total}
  717.                     ],
  718.                     chart: {
  719.                         type: 'bar',
  720.                         height: 330,
  721.                         fontFamily: 'inherit',
  722.                         foreColor: '#74788d',
  723.                         toolbar: {show: false}
  724.                     },
  725.                     grid: {
  726.                         borderColor: '#edf1f7',
  727.                         strokeDashArray: 4
  728.                     },
  729.                     plotOptions: {
  730.                         bar: {
  731.                             borderRadius: 6,
  732.                             columnWidth: '42%'
  733.                         }
  734.                     },
  735.                     dataLabels: {enabled: false},
  736.                     colors: ['#f06548', '#0ab39c', '#405189'],
  737.                     xaxis: {
  738.                         categories: labels,
  739.                         axisBorder: {show: false},
  740.                         axisTicks: {show: false}
  741.                     },
  742.                     yaxis: {
  743.                         labels: {
  744.                             formatter: function (value) {
  745.                                 return Number(value || 0).toFixed(3);
  746.                             }
  747.                         }
  748.                     },
  749.                     tooltip: {
  750.                         theme: 'light',
  751.                         y: {
  752.                             formatter: function (value) {
  753.                                 return Number(value || 0).toFixed(3) + ' DT';
  754.                             }
  755.                         }
  756.                     },
  757.                     legend: {
  758.                         horizontalAlign: 'right',
  759.                         markers: {radius: 99},
  760.                         position: 'top'
  761.                     }
  762.                 }).render();
  763.             }
  765.             var donutElement = document.querySelector('#dashboard_reste_donut');
  766.             if (donutElement) {
  767.                 new ApexCharts(donutElement, {
  768.                     series: remaining,
  769.                     labels: labels,
  770.                     chart: {
  771.                         type: 'donut',
  772.                         height: 330,
  773.                         fontFamily: 'inherit',
  774.                         foreColor: '#74788d'
  775.                     },
  776.                     colors: colors,
  777.                     dataLabels: {
  778.                         dropShadow: {enabled: false}
  779.                     },
  780.                     plotOptions: {
  781.                         pie: {
  782.                             donut: {
  783.                                 size: '68%',
  784.                                 labels: {
  785.                                     show: true,
  786.                                     total: {
  787.                                         show: true,
  788.                                         label: 'Reste',
  789.                                         formatter: function (w) {
  790.                                             var sum = w.globals.seriesTotals.reduce(function (a, b) {
  791.                                                 return a + b;
  792.                                             }, 0);
  794.                                             return Number(sum || 0).toFixed(3) + ' DT';
  795.                                         }
  796.                                     },
  797.                                     value: {
  798.                                         formatter: function (value) {
  799.                                             return Number(value || 0).toFixed(3);
  800.                                         }
  801.                                     }
  802.                                 }
  803.                             }
  804.                         }
  805.                     },
  806.                     stroke: {width: 0},
  807.                     legend: {
  808.                         markers: {radius: 99},
  809.                         position: 'bottom'
  810.                     },
  811.                     tooltip: {
  812.                         y: {
  813.                             formatter: function (value) {
  814.                                 return Number(value || 0).toFixed(3) + ' DT';
  815.                             }
  816.                         }
  817.                     },
  818.                     noData: {
  819.                         text: 'Aucune donnee'
  820.                     }
  821.                 }).render();
  822.             }
  823.         });
  824.     </script>
  825. {% endblock %}