Fix:Made fully functional by fetching the data from backend
This commit is contained in:
@@ -1,122 +1,52 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import Td from "./Td";
|
||||
|
||||
const FarmList = () => {
|
||||
const [data, setData] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("http://localhost:8000/api/v1/farm", {
|
||||
credentials: "include",
|
||||
method: "GET",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => setData(data))
|
||||
.catch((error) => console.error(error));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
|
||||
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
||||
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||
<div className="relative overflow-x-auto shadow-md sm:rounded-lg">
|
||||
<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" class="px-6 py-3">
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Farm name
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3">
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Location
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3">
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Type
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3">
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Size (acres)
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3">
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 border-gray-200">
|
||||
<th
|
||||
scope="row"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>
|
||||
Green Valley Farms
|
||||
</th>
|
||||
<td class="px-6 py-4">California</td>
|
||||
<td class="px-6 py-4">Organic</td>
|
||||
<td class="px-6 py-4">150</td>
|
||||
<td class="px-6 py-4">
|
||||
<a
|
||||
href="#"
|
||||
class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 border-gray-200">
|
||||
<th
|
||||
scope="row"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>
|
||||
Sunny Acres
|
||||
</th>
|
||||
<td class="px-6 py-4">Texas</td>
|
||||
<td class="px-6 py-4">Conventional</td>
|
||||
<td class="px-6 py-4">200</td>
|
||||
<td class="px-6 py-4">
|
||||
<a
|
||||
href="#"
|
||||
class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 border-gray-200">
|
||||
<th
|
||||
scope="row"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>
|
||||
Riverside Estates
|
||||
</th>
|
||||
<td class="px-6 py-4">Florida</td>
|
||||
<td class="px-6 py-4">Hydroponic</td>
|
||||
<td class="px-6 py-4">120</td>
|
||||
<td class="px-6 py-4">
|
||||
<a
|
||||
href="#"
|
||||
class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 border-gray-200">
|
||||
<th
|
||||
scope="row"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>
|
||||
Blueberry Hill
|
||||
</th>
|
||||
<td class="px-6 py-4">Oregon</td>
|
||||
<td class="px-6 py-4">Berry</td>
|
||||
<td class="px-6 py-4">80</td>
|
||||
<td class="px-6 py-4">
|
||||
<a
|
||||
href="#"
|
||||
class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
scope="row"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>
|
||||
Sunnybrook Meadows
|
||||
</th>
|
||||
<td class="px-6 py-4">Washington</td>
|
||||
<td class="px-6 py-4">Dairy</td>
|
||||
<td class="px-6 py-4">300</td>
|
||||
<td class="px-6 py-4">
|
||||
<a
|
||||
href="#"
|
||||
class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{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>
|
||||
|
||||
@@ -5,6 +5,33 @@ const TotalSpent = () => {
|
||||
href="#"
|
||||
className="h-full block max-w-sm p-6 bg-no-repeat bg-center bg-cover border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
|
||||
>
|
||||
<div className="absolute right-0 top-0 h-full w-48 overflow-hidden pointer-events-none">
|
||||
<svg
|
||||
viewBox="0 0 200 800"
|
||||
className="absolute right-0 h-full transform translate-x-16 fill-green-100"
|
||||
>
|
||||
<path d="M0,0 Q100,200 0,400 Q100,600 0,800 L200,800 L200,0 Z" />
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 200 800"
|
||||
className="absolute right-0 h-full transform translate-x-8 fill-green-200/40"
|
||||
>
|
||||
<path d="M0,0 Q80,200 0,400 Q80,600 0,800 L200,800 L200,0 Z" />
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
className="absolute right-12 top-20 w-16 h-16 fill-green-300/30"
|
||||
>
|
||||
<path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
className="absolute right-16 top-48 w-12 h-12 fill-green-400/20"
|
||||
>
|
||||
<path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h5 className="mb-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-white">
|
||||
100,000
|
||||
</h5>
|
||||
|
||||
Reference in New Issue
Block a user