71 lines
2.1 KiB
React
71 lines
2.1 KiB
React
import { useEffect, useState } from "react";
|
|
import Td from "../../../components/Td";
|
|
import Laoder from "../../../components/Laoder";
|
|
|
|
const Transactions = ({ farmId }) => {
|
|
const [data, setData] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetch(`http://localhost:8000/api/v1/finance`, {
|
|
credentials: "include",
|
|
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ farm: farmId }),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
setData(data);
|
|
console.log("Fetched data:", data);
|
|
setLoading(false);
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error fetching transactions:", error);
|
|
setLoading(false);
|
|
});
|
|
}, [farmId]);
|
|
|
|
return (
|
|
<div className="relative overflow-x-auto shadow-md sm:rounded-lg">
|
|
{loading ? (
|
|
<Laoder></Laoder>
|
|
) : (
|
|
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
|
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
|
<tr>
|
|
<th scope="col" className="px-6 py-3">
|
|
Farm name
|
|
</th>
|
|
<th scope="col" className="px-6 py-3">
|
|
Location
|
|
</th>
|
|
<th scope="col" className="px-6 py-3">
|
|
Type
|
|
</th>
|
|
<th scope="col" className="px-6 py-3">
|
|
Size (acres)
|
|
</th>
|
|
<th scope="col" className="px-6 py-3">
|
|
Action
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{Array.isArray(data) && data.length > 0 ? (
|
|
data.map((item) => <Td key={item.id} children={item} />)
|
|
) : (
|
|
<tr>
|
|
<td colSpan={5} className="text-center">
|
|
No data available
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Transactions;
|