Reports.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 './Reports.css';
import { apiFetch } from '../lib/api';
 
 
function Reports() {
  // selectedTenantId should come from props/context, not localStorage
  const [selectedTenantId, setSelectedTenantId] = useState('');
  // No need for separate root detection, handled by TenantSelector
  const [activeReport, setActiveReport] = useState('revenue');
  const [revenueData, setRevenueData] = useState(null);
  const [ticketData, setTicketData] = useState(null);
  const [customerData, setCustomerData] = useState(null);
  const [agentData, setAgentData] = useState(null);
  const [agingData, setAgingData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
 
  const fetchReport = async (reportType) => {
    setLoading(true);
    setError(null);
    try {
      let url = `/reports/${reportType}`;
      url += `?tenant_id=${selectedTenantId}`;
      const response = await apiFetch(url);
      if (!response.ok) throw new Error(`Failed to load ${reportType} report`);
      const result = await response.json();
 
      switch(reportType) {
        case 'revenue': setRevenueData(result); break;
        case 'tickets': setTicketData(result); break;
        case 'customers': setCustomerData(result); break;
        case 'agents': setAgentData(result); break;
        case 'invoice-aging': setAgingData(result); break;
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
 
  useEffect(() => {
    fetchReport(activeReport);
  }, [activeReport, selectedTenantId]);
 
  const renderRevenueReport = () => {
    if (!revenueData) return null;
    
    const totalRevenue = revenueData.reduce((sum, row) => sum + parseFloat(row.total_revenue || 0), 0);
    const totalPaid = revenueData.reduce((sum, row) => sum + parseFloat(row.paid_revenue || 0), 0);
    const totalUnpaid = revenueData.reduce((sum, row) => sum + parseFloat(row.unpaid_revenue || 0), 0);
 
    return (
      <div className="report-content">
        <h2>Revenue Report - Last 12 Months</h2>
        
        <div className="report-cards">
          <div className="report-card">
            <span className="material-symbols-outlined">payments</span>
            <div className="card-content">
              <h3>${totalRevenue.toFixed(2)}</h3>
              <p>Total Revenue</p>
            </div>
          </div>
          <div className="report-card success">
            <span className="material-symbols-outlined">check_circle</span>
            <div className="card-content">
              <h3>${totalPaid.toFixed(2)}</h3>
              <p>Paid</p>
            </div>
          </div>
          <div className="report-card warning">
            <span className="material-symbols-outlined">pending</span>
            <div className="card-content">
              <h3>${totalUnpaid.toFixed(2)}</h3>
              <p>Unpaid</p>
            </div>
          </div>
        </div>
 
        <div className="report-table">
          <table>
            <thead>
              <tr>
                <th>Month</th>
                <th>Invoices</th>
                <th>Total Revenue</th>
                <th>Paid</th>
                <th>Unpaid</th>
              </tr>
            </thead>
            <tbody>
              {revenueData.map(row => (
                <tr key={row.month}>
                  <td>{row.month}</td>
                  <td>{row.invoice_count}</td>
                  <td>${parseFloat(row.total_revenue || 0).toFixed(2)}</td>
                  <td className="success">${parseFloat(row.paid_revenue || 0).toFixed(2)}</td>
                  <td className="warning">${parseFloat(row.unpaid_revenue || 0).toFixed(2)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  };
 
  const renderTicketReport = () => {
    if (!ticketData) return null;
 
    const totalTickets = ticketData.byStatus?.reduce((sum, s) => sum + parseInt(s.count), 0) || 0;
 
    return (
      <div className="report-content">
        <h2>Ticket Statistics</h2>
        
        <div className="report-cards">
          <div className="report-card">
            <span className="material-symbols-outlined">confirmation_number</span>
            <div className="card-content">
              <h3>{totalTickets}</h3>
              <p>Total Tickets</p>
            </div>
          </div>
        </div>
 
        <div className="report-grid">
          <div className="report-section">
            <h3>By Status</h3>
            <table>
              <thead>
                <tr>
                  <th>Status</th>
                  <th>Count</th>
                </tr>
              </thead>
              <tbody>
                {ticketData.byStatus?.map(row => (
                  <tr key={row.status}>
                    <td><span className={`status-badge ${row.status}`}>{row.status}</span></td>
                    <td>{row.count}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
 
          <div className="report-section">
            <h3>By Priority</h3>
            <table>
              <thead>
                <tr>
                  <th>Priority</th>
                  <th>Count</th>
                </tr>
              </thead>
              <tbody>
                {ticketData.byPriority?.map(row => (
                  <tr key={row.priority}>
                    <td><span className={`priority-badge ${row.priority}`}>{row.priority}</span></td>
                    <td>{row.count}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
 
        <div className="report-table">
          <h3>Monthly Trend - Last 12 Months</h3>
          <table>
            <thead>
              <tr>
                <th>Month</th>
                <th>Total Created</th>
                <th>Closed</th>
                <th>Close Rate</th>
              </tr>
            </thead>
            <tbody>
              {ticketData.monthlyTrend?.map(row => {
                const closeRate = row.total > 0 ? ((row.closed / row.total) * 100).toFixed(1) : 0;
                return (
                  <tr key={row.month}>
                    <td>{row.month}</td>
                    <td>{row.total}</td>
                    <td>{row.closed}</td>
                    <td>{closeRate}%</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    );
  };
 
  const renderCustomerReport = () => {
    if (!customerData) return null;
 
    return (
      <div className="report-content">
        <h2>Customer Overview</h2>
 
        <div className="report-grid">
          <div className="report-section">
            <h3>Top Customers by Revenue</h3>
            <table>
              <thead>
                <tr>
                  <th>Customer</th>
                  <th>Invoices</th>
                  <th>Total Revenue</th>
                </tr>
              </thead>
              <tbody>
                {customerData.topByRevenue?.map(row => (
                  <tr key={row.customer_id}>
                    <td>{row.customer_name}</td>
                    <td>{row.invoice_count}</td>
                    <td>${parseFloat(row.total_revenue || 0).toFixed(2)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
 
          <div className="report-section">
            <h3>Top Customers by Tickets</h3>
            <table>
              <thead>
                <tr>
                  <th>Customer</th>
                  <th>Total Tickets</th>
                  <th>Open Tickets</th>
                </tr>
              </thead>
              <tbody>
                {customerData.topByTickets?.map(row => (
                  <tr key={row.customer_id}>
                    <td>{row.customer_name}</td>
                    <td>{row.ticket_count}</td>
                    <td className={row.open_tickets > 0 ? 'warning' : ''}>{row.open_tickets}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  };
 
  const renderAgentReport = () => {
    if (!agentData) return null;
 
    const totalAgents = agentData.agents?.length || 0;
    const onlineAgents = agentData.statusSummary?.find(s => s.status === 'online')?.count || 0;
    const offlineAgents = agentData.statusSummary?.find(s => s.status === 'offline')?.count || 0;
 
    return (
      <div className="report-content">
        <h2>Agent Status Report</h2>
 
        <div className="report-cards">
          <div className="report-card">
            <span className="material-symbols-outlined">people</span>
            <div className="card-content">
              <h3>{totalAgents}</h3>
              <p>Total Agents</p>
            </div>
          </div>
          <div className="report-card success">
            <span className="material-symbols-outlined">check_circle</span>
            <div className="card-content">
              <h3>{onlineAgents}</h3>
              <p>Online</p>
            </div>
          </div>
          <div className="report-card">
            <span className="material-symbols-outlined">cancel</span>
            <div className="card-content">
              <h3>{offlineAgents}</h3>
              <p>Offline</p>
            </div>
          </div>
        </div>
 
        <div className="report-table">
          <table>
            <thead>
              <tr>
                <th>Agent</th>
                <th>Tenant</th>
                <th>Status</th>
                <th>Last Seen</th>
                <th>Assigned Tickets</th>
                <th>Open Tickets</th>
              </tr>
            </thead>
            <tbody>
              {agentData.agents?.map(agent => (
                <tr key={agent.agent_id}>
                  <td>{agent.agent_name}</td>
                  <td>{agent.tenant_name}</td>
                  <td>
                    <span className={`status-badge ${agent.status}`}>{agent.status}</span>
                  </td>
                  <td>{agent.last_seen ? new Date(agent.last_seen).toLocaleString() : 'Never'}</td>
                  <td>{agent.assigned_tickets}</td>
                  <td className={agent.open_tickets > 0 ? 'warning' : ''}>{agent.open_tickets}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  };
 
  const renderAgingReport = () => {
    if (!agingData) return null;
 
    const { summary, invoices } = agingData;
 
    return (
      <div className="report-content">
        <h2>Invoice Aging Report</h2>
 
        <div className="aging-summary">
          <div className="aging-bucket">
            <h4>Current</h4>
            <p className="count">{summary.current.count} invoices</p>
            <p className="amount">${summary.current.total.toFixed(2)}</p>
          </div>
          <div className="aging-bucket warning-light">
            <h4>1-30 Days</h4>
            <p className="count">{summary.overdue1_30.count} invoices</p>
            <p className="amount">${summary.overdue1_30.total.toFixed(2)}</p>
          </div>
          <div className="aging-bucket warning">
            <h4>31-60 Days</h4>
            <p className="count">{summary.overdue31_60.count} invoices</p>
            <p className="amount">${summary.overdue31_60.total.toFixed(2)}</p>
          </div>
          <div className="aging-bucket error-light">
            <h4>61-90 Days</h4>
            <p className="count">{summary.overdue61_90.count} invoices</p>
            <p className="amount">${summary.overdue61_90.total.toFixed(2)}</p>
          </div>
          <div className="aging-bucket error">
            <h4>90+ Days</h4>
            <p className="count">{summary.overdue90plus.count} invoices</p>
            <p className="amount">${summary.overdue90plus.total.toFixed(2)}</p>
          </div>
        </div>
 
        <div className="report-table">
          <h3>Outstanding Invoices</h3>
          <table>
            <thead>
              <tr>
                <th>Invoice #</th>
                <th>Customer</th>
                <th>Issued</th>
                <th>Due</th>
                <th>Amount</th>
                <th>Days Overdue</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {invoices?.map(inv => (
                <tr key={inv.invoice_id} className={inv.days_overdue > 0 ? 'overdue' : ''}>
                  <td>{inv.invoice_number}</td>
                  <td>{inv.customer_name}</td>
                  <td>{new Date(inv.date_issued).toLocaleDateString()}</td>
                  <td>{new Date(inv.date_due).toLocaleDateString()}</td>
                  <td>${parseFloat(inv.total_amount).toFixed(2)}</td>
                  <td className={inv.days_overdue > 0 ? 'error' : ''}>{inv.days_overdue}</td>
                  <td><span className={`status-badge ${inv.payment_status}`}>{inv.payment_status}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  };
 
  return (
    <MainLayout>
          <div className="reports-page">
        <div className="page-header">
          <h1>Reports & Analytics</h1>
        </div>
 
        <div className="report-tabs">
          <button 
            className={`report-tab ${activeReport === 'revenue' ? 'active' : ''}`}
            onClick={() => setActiveReport('revenue')}
          >
            <span className="material-symbols-outlined">payments</span>
            Revenue
          </button>
          <button 
            className={`report-tab ${activeReport === 'tickets' ? 'active' : ''}`}
            onClick={() => setActiveReport('tickets')}
          >
            <span className="material-symbols-outlined">confirmation_number</span>
            Tickets
          </button>
          <button 
            className={`report-tab ${activeReport === 'customers' ? 'active' : ''}`}
            onClick={() => setActiveReport('customers')}
          >
            <span className="material-symbols-outlined">business</span>
            Customers
          </button>
          <button 
            className={`report-tab ${activeReport === 'agents' ? 'active' : ''}`}
            onClick={() => setActiveReport('agents')}
          >
            <span className="material-symbols-outlined">support_agent</span>
            Agents
          </button>
          <button 
            className={`report-tab ${activeReport === 'invoice-aging' ? 'active' : ''}`}
            onClick={() => setActiveReport('invoice-aging')}
          >
            <span className="material-symbols-outlined">schedule</span>
            Invoice Aging
          </button>
        </div>
 
        {loading && (
          <div className="loading-state">
            <span className="material-symbols-outlined spinning">refresh</span>
            Loading report...
          </div>
        )}
 
        {error && (
          <div className="error-alert">
            <span className="material-symbols-outlined">error</span>
            {error}
          </div>
        )}
 
        {!loading && !error && (
          <>
            {activeReport === 'revenue' && renderRevenueReport()}
            {activeReport === 'tickets' && renderTicketReport()}
            {activeReport === 'customers' && renderCustomerReport()}
            {activeReport === 'agents' && renderAgentReport()}
            {activeReport === 'invoice-aging' && renderAgingReport()}
          </>
        )}
      </div>
    </MainLayout>
  );
}
 
export default Reports;