404 lines
14 KiB
JavaScript
404 lines
14 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
PlusIcon,
|
|
MapPinIcon,
|
|
BeakerIcon,
|
|
WrenchScrewdriverIcon,
|
|
CalculatorIcon
|
|
} from '@heroicons/react/24/outline';
|
|
import { propertiesAPI, productsAPI, equipmentAPI } from '../../services/api';
|
|
import LoadingSpinner from '../../components/UI/LoadingSpinner';
|
|
import toast from 'react-hot-toast';
|
|
|
|
const Applications = () => {
|
|
const [showPlanForm, setShowPlanForm] = useState(false);
|
|
const [applications, setApplications] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetchApplications();
|
|
}, []);
|
|
|
|
const fetchApplications = async () => {
|
|
try {
|
|
setLoading(true);
|
|
// TODO: Implement applications API endpoint
|
|
setApplications([]);
|
|
} catch (error) {
|
|
console.error('Failed to fetch applications:', error);
|
|
toast.error('Failed to load applications');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="p-6">
|
|
<div className="flex justify-center items-center h-64">
|
|
<LoadingSpinner size="lg" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Applications</h1>
|
|
<p className="text-gray-600">Plan, track, and log your lawn applications</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowPlanForm(true)}
|
|
className="btn-primary flex items-center gap-2"
|
|
>
|
|
<PlusIcon className="h-5 w-5" />
|
|
Plan Application
|
|
</button>
|
|
</div>
|
|
|
|
{/* Applications List */}
|
|
{applications.length === 0 ? (
|
|
<div className="card text-center py-12">
|
|
<CalculatorIcon className="h-16 w-16 text-gray-300 mx-auto mb-4" />
|
|
<h3 className="text-lg font-medium text-gray-900 mb-2">No Applications Yet</h3>
|
|
<p className="text-gray-600 mb-6">
|
|
Start by planning your first lawn application
|
|
</p>
|
|
<button
|
|
onClick={() => setShowPlanForm(true)}
|
|
className="btn-primary"
|
|
>
|
|
Plan Your First Application
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{applications.map((application) => (
|
|
<div key={application.id} className="card">
|
|
{/* Application card content will go here */}
|
|
<p>Application: {application.id}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Plan Application Modal */}
|
|
{showPlanForm && (
|
|
<ApplicationPlanModal
|
|
onClose={() => setShowPlanForm(false)}
|
|
onSubmit={(planData) => {
|
|
console.log('Plan submitted:', planData);
|
|
setShowPlanForm(false);
|
|
fetchApplications();
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Application Planning Modal Component
|
|
const ApplicationPlanModal = ({ onClose, onSubmit }) => {
|
|
const [properties, setProperties] = useState([]);
|
|
const [products, setProducts] = useState([]);
|
|
const [equipment, setEquipment] = useState([]);
|
|
const [selectedPropertyDetails, setSelectedPropertyDetails] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [loadingProperty, setLoadingProperty] = useState(false);
|
|
|
|
const [planData, setPlanData] = useState({
|
|
propertyId: '',
|
|
selectedAreas: [],
|
|
productId: '',
|
|
applicationType: '', // 'liquid' or 'granular'
|
|
equipmentId: '',
|
|
notes: ''
|
|
});
|
|
|
|
useEffect(() => {
|
|
fetchPlanningData();
|
|
}, []);
|
|
|
|
const fetchPlanningData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const [propertiesResponse, productsResponse, equipmentResponse] = await Promise.all([
|
|
propertiesAPI.getAll(),
|
|
productsAPI.getAll(),
|
|
equipmentAPI.getAll()
|
|
]);
|
|
|
|
console.log('Properties response:', propertiesResponse.data);
|
|
console.log('Products response:', productsResponse.data);
|
|
console.log('Equipment response:', equipmentResponse.data);
|
|
|
|
setProperties(propertiesResponse.data.data.properties || []);
|
|
// Combine shared and user products
|
|
const allProducts = [
|
|
...(productsResponse.data.data.sharedProducts || []),
|
|
...(productsResponse.data.data.userProducts || [])
|
|
];
|
|
setProducts(allProducts);
|
|
setEquipment(equipmentResponse.data.data.equipment || []);
|
|
} catch (error) {
|
|
console.error('Failed to fetch planning data:', error);
|
|
toast.error('Failed to load planning data');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchPropertyDetails = async (propertyId) => {
|
|
try {
|
|
setLoadingProperty(true);
|
|
const response = await propertiesAPI.getById(parseInt(propertyId));
|
|
console.log('Property details response:', response.data);
|
|
setSelectedPropertyDetails(response.data.data.property);
|
|
} catch (error) {
|
|
console.error('Failed to fetch property details:', error);
|
|
toast.error('Failed to load property details');
|
|
setSelectedPropertyDetails(null);
|
|
} finally {
|
|
setLoadingProperty(false);
|
|
}
|
|
};
|
|
|
|
const handlePropertyChange = (propertyId) => {
|
|
setPlanData({ ...planData, propertyId, selectedAreas: [] });
|
|
setSelectedPropertyDetails(null);
|
|
if (propertyId) {
|
|
fetchPropertyDetails(propertyId);
|
|
}
|
|
};
|
|
|
|
// Filter equipment based on application type
|
|
const availableEquipment = equipment.filter(eq => {
|
|
if (planData.applicationType === 'liquid') {
|
|
return eq.categoryName === 'Sprayer';
|
|
} else if (planData.applicationType === 'granular') {
|
|
return eq.categoryName === 'Spreader';
|
|
}
|
|
return false;
|
|
});
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!planData.propertyId || planData.selectedAreas.length === 0) {
|
|
toast.error('Please select a property and at least one area');
|
|
return;
|
|
}
|
|
|
|
if (!planData.productId) {
|
|
toast.error('Please select a product');
|
|
return;
|
|
}
|
|
|
|
if (!planData.equipmentId) {
|
|
toast.error('Please select equipment');
|
|
return;
|
|
}
|
|
|
|
onSubmit(planData);
|
|
};
|
|
|
|
const handleAreaToggle = (areaId) => {
|
|
setPlanData(prev => ({
|
|
...prev,
|
|
selectedAreas: prev.selectedAreas.includes(areaId)
|
|
? prev.selectedAreas.filter(id => id !== areaId)
|
|
: [...prev.selectedAreas, areaId]
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-lg p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
|
|
<h3 className="text-lg font-semibold mb-4">Plan Application</h3>
|
|
|
|
{loading ? (
|
|
<LoadingSpinner />
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{/* Property Selection */}
|
|
<div>
|
|
<label className="label flex items-center gap-2">
|
|
<MapPinIcon className="h-5 w-5" />
|
|
Property *
|
|
</label>
|
|
<select
|
|
className="input"
|
|
value={planData.propertyId}
|
|
onChange={(e) => handlePropertyChange(e.target.value)}
|
|
required
|
|
>
|
|
<option value="">Select a property...</option>
|
|
{properties.map((property) => (
|
|
<option key={property.id} value={property.id}>
|
|
{property.name} - {property.address}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Area Selection */}
|
|
{loadingProperty && (
|
|
<div className="flex items-center gap-2 text-gray-600">
|
|
<LoadingSpinner size="sm" />
|
|
<span>Loading property details...</span>
|
|
</div>
|
|
)}
|
|
|
|
{selectedPropertyDetails && selectedPropertyDetails.sections && selectedPropertyDetails.sections.length > 0 && (
|
|
<div>
|
|
<label className="label">Application Areas *</label>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
|
{selectedPropertyDetails.sections.map((section) => (
|
|
<label key={section.id} className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={planData.selectedAreas.includes(section.id)}
|
|
onChange={() => handleAreaToggle(section.id)}
|
|
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
|
/>
|
|
<span className="ml-2 text-sm">
|
|
{section.name} ({section.area ? `${Math.round(section.area)} sq ft` : 'No size'})
|
|
</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
{planData.selectedAreas.length > 0 && (
|
|
<p className="text-sm text-gray-600 mt-2">
|
|
Total area: {selectedPropertyDetails.sections
|
|
.filter(s => planData.selectedAreas.includes(s.id))
|
|
.reduce((total, s) => total + (s.area || 0), 0).toFixed(0)} sq ft
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{selectedPropertyDetails && (!selectedPropertyDetails.sections || selectedPropertyDetails.sections.length === 0) && (
|
|
<div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
|
|
<p className="text-yellow-800 text-sm">
|
|
This property has no lawn sections defined. Please add lawn sections to the property first.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Product Selection */}
|
|
<div>
|
|
<label className="label flex items-center gap-2">
|
|
<BeakerIcon className="h-5 w-5" />
|
|
Product *
|
|
</label>
|
|
<select
|
|
className="input"
|
|
value={planData.productId}
|
|
onChange={(e) => {
|
|
const selectedProduct = products.find(p => p.id === parseInt(e.target.value));
|
|
console.log('Selected product:', selectedProduct);
|
|
|
|
// Determine application type from product type
|
|
let applicationType = '';
|
|
if (selectedProduct) {
|
|
const productType = selectedProduct.productType || selectedProduct.customProductType;
|
|
// Map product types to application types
|
|
if (productType && (productType.toLowerCase().includes('liquid') || productType.toLowerCase().includes('concentrate'))) {
|
|
applicationType = 'liquid';
|
|
} else if (productType && (productType.toLowerCase().includes('granular') || productType.toLowerCase().includes('granule'))) {
|
|
applicationType = 'granular';
|
|
}
|
|
}
|
|
|
|
setPlanData({
|
|
...planData,
|
|
productId: e.target.value,
|
|
applicationType: applicationType
|
|
});
|
|
}}
|
|
required
|
|
>
|
|
<option value="">Select a product...</option>
|
|
{products.map((product) => {
|
|
const displayName = product.customName || product.name;
|
|
const productType = product.productType || product.customProductType;
|
|
const brand = product.brand || product.customBrand;
|
|
const rateInfo = product.customRateAmount && product.customRateUnit
|
|
? ` (${product.customRateAmount} ${product.customRateUnit})`
|
|
: '';
|
|
|
|
return (
|
|
<option key={product.id} value={product.id}>
|
|
{displayName}{brand ? ` - ${brand}` : ''}{productType ? ` (${productType})` : ''}{rateInfo}
|
|
</option>
|
|
);
|
|
})}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Equipment Selection */}
|
|
{planData.applicationType && (
|
|
<div>
|
|
<label className="label flex items-center gap-2">
|
|
<WrenchScrewdriverIcon className="h-5 w-5" />
|
|
Equipment * ({planData.applicationType})
|
|
</label>
|
|
<select
|
|
className="input"
|
|
value={planData.equipmentId}
|
|
onChange={(e) => setPlanData({ ...planData, equipmentId: e.target.value })}
|
|
required
|
|
>
|
|
<option value="">Select equipment...</option>
|
|
{availableEquipment.map((eq) => (
|
|
<option key={eq.id} value={eq.id}>
|
|
{eq.customName || eq.typeName}
|
|
{eq.manufacturer && ` - ${eq.manufacturer}`}
|
|
{eq.tankSizeGallons && ` (${eq.tankSizeGallons} gal)`}
|
|
{eq.capacityLbs && ` (${eq.capacityLbs} lbs)`}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{availableEquipment.length === 0 && (
|
|
<p className="text-sm text-orange-600 mt-1">
|
|
No {planData.applicationType === 'liquid' ? 'sprayers' : 'spreaders'} found.
|
|
Please add equipment first.
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Notes */}
|
|
<div>
|
|
<label className="label">Notes</label>
|
|
<textarea
|
|
className="input"
|
|
rows="3"
|
|
value={planData.notes}
|
|
onChange={(e) => setPlanData({ ...planData, notes: e.target.value })}
|
|
placeholder="Application notes, weather conditions, etc."
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-4">
|
|
<button type="submit" className="btn-primary flex-1">
|
|
Create Application Plan
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="btn-secondary flex-1"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Applications; |