asdfsadfdsa
This commit is contained in:
Jake Kasper
246
frontend/src/components/Applications/ApplicationViewModal.js
Normal file
246
frontend/src/components/Applications/ApplicationViewModal.js
Normal file
@@ -0,0 +1,246 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { applicationsAPI } from '../../services/api';
|
||||
import PropertyMap from '../Maps/PropertyMap';
|
||||
import { XMarkIcon, ClockIcon, MapPinIcon, WrenchScrewdriverIcon, BeakerIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
const ApplicationViewModal = ({ application, propertyDetails, onClose }) => {
|
||||
const [applicationLog, setApplicationLog] = useState(null);
|
||||
const [sections, setSections] = useState([]);
|
||||
const [planDetails, setPlanDetails] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchApplicationData = async () => {
|
||||
if (!application?.id) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Fetch the plan details to get section geometry
|
||||
const planResponse = await applicationsAPI.getPlan(application.id);
|
||||
const fetchedPlanDetails = planResponse.data.data.plan;
|
||||
setPlanDetails(fetchedPlanDetails);
|
||||
|
||||
if (fetchedPlanDetails.sections) {
|
||||
setSections(fetchedPlanDetails.sections);
|
||||
}
|
||||
|
||||
// Try to fetch application logs to get GPS tracking data
|
||||
try {
|
||||
const logsResponse = await applicationsAPI.getLogs({ planId: application.id });
|
||||
const logs = logsResponse.data.data.logs;
|
||||
if (logs && logs.length > 0) {
|
||||
setApplicationLog(logs[0]); // Get the most recent log
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('No application logs found:', error);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch application data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchApplicationData();
|
||||
}, [application?.id]);
|
||||
|
||||
// Calculate map center from sections
|
||||
const mapCenter = React.useMemo(() => {
|
||||
if (sections.length === 0) return null;
|
||||
|
||||
let totalLat = 0;
|
||||
let totalLng = 0;
|
||||
let pointCount = 0;
|
||||
|
||||
sections.forEach(section => {
|
||||
let polygonData = section.polygonData;
|
||||
if (typeof polygonData === 'string') {
|
||||
try {
|
||||
polygonData = JSON.parse(polygonData);
|
||||
} catch (e) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (polygonData?.coordinates?.[0]) {
|
||||
polygonData.coordinates[0].forEach(([lat, lng]) => {
|
||||
totalLat += lat;
|
||||
totalLng += lng;
|
||||
pointCount++;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (pointCount > 0) {
|
||||
return [totalLat / pointCount, totalLng / pointCount];
|
||||
}
|
||||
return null;
|
||||
}, [sections]);
|
||||
|
||||
if (loading) {
|
||||
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 mx-4 max-h-[90vh] overflow-y-auto">
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="text-gray-500">Loading application details...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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-6xl mx-4 max-h-[90vh] overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
Application Details
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<XMarkIcon className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Application Overview */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<h3 className="font-semibold text-gray-900 mb-3 flex items-center">
|
||||
<MapPinIcon className="h-5 w-5 mr-2" />
|
||||
Property & Areas
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
<p><span className="font-medium">Property:</span> {application.propertyName}</p>
|
||||
<p><span className="font-medium">Areas:</span> {application.sectionNames}</p>
|
||||
<p><span className="font-medium">Total Area:</span> {application.totalSectionArea?.toLocaleString()} sq ft</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<h3 className="font-semibold text-gray-900 mb-3 flex items-center">
|
||||
<WrenchScrewdriverIcon className="h-5 w-5 mr-2" />
|
||||
Equipment & Status
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
<p><span className="font-medium">Equipment:</span> {application.equipmentName}</p>
|
||||
<p><span className="font-medium">Status:</span>
|
||||
<span className={`ml-2 px-2 py-1 text-xs font-medium rounded-full ${
|
||||
application.status === 'completed' ? 'bg-green-100 text-green-800' :
|
||||
application.status === 'planned' ? 'bg-blue-100 text-blue-800' :
|
||||
application.status === 'in_progress' ? 'bg-yellow-100 text-yellow-800' :
|
||||
'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{application.status}
|
||||
</span>
|
||||
</p>
|
||||
<p><span className="font-medium">Planned Date:</span> {new Date(application.plannedDate).toLocaleDateString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Products */}
|
||||
{planDetails?.products && planDetails.products.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-3 flex items-center">
|
||||
<BeakerIcon className="h-5 w-5 mr-2" />
|
||||
Products Applied
|
||||
</h3>
|
||||
<div className="bg-gray-50 rounded-lg overflow-hidden">
|
||||
<div className="grid grid-cols-4 gap-4 p-4 border-b text-sm font-medium text-gray-600">
|
||||
<div>Product</div>
|
||||
<div>Rate</div>
|
||||
<div>Amount</div>
|
||||
<div>Water</div>
|
||||
</div>
|
||||
{planDetails.products.map((product, index) => (
|
||||
<div key={index} className="grid grid-cols-4 gap-4 p-4 border-b last:border-b-0">
|
||||
<div className="font-medium">{product.productName}</div>
|
||||
<div>{product.rateAmount} {product.rateUnit}</div>
|
||||
<div>{product.calculatedProductAmount?.toFixed(2)} lbs</div>
|
||||
<div>{product.calculatedWaterAmount?.toFixed(2)} gal</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* GPS Tracking Information */}
|
||||
{applicationLog && (
|
||||
<div className="mb-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-3 flex items-center">
|
||||
<ClockIcon className="h-5 w-5 mr-2" />
|
||||
Tracking Information
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="bg-blue-50 p-3 rounded-lg">
|
||||
<div className="text-sm text-blue-600 font-medium">Average Speed</div>
|
||||
<div className="text-xl font-bold text-blue-900">{applicationLog.averageSpeed?.toFixed(1)} mph</div>
|
||||
</div>
|
||||
<div className="bg-green-50 p-3 rounded-lg">
|
||||
<div className="text-sm text-green-600 font-medium">GPS Points</div>
|
||||
<div className="text-xl font-bold text-green-900">{applicationLog.gpsTrack?.points?.length || 0}</div>
|
||||
</div>
|
||||
<div className="bg-purple-50 p-3 rounded-lg">
|
||||
<div className="text-sm text-purple-600 font-medium">Duration</div>
|
||||
<div className="text-xl font-bold text-purple-900">
|
||||
{applicationLog.gpsTrack?.duration ? Math.round(applicationLog.gpsTrack.duration / 60) : 0} min
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-orange-50 p-3 rounded-lg">
|
||||
<div className="text-sm text-orange-600 font-medium">Distance</div>
|
||||
<div className="text-xl font-bold text-orange-900">
|
||||
{applicationLog.gpsTrack?.totalDistance?.toFixed(0) || 0} ft
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Map with GPS Track */}
|
||||
<div className="mb-6">
|
||||
<h4 className="font-medium mb-2">Application Area & GPS Track</h4>
|
||||
<div className="h-96 border rounded-lg overflow-hidden">
|
||||
<PropertyMap
|
||||
property={propertyDetails}
|
||||
sections={sections}
|
||||
selectedSections={sections.map(s => s.id) || []}
|
||||
mode="view"
|
||||
gpsTrack={applicationLog?.gpsTrack?.points || []}
|
||||
currentLocation={null}
|
||||
center={mapCenter}
|
||||
zoom={mapCenter ? 16 : 15}
|
||||
editable={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
{(application.notes || applicationLog?.notes) && (
|
||||
<div className="mb-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Notes</h3>
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<p className="text-gray-700">{application.notes || applicationLog?.notes}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Close Button */}
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ApplicationViewModal;
|
||||
Reference in New Issue
Block a user