{% extends '@ProductsNotifications/base.html.twig' %}
{% set isGrantedSend = maybe_granted(['app.notifications.messaging.general', 'app.notifications.messaging.urgent']) %}
{% set isGrantedReview = maybe_granted(['app.notifications.contacts.admin', 'app.notifications.contacts.view']) %}
{% do dom_title_section('Dashboard') %}
{% block header %}
{% embed '@ui2022/page__header.html.twig' %}
{% block actions %}
{% if isGrantedSend %}
{% include '@ui2022/button--a.html.twig' with {
text: 'Create Message',
link: path('app.notifications.dashboard.default.select_modal'),
icon: 'icon-message-plane',
styles: 'primary',
modal: 'modal__new_broadcast',
} %}
{% endif %}
{% endblock %}
{% endembed %}
{% endblock %}
{% block content %}
{% embed '@ui2022/card__infostats.html.twig' %}
{% block area1 %}
{% include '@ui2022/card__infostats__header.html.twig' with {
title: 'Student reachability',
subtitle: 'Current records for students',
} %}
{% if stats.contacts.total == 0 %}
<p>There are no students in the system yet.</p>
{% else %}
<div class="d-flex justify-content-center justify-content-sm-start flex-wrap mt-1 pt-2">
{% include '@ui2022/chart--donut.html.twig' with {
legend: stats.contacts|filter((v,k) => k is not same as('total'))|map((v,k) => {
label: 'app.notifications.stats.reachability.labels.%s'|format(k)|trans,
color: 'app.notifications.stats.reachability.colors.%s'|format(k)|trans([], 'styles', 'app'),
}),
dataset: stats.contacts|filter((v,k) => k is not same as('total')),
} %}
{% include '@ui2022/legend.html.twig' with {
items: [
{
title: stats.contacts['reachable']|number_format,
icon: 'icon-contact-reachable',
styles: 'reachable',
subtitle: 'app.notifications.stats.reachability.labels.reachable'|trans,
tooltip: 'Tooltip text here...',
action: isGrantedReview ? {
text: 'Review',
link: path('app.notifications.dashboard.students.main', {
'query[filter]': 'reachable',
}),
} : null,
},
{
title: stats.contacts['unreachable']|number_format,
icon: 'icon-contact-unreachable',
styles: 'unreachable',
subtitle: 'app.notifications.stats.reachability.labels.unreachable'|trans,
tooltip: 'Tooltip text here...',
action: isGrantedReview ? {
text: 'Review',
link: path('app.notifications.dashboard.students.main', {
'query[filter]': 'unreachable',
}),
} : null,
},
{
title: stats.contacts['no-contact']|number_format,
icon: 'icon-contact-warning',
styles: 'warning',
subtitle: 'app.notifications.stats.reachability.labels.no-contact'|trans,
tooltip: 'Tooltip text here...',
action: isGrantedReview ? {
text: 'Review',
link: path('app.notifications.dashboard.students.main', {
'query[filter]': 'no-contact',
}),
}: null,
},
],
} %}
</div>
{% endif %}
{% endblock %}
{% block area2 %}
{% include '@ui2022/card__infostats__header.html.twig' with {
title: 'Communication',
subtitle: 'User managed preferences for recieving messages',
} %}
<div class="dashboard__progress mt-1 pt-2">
<div class="progress__chart">
{% include '@ui2022/progress-item.html.twig' with {
title: 'Email',
value: stats.communication['total'] ? (stats.communication['email'] / stats.communication['total']) : 0,
} %}
{% include '@ui2022/progress-item.html.twig' with {
title: 'Text',
value: stats.communication['total'] ? (stats.communication['sms'] / stats.communication['total']) : 0,
} %}
{% include '@ui2022/progress-item.html.twig' with {
title: 'Voice',
value: stats.communication['total'] ? (stats.communication['voice'] / stats.communication['total']) : 0,
} %}
{% include '@ui2022/progress-item.html.twig' with {
title: 'App',
value: stats.communication['total'] ? (stats.communication['app'] / stats.communication['total']) : 0,
} %}
</div>
</div>
{% endblock %}
{% block area3 %}
{% include '@ui2022/card__infostats__header.html.twig' with {
title: 'Contacts per segment',
} %}
<div class="mt-3">
{% include '@ui2022/infostats--cps.html.twig' with {
datasets: array_combine(
stats.debugging|map((v,k) => 'app.notifications.profiles.types.%s'|format(k)|trans),
stats.debugging|map((v) => {
'Reachable': {
value: v['reachable']|number_format,
status: 'sent',
},
'Unreachable': {
value: v['unreachable']|number_format,
status: 'unreachable',
},
'No Contact': {
value: v['no-contact']|number_format,
status: 'red',
},
'Total': {
value: v['total']|number_format,
status: 'gray',
},
})
),
} %}
</div>
{% endblock %}
{% endembed %}
{% embed '@ui2022/cards__infocards.html.twig' %}
{% block row1 %}
<div class="col-12 col-sm-6 col-lg-4 mb-4 mb-lg-0">
{% include '@ui2022/card__infobox.html.twig' with {
icon: 'icon-templates',
details: {
title: stats.callouts.sis,
subtitle: 'SIS Records',
action: isGrantedReview ? {
link: path('app.notifications.dashboard.sis.main'),
text: 'Review',
} : null,
content: 'Required updates to contacts in the SIS',
},
} %}
</div>
<div class="col-12 col-sm-6 col-lg-4 mb-4 mb-lg-0">
{% include '@ui2022/card__infobox.html.twig' with {
icon: 'icon-contacts',
details: {
title: sync ? 'app.oneroster.vendors.%s'|format(sync.vendor)|trans : null,
subtitle: 'Data Source',
action: null,
content: (sync and sync.lastJob) ? 'Database last synced on %s'|format(
sync.lastJob.timestampedAt|ui_datetime
) : 'Database not yet synced.',
},
} %}
</div>
<div class="col-12 col-sm-6 col-lg-4 mb-4 mb-lg-0">
{% include '@ui2022/card__infobox.html.twig' with {
icon: 'icon-school-activities-report',
details: {
title: stats.callouts.schools,
subtitle: 'Schools',
action: {
link: path('app.notifications.dashboard.reports.main'),
text: 'Review',
},
content: 'Activities and reports for each school',
},
} %}
</div>
{% endblock %}
{% endembed %}
{% if isGrantedSend and messages|length > 0 %}
{% embed '@ui2022/subheader.html.twig' with {
title: 'Recent Messages',
} %}
{% block actions %}
{% if isGrantedSend %}
{% include '@ui2022/button--a.html.twig' with {
text: 'Go to messages',
link: path('app.notifications.dashboard.messages.main'),
styles: 'shrunk white',
} %}
{% endif %}
{% endblock %}
{% endembed %}
<div>
{% include '@ProductsNotifications/dashboard/messages/includes/_results.html.twig' with {
searchable: false,
} %}
</div>
{% endif %}
{% endblock %}
{% block modals %}
{{ parent() }}
{% include '@ui2022/modal.html.twig' with {
dialog_styles: 'scrollable centered',
attr: {
id: 'modal__new_broadcast',
class: 'modal-ajax',
},
} %}
{% endblock %}