Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refonte UX/UI - Ajouts d'onglets sur l'accueil du tableau de bord #3956

Merged
merged 1 commit into from
Apr 25, 2024
Merged

Refonte UX/UI - Ajouts d'onglets sur l'accueil du tableau de bord #3956

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions itou/static/css/itou.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -457,3 +457,10 @@ an input field being invalid, generating an uncontrolled red box-shadow. */
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}

.c-banner--pilotage {
background-image: url("../img/dashboard/banner-statistiques-pilotage-bg.jpg");
background-repeat: no-repeat;
background-position: center right;
background-size: cover;
}
Binary file added itou/static/img/dashboard/banner-statistiques-pilotage-bg.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
235 changes: 149 additions & 86 deletions itou/templates/dashboard/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
{% load format_filters %}
{% load static tally %}
{% load matomo %}
{% load theme_inclusion %}

{% block title %}Tableau de bord {{ block.super }}{% endblock %}

{% block messages %}
Expand Down Expand Up @@ -154,107 +156,168 @@
{% endblock %}

{% block content_title %}
<h1 class="h1 mb-0">
{% if user.is_job_seeker and user.get_full_name %}Tableau de bord - {{ user.get_full_name }}{% endif %}
{% if request.current_organization %}{{ request.current_organization.display_name }}{% endif %}
</h1>
{% if request.current_organization %}
<p>
{% if user.is_prescriber %}
{% if request.current_organization.code_safir_pole_emploi %}
{% if request.current_organization.is_authorized %}Prescripteur habilité -{% endif %}
Code SAFIR {{ request.current_organization.code_safir_pole_emploi }}
{% elif request.current_organization.siret %}
{% if request.current_organization.is_authorized %}Prescripteur habilité -{% endif %}
SIRET {{ request.current_organization.siret|format_siret }}
{% endif %}
{% elif user.is_employer %}
SIRET {{ request.current_organization.siret|format_siret }}
<div class="d-flex flex-column flex-md-row gap-3 mb-3 justify-content-md-between">
<div>
<h1 class="mb-0">
{% if user.is_job_seeker and user.get_full_name %}Tableau de bord - {{ user.get_full_name }}{% endif %}
{% if request.current_organization %}{{ request.current_organization.display_name }}{% endif %}
</h1>
{% if request.current_organization %}
<p class="mb-0">
{% if user.is_prescriber %}
{% if request.current_organization.code_safir_pole_emploi %}
{% if request.current_organization.is_authorized %}Prescripteur habilité -{% endif %}
Code SAFIR {{ request.current_organization.code_safir_pole_emploi }}
{% elif request.current_organization.siret %}
{% if request.current_organization.is_authorized %}Prescripteur habilité -{% endif %}
SIRET {{ request.current_organization.siret|format_siret }}
{% endif %}
{% elif user.is_employer %}
SIRET {{ request.current_organization.siret|format_siret }}
{% endif %}
</p>
{% endif %}
</p>
{% endif %}
</div>
{% if user.is_employer %}
{% if request.current_organization.is_subject_to_eligibility_rules %}
{% comment %}
NOTE(vperron):
We currently do not allow OPCS users to apply for an offer.
We will have to discuss this matter further with AVE, but it has been
decided that it probably did not make much sense initially.
{% endcomment %}
<div>
{% if siae_suspension_text_with_dates %}
<span class="btn btn-lg btn-primary btn-ico disabled"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Vous ne pouvez pas déclarer d'embauche suite aux mesures prises dans le cadre du contrôle a posteriori. {{ siae_suspension_text_with_dates }}">
<i class="ri-user-follow-line font-weight-medium"></i>
<span>Déclarer une embauche</span>
</span>
{% else %}
<a href="{% url 'apply:check_nir_for_hire' company_pk=request.current_organization.pk %}" class="btn btn-lg btn-primary btn-ico" {% matomo_event "employeurs" "clic" "declarer-embauche" %}>
<i class="ri-user-follow-line font-weight-medium"></i>
<span>Déclarer une embauche</span>
</a>
{% endif %}
</div>
{% endif %}
{% endif %}
</div>
{% endblock %}

