ProductForm.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 './ProductForm.css';
import { apiFetch } from '../lib/api';
 
export default function ProductForm() {
  const navigate = useNavigate();
  const { id } = useParams();
  const [selectedTenantId, setSelectedTenantId] = useState('');
  const [isRootAdmin, setIsRootAdmin] = useState(false);
  const [form, setForm] = useState({
    name: '',
    description: '',
    supplier: '',
    is_service: false,
    divisible: false,
    is_stock: false,
    stock_quantity: 0,
    min_stock: 0,
    price_retail: 0,
    price_ex_tax: 0,
    upc: '',
    ean: '',
    supplier_code: ''
  });
  const [loading, setLoading] = useState(false);
  const [loadingData, setLoadingData] = useState(false);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    // Check if user is root admin
    const token = localStorage.getItem('token');
    if (token) {
      try {
        const payload = token.split('.')[1];
        const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
        const isRoot = decoded.subdomain === 'admin' || decoded.is_msp === true;
        setIsRootAdmin(isRoot);
      } catch { }
    }
  }, []);
 
  useEffect(() => {
    if (id) fetchProduct();
  }, [id, selectedTenantId]);
 
  const getTenantHeaders = async (baseHeaders = {}) => {
    const headers = { ...baseHeaders };
    if (selectedTenantId) {
      const token = localStorage.getItem('token');
      const tenantRes = await apiFetch('/tenants', {
        headers: {
          'Authorization': `Bearer ${token}`,
          'X-Tenant-Subdomain': 'admin'
        }
      });
      if (tenantRes.ok) {
        const data = await tenantRes.json();
        const tenants = Array.isArray(data) ? data : (data.tenants || []);
        const tenant = tenants.find(t => t.tenant_id === parseInt(selectedTenantId));
        if (tenant) {
          headers['X-Tenant-Subdomain'] = tenant.subdomain;
        }
      }
    }
    return headers;
  };
 
  const fetchProduct = async () => {
    setLoadingData(true);
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({ Authorization: `Bearer ${token}` });
      const res = await apiFetch(`/products/${id}`, { headers });
      if (!res.ok) throw new Error('Failed to load');
      const data = await res.json();
 
      // Auto-select the tenant if the product belongs to a different tenant
      if (data.tenant_id && !selectedTenantId) {
        setSelectedTenantId(String(data.tenant_id));
      }
 
      setForm({
        name: data.name || '',
        description: data.description || '',
        supplier: data.supplier || '',
        is_service: data.is_service,
        divisible: data.divisible,
        is_stock: data.is_stock,
        stock_quantity: data.stock_quantity || 0,
        min_stock: data.min_stock || 0,
        price_retail: data.price_retail || 0,
        price_ex_tax: data.price_ex_tax || 0,
        upc: data.upc || '',
        ean: data.ean || '',
        supplier_code: data.supplier_code || ''
      });
    } catch (err) {
      setError(err.message || 'Error');
    } finally { setLoadingData(false); }
  };
 
  const handleSave = async () => {
    setLoading(true);
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`
      });
      const url = id ? `/products/${id}` : '/products';
      const method = id ? 'PUT' : 'POST';
      const res = await apiFetch(url, { method, headers, body: JSON.stringify(form) });
      if (!res.ok) throw new Error('Save failed');
      navigate('/products');
    } catch (err) {
      setError(err.message || 'Save error');
    } finally { setLoading(false); }
  };
 
  const handleDelete = async () => {
    if (!confirm(`Are you sure you want to delete "${form.name}"? This action cannot be undone.`)) {
      return;
    }
 
    setLoading(true);
    try {
      const res = await apiFetch(`/products/${id}`, {
        method: 'DELETE',
        credentials: 'include'
      });
 
      if (res.status === 204) {
        // Success - navigate back to products list
        navigate('/products');
      } else {
        // Try to parse JSON error message
        try {
          const errorData = await res.json();
          setError(errorData.message || errorData.error || 'Failed to delete product');
        } catch {
          const errorText = await res.text();
          setError(errorText || 'Failed to delete product');
        }
      }
    } catch (err) {
      console.error('[ProductForm] Delete error:', err);
      setError('Failed to delete product: ' + (err.message || err));
    } finally {
      setLoading(false);
    }
  };
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header">
          <h2>{id ? 'Edit Product' : 'New Product'}</h2>
          <div className="header-actions">
            <button className="btn btn-secondary" onClick={() => navigate('/products')}>
              <span className="material-symbols-outlined">arrow_back</span>
              Back
            </button>
            {id && isRootAdmin && (
              <button
                className="btn btn-danger"
                onClick={handleDelete}
                disabled={loading}
                style={{ marginLeft: '8px' }}
              >
                <span className="material-symbols-outlined">delete</span>
                Delete
              </button>
            )}
          </div>
        </div>
 
        {error && <div className="alert alert-error">{error}</div>}
 
 
        {loadingData ? (
          <div className="loading-state">
            <span className="material-symbols-outlined spinning">progress_activity</span>
            <p>Loading product...</p>
          </div>
        ) : (
          <div className="product-form-container">
            <div className="form-card">
              <div className="card-header">
                <h3>
                  <span className="material-symbols-outlined">inventory_2</span>
                  Basic Information
                </h3>
              </div>
              <div className="card-body">
                <div className="form-group">
                  <label htmlFor="name">Product Name *</label>
                  <input
                    id="name"
                    type="text"
                    value={form.name}
                    onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
                    placeholder="Enter product name"
                    required
                  />
                </div>
 
                <div className="form-group">
                  <label htmlFor="description">Description</label>
                  <textarea
                    id="description"
                    value={form.description}
                    onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
                    placeholder="Enter product description"
                    rows="3"
                  />
                </div>
 
                <div className="form-group">
                  <label htmlFor="supplier">Supplier</label>
                  <input
                    id="supplier"
                    type="text"
                    value={form.supplier}
                    onChange={e => setForm(f => ({ ...f, supplier: e.target.value }))}
                    placeholder="Enter supplier name"
                  />
                </div>
 
                <div className="form-group">
                  <label htmlFor="type">Product Type</label>
                  <select
                    id="type"
                    value={form.is_service ? 'service' : 'product'}
                    onChange={e => setForm(f => ({ ...f, is_service: e.target.value === 'service' }))}
                  >
                    <option value="product">Physical Product</option>
                    <option value="service">Service</option>
                  </select>
                </div>
              </div>
            </div>
 
            <div className="form-card">
              <div className="card-header">
                <h3>
                  <span className="material-symbols-outlined">barcode</span>
                  Product Codes
                </h3>
              </div>
              <div className="card-body">
                <div className="form-row">
                  <div className="form-group">
                    <label htmlFor="upc">UPC</label>
                    <input
                      id="upc"
                      type="text"
                      value={form.upc}
                      onChange={e => setForm(f => ({ ...f, upc: e.target.value }))}
                      placeholder="Universal Product Code"
                    />
                  </div>
 
                  <div className="form-group">
                    <label htmlFor="ean">EAN</label>
                    <input
                      id="ean"
                      type="text"
                      value={form.ean}
                      onChange={e => setForm(f => ({ ...f, ean: e.target.value }))}
                      placeholder="European Article Number"
                    />
                  </div>
                </div>
 
                <div className="form-group">
                  <label htmlFor="supplier_code">Supplier Code</label>
                  <input
                    id="supplier_code"
                    type="text"
                    value={form.supplier_code}
                    onChange={e => setForm(f => ({ ...f, supplier_code: e.target.value }))}
                    placeholder="Supplier's product code"
                  />
                </div>
              </div>
            </div>
 
            <div className="form-card">
              <div className="card-header">
                <h3>
                  <span className="material-symbols-outlined">warehouse</span>
                  Inventory & Stock
                </h3>
              </div>
              <div className="card-body">
                <div className="form-group checkbox-group">
                  <label className="checkbox-label">
                    <input
                      type="checkbox"
                      checked={form.divisible}
                      onChange={e => setForm(f => ({ ...f, divisible: e.target.checked }))}
                    />
                    <span>Divisible (can be sold in fractions)</span>
                  </label>
                </div>
 
                <div className="form-group checkbox-group">
                  <label className="checkbox-label">
                    <input
                      type="checkbox"
                      checked={form.is_stock}
                      onChange={e => setForm(f => ({ ...f, is_stock: e.target.checked }))}
                    />
                    <span>Track inventory for this product</span>
                  </label>
                </div>
 
                {form.is_stock && (
                  <div className="form-row">
                    <div className="form-group">
                      <label htmlFor="stock_quantity">Current Stock</label>
                      <input
                        id="stock_quantity"
                        type="number"
                        value={form.stock_quantity}
                        onChange={e => setForm(f => ({ ...f, stock_quantity: parseInt(e.target.value || 0, 10) }))}
                        min="0"
                      />
                    </div>
 
                    <div className="form-group">
                      <label htmlFor="min_stock">Minimum Stock Level</label>
                      <input
                        id="min_stock"
                        type="number"
                        value={form.min_stock}
                        onChange={e => setForm(f => ({ ...f, min_stock: parseInt(e.target.value || 0, 10) }))}
                        min="0"
                      />
                    </div>
                  </div>
                )}
              </div>
            </div>
 
            <div className="form-card">
              <div className="card-header">
                <h3>
                  <span className="material-symbols-outlined">payments</span>
                  Pricing
                </h3>
              </div>
              <div className="card-body">
                <div className="form-row">
                  <div className="form-group">
                    <label htmlFor="price_retail">Retail Price</label>
                    <div className="input-with-prefix">
                      <span className="input-prefix">$</span>
                      <input
                        id="price_retail"
                        type="number"
                        step="0.01"
                        value={form.price_retail}
                        onChange={e => setForm(f => ({ ...f, price_retail: parseFloat(e.target.value || 0) }))}
                        min="0"
                        placeholder="0.00"
                      />
                    </div>
                  </div>
 
                  <div className="form-group">
                    <label htmlFor="price_ex_tax">Price (Ex Tax)</label>
                    <div className="input-with-prefix">
                      <span className="input-prefix">$</span>
                      <input
                        id="price_ex_tax"
                        type="number"
                        step="0.01"
                        value={form.price_ex_tax}
                        onChange={e => setForm(f => ({ ...f, price_ex_tax: parseFloat(e.target.value || 0) }))}
                        min="0"
                        placeholder="0.00"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
 
            <div className="form-actions">
              <button className="btn btn-primary" onClick={handleSave} disabled={loading || !form.name}>
                {loading ? (
                  <>
                    <span className="material-symbols-outlined spinning">progress_activity</span>
                    Saving...
                  </>
                ) : (
                  <>
                    <span className="material-symbols-outlined">save</span>
                    {id ? 'Update Product' : 'Create Product'}
                  </>
                )}
              </button>
              <button className="btn btn-secondary" onClick={() => navigate('/products')} disabled={loading}>
                Cancel
              </button>
            </div>
          </div>
        )}
      </div>
    </MainLayout>
  );
}