A R R R Associates
74 lines
4.9 KiB
HTML
74 lines
4.9 KiB
HTML
{% extends "ui/templates/base/layout.html" %}
|
|
{% block content %}
|
|
<div class="space-y-6">
|
|
{% set _role_text = (current_user_roles or [])|join('|')|lower %}
|
|
{% if 'partner' in _role_text %}
|
|
{% include "modules/partners/templates/partners/_partner_tabs.html" %}
|
|
{% elif 'manager' in _role_text %}
|
|
{% include "modules/managers/templates/managers/_manager_tabs.html" %}
|
|
{% else %}
|
|
{% include "modules/employees/templates/employees/_my_workspace_tabs.html" %}
|
|
{% endif %}
|
|
<div class="flex flex-wrap items-start justify-between gap-3">
|
|
<div>
|
|
<h2 class="text-xl font-semibold text-slate-900">My Alerts</h2>
|
|
<p class="mt-1 text-sm text-slate-500">Role-wise alerts for tasks, documents, attendance, leave, payroll, client and consultant workflows.</p>
|
|
</div>
|
|
<form method="post" action="/alerts/read-all">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
|
|
<button class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50" {% if unread_count == 0 %}disabled{% endif %}>Mark all as read</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="grid gap-4 md:grid-cols-3">
|
|
<div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Unread</div><div class="mt-1 text-2xl font-semibold">{{ unread_count }}</div></div>
|
|
<div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Showing</div><div class="mt-1 text-2xl font-semibold">{{ alerts|length }}</div></div>
|
|
<div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Filter</div><div class="mt-1 text-sm text-slate-600">{{ status.replace('_',' ').title() }} · {{ priority.title() }}</div></div>
|
|
</div>
|
|
|
|
<form method="get" action="/alerts" class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft">
|
|
<div class="grid gap-3 md:grid-cols-[220px_220px_auto]">
|
|
<select name="status" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
|
|
<option value="all" {% if status == 'all' %}selected{% endif %}>All alerts</option>
|
|
<option value="unread" {% if status == 'unread' %}selected{% endif %}>Unread only</option>
|
|
<option value="read" {% if status == 'read' %}selected{% endif %}>Read only</option>
|
|
</select>
|
|
<select name="priority" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
|
|
<option value="all" {% if priority == 'all' %}selected{% endif %}>All priorities</option>
|
|
{% for p in priorities %}<option value="{{ p }}" {% if priority == p %}selected{% endif %}>{{ p.title() }}</option>{% endfor %}
|
|
</select>
|
|
<button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Apply Filter</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="space-y-3">
|
|
{% for alert in alerts %}
|
|
<div class="rounded-2xl border {% if alert.is_read %}border-slate-200 bg-white{% else %}border-brand-100 bg-brand-50{% endif %} p-5 shadow-soft">
|
|
<div class="flex flex-wrap items-start justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<h3 class="font-semibold text-slate-900">{{ alert.title }}</h3>
|
|
<span class="rounded-full border border-slate-200 bg-white px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-slate-600">{{ alert.priority }}</span>
|
|
{% if not alert.is_read %}<span class="rounded-full bg-brand-600 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-white">Unread</span>{% endif %}
|
|
</div>
|
|
<div class="mt-1 text-xs text-slate-500">{{ alert.alert_type.replace('_',' ').title() }}{% if alert.role_context %} · {{ alert.role_context }}{% endif %} · {{ alert.created_at_utc.strftime('%d-%m-%Y %H:%M') if alert.created_at_utc else '-' }}</div>
|
|
{% if alert.message %}<p class="mt-3 text-sm text-slate-700">{{ alert.message }}</p>{% endif %}
|
|
</div>
|
|
<div class="flex shrink-0 flex-wrap justify-end gap-2">
|
|
{% if alert.target_url %}<a href="{{ alert.target_url }}" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Open</a>{% endif %}
|
|
{% if not alert.is_read %}
|
|
<form method="post" action="/alerts/{{ alert.id }}/read">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
|
|
<button class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Mark read</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="rounded-2xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-500 shadow-soft">No alerts found for the selected filter.</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|