customerTicket/templates/tickets/staff_list.html

{% extends 'base.html' %}
{% block title %}{{ page_title }}{% endblock %}
{% block content %}
<section class="staff-page-head">
  <div><p class="eyebrow">مرکز عملیات سازمانی</p><h1>{{ active_tab_title }}</h1><p>تیکت‌ها را بر اساس اولویت بررسی کنید و هر درخواست را با پاسخ کامل به مرحله بعد ببرید.</p>{% if staff_operations_access.create_ticket %}<a class="button mt-3" href="{% url 'staff_tickets:create' %}">＋ ثبت تیکت برای مخاطب</a>{% endif %}</div>
  <div class="staff-sync"><span class="live-dot"></span><div><b>فهرست زنده</b><small>به‌روزرسانی هر ۴۵ ثانیه</small></div></div>
</section>

<section class="stats-grid" aria-label="خلاصه صف‌ها">
  <a class="stat-card {% if active_tab == 'new' %}is-active{% endif %}" href="?tab=new"><div class="stat-head"><span class="stat-icon">◌</span><span class="stat-label">صف جدید</span></div><div class="stat-value">{{ counts.new }}</div><small>در انتظار تخصیص</small></a>
  <a class="stat-card {% if active_tab == 'mine' %}is-active{% endif %}" href="?tab=mine"><div class="stat-head"><span class="stat-icon">◎</span><span class="stat-label">تیکت‌های من</span></div><div class="stat-value">{{ counts.mine }}</div><small>پرونده‌های تحت مسئولیت</small></a>
  <a class="stat-card {% if active_tab == 'waiting_staff' %}is-active{% endif %}" href="?tab=waiting_staff"><div class="stat-head"><span class="stat-icon">↺</span><span class="stat-label">نیازمند پاسخ</span></div><div class="stat-value">{{ counts.waiting }}</div><small>در انتظار اقدام شما</small></a>
  <article class="stat-card alert"><div class="stat-head"><span class="stat-icon">!</span><span class="stat-label">عبور از SLA</span></div><div class="stat-value">{{ counts.overdue }}</div><small>نیازمند رسیدگی فوری</small></article>
</section>

<nav class="queue-switcher" aria-label="صف‌های تخصصی">
  <a class="{% if active_tab == '' %}active{% endif %}" href="{% url 'staff_tickets:list' %}">همه قابل مشاهده</a>
  <a class="{% if active_tab == 'selected' %}active{% endif %}" href="?tab=selected">انتخابی من</a>
  <a class="{% if active_tab == 'waiting_staff' %}active{% endif %}" href="?tab=waiting_staff">در انتظار من</a>
  <a class="{% if active_tab == 'waiting_customer' %}active{% endif %}" href="?tab=waiting_customer">در انتظار مشتری</a>
  <a class="{% if active_tab == 'resolved' %}active{% endif %}" href="?tab=resolved">حل‌شده</a>
  <a class="{% if active_tab == 'closed' %}active{% endif %}" href="?tab=closed">بسته</a>
</nav>

