ContractFormNew.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
// import removed: TenantSelector
import '../styles/forms.css';
import { apiFetch } from '../lib/api';
 
 
const GST_RATE = 0.10;
 
export default function ContractForm() {
  const navigate = useNavigate();
  const { id } = useParams();
  const [selectedTenantId, setSelectedTenantId] = useState('');
 
  // Contract details
  const [customerId, setCustomerId] = useState('');
  const [customerSearch, setCustomerSearch] = useState('');
  const [customers, setCustomers] = useState([]);
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [status, setStatus] = useState('active');
 
  // Dates
  const [startDate, setStartDate] = useState(new Date().toISOString().split('T')[0]);
  const [endDate, setEndDate] = useState('');
 
  // Billing configuration
  const [billingInterval, setBillingInterval] = useState('monthly');
  const [billingDay, setBillingDay] = useState(1);
  const [customBillingDates, setCustomBillingDates] = useState([]);
  const [newBillingDate, setNewBillingDate] = useState('');
  const [autoInvoiceEnabled, setAutoInvoiceEnabled] = useState(false);
 
  // Support limits
  const [maxDevices, setMaxDevices] = useState(0);
  const [maxContacts, setMaxContacts] = useState(0);
  const [maxProducts, setMaxProducts] = useState(0);
 
  // Pricing
  const [laborRate, setLaborRate] = useState(0);
  const [currency, setCurrency] = useState('AUD');
 
  // Line items
  const [lineItems, setLineItems] = useState([]);
  const [products, setProducts] = useState([]);
 
  // Notes
  const [notes, setNotes] = useState('');
 
  const [loading, setLoading] = useState(false);
  const [loadingProducts, setLoadingProducts] = useState(true);
  const [error, setError] = useState('');
 
  useEffect(() => { fetchProducts(); }, [selectedTenantId]);
  useEffect(() => { if (id) fetchContract(); }, [id, selectedTenantId]);
 
  // Always include Authorization and tenant header if needed
  const buildHeaders = (extra = {}) => {
    const token = localStorage.getItem('token');
    const headers = { ...extra, Authorization: `Bearer ${token}` };
    if (selectedTenantId) {
      headers['X-Tenant-Id'] = selectedTenantId;
    }
    return headers;
  };
 
  const fetchContract = async () => {
    try {
      const res = await apiFetch(`/contracts/${id}`, { headers: buildHeaders() });
      if (!res.ok) throw new Error('Failed to load contract');
      const data = await res.json();
      // Auto-select the tenant if the contract belongs to a different tenant
      if (data.tenant_id && !selectedTenantId) {
        setSelectedTenantId(String(data.tenant_id));
      }
      setCustomerId(data.customer_id || '');
      setCustomerSearch(data.customer_name || '');
      setTitle(data.title || '');
      setDescription(data.description || '');
      setStatus(data.status || 'active');
      setStartDate(data.start_date?.split('T')[0] || '');
      setEndDate(data.end_date?.split('T')[0] || '');
      setBillingInterval(data.billing_interval || 'monthly');
      setBillingDay(data.billing_day || 1);
      setAutoInvoiceEnabled(data.auto_invoice_enabled || false);
      setMaxDevices(data.max_devices || 0);
      setMaxContacts(data.max_contacts || 0);
      setMaxProducts(data.max_products || 0);
      setLaborRate(data.labor_rate || 0);
      setCurrency(data.currency || 'AUD');
      setNotes(data.notes || '');
      // Parse custom billing dates
      if (data.custom_billing_dates) {
        try {
          const dates = JSON.parse(data.custom_billing_dates);
          setCustomBillingDates(dates || []);
        } catch (e) {
          console.error('Error parsing custom billing dates:', e);
        }
      }
      // Load line items
      setLineItems((data.line_items || []).map(item => ({
        line_item_id: item.line_item_id,
        product_id: item.product_id,
        description: item.description || '',
        quantity: Number(item.quantity) || 1,
        unit_price: Number(item.unit_price) || 0,
        recurring: item.recurring !== false,
        productSearch: '',
        showProducts: false,
        searchResults: []
      })));
    } catch (err) {
      console.error(err);
      setError('Failed to load contract: ' + err.message);
    }
  };
 
  const fetchProducts = async () => {
    setLoadingProducts(true);
    try {
      const res = await apiFetch('/products?limit=1000', { headers: buildHeaders() });
      if (!res.ok) throw new Error('Failed to load products');
      const data = await res.json();
      setProducts(data.products || []);
    } catch (err) {
      console.error(err);
    } finally {
      setLoadingProducts(false);
    }
  };
 
  const searchCustomers = async (query) => {
    try {
      const res = await apiFetch(`/customers?search=${encodeURIComponent(query)}&limit=10`, { headers: buildHeaders() });
      if (!res.ok) throw new Error('Failed to search customers');
      const data = await res.json();
      setCustomers(data.customers || []);
    } catch (err) {
      console.error(err);
    }
  };
 
  useEffect(() => {
    if (customerSearch && !customerId) {
      const timer = setTimeout(() => searchCustomers(customerSearch), 300);
      return () => clearTimeout(timer);
    } else if (!customerSearch) {
      setCustomers([]);
    }
  }, [customerSearch]);
 
  const addLineItem = () => {
    setLineItems(items => [...items, {
      product_id: null,
      description: '',
      quantity: 1,
      unit_price: 0,
      recurring: true,
      productSearch: '',
      showProducts: false,
      searchResults: []
    }]);
  };
 
  const removeLineItem = (idx) => {
    setLineItems(items => items.filter((_, i) => i !== idx));
  };
 
  const searchProducts = async (search, idx) => {
    try {
      const res = await apiFetch(`/products?search=${encodeURIComponent(search)}&limit=10`, { headers: buildHeaders() });
      if (!res.ok) throw new Error('Product search failed');
      const data = await res.json();
      setLineItems(items => items.map((it, i) =>
        i === idx ? { ...it, searchResults: data.products || [] } : it
      ));
    } catch (err) {
      console.error('Search failed:', err);
    }
  };
 
  const updateLineItem = (idx, patch) => {
    setLineItems(items => items.map((it, i) => {
      if (i !== idx) return it;
      return { ...it, ...patch };
    }));
 
    if (patch.productSearch !== undefined && patch.productSearch) {
      setTimeout(() => searchProducts(patch.productSearch, idx), 300);
    }
  };
 
  const addCustomBillingDate = () => {
    if (newBillingDate && !customBillingDates.includes(newBillingDate)) {
      setCustomBillingDates([...customBillingDates, newBillingDate].sort());
      setNewBillingDate('');
    }
  };
 
  const removeCustomBillingDate = (date) => {
    setCustomBillingDates(customBillingDates.filter(d => d !== date));
  };
 
  const calculateTotal = () => {
    return lineItems.reduce((sum, item) => {
      return sum + (Number(item.quantity) || 0) * (Number(item.unit_price) || 0);
    }, 0).toFixed(2);
  };
 
  const handleSave = async () => {
    if (!customerId) {
      setError('Please select a customer');
      return;
    }
    if (!title.trim()) {
      setError('Please enter a contract title');
      return;
    }
    if (!startDate) {
      setError('Please enter a start date');
      return;
    }
    setLoading(true);
    setError('');
    try {
      const payload = {
        customer_id: customerId,
        name: title, // Ensure backend receives contract name
        title,
        description,
        status,
        start_date: startDate,
        end_date: endDate || null,
        billing_interval: billingInterval,
        billing_day: billingInterval === 'monthly' ? billingDay : null,
        custom_billing_dates: billingInterval === 'custom' ? JSON.stringify(customBillingDates) : null,
        auto_invoice_enabled: autoInvoiceEnabled,
        max_devices: Number(maxDevices) || 0,
        max_contacts: Number(maxContacts) || 0,
        max_products: Number(maxProducts) || 0,
        labor_rate: Number(laborRate) || 0,
        currency,
        notes,
        line_items: lineItems.map(item => ({
          line_item_id: item.line_item_id,
          product_id: item.product_id,
          description: item.description,
          quantity: Number(item.quantity),
          unit_price: Number(item.unit_price),
          recurring: item.recurring
        }))
      };
      const url = id ? `/contracts/${id}` : '/contracts';
      const method = id ? 'PUT' : 'POST';
      const res = await apiFetch(url, {
        method,
        headers: buildHeaders({ 'Content-Type': 'application/json' }),
        body: JSON.stringify(payload)
      });
      if (!res.ok) {
        const text = await res.text();
        throw new Error(text || 'Save failed');
      }
      const result = await res.json();
      const contract = result.contract || result;
      navigate(`/contracts/${contract.contract_id}`);
    } catch (err) {
      setError('Save failed: ' + (err.message || err));
    } finally {
      setLoading(false);
    }
  };
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header">
          <h2>{id ? 'Edit Contract' : 'New Contract'}</h2>
        </div>
 
        {error && <div className="error-message">{error}</div>}
 
 
        <div className="form-container">
          <div className="form-grid">
            {/* Basic Information */}
            <div className="form-section">
              <h3>Contract Details</h3>
 
              <div className="form-row">
                <div className="form-field">
                  <label>Customer<span className="required">*</span></label>
                  <div style={{ position: 'relative' }}>
                    <input
                      type="text"
                      value={customerSearch}
                      onChange={e => {
                        setCustomerSearch(e.target.value);
                        setCustomerId('');
                      }}
                      placeholder="Search customers..."
                      required
                    />
                    {customers.length > 0 && (
                      <div style={{
                        position: 'absolute',
                        top: '100%',
                        left: 0,
                        right: 0,
                        background: 'var(--surface)',
                        border: '1px solid var(--border)',
                        borderRadius: '4px',
                        zIndex: 1000,
                        maxHeight: '200px',
                        overflowY: 'auto',
                        boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
                      }}>
                        {customers.map(c => (
                          <div
                            key={c.customer_id}
                            style={{
                              padding: '12px',
                              cursor: 'pointer',
                              borderBottom: '1px solid var(--border)'
                            }}
                            onClick={() => {
                              setCustomerId(c.customer_id);
                              setCustomerSearch(c.name);
                              setCustomers([]);
                            }}
                          >
                            <strong>{c.name}</strong>
                            {c.email && <div style={{ fontSize: '0.9em', color: 'var(--text-muted)' }}>{c.email}</div>}
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
 
                <div className="form-field">
                  <label>Status</label>
                  <select value={status} onChange={e => setStatus(e.target.value)}>
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                    <option value="expired">Expired</option>
                    <option value="cancelled">Cancelled</option>
                  </select>
                </div>
              </div>
 
              <div className="form-field">
                <label>Contract Title<span className="required">*</span></label>
                <input
                  type="text"
                  value={title}
                  onChange={e => setTitle(e.target.value)}
                  placeholder="e.g., Managed IT Services - 10 Devices"
                  required
                />
              </div>
 
              <div className="form-field">
                <label>Description</label>
                <textarea
                  value={description}
                  onChange={e => setDescription(e.target.value)}
                  rows={3}
                  placeholder="Brief description of the contract..."
                />
              </div>
 
              <div className="form-row">
                <div className="form-field">
                  <label>Start Date<span className="required">*</span></label>
                  <input
                    type="date"
                    value={startDate}
                    onChange={e => setStartDate(e.target.value)}
                    required
                  />
                </div>
 
                <div className="form-field">
                  <label>End Date</label>
                  <input
                    type="date"
                    value={endDate}
                    onChange={e => setEndDate(e.target.value)}
                  />
                  <span className="field-hint">Leave blank for ongoing contract</span>
                </div>
              </div>
            </div>
 
            {/* Billing Configuration */}
            <div className="form-section">
              <h3>Billing Configuration</h3>
 
              <div className="form-row">
                <div className="form-field">
                  <label>Billing Interval</label>
                  <select value={billingInterval} onChange={e => setBillingInterval(e.target.value)}>
                    <option value="monthly">Monthly</option>
                    <option value="yearly">Yearly</option>
                    <option value="custom">Custom (Specific Dates)</option>
                  </select>
                </div>
 
                {billingInterval === 'monthly' && (
                  <div className="form-field">
                    <label>Billing Day of Month</label>
                    <input
                      type="number"
                      min="1"
                      max="31"
                      value={billingDay}
                      onChange={e => setBillingDay(Number(e.target.value))}
                    />
                    <span className="field-hint">Day of month to generate invoice (1-31)</span>
                  </div>
                )}
 
                <div className="form-field">
                  <label>Currency</label>
                  <select value={currency} onChange={e => setCurrency(e.target.value)}>
                    <option value="AUD">AUD</option>
                    <option value="USD">USD</option>
                    <option value="EUR">EUR</option>
                    <option value="GBP">GBP</option>
                  </select>
                </div>
              </div>
 
              {billingInterval === 'custom' && (
                <div className="form-field">
                  <label>Custom Billing Dates</label>
                  <div style={{ marginBottom: '8px' }}>
                    <div style={{ display: 'flex', gap: '8px' }}>
                      <input
                        type="date"
                        value={newBillingDate}
                        onChange={e => setNewBillingDate(e.target.value)}
                        style={{ flex: 1 }}
                      />
                      <button
                        type="button"
                        className="btn"
                        onClick={addCustomBillingDate}
                      >
                        <span className="material-symbols-outlined">add</span>
                        Add Date
                      </button>
                    </div>
                  </div>
 
                  {customBillingDates.length > 0 && (
                    <div style={{
                      display: 'flex',
                      flexWrap: 'wrap',
                      gap: '8px',
                      marginTop: '12px',
                      padding: '12px',
                      background: 'var(--bg-secondary)',
                      borderRadius: '4px'
                    }}>
                      {customBillingDates.map(date => (
                        <span key={date} style={{
                          padding: '6px 12px',
                          background: 'var(--primary)',
                          color: 'white',
                          borderRadius: '4px',
                          display: 'inline-flex',
                          alignItems: 'center',
                          gap: '8px'
                        }}>
                          {new Date(date).toLocaleDateString()}
                          <button
                            type="button"
                            onClick={() => removeCustomBillingDate(date)}
                            style={{
                              background: 'none',
                              border: 'none',
                              color: 'white',
                              cursor: 'pointer',
                              padding: 0,
                              fontSize: '1.2em'
                            }}
                          >
                            ×
                          </button>
                        </span>
                      ))}
                    </div>
                  )}
                  <span className="field-hint">Invoice will be generated on each of these dates</span>
                </div>
              )}
 
              <div className="form-field">
                <label style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
                  <input
                    type="checkbox"
                    checked={autoInvoiceEnabled}
                    onChange={e => setAutoInvoiceEnabled(e.target.checked)}
                  />
                  Enable Automatic Invoice Generation
                </label>
                <span className="field-hint">Invoices will be automatically created on billing dates</span>
              </div>
            </div>
 
            {/* Support Limits */}
            <div className="form-section">
              <h3>Support Limits</h3>
 
              <div className="form-row">
                <div className="form-field">
                  <label>Max Devices</label>
                  <input
                    type="number"
                    min="0"
                    value={maxDevices}
                    onChange={e => setMaxDevices(e.target.value)}
                  />
                  <span className="field-hint">Maximum number of devices/endpoints covered</span>
                </div>
 
                <div className="form-field">
                  <label>Max Contacts</label>
                  <input
                    type="number"
                    min="0"
                    value={maxContacts}
                    onChange={e => setMaxContacts(e.target.value)}
                  />
                  <span className="field-hint">Maximum number of customer contacts supported</span>
                </div>
 
                <div className="form-field">
                  <label>Max Products</label>
                  <input
                    type="number"
                    min="0"
                    value={maxProducts}
                    onChange={e => setMaxProducts(e.target.value)}
                  />
                  <span className="field-hint">Maximum number of products/licenses included</span>
                </div>
              </div>
 
              <div className="form-field">
                <label>Labor Rate (per hour)</label>
                <input
                  type="number"
                  step="0.01"
                  min="0"
                  value={laborRate}
                  onChange={e => setLaborRate(e.target.value)}
                />
                <span className="field-hint">Hourly rate for additional services</span>
              </div>
            </div>
 
            {/* Line Items */}
            <div className="form-section">
              <h3>Line Items (Recurring Charges)</h3>
              <span className="field-hint">These items will be included in each invoice</span>
 
              {loadingProducts ? (
                <div>Loading products...</div>
              ) : (
                <>
                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: '2fr 1fr 1fr 1fr auto',
                    gap: '12px',
                    marginBottom: '12px',
                    marginTop: '16px',
                    fontWeight: 'bold',
                    fontSize: '0.9em',
                    color: 'var(--text-muted)'
                  }}>
                    <div>Product/Description</div>
                    <div>Qty</div>
                    <div>Unit Price</div>
                    <div>Recurring</div>
                    <div></div>
                  </div>
 
                  {lineItems.map((item, idx) => {
                    const lineTotal = (Number(item.quantity) || 0) * (Number(item.unit_price) || 0);
 
                    return (
                      <div key={idx} style={{
                        marginBottom: '16px',
                        padding: '12px',
                        background: 'var(--bg-secondary)',
                        borderRadius: '6px',
                        border: '1px solid var(--border)'
                      }}>
                        <div style={{
                          display: 'grid',
                          gridTemplateColumns: '2fr 1fr 1fr 1fr auto',
                          gap: '12px',
                          alignItems: 'start'
                        }}>
                          <div style={{ position: 'relative' }}>
                            <input
                              type="text"
                              value={item.productSearch || products.find(p => p.product_id === item.product_id)?.name || ''}
                              onChange={e => {
                                const search = e.target.value;
                                updateLineItem(idx, { productSearch: search, product_id: null });
                              }}
                              onFocus={() => updateLineItem(idx, { showProducts: true })}
                              onBlur={() => setTimeout(() => updateLineItem(idx, { showProducts: false }), 200)}
                              placeholder="Search products..."
                              style={{ marginBottom: '8px' }}
                            />
 
                            {item.showProducts && item.searchResults?.length > 0 && (
                              <div style={{
                                position: 'absolute',
                                top: '100%',
                                left: 0,
                                right: 0,
                                background: 'var(--surface)',
                                border: '1px solid var(--border)',
                                borderRadius: '4px',
                                zIndex: 1000,
                                maxHeight: '200px',
                                overflowY: 'auto',
                                boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
                              }}>
                                {item.searchResults.map(p => (
                                  <div
                                    key={p.product_id}
                                    style={{
                                      padding: '8px',
                                      cursor: 'pointer',
                                      borderBottom: '1px solid var(--border)'
                                    }}
                                    onMouseDown={e => {
                                      e.preventDefault();
                                      updateLineItem(idx, {
                                        product_id: p.product_id,
                                        description: p.name,
                                        unit_price: Number(p.price_ex_tax || 0),
                                        productSearch: p.name,
                                        showProducts: false
                                      });
                                    }}
                                  >
                                    <strong>{p.name}</strong>
                                    {p.sku && <div style={{ fontSize: '0.85em', color: 'var(--text-muted)' }}>SKU: {p.sku}</div>}
                                    <div style={{ fontSize: '0.85em', color: 'var(--text-muted)' }}>
                                      ${Number(p.price_ex_tax || 0).toFixed(2)}
                                    </div>
                                  </div>
                                ))}
                              </div>
                            )}
 
                            <textarea
                              value={item.description}
                              onChange={e => updateLineItem(idx, { description: e.target.value })}
                              placeholder="Description..."
                              rows={2}
                            />
                          </div>
 
                          <input
                            type="number"
                            value={item.quantity}
                            onChange={e => updateLineItem(idx, { quantity: Number(e.target.value) })}
                            step="0.01"
                            min="0"
                          />
 
                          <input
                            type="number"
                            value={item.unit_price}
                            onChange={e => updateLineItem(idx, { unit_price: Number(e.target.value) })}
                            step="0.01"
                            min="0"
                          />
 
                          <div style={{ padding: '10px 0' }}>
                            <label style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
                              <input
                                type="checkbox"
                                checked={item.recurring}
                                onChange={e => updateLineItem(idx, { recurring: e.target.checked })}
                              />
                              <span style={{ fontSize: '0.9em' }}>Recurring</span>
                            </label>
                          </div>
 
                          <button
                            type="button"
                            className="btn"
                            onClick={() => removeLineItem(idx)}
                            style={{ padding: '8px', minHeight: 'auto' }}
                          >
                            <span className="material-symbols-outlined">delete</span>
                          </button>
                        </div>
 
                        <div style={{
                          marginTop: '8px',
                          paddingTop: '8px',
                          borderTop: '1px solid var(--border)',
                          fontSize: '0.9em',
                          color: 'var(--text-muted)'
                        }}>
                          Line Total: <strong style={{ color: 'var(--text)' }}>${lineTotal.toFixed(2)}</strong>
                        </div>
                      </div>
                    );
                  })}
 
                  <button
                    type="button"
                    className="btn"
                    onClick={addLineItem}
                    style={{ marginTop: '8px' }}
                  >
                    <span className="material-symbols-outlined">add</span>
                    Add Line Item
                  </button>
                </>
              )}
 
              <div style={{
                marginTop: '16px',
                padding: '16px',
                background: 'var(--bg-secondary)',
                borderRadius: '6px',
                fontSize: '1.1em'
              }}>
                <strong>Monthly Recurring Total: {currency} ${calculateTotal()}</strong>
              </div>
            </div>
 
            {/* Notes */}
            <div className="form-section">
              <h3>Notes</h3>
              <div className="form-field">
                <label>Contract Notes</label>
                <textarea
                  value={notes}
                  onChange={e => setNotes(e.target.value)}
                  rows={4}
                  placeholder="Any additional notes about this contract..."
                />
              </div>
            </div>
          </div>
 
          <div className="form-actions">
            <button
              type="button"
              className="btn"
              onClick={handleSave}
              disabled={loading}
            >
              {loading ? 'Saving...' : (
                <>
                  <span className="material-symbols-outlined">save</span>
                  {id ? 'Update Contract' : 'Create Contract'}
                </>
              )}
            </button>
            <button
              type="button"
              className="btn"
              onClick={() => navigate('/contracts')}
            >
              <span className="material-symbols-outlined">close</span>
              Cancel
            </button>
          </div>
        </div>
      </div>
    </MainLayout>
  );
}