Feat:Added table to display crop details

2025-02-23 02:55:04 +05:30
parent 21a21303f8
commit 490668ff61
1 changed files with 152 additions and 0 deletions
@@ -0,0 +1,152 @@
+import React, { useState, useEffect } from "react";
+
+const CropTable = ({ farmId }) => {
+  const [crops, setCrops] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    const fetchCrops = async () => {
+      try {
+        const response = await fetch(
+          `http://localhost:8000/api/v1/crop/farm/${farmId}`,
+          {
+            credentials: "include",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error("Failed to fetch crops");
+        }
+
+        const data = await response.json();
+        setCrops(data || []);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCrops();
+  }, [farmId]);
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-[400px]">
+        Loading crops...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
+        <p className="text-red-600">Error: {error}</p>
+      </div>
+    );
+  }
+
+  if (crops.length === 0) {
+    return (
+      <div className="text-center py-8 bg-gray-50 rounded-lg">
+        <h2 className="text-xl font-semibold text-gray-600">No crops found</h2>
+        <p className="text-gray-500 mt-2">
+          Start by adding some crops to your farm
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow">
+      <div className="px-4 py-5 sm:px-6">
+        <h1 className="text-2xl font-semibold text-gray-900">Crops Table</h1>
+      </div>
+      <div className="overflow-x-auto">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
+                Image
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
+                Name
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
+                Growth Stage
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
+                Health Status
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
+                Harvest Date
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {crops.map((crop) => (
+              <tr key={crop._id} className="hover:bg-gray-50">
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="h-12 w-12 rounded-full overflow-hidden">
+                    {crop.image ? (
+                      <img
+                        src={crop.image}
+                        alt={crop.name}
+                        className="h-full w-full object-cover"
+                      />
+                    ) : (
+                      <div className="h-full w-full bg-gray-200 flex items-center justify-center">
+                        <span className="text-gray-500 text-xs">No image</span>
+                      </div>
+                    )}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm font-medium text-gray-900">
+                    {crop.name}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <span
+                    className="inline-flex px-2 py-1 text-sm font-medium rounded-full"
+                    style={{
+                      backgroundColor:
+                        crop.growthStage === "Planted"
+                          ? "rgb(220, 252, 231)"
+                          : crop.growthStage === "Growing"
+                          ? "rgb(254, 249, 195)"
+                          : "rgb(224, 242, 254)",
+                      color:
+                        crop.growthStage === "Planted"
+                          ? "rgb(22, 101, 52)"
+                          : crop.growthStage === "Growing"
+                          ? "rgb(113, 63, 18)"
+                          : "rgb(3, 105, 161)",
+                    }}
+                  >
+                    {crop.growthStage}
+                  </span>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">
+                    {crop.healthStatus}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">
+                    {new Date(crop.harvestDate).toLocaleDateString()}
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default CropTable;