{% block content_title_after_alerts %}
<ul class="s-tabs-01__nav nav nav-tabs mb-0" role="tablist" data-it-sliding-tabs="true">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="ensemble-tab" data-bs-toggle="tab" href="#ensemble" role="tab" aria-controls="ensemble" aria-selected="true">Vue d’ensemble</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="statistiques-tab" data-bs-toggle="tab" href="#statistiques" role="tab" aria-controls="statistiques" aria-selected="false">Statistiques</a>
</li>
{% if user.is_employer or user.is_prescriber %}
<li class="nav-item" role="presentation">
<a class="nav-link" id="evenements-tab" data-bs-toggle="tab" href="#evenements" role="tab" aria-controls="evenements" aria-selected="false">Événements à venir</a>
</li>
{% endif %}
</ul>
{% endblock %}

{% block content %}
<section class="s-section">
<div class="s-section__container container">
<div class="row my-3 my-md-4">
<div class="s-section__row row">
<div class="col-12">
<form method="get" action="{% url "search:employers_results" %}" role="search">
{% include "search/includes/siaes_search_form.html" with form=siae_search_form only %}
</form>
</div>
</div>

<div class="row {% if not user.is_job_seeker %}row-cols-1 row-cols-md-2 row-cols-lg-3{% endif %} mt-3">
{% if user.is_staff %}
{% include "dashboard/includes/admin_card.html" %}
{% endif %}

