Tickets.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
// import removed: TenantSelector
import '../styles/data-table.css';
import './Tickets.css';
import { apiFetch } from '../lib/api';
import { isAdmin } from '../utils/auth';
import { notifySuccess, notifyError } from '../utils/notifications';
 
 
function Tickets() {
  const token = localStorage.getItem('token');
  let tenantId = '';
  if (token) {
    try {
      const payload = token.split('.')[1];
      const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
      tenantId = decoded.tenant_id || decoded.tenantId || '';
    } catch { }
  }
  const navigate = useNavigate();
  const [tickets, setTickets] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [isMSP, setIsMSP] = useState(false);
  const [tenantsMap, setTenantsMap] = useState({});
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [search, setSearch] = useState('');
  const [showFilters, setShowFilters] = useState(false);
  const [deleteConfirm, setDeleteConfirm] = useState(null);
  const perPage = 10;
 
  // Use React state for filters only (no persistence)
  const [filters, setFilters] = useState({
    status: 'all',
    priority: 'all',
    sla_filter: 'all',
    date_from: '',
    date_to: ''
  });
 
 
  const fetchTickets = async () => {
    setLoading(true);
    try {
      const urlParams = new URLSearchParams();
      urlParams.set('page', page);
      urlParams.set('limit', perPage);
 
      if (search) urlParams.set('search', search);
      if (filters.status && filters.status !== 'all') urlParams.set('status', filters.status);
      if (filters.priority && filters.priority !== 'all') urlParams.set('priority', filters.priority);
      if (filters.sla_filter && filters.sla_filter !== 'all') urlParams.set('sla_filter', filters.sla_filter);
      if (filters.date_from) urlParams.set('date_from', filters.date_from);
      if (filters.date_to) urlParams.set('date_to', filters.date_to);
 
      // No need to handle tenant_id — apiFetch injects it automatically
      // But if you *want* to include it explicitly, you can:
      // if (selectedTenantId) urlParams.set('tenant_id', selectedTenantId);
 
      const res = await apiFetch(`/tickets?${urlParams.toString()}`, {
        method: 'GET',
      });
 
      if (!res.ok) throw new Error('Failed to load tickets');
 
      const data = await res.json();
      setTickets(data.tickets);
      setTotalPages(Math.ceil(data.total / perPage));
    } catch (err) {
      console.error(err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
 
  useEffect(() => {
    // Clear tickets immediately to avoid showing stale data
    setTickets([]);
    fetchTickets();
  }, [page, search, filters, tenantId]);
 
  // Removed selectedTenantId effect; only use tenantId from JWT
 
  // Detect MSP and load tenants for mapping
  useEffect(() => {
    (async () => {
      try {
        const res = await apiFetch('/tenants', { method: 'GET', credentials: 'include' });
        if (res.ok) {
          setIsMSP(true);
          const data = await res.json();
          const map = {};
          (data.tenants || data || []).forEach(t => { if (t.tenant_id) map[t.tenant_id] = t.name; });
          setTenantsMap(map);
        } else {
          setIsMSP(false);
        }
      } catch (e) {
        setIsMSP(false);
      }
    })();
  }, []);
 
  const handleCreateClick = () => {
    navigate('/tickets/new');
  };
 
  const handleEditClick = (ticketId) => {
    navigate(`/tickets/${ticketId}/edit`);
  };
 
  const handleFilterChange = (key, value) => {
    setFilters(prev => ({ ...prev, [key]: value }));
    setPage(1); // Reset to first page when filters change
  };
 
  const handleClearFilters = () => {
    const defaultFilters = {
      status: 'all',
      priority: 'all',
      sla_filter: 'all',
      date_from: '',
      date_to: ''
    };
    setFilters(defaultFilters);
    setSearch('');
    setPage(1);
  };
 
  const handleDeleteTicket = async (ticketId) => {
    setLoading(true);
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/tickets/${ticketId}`, {
        method: 'DELETE',
        headers: { Authorization: `Bearer ${token}` }
      });
      if (!res.ok) {
        const errorData = await res.json();
        const errorMsg = errorData.error || 'Failed to delete ticket';
        await notifyError('Delete Failed', errorMsg);
        throw new Error(errorMsg);
      }
      setDeleteConfirm(null);
      await notifySuccess('Ticket Deleted', 'Ticket has been deleted successfully');
      fetchTickets();
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
 
  const handleDeleteClick = (ticket) => {
    setDeleteConfirm(ticket);
  };
 
  const hasActiveFilters = () => {
    return filters.status !== 'all' ||
      filters.priority !== 'all' ||
      filters.sla_filter !== 'all' ||
      filters.date_from ||
      filters.date_to ||
      search;
  };
 
  return (
    <MainLayout>
 
      <div className="page-content">
        <div className="page-header">
          <div className="header-content">
            <h2>Tickets</h2>
            <button className="btn primary" onClick={handleCreateClick}>
              <span className="material-symbols-outlined">add</span>
              Create Ticket
            </button>
          </div>
        </div>
 
        {/* Search and Filter Bar */}
        <div className="toolbar">
          <div className="toolbar-left">
            <div className="search-box">
              <span className="material-symbols-outlined">search</span>
              <input
                id="ticket-search"
                name="ticket-search"
                placeholder="Search tickets by title or description..."
                value={search}
                onChange={e => { setSearch(e.target.value); setPage(1); }}
              />
            </div>
          </div>
          <div className="toolbar-right">
            <button
              className={`btn ${showFilters ? 'active' : ''}`}
              onClick={() => setShowFilters(!showFilters)}
              title="Toggle filters"
            >
              <span className="material-symbols-outlined">tune</span>
              Filters
              {hasActiveFilters() && (
                <span className="badge">{Object.values(filters).filter(v => v && v !== 'all').length + (search ? 1 : 0)}</span>
              )}
            </button>
            {hasActiveFilters() && (
              <button className="btn" onClick={handleClearFilters}>
                <span className="material-symbols-outlined">clear_all</span>
                Clear All
              </button>
            )}
          </div>
        </div>
 
        {/* Filter Panel */}
        {showFilters && (
          <div className="filter-panel">
            <h3>Filter Options</h3>
            <div className="filter-grid">
              <div className="filter-group">
                <label>Status</label>
                <select
                  value={filters.status}
                  onChange={e => handleFilterChange('status', e.target.value)}
                >
                  <option value="all">All Statuses</option>
                  <option value="open">Open</option>
                  <option value="in-progress">In Progress</option>
                  <option value="pending">Pending</option>
                  <option value="resolved">Resolved</option>
                  <option value="closed">Closed</option>
                </select>
              </div>
 
              <div className="filter-group">
                <label>Priority</label>
                <select
                  value={filters.priority}
                  onChange={e => handleFilterChange('priority', e.target.value)}
                >
                  <option value="all">All Priorities</option>
                  <option value="low">Low</option>
                  <option value="medium">Medium</option>
                  <option value="high">High</option>
                  <option value="urgent">Urgent</option>
                </select>
              </div>
 
              <div className="filter-group">
                <label>SLA Status</label>
                <select
                  value={filters.sla_filter}
                  onChange={e => handleFilterChange('sla_filter', e.target.value)}
                >
                  <option value="all">All Tickets</option>
                  <option value="overdue">Overdue (SLA breach)</option>
                  <option value="due_today">Active Today</option>
                  <option value="due_this_week">This Week</option>
                </select>
              </div>
 
              <div className="filter-group">
                <label>Date From</label>
                <input
                  id="ticket-date-from"
                  name="ticket-date-from"
                  type="date"
                  value={filters.date_from}
                  onChange={e => handleFilterChange('date_from', e.target.value)}
                />
              </div>
 
              <div className="filter-group">
                <label>Date To</label>
                <input
                  id="ticket-date-to"
                  name="ticket-date-to"
                  type="date"
                  value={filters.date_to}
                  onChange={e => handleFilterChange('date_to', e.target.value)}
                />
              </div>
            </div>
 
            {hasActiveFilters() && (
              <div className="active-filters">
                <div className="active-filters-header">
                  <span className="filter-label">Active Filters:</span>
                </div>
                <div className="filter-tags">
                  {filters.status !== 'all' && (
                    <span className="filter-tag">
                      Status: {filters.status}
                      <button onClick={() => handleFilterChange('status', 'all')}>×</button>
                    </span>
                  )}
                  {filters.priority !== 'all' && (
                    <span className="filter-tag">
                      Priority: {filters.priority}
                      <button onClick={() => handleFilterChange('priority', 'all')}>×</button>
                    </span>
                  )}
                  {filters.sla_filter !== 'all' && (
                    <span className="filter-tag">
                      SLA: {filters.sla_filter.replace('_', ' ')}
                      <button onClick={() => handleFilterChange('sla_filter', 'all')}>×</button>
                    </span>
                  )}
                  {filters.date_from && (
                    <span className="filter-tag">
                      From: {filters.date_from}
                      <button onClick={() => handleFilterChange('date_from', '')}>×</button>
                    </span>
                  )}
                  {filters.date_to && (
                    <span className="filter-tag">
                      To: {filters.date_to}
                      <button onClick={() => handleFilterChange('date_to', '')}>×</button>
                    </span>
                  )}
                  {search && (
                    <span className="filter-tag">
                      Search: "{search}"
                      <button onClick={() => setSearch('')}>×</button>
                    </span>
                  )}
                </div>
              </div>
            )}
          </div>
        )}
 
        {error && <div className="error-message">{error}</div>}
 
        {loading ? (
          <div className="loading">Loading tickets...</div>
        ) : (
          <>
            <div className="table-container">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>Tenant</th>
                    <th>Title</th>
                    <th>Customer</th>
                    <th>Status</th>
                    <th>Priority</th>
                    <th>SLA</th>
                    <th>Created</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {tickets.map(ticket => (
                    <tr key={ticket.ticket_id}>
                      <td>
                        <a
                          href={`/tickets/${ticket.ticket_id}/edit`}
                          style={{ textDecoration: 'underline', color: 'inherit', cursor: 'pointer' }}
                          title={`Edit ticket #${ticket.ticket_id}`}
                          onClick={e => {
                            e.preventDefault();
                            navigate(`/tickets/${ticket.ticket_id}/edit`);
                          }}
                        >
                          #{ticket.ticket_id}
                        </a>
                      </td>
                      <td title={ticket.tenant_id ? `Tenant #${ticket.tenant_id}` : ''}>
                        {ticket.tenant_id === 1 ? 'Root Tenant' : (ticket.tenant_name || tenantsMap[ticket.tenant_id] || (ticket.tenant_id ? `#${ticket.tenant_id}` : '-'))}
                      </td>
                      <td>{ticket.title}</td>
                      <td className="col-customer" title={ticket.customer_name || (ticket.customer_id ? `Customer #${ticket.customer_id}` : '')}>
                        {ticket.customer_name && ticket.customer_name.trim().length > 0
                          ? ticket.customer_name
                          : (ticket.customer_id ? `#${ticket.customer_id}` : '-')}
                      </td>
                      <td>
                        <span className={`status-badge ${ticket.status}`}>
                          {ticket.status}
                        </span>
                      </td>
                      <td>
                        <span className={`priority-badge ${ticket.priority}`}>
                          {ticket.priority}
                        </span>
                      </td>
                      <td>
                        {ticket.sla_status === 'closed' ? (
                          <span className="sla-badge closed">Closed</span>
                        ) : (
                          <span className={`sla-badge ${ticket.sla_status}`}>
                            {(() => {
                              const secs = Number(ticket.sla_remaining_seconds || 0);
                              const sign = secs < 0 ? -1 : 1;
                              const abs = Math.abs(secs);
                              const h = Math.floor(abs / 3600);
                              const m = Math.floor((abs % 3600) / 60);
                              if (ticket.sla_status === 'overdue') {
                                return `Overdue by ${h}h ${m}m`;
                              }
                              if (ticket.sla_status === 'due_soon') {
                                return `Due soon: ${h}h ${m}m`;
                              }
                              return `Due in ${h}h ${m}m`;
                            })()}
                          </span>
                        )}
                      </td>
                      <td>{new Date(ticket.created_at).toLocaleDateString()}</td>
                      <td>
                        <button
                          className="btn"
                          onClick={() => handleEditClick(ticket.ticket_id)}
                          style={{ marginRight: '8px' }}
                        >
                          <span className="material-symbols-outlined">edit</span>
                        </button>
                        {isAdmin() && (
                          <button
                            className="btn danger"
                            onClick={() => handleDeleteClick(ticket)}
                            title="Delete Ticket"
                          >
                            <span className="material-symbols-outlined">delete</span>
                          </button>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
 
            <div className="pagination">
              <button className="btn" disabled={page === 1} onClick={() => setPage(p => p - 1)}>
                <span className="material-symbols-outlined">navigate_before</span>
              </button>
              <span>
                Page {page} of {totalPages}
              </span>
              <button className="btn" disabled={page === totalPages} onClick={() => setPage(p => p + 1)}>
                <span className="material-symbols-outlined">navigate_next</span>
              </button>
            </div>
          </>
        )}
 
        {deleteConfirm && (
          <div className="modal-overlay" onClick={() => setDeleteConfirm(null)}>
            <div className="modal-content" onClick={e => e.stopPropagation()}>
              <div className="modal-header">
                <h3>Confirm Delete</h3>
                <button
                  className="btn"
                  onClick={() => setDeleteConfirm(null)}
                  style={{ padding: '4px', minWidth: 'auto' }}
                >
                  <span className="material-symbols-outlined">close</span>
                </button>
              </div>
              <div className="modal-body">
                <p>Are you sure you want to delete the ticket:</p>
                <p><strong>"#{deleteConfirm.ticket_id}: {deleteConfirm.title}"</strong></p>
                <p style={{ color: 'var(--error)', fontSize: '0.9em' }}>
                  This action cannot be undone. Only open or draft tickets can be deleted.
                </p>
              </div>
              <div className="modal-footer">
                <button
                  className="btn"
                  onClick={() => setDeleteConfirm(null)}
                  style={{ marginRight: '8px' }}
                >
                  Cancel
                </button>
                <button
                  className="btn danger"
                  onClick={() => handleDeleteTicket(deleteConfirm.ticket_id)}
                >
                  Delete
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </MainLayout>
  );
}
 
export default Tickets;