Aug 7 - Update: UI change - MT16
This commit is contained in:
@@ -0,0 +1,150 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Support{% endblock %}
|
||||
|
||||
{#
|
||||
Support Center — new page (design A/B test, slide 6 of JQC_design).
|
||||
Linked from the modern sidebar. Every card either opens an existing route or
|
||||
expands an inline how-to, so nothing here dead-ends.
|
||||
#}
|
||||
|
||||
{% block content %}
|
||||
<div class="jqc-page-head center">
|
||||
<div class="jqc-page-title">Support</div>
|
||||
<div class="jqc-page-sub text-center">JQC Features — find answers and how-to guides</div>
|
||||
</div>
|
||||
|
||||
{# ── Live support routes (role-aware) ──────────────────────────────────── #}
|
||||
<div class="row g-3 mb-4">
|
||||
{% if current_user.role == 'customer' %}
|
||||
<div class="col-12 col-md-4">
|
||||
<a class="jqc-hub-card" href="{{ url_for('support.chat') }}">
|
||||
<div class="d-flex gap-3 align-items-center">
|
||||
<span class="jqc-tile-icon"><i class="bi bi-chat-dots"></i></span>
|
||||
<div class="jqc-hub-title" style="font-size:1.05rem;">Ask a Question</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<a class="jqc-hub-card" href="{{ url_for('support.my_conversations') }}">
|
||||
<div class="d-flex gap-3 align-items-center">
|
||||
<span class="jqc-tile-icon"><i class="bi bi-clock-history"></i></span>
|
||||
<div class="jqc-hub-title" style="font-size:1.05rem;">My Conversations</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<a class="jqc-hub-card" href="{{ url_for('support.my_tickets') }}">
|
||||
<div class="d-flex gap-3 align-items-center">
|
||||
<span class="jqc-tile-icon"><i class="bi bi-inbox"></i></span>
|
||||
<div class="jqc-hub-title" style="font-size:1.05rem;">My Requests</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% elif current_user.role in ['admin', 'director'] %}
|
||||
<div class="col-12 col-md-4">
|
||||
<a class="jqc-hub-card" href="{{ url_for('support.admin_tickets') }}">
|
||||
<div class="d-flex gap-3 align-items-center">
|
||||
<span class="jqc-tile-icon"><i class="bi bi-inbox"></i></span>
|
||||
<div class="jqc-hub-title" style="font-size:1.05rem;">Support Requests</div>
|
||||
</div>
|
||||
{% if open_support_tickets_count > 0 %}
|
||||
<div class="jqc-hub-text">{{ open_support_tickets_count }} open</div>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<a class="jqc-hub-card" href="{{ url_for('support.admin_conversations') }}">
|
||||
<div class="d-flex gap-3 align-items-center">
|
||||
<span class="jqc-tile-icon"><i class="bi bi-chat-square-text"></i></span>
|
||||
<div class="jqc-hub-title" style="font-size:1.05rem;">Chat Conversations</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<a class="jqc-hub-card" href="{{ url_for('support.admin_knowledge') }}">
|
||||
<div class="d-flex gap-3 align-items-center">
|
||||
<span class="jqc-tile-icon"><i class="bi bi-journal-text"></i></span>
|
||||
<div class="jqc-hub-title" style="font-size:1.05rem;">Knowledge Base</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# ── How-to guides ─────────────────────────────────────────────────────── #}
|
||||
{% set guides = [
|
||||
('bi-clipboard-check', 'How to create a new inspection',
|
||||
'Inspections → New Inspection. Pick the contract, facility, area and template, then Start. The checklist opens straight away and saves as you go — you can leave and resume from Inspections → In Progress.'),
|
||||
('bi-search', 'How to follow up on an inspection',
|
||||
'Open the inspection and use Request Follow-up. It moves to the Follow-up list, notifies the inspector, and stays there until a re-inspection is submitted against it.'),
|
||||
('bi-calendar2-week', 'How to schedule an inspection',
|
||||
'Inspections → Schedule. Choose facility, template, inspector and how often it repeats. Recurring schedules roll their due date forward automatically once the inspection is submitted.'),
|
||||
('bi-exclamation-triangle', 'How to Flag For Attention',
|
||||
'While executing an inspection, use Flag Issue on any failing item. Set severity and who handles it (janitorial crew, facility staff or an outside vendor) — the SLA clock starts from that moment.'),
|
||||
('bi-qr-code', 'How QR code works',
|
||||
"Every facility and area has a QR code. Scanning it opens that location's public page — anyone on site can report a problem without an account, and the request lands in Issues."),
|
||||
('bi-file-earmark-text','Send a request without the app',
|
||||
'Point the on-site contact at the facility QR code, or forward them the public facility link. Their submission arrives as an unassigned issue for triage.'),
|
||||
('bi-search', 'How to search',
|
||||
'Use the search box in the top bar for an inspection number. For anything broader, each list page has filters for contract, facility, inspector, status, date range and score.'),
|
||||
('bi-chat-dots', 'How to comment',
|
||||
'Open any inspection or issue and use the comment box at the bottom. Comments are visible to staff; sharing one with the customer is an explicit choice on the comment itself.'),
|
||||
('bi-bar-chart', 'Create & print inspection reports',
|
||||
'Reports & Analytics → filter by date, contract, facility or inspector → Apply. Export to CSV, or use the PDF export on an individual inspection or facility scorecard.'),
|
||||
('bi-clock', 'What does SLA At Risk mean?',
|
||||
'The issue is approaching its resolution deadline for its severity but has not passed it yet. Treat it as the last window to close the issue on time.'),
|
||||
('bi-alarm', 'What does an SLA Alert mean?',
|
||||
'The issue has passed its resolution deadline for its severity. It stays flagged until resolved and shows on the dashboard SLA card.'),
|
||||
] %}
|
||||
|
||||
<div class="row g-3">
|
||||
{% for icon, title, body in guides %}
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="jqc-hub-card" role="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#guide{{ loop.index }}" aria-expanded="false">
|
||||
<div class="d-flex gap-3 align-items-center">
|
||||
<span class="jqc-tile-icon"><i class="bi {{ icon }}"></i></span>
|
||||
<div class="jqc-hub-title" style="font-size:1.02rem;">{{ title }}</div>
|
||||
</div>
|
||||
<div class="collapse" id="guide{{ loop.index }}">
|
||||
<div class="jqc-hub-text mt-3">{{ body }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{# The AI chat is customer-only (support.chat redirects staff to the ticket
|
||||
queue, which is itself @supervisor_required). So the destination is chosen
|
||||
per role rather than pointed at support.chat for everyone — an inspector
|
||||
following that chain would land on the dashboard with an access-denied
|
||||
flash, and this page is meant never to dead-end. Roles with no support
|
||||
destination get no card; the how-to guides below are their support. #}
|
||||
{% if current_user.role == 'customer' %}
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<a class="jqc-hub-card dark" href="{{ url_for('support.chat') }}">
|
||||
<div class="d-flex gap-3 align-items-center">
|
||||
<span class="jqc-tile-icon"><i class="bi bi-life-preserver"></i></span>
|
||||
<div>
|
||||
<div class="jqc-hub-title" style="font-size:1.02rem;">AI Support</div>
|
||||
<div class="jqc-hub-text">Ask a question and get an answer straight away.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jqc-hub-open">Open →</div>
|
||||
</a>
|
||||
</div>
|
||||
{% elif current_user.role in ['admin', 'director'] %}
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<a class="jqc-hub-card dark" href="{{ url_for('support.admin_conversations') }}">
|
||||
<div class="d-flex gap-3 align-items-center">
|
||||
<span class="jqc-tile-icon"><i class="bi bi-life-preserver"></i></span>
|
||||
<div>
|
||||
<div class="jqc-hub-title" style="font-size:1.02rem;">AI Support</div>
|
||||
<div class="jqc-hub-text">Review the AI chat conversations customers have had.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jqc-hub-open">Open →</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user