{% if user.is_job_seeker %}
{% include "dashboard/includes/job_seeker_job_applications_card.html" %}
{% if user.latest_common_approval %}
{% include "dashboard/includes/job_seeker_approval_card.html" %}
{% endif %}
{% endif %}
{# end of if user.is_job_seeker #}
<div class="tab-content">
<div class="tab-pane fade show active" id="ensemble" role="tabpanel" aria-labelledby="ensemble-tab">
<h2>Vue d’ensemble</h2>
<form method="get" action="{% url "search:employers_results" %}" role="search" class="mt-3 mt-md-4">
{% include "search/includes/siaes_search_form.html" with form=siae_search_form only %}
</form>
<div class="row {% if not user.is_job_seeker %}row-cols-1 row-cols-md-2 row-cols-xl-3{% endif %} mt-3 mt-md-5">
{% if user.is_staff %}
{% include "dashboard/includes/admin_card.html" %}
{% endif %}

{% if user.is_prescriber %}
{% include "dashboard/includes/prescriber_job_applications_card.html" %}
{% if request.current_organization.is_authorized %}
{% include "dashboard/includes/prescriber_job_seekers_card.html" %}
{% endif %}
{% if request.current_organization %}
{% include "dashboard/includes/prescriber_organisation_card.html" %}
{% endif %}
{% endif %}
{# end of if user.is_prescriber #}

{% if user.is_employer %}
{% include "dashboard/includes/siae_job_applications_card.html" %}
{% if request.current_organization.is_subject_to_eligibility_rules %}
{% include "dashboard/includes/siae_employees_card.html" %}
{% endif %}
{% include "dashboard/includes/siae_card.html" %}
{% if active_campaigns or evaluated_siae_notifications %}
{% include "dashboard/includes/siae_evaluation_campains_card.html" %}
{% endif %}
{% endif %}
{# end of if user.is_employer #}
{% if user.is_job_seeker %}
{% include "dashboard/includes/job_seeker_job_applications_card.html" %}
{% if user.latest_common_approval %}
{% include "dashboard/includes/job_seeker_approval_card.html" %}
{% endif %}
{% endif %}
{# end of if user.is_job_seeker #}

{% if user.is_labor_inspector %}
{% include "dashboard/includes/labor_inspector_organization_card.html" %}
{% endif %}
{# end of if user.is_labor_inspector #}

{% if can_view_stats_ddets_iae and active_campaigns or can_view_stats_ddets_iae and closed_campaigns %}
{% include "dashboard/includes/labor_inspector_evaluation_campains_card.html" %}
{% endif %}
</div>
{% if user.is_prescriber %}
{% include "dashboard/includes/prescriber_job_applications_card.html" %}
{% if request.current_organization.is_authorized %}
{% include "dashboard/includes/prescriber_job_seekers_card.html" %}
{% endif %}
{% if request.current_organization %}
{% include "dashboard/includes/prescriber_organisation_card.html" %}
{% endif %}
{% endif %}
{# end of if user.is_prescriber #}

{% if can_view_stats_dashboard_widget or user.is_employer or user.is_prescriber %}
<h2>Services partenaires</h2>
<div class="row row-cols-1 row-cols-md-2 mt-3">
{% if can_view_stats_dashboard_widget %}
{% include "dashboard/includes/stats.html" %}
{% endif %}
{% if user.is_employer %}
{% include "dashboard/includes/siae_job_applications_card.html" %}
{% if request.current_organization.is_subject_to_eligibility_rules %}
{% include "dashboard/includes/siae_employees_card.html" %}
{% endif %}
{% include "dashboard/includes/siae_card.html" %}
{% if active_campaigns or evaluated_siae_notifications %}
{% include "dashboard/includes/siae_evaluation_campains_card.html" %}
{% endif %}
{% endif %}
{# end of if user.is_employer #}

{% if user.is_employer or user.is_prescriber %}
{% include "dashboard/includes/dora_card.html" with siret=request.current_organization.siret|default:"" tracker="mtm_campaign=LesEmplois&mtm_kwd=Dashboard" %}
{% include "dashboard/includes/diagoriente_card.html" with user=user only %}
{% endif %}
</div>
{% endif %}
{% if user.is_labor_inspector %}
{% include "dashboard/includes/labor_inspector_organization_card.html" %}
{% endif %}
{# end of if user.is_labor_inspector #}

{% if user.is_employer or user.is_prescriber %}
<h2>Actualités</h2>
<div class="row row-cols-1">
<div class="container">
<div class="js-tac-livestorm" data-url="https://app.livestorm.co/itou/upcoming?limit=3" title="Événements des emplois de l'inclusion | Livestorm">
{% if can_view_stats_ddets_iae and active_campaigns or can_view_stats_ddets_iae and closed_campaigns %}
{% include "dashboard/includes/labor_inspector_evaluation_campains_card.html" %}
{% endif %}
</div>
{% if can_view_stats_dashboard_widget or user.is_employer or user.is_prescriber %}
<h2>Services partenaires</h2>
<div class="row row-cols-1 row-cols-md-2 mt-3 mt-md-4">
{% if user.is_employer or user.is_prescriber %}
{% include "dashboard/includes/dora_card.html" with siret=request.current_organization.siret|default:"" tracker="mtm_campaign=LesEmplois&mtm_kwd=Dashboard" %}
{% include "dashboard/includes/diagoriente_card.html" with user=user only %}
{% endif %}
</div>
{% endif %}
</div>
<div class="tab-pane fade" id="statistiques" role="tabpanel" aria-labelledby="statistiques-tab">
{% if can_view_stats_dashboard_widget or user.is_employer or user.is_prescriber %}
<h2>Statistiques</h2>
<div class="c-banner c-banner--pilotage rounded-3 p-3 py-md-5 mt-3 mt-md-4 mb-3 mb-md-5">
<img src="{% static_theme_images 'logo-pilotage-inclusion.svg' %}" height="80" alt="Le pilotage de l'inclusion">
</div>
<div class="row row-cols-1 row-cols-md-2 mt-3 mt-md-4">
{% if can_view_stats_dashboard_widget %}
{% include "dashboard/includes/stats.html" %}
{% endif %}
</div>
{% endif %}
</div>
{% if user.is_employer or user.is_prescriber %}
<div class="tab-pane fade" id="evenements" role="tabpanel" aria-labelledby="evenements-tab">
<h2>Événements à venir</h2>
<div class="mt-3 mt-md-4">
<div class="js-tac-livestorm" data-url="https://app.livestorm.co/itou/upcoming?limit=10" title="Événements des emplois de l'inclusion | Livestorm">
</div>
</div>
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
</section>
{% endblock %}

{% block script %}
<script src="{% static 'js/sliding_tabs.js'%}"></script>
{% endblock %}
22 changes: 0 additions & 22 deletions itou/templates/dashboard/includes/siae_employees_card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,6 @@
<span>Gérer les salariés et PASS IAE</span>
</a>
<ul class="list-unstyled mb-lg-5">
{% comment %}
NOTE(vperron):
We currently do not allow OPCS users to apply for an offer.
We will have to discuss this matter further with AVE, but it has been
decided that it probably did not make much sense initially.
{% endcomment %}
<li class="d-flex justify-content-between align-items-center mb-3">
{% if siae_suspension_text_with_dates %}
<span class="btn-link btn-ico"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Vous ne pouvez pas déclarer d'embauche suite aux mesures prises dans le cadre du contrôle a posteriori. {{ siae_suspension_text_with_dates }}">
<i class="ri-user-follow-line ri-lg font-weight-normal disabled"></i>
<span class="disabled">Déclarer une embauche</span>
</span>
{% else %}
<a href="{% url 'apply:check_nir_for_hire' company_pk=request.current_organization.pk %}" class="btn-link btn-ico" {% matomo_event "employeurs" "clic" "declarer-embauche" %}>
<i class="ri-user-follow-line ri-lg font-weight-normal"></i>
<span>Déclarer une embauche</span>
</a>
{% endif %}
</li>
{% if can_show_employee_records %}
<li class="d-flex justify-content-between align-items-center mb-3">
<a href="{% url 'employee_record_views:list' %}?status=NEW" class="btn-link btn-ico" {% matomo_event "employeurs" "clic" "voir-liste-fiches-salaries" %}>
Expand Down
17 changes: 14 additions & 3 deletions itou/templates/dashboard/includes/stats.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div class="col mb-3 mb-md-5">
<div class="c-box p-0 h-100">
<div class="c-box__header--pilotage p-3 p-lg-4">
<span class="h4">Pilotage de l'inclusion</span>
<div class="p-3 p-lg-4">
<span class="h4 mb-0">Données personnalisées</span>
</div>
<div class="px-3 px-lg-4 pt-3 pt-lg-4">
<div class="px-3 px-lg-4">
<ul class="list-unstyled mb-lg-5">
{% if can_view_stats_siae_aci %}
<li class="d-flex justify-content-between align-items-center mb-3">
Expand Down Expand Up @@ -334,6 +334,17 @@
{% include "dashboard/includes/stats_new_badge.html" %}
</li>
{% endif %}
</ul>
</div>
</div>
</div>
<div class="col mb-3 mb-md-5">
<div class="c-box p-0 h-100">
<div class="p-3 p-lg-4">
<span class="h4 mb-0">Données publiques</span>
</div>
<div class="px-3 px-lg-4">
<ul class="list-unstyled mb-lg-5">
<li class="d-flex justify-content-between align-items-center mb-3">
<a href="{{ ITOU_PILOTAGE_URL }}/tableaux-de-bord" rel="noopener" target="_blank" aria-label="Accéder aux tableaux de bord publics (ouverture dans un nouvel onglet)" class="btn-link btn-ico">
<i class="ri-dashboard-line ri-lg font-weight-normal align-self-start"></i>
Expand Down
1 change: 0 additions & 1 deletion itou/templates/layout/_header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{% load static %}

{% load theme_inclusion %}

<header role="banner" id="header">
Expand Down
1 change: 1 addition & 0 deletions itou/templates/layout/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
{% block messages %}
{% bootstrap_messages %}
{% endblock %}
{% block content_title_after_alerts %}{% endblock %}
</div>
</div>
</div>
Expand Down
Loading