From f675b31ac91ab3e4c528234309603ce3733474cb Mon Sep 17 00:00:00 2001
From: Jake Kasper <jake.kasper@hpe.com>
Date: Tue, 2 Sep 2025 13:12:31 -0500
Subject: [PATCH] asdf

---
 frontend/src/pages/History/History.js |  2 +-
 frontend/src/pages/Mowing/Mowing.js   | 77 ++++++++++++++++++---------
 2 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/frontend/src/pages/History/History.js b/frontend/src/pages/History/History.js
index f1630af..b971b9a 100644
--- a/frontend/src/pages/History/History.js
+++ b/frontend/src/pages/History/History.js
@@ -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"
diff --git a/frontend/src/pages/Mowing/Mowing.js b/frontend/src/pages/Mowing/Mowing.js
index c2501d5..657e0c6 100644
--- a/frontend/src/pages/Mowing/Mowing.js
+++ b/frontend/src/pages/Mowing/Mowing.js
@@ -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>
         ))}