Tableau de bord et graphiques (#1085)

- Ajout de 1 tableau de bord par section de la page d'accueil (sur la droite) --------- Co-authored-by: pskl <[email protected]>
betagouv · Nov 13, 2024 · f8b6e30 · f8b6e30
1 parent a1a4a55
commit f8b6e30
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 51 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -14,3 +14,21 @@
  *= require_self
  *= require utility/icons/icons.css
  */
+
+.timeline-row {
+  margin-bottom: 2rem;
+}
+
+.timeline-section, .chart-container {
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+}
+
+.gray-panel {
+  height: 100%;
+}
+
+.chart-container {
+  justify-content: center;
+}
diff --git a/app/facades/establishment_facade.rb b/app/facades/establishment_facade.rb
@@ -23,6 +23,13 @@ def attributive_decisions_count
                                      .count
   end
 
+  def without_attributive_decisions_count
+    @without_attributive_decisions_count ||= selected_classes
+                                             .joins(:schoolings)
+                                             .merge(Schooling.without_attributive_decisions)
+                                             .count
+  end
+
   def students_count
     @students_count ||= selected_classes
                         .joins(:students)
@@ -38,6 +45,10 @@ def ribs_count
                     .count(:"students.id")
   end
 
+  def students_without_rib_count
+    @students_without_rib_count ||= students_count - ribs_count
+  end
+
   def pfmps_counts
     @pfmps_counts ||= PfmpStateMachine
                       .states

diff --git a/app/views/classes/_attributive_decisions_panel.html.haml b/app/views/classes/_attributive_decisions_panel.html.haml
@@ -2,7 +2,6 @@
 .fr-grid-row.fr-grid-row--top
   %h2.fr-col 1. Décisions d'attribution
   = progress_badge(@establishment_facade.attributive_decisions_count, @establishment_facade.schoolings_count, title: "Les décisions d'attribution sont générés pour chaque scolarité,\ny compris pour les élèves sortis de classes.")
-
 %p La décision d'attribution annuelle rend éligible l'élève à percevoir l'allocation, et ce pour chaque classe dans laquelle il a effectué une scolarité.
 
 %p Ce document doit obligatoirement être transmis à l'élève et conservé toute l'année scolaire et il doit être archivé par l'établissement pendant une durée de 10 ans en cas de contrôle de la chaîne des dépenses publiques.

diff --git a/app/views/home/_attributive_decision_form.html.haml b/app/views/home/_attributive_decision_form.html.haml
@@ -4,5 +4,5 @@
     = form.label :confirmed_director, class: "fr-label" do
       = t("panels.attributive_decisions.confirm_director").html_safe
       .fr-text--sm.fr-mt-1w= confirmed_director_information
-  
-  = form.submit t("panels.attributive_decisions.generate", count: count), class: "fr-btn fr-btn--secondary"
+
+  = form.submit t("panels.attributive_decisions.generate", count: count), class: "fr-btn fr-btn--secondary"
diff --git a/app/views/home/_home_timeline.html.haml b/app/views/home/_home_timeline.html.haml
@@ -1,48 +1,71 @@
 = render 'school_years/announcement'
 
-%h1= "Année scolaire #{selected_school_year}"
+.row
+  %h1= "Année scolaire #{selected_school_year}"
+
 - if @establishment_facade.students_count <= 0
-  = t("errors.school_years.not_found").html_safe
+  .row
+    = t("errors.school_years.not_found").html_safe
 - else
-  .gray-panel#attributive_decision_panel
-    = render 'classes/attributive_decisions_panel'
-
-  .gray-panel
-    .fr-grid-row.fr-grid-row--top
-      %h2.fr-col 2. Coordonnées bancaires
-      = progress_badge(@establishment_facade.ribs_count, @establishment_facade.students_count, title: "Les coordonnées bancaires sont réutilisées pour un même élève\nà travers toutes les classes qu'il a pu fréquenter.")
-
-    %p Afin de pouvoir verser l'allocation aux lycéens, APLyPro a besoin de leurs coordonnées bancaires, de celles d'un responsable légal ou d'un tiers.
-    %ul.fr-btns-group
-      %li= link_to "Choisir une classe pour saisir des coordonnées bancaires", school_year_classes_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0"
-
-  .gray-panel
-    %h2.fr-col 3. Périodes de formation en milieu professionnel
-
-    .fr-grid-row
-      - PfmpStateMachine.states.each_with_index do |state, index|
-        - if index > 0
-          .fr-mx-1w →
-        = pfmps_status_count_badge(state.to_sym, @establishment_facade.pfmps_counts[state.to_sym], display_zero: true)
-
-    %p Pour calculer le montant des allocations à envoyer, APLyPro a besoin de connaître le nombre de jours travaillés des PFMPs de chaque élève.
-    %ul.fr-btns-group
-      %li= link_to "Choisir une classe ou un élève pour saisir une PFMP", school_year_classes_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0"
+  - dsfr_colors = { blue: "#000091", light_blue: "#bccdff", green: "#88fdaa", red: "#ffbdbd" } # https://www.systeme-de-design.gouv.fr/fondamentaux/couleurs-palette
+  .fr-grid-row.timeline-row
+    .fr-col-md-7
+      .gray-panel.timeline-section
+        = render 'classes/attributive_decisions_panel'
+    .fr-col-md-4.fr-ml-4w
+      .chart-container
+        = pie_chart({ "Élèves avec DA" => @establishment_facade.attributive_decisions_count, "Élèves sans DA" => @establishment_facade.without_attributive_decisions_count }, colors: [dsfr_colors[:green], dsfr_colors[:red]], donut: true)
 
-  .gray-panel
-    %h2.fr-col 4. Demandes de paiements des PFMPs
+  .fr-grid-row.timeline-row
+    .fr-col-md-7
+      .gray-panel.timeline-section
+        .fr-grid-row.fr-grid-row--top
+          %h2.fr-col 2. Coordonnées bancaires
+          = progress_badge(@establishment_facade.ribs_count, @establishment_facade.students_count, title: "Les coordonnées bancaires sont réutilisées pour un même élève\nà travers toutes les classes qu'il a pu fréquenter.")
+        %p Afin de pouvoir verser l'allocation aux lycéens, APLyPro a besoin de leurs coordonnées bancaires, de celles d'un responsable légal ou d'un tiers.
+        %ul.fr-btns-group
+          %li= link_to "Choisir une classe pour saisir des coordonnées bancaires", school_year_classes_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0"
+    .fr-col-md-4.fr-ml-4w
+      .chart-container
+        = pie_chart({ "Élèves avec RIB" => @establishment_facade.ribs_count, "Élèves sans RIB" => @establishment_facade.students_without_rib_count }, colors: [dsfr_colors[:green], dsfr_colors[:red]], donut: true)
 
-    .fr-grid-row
-      - ASP::PaymentRequestDecorator::PAYMENT_STAGES.each_with_index do |states, index|
-        - if index > 0
-          .fr-mx-1w →
-        .centering-container.fr-mb-2w
-          = payment_requests_status_count_badge(states.first, @establishment_facade.payment_requests_counts[states.first], display_zero: true)
-          = payment_requests_status_count_badge(states.last, @establishment_facade.payment_requests_counts[states.last], display_zero: false)
+  .fr-grid-row.timeline-row
+    .fr-col-md-7
+      .gray-panel.timeline-section
+        %h2 3. Périodes de formation en milieu professionnel
+        .fr-grid-row
+          - PfmpStateMachine.states.each_with_index do |state, index|
+            - if index > 0
+              .fr-mx-1w →
+            = pfmps_status_count_badge(state.to_sym, @establishment_facade.pfmps_counts[state.to_sym], display_zero: true)
+        %p Pour calculer le montant des allocations à envoyer, APLyPro a besoin de connaître le nombre de jours travaillés des PFMPs de chaque élève.
+        %ul.fr-btns-group
+          %li= link_to "Choisir une classe ou un élève pour saisir une PFMP", school_year_classes_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0"
+    .fr-col-md-4.fr-ml-4w
+      .chart-container
+        = column_chart(@establishment_facade.pfmps_counts.transform_keys { |key| t("pfmps.state.#{key}") },
+          colors: [dsfr_colors[:light_blue], dsfr_colors[:red], dsfr_colors[:green], dsfr_colors[:red]],
+          label: "PFMPs par états")
 
-    %p La validation du chef d'établissement est nécessaire pour chaque PFMP. Une fois la PFMP validée, une demande de paiement sera envoyée à l'Agence de Services et de Paiement (ASP).
-    %ul.fr-btns-group
-      - if current_user.can_validate?
-        %li= link_to "Consulter et gérer les envois en paiement", school_year_validations_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0"
-      - else
-        %li= button_to "Vous n'avez pas le droit de valider des PFMPs", "#", class: 'fr-btn fr-btn--primary fr-mb-0', disabled: true
+  .fr-grid-row.timeline-row
+    .fr-col-md-7
+      .gray-panel.timeline-section
+        %h2 4. Demandes de paiements des PFMPs
+        .fr-grid-row
+          - ASP::PaymentRequestDecorator::PAYMENT_STAGES.each_with_index do |states, index|
+            - if index > 0
+              .fr-mx-1w →
+            .centering-container.fr-mb-2w
+              = payment_requests_status_count_badge(states.first, @establishment_facade.payment_requests_counts[states.first], display_zero: true)
+              = payment_requests_status_count_badge(states.last, @establishment_facade.payment_requests_counts[states.last], display_zero: false)
+        %p La validation du chef d'établissement est nécessaire pour chaque PFMP. Une fois la PFMP validée, une demande de paiement est ensuite envoyée à l'Agence de Services et de Paiement (ASP). Chaque demande de paiement possède un statut affiché dans la page "Paiements".
+        %ul.fr-btns-group
+          - if current_user.can_validate?
+            %li= link_to "Consulter et gérer les envois en paiement", school_year_validations_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0"
+          - else
+            %li= button_to "Vous n'avez pas le droit de valider des PFMPs", "#", class: 'fr-btn fr-btn--primary fr-mb-0', disabled: true
+    .fr-col-md-4.fr-ml-4w
+      .chart-container
+        = column_chart(@establishment_facade.payment_requests_counts.transform_keys { |key| t("payment_requests.state.#{key}") },
+          colors: [dsfr_colors[:blue], dsfr_colors[:red], dsfr_colors[:light_blue], dsfr_colors[:red], dsfr_colors[:green], dsfr_colors[:red]],
+          label: "Demandes de paiements par états")
diff --git a/app/views/home/home.html.haml b/app/views/home/home.html.haml
@@ -1,8 +1,8 @@
 .home.fr-container
   .fr-grid-row.fr-grid-row--center
-    .fr-col-lg-7
-      - if current_establishment.fetching_students
-        = dsfr_alert(type: :info, title: "Récupération des élèves en cours") do
-          %p Nous sommes en train de récupérer les données de vos élèves, veuillez rafraichir la page dans quelques minutes.
-      - else
+    - if current_establishment.fetching_students
+      = dsfr_alert(type: :info, title: "Récupération des élèves en cours") do
+        %p Nous sommes en train de récupérer les données de vos élèves, veuillez rafraichir la page dans quelques minutes.
+    - else
+      .container
         = render partial: "home_timeline"
diff --git a/config/initializers/version.rb b/config/initializers/version.rb
@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Aplypro
-  VERSION = "1.20.5"
+  VERSION = "2.0.0"
 end
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
@@ -148,7 +148,7 @@ fr:
       pfmp: "de la PFMP"
       rib: "du RIB"
   menu:
-    home: Accueil
+    home: Tableau de bord
     classes: Classes
     new_rib: Saisir des coord. bancaires
     new_pfmp: Saisir une PFMP