breadcrumb-the-shire/modules/helpdesk/web/js/helpdesk-team.js

/**
 * Team workload dashboard.
 * Current tab: per-agent widget with section title + ticket table.
 * Performance tab: compact agent rows with resolved counts.
 */

const container = document.querySelector('.app-details-container[data-team-workload-url]');
if (container) {
  const dataUrl = container.dataset.teamWorkloadUrl;
  const labelQueue = container.dataset.labelQueue || 'Queue';
  const labelTickets = container.dataset.labelTickets || 'Tickets';

  const elLoading = document.getElementById('team-loading');
  const elError = document.getElementById('team-error');
  const elEmpty = document.getElementById('team-empty');
  const elContent = document.getElementById('team-content');
  const elCurrentCards = document.getElementById('team-current-cards');
  const elPerformanceCards = document.getElementById('team-performance-cards');
  const elRefresh = container.querySelector('button[name="team-refresh"]');
  const periodSelector = document.getElementById('team-period-selector');

  let currentPeriod = 90;

  function showState(state) {
    if (elLoading) elLoading.hidden = state !== 'loading';
    if (elError) elError.hidden = state !== 'error';
    if (elEmpty) elEmpty.hidden = state !== 'empty';
    if (elContent) elContent.hidden = state !== 'success';
    if (elLoading) elLoading.setAttribute('aria-busy', state === 'loading' ? 'true' : 'false');
  }

  function h(tag, cls, text) {
    const e = document.createElement(tag);
    if (cls) e.className = cls;
    if (text !== undefined) e.textContent = text;
    return e;
  }

  function initials(name) {
    const parts = name.trim().split(/\s+/);
    if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
    return name.substring(0, 2).toUpperCase();
  }

  function formatAge(hours) {
    if (hours < 24) return hours + 'h';
    return Math.floor(hours / 24) + 'd';
  }

  function formatDate(isoString) {
    if (!isoString) return '—';
    const d = new Date(isoString);
    if (isNaN(d.getTime())) return '—';
    return d.toLocaleDateString(undefined, { day: '2-digit', month: '2-digit', year: 'numeric' });
  }

  /**
   * Build a ticket table row: No | Customer | Last activity | Age
   */
  function buildTicketRow(t) {
    const tr = h('tr', t.critical ? 'helpdesk-team-ticket-critical' : '');

    const noCell = h('td', 'helpdesk-team-ticket-no', t.no);
    tr.appendChild(noCell);
    tr.appendChild(h('td', '', t.customer || '—'));
    tr.appendChild(h('td', '', t.description || '—'));
    const ageCell = h('td', '', formatAge(t.age_hours));
    tr.appendChild(ageCell);

    return tr;
  }

  /**
   * Build a section widget for one agent — mirrors debitor dashboard section pattern.
   */
  function buildAgentWidget(m, isQueue) {
    const section = h('section');

    // Section title: "MM  Name   (count)" with line — same as helpdesk-support-section-title
    const title = h('h3', 'helpdesk-support-section-title');
    const name = isQueue ? labelQueue : m.display_name;
    const count = String(m.open_tickets);

    if (!isQueue) {
      const avatar = h('span', 'helpdesk-team-avatar-inline', initials(m.display_name));
      title.appendChild(avatar);
    }
    title.appendChild(document.createTextNode(name));

    const badge = h('span', 'helpdesk-team-title-count', count);
    if (m.critical_tickets > 0) badge.classList.add('helpdesk-team-title-count-warning');
    title.appendChild(badge);
    section.appendChild(title);

    // Ticket table
    const tickets = m.open_ticket_details || [];
    if (tickets.length > 0) {
      const table = h('table', 'helpdesk-team-ticket-table');
      const thead = h('thead');
      const headRow = h('tr');
      headRow.appendChild(h('th', '', 'Ticket'));
      headRow.appendChild(h('th', '', 'Kunde'));
      headRow.appendChild(h('th', '', 'Beschreibung'));
      headRow.appendChild(h('th', '', 'Alter'));
      thead.appendChild(headRow);
      table.appendChild(thead);

      const tbody = h('tbody');
      for (const t of tickets) tbody.appendChild(buildTicketRow(t));
      table.appendChild(tbody);
      section.appendChild(table);
    }

    return section;
  }

  /**
   * Build a compact row for the performance tab.
   */
  function buildPerformanceRow(m) {
    const isQueue = m.support_user === '';
    const section = h('div', 'helpdesk-team-perf-row');

    if (!isQueue) {
      section.appendChild(h('span', 'helpdesk-team-avatar-inline', initials(m.display_name)));
    }
    section.appendChild(h('span', 'helpdesk-team-perf-name', isQueue ? labelQueue : m.display_name));
    section.appendChild(h('span', 'helpdesk-team-perf-count', String(m.resolved_in_period)));

    return section;
  }

  function renderCurrentTab(members) {
    if (!elCurrentCards) return;
    elCurrentCards.replaceChildren();

    const queue = members.find(m => m.support_user === '' && m.open_tickets > 0);
    const agents = members.filter(m => m.support_user !== '' && (m.open_tickets > 0 || m.critical_tickets > 0));

    if (queue) elCurrentCards.appendChild(buildAgentWidget(queue, true));
    for (const m of agents) elCurrentCards.appendChild(buildAgentWidget(m, false));
  }

  function renderPerformanceTab(members) {
    if (!elPerformanceCards) return;
    elPerformanceCards.replaceChildren();

    const sorted = [...members]
      .filter(m => m.resolved_in_period > 0)
      .sort((a, b) => {
        if (a.support_user === '') return 1;
        if (b.support_user === '') return -1;
        return b.resolved_in_period - a.resolved_in_period;
      });

    for (const m of sorted) elPerformanceCards.appendChild(buildPerformanceRow(m));
  }

  async function fetchData(refresh = false) {
    showState('loading');

    const params = new URLSearchParams({ periodDays: String(currentPeriod) });
    if (refresh) params.set('refresh', '1');

    try {
      const res = await fetch(dataUrl + '?' + params.toString(), { credentials: 'same-origin' });
      const json = await res.json();

      if (!json.ok) { showState('error'); return; }
      if (!json.members || json.members.length === 0) { showState('empty'); return; }

      renderCurrentTab(json.members);
      renderPerformanceTab(json.members);
      showState('success');
    } catch {
      showState('error');
    }
  }

  if (periodSelector) {
    periodSelector.addEventListener('change', (e) => {
      const radio = e.target.closest('input[name="team-period"]');
      if (!radio) return;
      const period = parseInt(radio.value, 10);
      if (!period || period === currentPeriod) return;
      currentPeriod = period;
      fetchData();
    });
  }

  if (elRefresh) {
    elRefresh.addEventListener('click', () => fetchData(true));
  }

  fetchData();
}