Contracts.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
// import removed: TenantSelector
import MainLayout from '../components/Layout/MainLayout';
import { useNavigate } from 'react-router-dom';
import './Tickets.css';
import { apiFetch } from '../lib/api';
import { isAdmin } from '../utils/auth';
import { notifySuccess, notifyError } from '../utils/notifications';
 
function Contracts() {
  const navigate = useNavigate();
  const [contracts, setContracts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = 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 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 { }
  }
  // Use React state for filters only (no persistence)
  const [filters, setFilters] = useState({
    status: 'all',
    billing_interval: 'all',
    date_from: '',
    date_to: ''
  });
  const perPage = 10;
  useEffect(() => {
    localStorage.setItem('contractFilters', JSON.stringify(filters));
  }, [filters]);
  const fetchContracts = async () => {
    setLoading(true);
    try {
      const token = localStorage.getItem('token');
      let url = '/contracts';
      const params = new URLSearchParams();
      params.set('page', page);
      params.set('limit', perPage);
      if (search) params.set('search', search);
      if (filters.status && filters.status !== 'all') params.set('status', filters.status);
      if (filters.billing_interval && filters.billing_interval !== 'all') params.set('billing_interval', filters.billing_interval);
      if (filters.date_from) params.set('date_from', filters.date_from);
      if (filters.date_to) params.set('date_to', filters.date_to);
      const queryString = params.toString();
      if (queryString) url += `?${queryString}`;
      const res = await apiFetch(url, {
        headers: { Authorization: `Bearer ${token}` }
      });
      if (!res.ok) throw new Error('Failed to load contracts');
      const data = await res.json();
      setContracts(data.contracts);
      setTotalPages(Math.ceil(data.total / perPage));
    } catch (err) {
      console.error(err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    fetchContracts();
  }, [page, search, filters, tenantId]);
  const handleFilterChange = (key, value) => {
    setFilters(prev => ({ ...prev, [key]: value }));
    setPage(1);
  };
  const handleClearFilters = () => {
    const defaultFilters = { status: 'all', billing_interval: 'all', date_from: '', date_to: '' };
    setFilters(defaultFilters);
    setSearch('');
    setPage(1);
  };
  const hasActiveFilters = () => {
    return filters.status !== 'all' || filters.billing_interval !== 'all' || filters.date_from || filters.date_to || search;
  };
 
  const handleDeleteContract = async (contractId) => {
    setLoading(true);
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/contracts/${contractId}`, {
        method: 'DELETE',
        headers: { Authorization: `Bearer ${token}` }
      });
      if (!res.ok) {
        const errorData = await res.json();
        const errorMsg = errorData.error || 'Failed to delete contract';
        await notifyError('Delete Failed', errorMsg);
        throw new Error(errorMsg);
      }
      setDeleteConfirm(null);
      await notifySuccess('Contract Deleted', 'Contract has been deleted successfully');
      fetchContracts();
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header">
          <div className="header-content">
            <h2>Contracts</h2>
            <button className="btn primary" onClick={() => navigate('/contracts/new')}>
              <span className="material-symbols-outlined">add</span>
              Create Contract
            </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
                placeholder="Search contracts by title, customer..."
                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="active">Active</option>
                  <option value="inactive">Inactive</option>
                  <option value="expired">Expired</option>
                  <option value="cancelled">Cancelled</option>
                </select>
              </div>
              <div className="filter-group">
                <label>Billing Interval</label>
                <select
                  value={filters.billing_interval}
                  onChange={e => handleFilterChange('billing_interval', e.target.value)}
                >
                  <option value="all">All Intervals</option>
                  <option value="monthly">Monthly</option>
                  <option value="yearly">Yearly</option>
                  <option value="custom">Custom</option>
                </select>
              </div>
              <div className="filter-group">
                <label>Start Date From</label>
                <input
                  type="date"
                  value={filters.date_from}
                  onChange={e => handleFilterChange('date_from', e.target.value)}
                />
              </div>
              <div className="filter-group">
                <label>Start Date To</label>
                <input
                  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={(e) => { e.stopPropagation(); handleFilterChange('status', 'all'); }}>×</button>
                    </span>
                  )}
                  {filters.billing_interval !== 'all' && (
                    <span className="filter-tag">
                      Billing: {filters.billing_interval}
                      <button onClick={(e) => { e.stopPropagation(); handleFilterChange('billing_interval', 'all'); }}>×</button>
                    </span>
                  )}
                  {filters.date_from && (
                    <span className="filter-tag">
                      From: {filters.date_from}
                      <button onClick={(e) => { e.stopPropagation(); handleFilterChange('date_from', ''); }}>×</button>
                    </span>
                  )}
                  {filters.date_to && (
                    <span className="filter-tag">
                      To: {filters.date_to}
                      <button onClick={(e) => { e.stopPropagation(); handleFilterChange('date_to', ''); }}>×</button>
                    </span>
                  )}
                  {search && (
                    <span className="filter-tag">
                      Search: "{search}"
                      <button onClick={(e) => { e.stopPropagation(); setSearch(''); }}>×</button>
                    </span>
                  )}
                </div>
              </div>
            )}
          </div>
        )}
        {error && <div className="error-message">{error}</div>}
        {loading ? (
          <div className="loading">Loading contracts...</div>
        ) : (
          <>
            <div className="table-container">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Tenant</th>
                    <th>Customer</th>
                    <th>Billing Interval</th>
                    <th>Devices</th>
                    <th>Contacts</th>
                    <th>Products</th>
                    <th>Next Billing</th>
                    <th>Status</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {contracts.map(contract => (
                    <tr key={contract.contract_id}>
                      <td>#{contract.contract_id}</td>
                      <td>
                        <a
                          href="#"
                          onClick={(e) => { e.preventDefault(); navigate(`/contracts/${contract.contract_id}`); }}
                          style={{ color: 'var(--primary)', textDecoration: 'none', cursor: 'pointer' }}
                          onMouseEnter={(e) => e.target.style.textDecoration = 'underline'}
                          onMouseLeave={(e) => e.target.style.textDecoration = 'none'}
                        >
                          {contract.title}
                        </a>
                      </td>
                      <td className="col-tenant">{contract.tenant_name || 'Root'}</td>
                      <td className="col-customer">{contract.customer_name || 'N/A'}</td>
                      <td>
                        <span className="billing-badge">{contract.billing_interval || 'monthly'}</span>
                      </td>
                      <td>
                        <span className="usage-badge">
                          {contract.current_devices || 0}/{contract.max_devices || 0}
                        </span>
                      </td>
                      <td>
                        <span className="usage-badge">
                          {contract.current_contacts || 0}/{contract.max_contacts || 0}
                        </span>
                      </td>
                      <td>
                        <span className="usage-badge">
                          {contract.current_products || 0}/{contract.max_products || 0}
                        </span>
                      </td>
                      <td>{contract.next_billing_date ? new Date(contract.next_billing_date).toLocaleDateString() : 'N/A'}</td>
                      <td>
                        <span className={`status-badge ${contract.status?.toLowerCase() || 'active'}`}>
                          {contract.status || 'active'}
                        </span>
                      </td>
                      <td>
                        <button
                          className="btn"
                          onClick={() => navigate(`/contracts/${contract.contract_id}/edit`)}
                          title="Edit contract"
                        >
                          <span className="material-symbols-outlined">edit</span>
                        </button>
                        {isAdmin() && (
                          <button
                            className="btn danger"
                            onClick={() => setDeleteConfirm(contract)}
                            title="Delete contract"
                            style={{ marginLeft: '4px' }}
                          >
                            <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 => Math.max(1, p - 1))}>
                <span className="material-symbols-outlined">navigate_before</span>
              </button>
 
              {/* Delete Confirmation Modal */}
              {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 this contract?</p>
                      <p><strong>"{deleteConfirm.title}"</strong></p>
                      <p style={{ color: 'var(--warning)', fontSize: '0.9em' }}>
                        This will set the contract status to 'deleted'. This action can be reversed by changing the status back to 'active'.
                      </p>
                    </div>
                    <div className="modal-footer">
                      <button
                        className="btn"
                        onClick={() => setDeleteConfirm(null)}
                        style={{ marginRight: '8px' }}
                      >
                        Cancel
                      </button>
                      <button
                        className="btn danger"
                        onClick={() => handleDeleteContract(deleteConfirm.contract_id)}
                      >
                        Delete
                      </button>
                    </div>
                  </div>
                </div>
              )}
              <span>
                Page {page} of {totalPages}
              </span>
              <button className="btn" disabled={page === totalPages} onClick={() => setPage(p => Math.min(totalPages, p + 1))}>
                <span className="material-symbols-outlined">navigate_next</span>
              </button>
            </div>
          </>
        )}
      </div>
    </MainLayout>
  );
}
 
 
 
export default Contracts;