ContractsNew.jsx

Go to the documentation of this file.

// This file has been removed as its logic has been merged into Contracts.jsx
import { useState, useEffect } from 'react';
// import removed: TenantSelector
import { useNavigate } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
import './Tickets.css';
import { apiFetch } from '../lib/api';
 
function Contracts() {
  // Tenant selection logic
  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 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;
  };
 
  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`)}
                        >
                          <span className="material-symbols-outlined">edit</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>
              <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;