This commit is contained in:
Jake Kasper
2025-09-02 13:12:31 -05:00
parent 3fcc8bf988
commit f675b31ac9
2 changed files with 52 additions and 27 deletions

View File

@@ -287,7 +287,7 @@ const History = () => {
return (
<div className="p-6">
<div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-bold text-gray-900">Application History</h1>
<h1 className="text-2xl font-bold text-gray-900">History</h1>
<button
onClick={fetchHistoryData}
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"

View File

@@ -1,5 +1,6 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import { mowingAPI } from '../../services/api';
import { PlayIcon, ArchiveBoxIcon, EyeIcon, MapPinIcon, WrenchScrewdriverIcon } from '@heroicons/react/24/outline';
import LoadingSpinner from '../../components/UI/LoadingSpinner';
import MowingPlanModal from '../../components/Mowing/MowingPlanModal';
import MowingExecutionModal from '../../components/Mowing/MowingExecutionModal';
@@ -33,6 +34,12 @@ const Mowing = () => {
useEffect(() => { fetchPlans(); }, []);
const filteredPlans = useMemo(() => {
// Show all except archived by default, most recent first
const list = (plans || []).filter(p => p.status !== 'archived');
return list.sort((a,b)=> new Date(b.planned_date) - new Date(a.planned_date));
}, [plans]);
if (loading) return (<div className="p-6"><LoadingSpinner /></div>);
return (
@@ -42,31 +49,49 @@ const Mowing = () => {
<button className="btn-primary" onClick={()=> setShowPlanModal(true)}>New Plan</button>
</div>
<div className="bg-white rounded-lg shadow overflow-hidden">
<div className="grid grid-cols-7 gap-4 p-4 border-b text-sm font-medium text-gray-600">
<div>Property</div>
<div>Areas</div>
<div>Date</div>
<div>Mower</div>
<div>Cut Height</div>
<div>Status</div>
<div>Actions</div>
</div>
{plans.length === 0 ? (
<div className="p-4 text-gray-600">No mowing plans yet.</div>
) : plans.map((p) => (
<div key={p.id} className="grid grid-cols-7 gap-4 p-4 border-b text-sm items-center">
<div className="font-medium">{p.property_name}</div>
<div className="truncate" title={p.section_names}>{p.section_names}</div>
<div>{new Date(p.planned_date).toLocaleDateString()}</div>
<div>{p.equipment_name || '—'}</div>
<div>{p.cut_height_inches}"</div>
<div><span className={`px-2 py-1 rounded text-xs ${p.status==='completed'?'bg-green-100 text-green-800': p.status==='planned'?'bg-blue-100 text-blue-800': p.status==='archived'?'bg-gray-100 text-gray-800':'bg-yellow-100 text-yellow-800'}`}>{p.status}</span></div>
<div className="flex gap-2">
<button className="btn-secondary" onClick={()=> setExecPlan(p)}>Execute</button>
{p.status !== 'archived' && (
<button className="px-3 py-1 text-xs rounded border" onClick={async ()=>{ await mowingAPI.updatePlanStatus(p.id, 'archived'); fetchPlans(); }}>Archive</button>
)}
<div className="space-y-4">
{filteredPlans.length === 0 ? (
<div className="bg-white rounded-lg shadow p-4 text-gray-600">No mowing plans yet.</div>
) : filteredPlans.map((p) => (
<div key={p.id} className="card">
<div className="flex justify-between items-start">
<div className="flex-1">
<div className="flex items-center gap-3 mb-2">
<h3 className="font-semibold text-gray-900">{p.property_name}</h3>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
p.status==='planned'? 'bg-blue-100 text-blue-800' :
p.status==='completed'? 'bg-green-100 text-green-800' :
p.status==='in_progress'? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800'
}`}>{p.status}</span>
</div>
<p className="text-sm text-gray-600 mb-1">
<MapPinIcon className="h-4 w-4 inline mr-1" />
Areas: {p.section_names} ({Math.round(p.total_area || 0).toLocaleString()} sq ft)
</p>
<p className="text-sm text-gray-600 mb-1">
<WrenchScrewdriverIcon className="h-4 w-4 inline mr-1" />
{p.equipment_name || '—'} Cut Height: {Number(p.cut_height_inches || 0).toFixed(2)}" • Direction: {p.direction || '—'}
</p>
{p.notes && (
<p className="text-sm text-gray-500 mt-1 italic">"{p.notes}"</p>
)}
</div>
<div className="text-right">
<p className="text-sm font-medium text-gray-900">{p.planned_date ? new Date(p.planned_date).toLocaleDateString() : 'No date'}</p>
<p className="text-xs text-gray-500">Last updated {new Date(p.updated_at || p.created_at).toLocaleDateString()}</p>
<div className="flex gap-2 mt-2 justify-end">
{p.status === 'planned' && (
<button className="p-1 text-green-600 hover:text-green-800 hover:bg-green-50 rounded" title="Execute" onClick={()=> setExecPlan(p)}>
<PlayIcon className="h-4 w-4" />
</button>
)}
{p.status !== 'archived' && (
<button className="p-1 text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded" title="Archive" onClick={async ()=>{ await mowingAPI.updatePlanStatus(p.id, 'archived'); fetchPlans(); }}>
<ArchiveBoxIcon className="h-4 w-4" />
</button>
)}
</div>
</div>
</div>
</div>
))}