<div class="dashboard">
  <aside class="filters">
    <div class="filter-heading"><div class="filter-title"><span class="filter-icon">⌕</span><div><span class="panel-index">فیلترهای ترکیبی</span><h3>جست‌وجو و فیلتر تیکت‌ها</h3></div></div><a href="{% if active_tab %}?tab={{ active_tab }}{% else %}{% url 'staff_tickets:list' %}{% endif %}">پاک‌کردن همه</a></div>
    <form class="filter-form" hx-get="{% url 'staff_tickets:list' %}" hx-target="#ticket-results" hx-push-url="true" hx-trigger="change delay:250ms, keyup changed delay:500ms from:input[name=q]">
      {% if active_tab %}<input type="hidden" name="tab" value="{{ active_tab }}">{% endif %}
      <label class="search-field">جست‌وجوی تیکت<input name="q" value="{{ request.GET.q }}" placeholder="شماره، موضوع، موبایل یا نام"></label>
      <label>وضعیت<select name="status"><option value="">همه وضعیت‌ها</option>{% for value,label in statuses %}<option value="{{ value }}" {% if request.GET.status == value %}selected{% endif %}>{{ label }}</option>{% endfor %}</select></label>
      <label>اولویت<select name="priority"><option value="">همه اولویت‌ها</option>{% for value,label in priorities %}<option value="{{ value }}" {% if request.GET.priority == value %}selected{% endif %}>{{ label }}</option>{% endfor %}</select></label>
      <label>دسته‌بندی<select name="category"><option value="">همه دسته‌ها</option>{% for item in categories %}<option value="{{ item.pk }}" {% if request.GET.category == item.pk|stringformat:'s' %}selected{% endif %}>{{ item }}</option>{% endfor %}</select></label>
      <label>مالک<select name="owner"><option value="">همه کارشناسان</option>{% for profile in experts %}<option value="{{ profile.user_id }}" {% if request.GET.owner == profile.user_id|stringformat:'s' %}selected{% endif %}>{{ profile.display_name }}</option>{% endfor %}</select></label>
      <label>واحد ایجادکننده<select name="owning_unit"><option value="">همه واحدهای مجاز</option>{% for item in units %}<option value="{{ item.pk }}" {% if request.GET.owning_unit == item.pk|stringformat:'s' %}selected{% endif %}>{{ item }}</option>{% endfor %}</select></label>
      <label>واحد ارجاع‌شونده<select name="assigned_unit"><option value="">همه واحدهای مجاز</option>{% for item in units %}<option value="{{ item.pk }}" {% if request.GET.assigned_unit == item.pk|stringformat:'s' %}selected{% endif %}>{{ item }}</option>{% endfor %}</select></label>
      <label>نوع ارسال<select name="delivery_type"><option value="">فردی و گروهی</option>{% for value,label in delivery_types %}<option value="{{ value }}" {% if request.GET.delivery_type == value %}selected{% endif %}>{{ label }}</option>{% endfor %}</select></label>
      <label>نوع مخاطب<select name="stakeholder_type"><option value="">همه مخاطبان</option>{% for value,label in stakeholder_types %}<option value="{{ value }}" {% if request.GET.stakeholder_type == value %}selected{% endif %}>{{ label }}</option>{% endfor %}</select></label>
      <label>شخص دریافت‌کننده<input name="recipient" value="{{ request.GET.recipient }}" placeholder="نام، شرکت یا موبایل"></label>
      <label>گروه مخاطبان<select name="contact_group" multiple>{% for item in contact_groups %}<option value="{{ item.pk }}" {% if item.pk in selected_group_ids %}selected{% endif %}>{{ item }}</option>{% endfor %}</select></label>
      <label>برچسب‌ها<select name="tag" multiple>{% for item in ticket_tags %}<option value="{{ item.pk }}" {% if item.pk in selected_tag_ids %}selected{% endif %}>{{ item }}</option>{% endfor %}</select></label>
      <label>از تاریخ<input type="date" name="created_from" value="{{ request.GET.created_from }}"></label>
      <label>تا تاریخ<input type="date" name="created_to" value="{{ request.GET.created_to }}"></label>
      <label>بروزرسانی از<input type="date" name="updated_from" value="{{ request.GET.updated_from }}"></label>
      <label>بروزرسانی تا<input type="date" name="updated_to" value="{{ request.GET.updated_to }}"></label>
      <label class="check"><input type="checkbox" name="unread" value="1" {% if request.GET.unread %}checked{% endif %}><span>فقط خوانده‌نشده‌ها</span></label>
      <button type="submit">اعمال فیلتر</button>
    </form>
  </aside>
  <section class="ticket-stream" aria-label="فهرست درخواست‌ها">
    <header class="stream-head"><div><span class="panel-index">{{ active_tab_title }}</span><h2>تیکت‌های قابل اقدام</h2></div><div class="stream-meta"><span>{{ tickets|length }} نتیجه</span><span class="stream-status"><i></i> زنده</span></div></header>
    <div id="ticket-results" hx-get="{% url 'staff_tickets:list' %}?{{ request.GET.urlencode }}" hx-trigger="every 45s" hx-swap="innerHTML">{% include 'tickets/_staff_ticket_results.html' %}</div>
  </section>
</div>
{% endblock %}