Added the ability to edit a cattle's status

src/controllers/CattleController.js

@@ -31,4 +31,19 @@ export class CattleController {
       'Brahman'
     ];
   }
+
+  updateCattle(id, updates) {
+    for (let i = 0; i < this.cattle.length; i++) {
+      if (this.cattle[i].id === id) {
+        this.cattle[i].status = updates.status;
+      }
+    }
+
+    const index = this.cattle.findIndex(cow => cow.id === id);
+    if (index === -1) {
+      throw new Error('Cattle not found');
+    }
+    const cattle = this.cattle[index];
+    return cattle;
+  }
 } 

src/views/CattleCard.css

@@ -60,6 +60,91 @@
   color: #cc6600;
 }
 
+.status-section {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 0.5rem;
+}
+
+.edit-status-button {
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  transition: background-color 0.3s ease;
+}
+
+.edit-status-button:hover {
+  background-color: #45a049;
+}
+
+.edit-status-form {
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+
+.edit-status-form h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1rem;
+  color: #333;
+}
+
+.edit-status-form .form-group {
+  margin-bottom: 1rem;
+}
+
+.edit-status-form label {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: #666;
+}
+
+.edit-status-form select {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: white;
+}
+
+.edit-status-form .form-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.edit-status-form .submit-button,
+.edit-status-form .cancel-button {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.edit-status-form .submit-button {
+  background-color: #4CAF50;
+  color: #FFF;
+}
+
+.edit-status-form .cancel-button {
+  background-color: #f44336;
+  color: white;
+}
+
+.edit-status-form .submit-button:hover {
+  background-color: #45a049;
+}
+
+.edit-status-form .cancel-button:hover {
+  background-color: #da190b;
+}
+
 .pregnancy-status {
   padding: 0.25rem 0.5rem;
   border-radius: 4px;

src/views/CattleCard.jsx

@@ -1,8 +1,15 @@
 import React, { useState } from 'react';
+import { EditStatusForm } from './EditStatusForm';
 import './CattleCard.css';
 
-export function CattleCard({ cattle }) {
+export function CattleCard({ cattle, onStatusUpdate }) {
   const [imageError, setImageError] = useState(false);
+  const [showEditForm, setShowEditForm] = useState(false);
+
+  const handleStatusUpdate = (updates) => {
+    onStatusUpdate(cattle.id, updates);
+    setShowEditForm(false);
+  };
 
   return (
     <div className="cattle-card">
@@ -33,9 +40,24 @@ export function CattleCard({ cattle }) {
           )}
         </p>
       )}
-      <p className={`status ${cattle.getStatusClass()}`}>
-        Status: {cattle.status}
-      </p>
+      <div className="status-section">
+        <p className={`status ${cattle.getStatusClass()}`}>
+          Status: {cattle.status}
+        </p>
+        <button 
+          className="edit-status-button"
+          onClick={() => setShowEditForm(true)}
+        >
+          Edit Status
+        </button>
+      </div>
+      {showEditForm && (
+        <EditStatusForm
+          cattle={cattle}
+          onSubmit={handleStatusUpdate}
+          onCancel={() => setShowEditForm(false)}
+        />
+      )}
     </div>
   );
 } 

src/views/CattleList.jsx

@@ -15,6 +15,14 @@ function CattleList({ cattle = [], controller, onCattleUpdate }) {
     setShowAddForm(false)
   }
 
+  let handleStatusUpdate = (id, updates) => {
+    let updatedCow = controller.updateCattle(id, updates)
+    onCattleUpdate(cattle.map(
+      cow => 
+      cow.id === id ? updatedCow : cow
+    ))
+  }
+
   const handleLocationChange = (location) => {
     setCurrentLocation(location)
   }
@@ -55,7 +63,11 @@ function CattleList({ cattle = [], controller, onCattleUpdate }) {
 
       <div className="cattle-grid">
         {(filteredCattle || []).map((cow) => (
-          <CattleCard key={cow.id} cattle={cow} />
+          <CattleCard 
+            key={cow.id} 
+            cattle={cow} 
+            onStatusUpdate={handleStatusUpdate}
+          />
         ))}
       </div>
     </div>

src/views/EditStatusForm.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export function EditStatusForm({ cattle, onSubmit, onCancel }) {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    onSubmit({
+      status: formData.get('status')
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="edit-status-form">
+      <h3>Edit Status</h3>
+      <div className="form-group">
+        <label htmlFor="status">Status:</label>
+        <select id="status" name="status" required defaultValue={cattle.status}>
+          <option value="Healthy">Healthy</option>
+          <option value="Vet Check Needed">Vet Check Needed</option>
+        </select>
+      </div>
+      <div className="form-actions">
+        <button type="submit" className="submit-button">Save Status</button>
+        <button type="button" onClick={onCancel} className="cancel-button">Cancel</button>
+      </div>
+    </form>
+  );
+}