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;