995 lines
43 KiB
JavaScript
995 lines
43 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
BeakerIcon,
|
|
MagnifyingGlassIcon,
|
|
PlusIcon,
|
|
PencilIcon,
|
|
TrashIcon,
|
|
ExclamationTriangleIcon,
|
|
TagIcon,
|
|
ArrowUpIcon,
|
|
InformationCircleIcon
|
|
} from '@heroicons/react/24/outline';
|
|
import { adminAPI, productsAPI } from '../../services/api';
|
|
import LoadingSpinner from '../../components/UI/LoadingSpinner';
|
|
import toast from 'react-hot-toast';
|
|
|
|
const AdminProducts = () => {
|
|
const [products, setProducts] = useState([]);
|
|
const [userProducts, setUserProducts] = useState([]);
|
|
const [categories, setCategories] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [categoryFilter, setCategoryFilter] = useState('all');
|
|
const [typeFilter, setTypeFilter] = useState('all');
|
|
const [productTypeFilter, setProductTypeFilter] = useState('all');
|
|
const [selectedProduct, setSelectedProduct] = useState(null);
|
|
const [showCreateModal, setShowCreateModal] = useState(false);
|
|
const [showEditModal, setShowEditModal] = useState(false);
|
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
|
const [showDetailsModal, setShowDetailsModal] = useState(false);
|
|
const [productDetails, setProductDetails] = useState({ rates: [], spreaderSettings: [] });
|
|
const [showAddSettingForm, setShowAddSettingForm] = useState(false);
|
|
const [newSettingData, setNewSettingData] = useState({
|
|
equipmentId: '',
|
|
spreaderBrand: '',
|
|
spreaderModel: '',
|
|
settingValue: '',
|
|
rateDescription: '',
|
|
notes: ''
|
|
});
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
brand: '',
|
|
categoryId: '',
|
|
productType: 'granular',
|
|
activeIngredients: '',
|
|
description: '',
|
|
seedBlend: [],
|
|
rates: [{ applicationType: 'granular', rateAmount: '', rateUnit: 'lbs/1000 sq ft', notes: '' }]
|
|
});
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [searchTerm, categoryFilter, typeFilter]);
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const [productsResponse, userProductsResponse, categoriesResponse] = await Promise.all([
|
|
adminAPI.getProducts({
|
|
search: searchTerm,
|
|
category: categoryFilter !== 'all' ? categoryFilter : '',
|
|
type: typeFilter !== 'all' ? typeFilter : ''
|
|
}),
|
|
adminAPI.getAllUserProducts({
|
|
search: searchTerm,
|
|
category: categoryFilter !== 'all' ? categoryFilter : ''
|
|
}),
|
|
productsAPI.getCategories()
|
|
]);
|
|
|
|
setProducts(productsResponse.data.data.products || []);
|
|
setUserProducts(userProductsResponse.data.data.userProducts || []);
|
|
setCategories(categoriesResponse.data.data.categories || []);
|
|
} catch (error) {
|
|
console.error('Failed to fetch products:', error);
|
|
toast.error('Failed to load products');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleCreate = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
await adminAPI.createProduct(formData);
|
|
toast.success('Product created successfully');
|
|
setShowCreateModal(false);
|
|
resetForm();
|
|
fetchData();
|
|
} catch (error) {
|
|
console.error('Failed to create product:', error);
|
|
toast.error('Failed to create product');
|
|
}
|
|
};
|
|
|
|
const handleUpdate = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
await adminAPI.updateProduct(selectedProduct.id, formData);
|
|
toast.success('Product updated successfully');
|
|
setShowEditModal(false);
|
|
resetForm();
|
|
fetchData();
|
|
} catch (error) {
|
|
console.error('Failed to update product:', error);
|
|
toast.error('Failed to update product');
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
try {
|
|
if (selectedProduct.isShared) {
|
|
await adminAPI.deleteProduct(selectedProduct.id);
|
|
} else {
|
|
try {
|
|
await productsAPI.deleteUserProduct(selectedProduct.id);
|
|
} catch (e) {
|
|
const msg = e?.response?.data?.message || '';
|
|
if (msg.includes('used in applications')) {
|
|
// Fallback to archive instead of delete
|
|
await productsAPI.archiveUserProduct(selectedProduct.id);
|
|
toast('Product archived instead of deleted (in use)');
|
|
} else {
|
|
throw e;
|
|
}
|
|
}
|
|
}
|
|
toast.success('Product deleted successfully');
|
|
setShowDeleteModal(false);
|
|
setSelectedProduct(null);
|
|
fetchData();
|
|
} catch (error) {
|
|
console.error('Failed to delete product:', error);
|
|
toast.error(error?.response?.data?.message || 'Failed to delete product');
|
|
}
|
|
};
|
|
|
|
const handlePromoteToShared = async (userProduct) => {
|
|
try {
|
|
await adminAPI.promoteUserProduct(userProduct.id);
|
|
toast.success(`"${userProduct.customName}" promoted to shared product`);
|
|
fetchData(); // Refresh the data
|
|
} catch (error) {
|
|
console.error('Failed to promote product:', error);
|
|
toast.error('Failed to promote product to shared');
|
|
}
|
|
};
|
|
|
|
const showProductDetails = async (product) => {
|
|
try {
|
|
setSelectedProduct(product);
|
|
let rates = [];
|
|
let spreaderSettings = [];
|
|
|
|
if (product.isShared) {
|
|
// Fetch application rates for shared products
|
|
const ratesResponse = await adminAPI.getProductRates(product.id);
|
|
rates = ratesResponse.data.data.rates || [];
|
|
} else {
|
|
// Fetch spreader settings for user products
|
|
const settingsResponse = await adminAPI.getUserProductSpreaderSettings(product.id);
|
|
spreaderSettings = settingsResponse.data.data.spreaderSettings || [];
|
|
}
|
|
|
|
setProductDetails({ rates, spreaderSettings });
|
|
setShowDetailsModal(true);
|
|
} catch (error) {
|
|
console.error('Failed to fetch product details:', error);
|
|
toast.error('Failed to load product details');
|
|
}
|
|
};
|
|
|
|
const handleAddSpreaderSetting = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
await adminAPI.addUserProductSpreaderSetting(selectedProduct.id, newSettingData);
|
|
toast.success('Spreader setting added successfully');
|
|
setShowAddSettingForm(false);
|
|
setNewSettingData({
|
|
equipmentId: '',
|
|
spreaderBrand: '',
|
|
spreaderModel: '',
|
|
settingValue: '',
|
|
rateDescription: '',
|
|
notes: ''
|
|
});
|
|
// Refresh the settings
|
|
showProductDetails(selectedProduct);
|
|
} catch (error) {
|
|
console.error('Failed to add spreader setting:', error);
|
|
toast.error('Failed to add spreader setting');
|
|
}
|
|
};
|
|
|
|
const handleDeleteSpreaderSetting = async (settingId) => {
|
|
try {
|
|
await adminAPI.deleteUserProductSpreaderSetting(settingId);
|
|
toast.success('Spreader setting deleted successfully');
|
|
// Refresh the settings
|
|
showProductDetails(selectedProduct);
|
|
} catch (error) {
|
|
console.error('Failed to delete spreader setting:', error);
|
|
toast.error('Failed to delete spreader setting');
|
|
}
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setFormData({
|
|
name: '',
|
|
brand: '',
|
|
categoryId: '',
|
|
productType: 'granular',
|
|
activeIngredients: '',
|
|
description: '',
|
|
seedBlend: [],
|
|
rates: [{ applicationType: 'granular', rateAmount: '', rateUnit: 'lbs/1000 sq ft', notes: '' }]
|
|
});
|
|
setSelectedProduct(null);
|
|
};
|
|
|
|
const openEditModal = (product) => {
|
|
setSelectedProduct(product);
|
|
setFormData({
|
|
name: product.name || product.customName || '',
|
|
brand: product.brand || product.customBrand || '',
|
|
categoryId: product.categoryId || '',
|
|
productType: product.productType || product.customProductType || 'granular',
|
|
activeIngredients: product.activeIngredients || product.customActiveIngredients || '',
|
|
description: product.description || product.customDescription || '',
|
|
seedBlend: product.seedBlend || [],
|
|
rates: product.rates && product.rates.length > 0 ? product.rates : [{
|
|
applicationType: product.productType || 'granular',
|
|
rateAmount: product.customRateAmount || '',
|
|
rateUnit: product.customRateUnit || 'lbs/1000 sq ft',
|
|
notes: ''
|
|
}]
|
|
});
|
|
setShowEditModal(true);
|
|
};
|
|
|
|
const addRate = () => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
rates: [...prev.rates, { applicationType: prev.productType, rateAmount: '', rateUnit: prev.productType === 'granular' ? 'lbs/1000 sq ft' : 'oz/1000 sq ft', notes: '' }]
|
|
}));
|
|
};
|
|
|
|
const removeRate = (index) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
rates: prev.rates.filter((_, i) => i !== index)
|
|
}));
|
|
};
|
|
|
|
const updateRate = (index, field, value) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
rates: prev.rates.map((rate, i) =>
|
|
i === index ? { ...rate, [field]: value } : rate
|
|
)
|
|
}));
|
|
};
|
|
|
|
// Combine shared and user products based on filter
|
|
const allProducts = [
|
|
...(productTypeFilter === 'custom' ? [] : products.map(p => ({ ...p, isShared: true }))),
|
|
...(productTypeFilter === 'shared' ? [] : userProducts.map(p => ({ ...p, isShared: false })))
|
|
];
|
|
|
|
const ProductForm = ({ onSubmit, submitText }) => (
|
|
<form onSubmit={onSubmit} className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Product Name *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Brand
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.brand}
|
|
onChange={(e) => setFormData({ ...formData, brand: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Category
|
|
</label>
|
|
<select
|
|
value={formData.categoryId}
|
|
onChange={(e) => setFormData({ ...formData, categoryId: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">Select Category</option>
|
|
{categories.map(cat => (
|
|
<option key={cat.id} value={cat.id}>{cat.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Product Type *
|
|
</label>
|
|
<select
|
|
required
|
|
value={formData.productType}
|
|
onChange={(e) => setFormData({ ...formData, productType: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="granular">Granular</option>
|
|
<option value="liquid">Liquid</option>
|
|
<option value="seed">Seed</option>
|
|
<option value="powder">Powder</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Active Ingredients
|
|
</label>
|
|
<textarea
|
|
value={formData.activeIngredients}
|
|
onChange={(e) => setFormData({ ...formData, activeIngredients: e.target.value })}
|
|
rows="3"
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Description
|
|
</label>
|
|
<textarea
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
rows="3"
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Seed blend editor */}
|
|
{formData.productType === 'seed' && (
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<label className="block text-sm font-medium text-gray-700">Seed Blend (Cultivars + %)</label>
|
|
<button
|
|
type="button"
|
|
onClick={() => setFormData({ ...formData, seedBlend: [...(formData.seedBlend||[]), { cultivar: '', percent: '' }] })}
|
|
className="text-sm text-blue-600 hover:text-blue-800"
|
|
>
|
|
+ Add Cultivar
|
|
</button>
|
|
</div>
|
|
{(formData.seedBlend && formData.seedBlend.length > 0) ? (
|
|
<div className="space-y-2">
|
|
{formData.seedBlend.map((row, idx) => (
|
|
<div key={idx} className="grid grid-cols-6 gap-2 items-center">
|
|
<input
|
|
className="col-span-4 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="Cultivar name"
|
|
value={row.cultivar}
|
|
onChange={(e)=> {
|
|
const next = [...formData.seedBlend];
|
|
next[idx] = { ...next[idx], cultivar: e.target.value };
|
|
setFormData({ ...formData, seedBlend: next });
|
|
}}
|
|
/>
|
|
<input
|
|
type="number"
|
|
step="0.1"
|
|
className="col-span-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="%"
|
|
value={row.percent}
|
|
onChange={(e)=> {
|
|
const next = [...formData.seedBlend];
|
|
next[idx] = { ...next[idx], percent: e.target.value };
|
|
setFormData({ ...formData, seedBlend: next });
|
|
}}
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="text-red-600"
|
|
onClick={()=> {
|
|
const next = (formData.seedBlend||[]).filter((_,i)=> i!==idx);
|
|
setFormData({ ...formData, seedBlend: next });
|
|
}}
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
))}
|
|
<div className="text-xs text-gray-600">
|
|
Total: {((formData.seedBlend||[]).reduce((s,r)=> s + (parseFloat(r.percent)||0), 0)).toFixed(1)}%
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-sm text-gray-500">No cultivars added yet.</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Application Rates */}
|
|
<div>
|
|
<div className="flex justify-between items-center mb-2">
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
Application Rates
|
|
</label>
|
|
<button
|
|
type="button"
|
|
onClick={addRate}
|
|
className="text-sm text-blue-600 hover:text-blue-800"
|
|
>
|
|
+ Add Rate
|
|
</button>
|
|
</div>
|
|
{formData.rates.map((rate, index) => (
|
|
<div key={index} className="border border-gray-200 rounded-md p-3 mb-2">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 mb-2">
|
|
<input
|
|
type="number"
|
|
placeholder="Rate Amount"
|
|
value={rate.rateAmount}
|
|
onChange={(e) => updateRate(index, 'rateAmount', e.target.value)}
|
|
className="px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
/>
|
|
<select
|
|
value={rate.rateUnit}
|
|
onChange={(e) => updateRate(index, 'rateUnit', e.target.value)}
|
|
className="px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
>
|
|
<option value="lbs/1000 sq ft">lbs/1000 sq ft</option>
|
|
<option value="oz/1000 sq ft">oz/1000 sq ft</option>
|
|
<option value="lbs/acre">lbs/acre</option>
|
|
<option value="oz/acre">oz/acre</option>
|
|
</select>
|
|
{formData.rates.length > 1 && (
|
|
<button
|
|
type="button"
|
|
onClick={() => removeRate(index)}
|
|
className="text-red-600 hover:text-red-800 text-sm"
|
|
>
|
|
Remove
|
|
</button>
|
|
)}
|
|
</div>
|
|
<input
|
|
type="text"
|
|
placeholder="Notes (optional)"
|
|
value={rate.notes}
|
|
onChange={(e) => updateRate(index, 'notes', e.target.value)}
|
|
className="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex justify-end space-x-3 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setShowCreateModal(false);
|
|
setShowEditModal(false);
|
|
resetForm();
|
|
}}
|
|
className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="px-4 py-2 text-sm text-white bg-blue-600 rounded hover:bg-blue-700"
|
|
>
|
|
{submitText}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<div className="mb-6">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Manage Products</h1>
|
|
<p className="text-gray-600">Add, edit, and manage all lawn care products</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowCreateModal(true)}
|
|
className="btn-primary flex items-center"
|
|
>
|
|
<PlusIcon className="h-5 w-5 mr-2" />
|
|
Add Product
|
|
</button>
|
|
</div>
|
|
|
|
{/* Search and Filters */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
|
<div className="relative">
|
|
<MagnifyingGlassIcon className="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search products..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"
|
|
/>
|
|
</div>
|
|
<select
|
|
value={categoryFilter}
|
|
onChange={(e) => setCategoryFilter(e.target.value)}
|
|
className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="all">All Categories</option>
|
|
{categories.map(cat => (
|
|
<option key={cat.id} value={cat.id}>{cat.name}</option>
|
|
))}
|
|
</select>
|
|
<select
|
|
value={typeFilter}
|
|
onChange={(e) => setTypeFilter(e.target.value)}
|
|
className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="all">All Types</option>
|
|
<option value="granular">Granular</option>
|
|
<option value="liquid">Liquid</option>
|
|
<option value="seed">Seed</option>
|
|
<option value="powder">Powder</option>
|
|
</select>
|
|
<select
|
|
value={productTypeFilter}
|
|
onChange={(e) => setProductTypeFilter(e.target.value)}
|
|
className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="all">All Products</option>
|
|
<option value="shared">Shared Only</option>
|
|
<option value="custom">Custom Only</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{loading && !showCreateModal && !showEditModal && !showDetailsModal && !showDeleteModal ? (
|
|
<div className="flex justify-center items-center h-64">
|
|
<LoadingSpinner size="lg" />
|
|
</div>
|
|
) : (
|
|
<div className="card overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Product
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Type
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Category
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Source
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Owner
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Usage
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{allProducts.map((product) => (
|
|
<tr key={`${product.isShared ? 'shared' : 'custom'}-${product.id}`} className="hover:bg-gray-50">
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="flex items-center">
|
|
<div className="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
|
|
<BeakerIcon className="h-6 w-6 text-green-600" />
|
|
</div>
|
|
<div className="ml-4">
|
|
<div className="text-sm font-medium text-gray-900">
|
|
{product.name || product.customName}
|
|
</div>
|
|
<div className="text-sm text-gray-500">
|
|
{product.brand || product.customBrand}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
|
|
product.productType === 'granular'
|
|
? 'bg-green-100 text-green-800'
|
|
: product.productType === 'liquid'
|
|
? 'bg-blue-100 text-blue-800'
|
|
: product.productType === 'seed'
|
|
? 'bg-yellow-100 text-yellow-800'
|
|
: product.productType === 'powder'
|
|
? 'bg-purple-100 text-purple-800'
|
|
: 'bg-gray-100 text-gray-800'
|
|
}`}>
|
|
{product.productType}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{product.categoryName || 'Uncategorized'}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
|
|
product.isShared
|
|
? 'bg-purple-100 text-purple-800'
|
|
: 'bg-orange-100 text-orange-800'
|
|
}`}>
|
|
{product.isShared ? 'Shared' : 'Custom'}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{product.isShared ? (
|
|
<span className="text-gray-500">System</span>
|
|
) : (
|
|
<div>
|
|
<div className="font-medium">{product.userName}</div>
|
|
<div className="text-xs text-gray-500">{product.userEmail}</div>
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{product.isShared ? (
|
|
<div>
|
|
<div>{product.rateCount || 0} rates</div>
|
|
<div className="text-xs text-gray-500">{product.usageCount || 0} users</div>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<div>{product.spreaderSettingsCount || 0} spreader settings</div>
|
|
<div className="text-xs text-gray-500">{product.usageCount || 0} applications</div>
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
|
<div className="flex items-center space-x-2">
|
|
<button
|
|
onClick={() => showProductDetails(product)}
|
|
className="text-blue-600 hover:text-blue-900"
|
|
title="View Rates & Settings"
|
|
>
|
|
<InformationCircleIcon className="h-4 w-4" />
|
|
</button>
|
|
{!product.isShared && (
|
|
<button
|
|
onClick={() => handlePromoteToShared(product)}
|
|
className="text-green-600 hover:text-green-900"
|
|
title="Promote to Shared Product"
|
|
>
|
|
<ArrowUpIcon className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => openEditModal(product)}
|
|
className="text-indigo-600 hover:text-indigo-900"
|
|
title="Edit Product"
|
|
>
|
|
<PencilIcon className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setSelectedProduct(product);
|
|
setShowDeleteModal(true);
|
|
}}
|
|
className="text-red-600 hover:text-red-900"
|
|
title="Delete Product"
|
|
>
|
|
<TrashIcon className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Create Modal */}
|
|
{showCreateModal && (
|
|
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
|
<div className="relative top-10 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-md bg-white">
|
|
<div className="mt-3">
|
|
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
|
Create New Product
|
|
</h3>
|
|
<ProductForm onSubmit={handleCreate} submitText="Create Product" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Edit Modal */}
|
|
{showEditModal && (
|
|
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
|
<div className="relative top-10 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-md bg-white">
|
|
<div className="mt-3">
|
|
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
|
Edit Product
|
|
</h3>
|
|
<ProductForm onSubmit={handleUpdate} submitText="Update Product" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Delete Modal */}
|
|
{showDeleteModal && selectedProduct && (
|
|
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
|
<div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
|
<div className="mt-3">
|
|
<div className="flex items-center mb-4">
|
|
<ExclamationTriangleIcon className="h-6 w-6 text-red-600 mr-2" />
|
|
<h3 className="text-lg font-medium text-gray-900">
|
|
Delete Product
|
|
</h3>
|
|
</div>
|
|
<p className="text-sm text-gray-600 mb-6">
|
|
Are you sure you want to delete "{selectedProduct.name || selectedProduct.customName}"?
|
|
This action cannot be undone.
|
|
</p>
|
|
<div className="flex justify-end space-x-3">
|
|
<button
|
|
onClick={() => setShowDeleteModal(false)}
|
|
className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleDelete}
|
|
className="px-4 py-2 text-sm text-white bg-red-600 rounded hover:bg-red-700"
|
|
>
|
|
Delete Product
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Product Details Modal */}
|
|
{showDetailsModal && selectedProduct && (
|
|
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
|
<div className="relative top-10 mx-auto p-5 border w-full max-w-4xl shadow-lg rounded-md bg-white">
|
|
<div className="mt-3">
|
|
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
|
{selectedProduct.isShared ? 'Application Rates' : 'Spreader Settings'} - {selectedProduct.name || selectedProduct.customName}
|
|
</h3>
|
|
|
|
{selectedProduct.isShared ? (
|
|
<div>
|
|
<h4 className="text-md font-semibold text-gray-800 mb-3">Application Rates ({productDetails.rates.length})</h4>
|
|
{productDetails.rates.length > 0 ? (
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rate</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Unit</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{productDetails.rates.map((rate, index) => (
|
|
<tr key={index} className="hover:bg-gray-50">
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
{rate.applicationType}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{rate.rateAmount}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{rate.rateUnit}
|
|
</td>
|
|
<td className="px-6 py-4 text-sm text-gray-900">
|
|
{rate.notes || 'No notes'}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<p className="text-gray-500 text-center py-8">No application rates defined for this product.</p>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<h4 className="text-md font-semibold text-gray-800 mb-3">Spreader Settings ({productDetails.spreaderSettings.length})</h4>
|
|
{productDetails.spreaderSettings.length > 0 ? (
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Equipment</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Spreader</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Setting Value</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rate Description</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Notes</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{productDetails.spreaderSettings.map((setting, index) => (
|
|
<tr key={index} className="hover:bg-gray-50">
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
{setting.equipmentName || 'Generic Equipment'}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{setting.spreaderBrand} {setting.spreaderModel}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{setting.settingValue || 'N/A'}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{setting.rateDescription || 'Not specified'}
|
|
</td>
|
|
<td className="px-6 py-4 text-sm text-gray-900">
|
|
{setting.notes || 'No notes'}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
|
<button
|
|
onClick={() => handleDeleteSpreaderSetting(setting.id)}
|
|
className="text-red-600 hover:text-red-900"
|
|
title="Delete Setting"
|
|
>
|
|
<TrashIcon className="h-4 w-4" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<p className="text-gray-500 text-center py-8">No spreader settings configured for this product.</p>
|
|
)}
|
|
|
|
{/* Add Setting Button */}
|
|
<div className="mt-4">
|
|
{!showAddSettingForm ? (
|
|
<button
|
|
onClick={() => setShowAddSettingForm(true)}
|
|
className="btn-primary flex items-center text-sm"
|
|
>
|
|
<PlusIcon className="h-4 w-4 mr-1" />
|
|
Add Spreader Setting
|
|
</button>
|
|
) : (
|
|
<div className="border rounded-lg p-4 bg-gray-50">
|
|
<h5 className="text-sm font-semibold text-gray-800 mb-3">Add New Spreader Setting</h5>
|
|
<form onSubmit={handleAddSpreaderSetting} className="space-y-3">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">Spreader Brand</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={newSettingData.spreaderBrand}
|
|
onChange={(e) => setNewSettingData({ ...newSettingData, spreaderBrand: e.target.value })}
|
|
className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
placeholder="e.g. Scotts, TruGreen"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">Spreader Model</label>
|
|
<input
|
|
type="text"
|
|
value={newSettingData.spreaderModel}
|
|
onChange={(e) => setNewSettingData({ ...newSettingData, spreaderModel: e.target.value })}
|
|
className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
placeholder="e.g. EdgeGuard, DLX"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">Setting Value</label>
|
|
<input
|
|
type="text"
|
|
value={newSettingData.settingValue}
|
|
onChange={(e) => setNewSettingData({ ...newSettingData, settingValue: e.target.value })}
|
|
className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
placeholder="e.g. 3.5, M, Large"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">Rate Description</label>
|
|
<input
|
|
type="text"
|
|
value={newSettingData.rateDescription}
|
|
onChange={(e) => setNewSettingData({ ...newSettingData, rateDescription: e.target.value })}
|
|
className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
placeholder="e.g. 2.5 lbs/1000 sq ft"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">Notes</label>
|
|
<textarea
|
|
value={newSettingData.notes}
|
|
onChange={(e) => setNewSettingData({ ...newSettingData, notes: e.target.value })}
|
|
className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
rows="2"
|
|
placeholder="Additional notes or instructions"
|
|
/>
|
|
</div>
|
|
<div className="flex justify-end space-x-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setShowAddSettingForm(false);
|
|
setNewSettingData({
|
|
equipmentId: '',
|
|
spreaderBrand: '',
|
|
spreaderModel: '',
|
|
settingValue: '',
|
|
rateDescription: '',
|
|
notes: ''
|
|
});
|
|
}}
|
|
className="px-3 py-1 text-xs text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="px-3 py-1 text-xs text-white bg-blue-600 rounded hover:bg-blue-700"
|
|
>
|
|
Add Setting
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end mt-6">
|
|
<button
|
|
onClick={() => {
|
|
setShowDetailsModal(false);
|
|
setSelectedProduct(null);
|
|
setProductDetails({ rates: [], spreaderSettings: [] });
|
|
setShowAddSettingForm(false);
|
|
setNewSettingData({
|
|
equipmentId: '',
|
|
spreaderBrand: '',
|
|
spreaderModel: '',
|
|
settingValue: '',
|
|
rateDescription: '',
|
|
notes: ''
|
|
});
|
|
}}
|
|
className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AdminProducts;
|