feat:Added glass navbar and Dashboard components
This commit is contained in:
Generated
+30
@@ -10,9 +10,11 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@reduxjs/toolkit": "^2.2.7",
|
"@reduxjs/toolkit": "^2.2.7",
|
||||||
"apexcharts": "^4.5.0",
|
"apexcharts": "^4.5.0",
|
||||||
|
"chart.js": "^4.4.8",
|
||||||
"flowbite": "^2.5.1",
|
"flowbite": "^2.5.1",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-apexcharts": "^1.7.0",
|
"react-apexcharts": "^1.7.0",
|
||||||
|
"react-chartjs-2": "^5.3.0",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-icons": "^5.3.0",
|
"react-icons": "^5.3.0",
|
||||||
"react-player": "^2.16.0",
|
"react-player": "^2.16.0",
|
||||||
@@ -941,6 +943,12 @@
|
|||||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@kurkle/color": {
|
||||||
|
"version": "0.3.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
|
||||||
|
"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@nodelib/fs.scandir": {
|
"node_modules/@nodelib/fs.scandir": {
|
||||||
"version": "2.1.5",
|
"version": "2.1.5",
|
||||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||||
@@ -1901,6 +1909,18 @@
|
|||||||
"node": ">=4"
|
"node": ">=4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/chart.js": {
|
||||||
|
"version": "4.4.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.8.tgz",
|
||||||
|
"integrity": "sha512-IkGZlVpXP+83QpMm4uxEiGqSI7jFizwVtF3+n5Pc3k7sMO+tkd0qxh2OzLhenM0K80xtmAONWGBn082EiBQSDA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@kurkle/color": "^0.3.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"pnpm": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/chokidar": {
|
"node_modules/chokidar": {
|
||||||
"version": "3.6.0",
|
"version": "3.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
|
||||||
@@ -4397,6 +4417,16 @@
|
|||||||
"react": ">=0.13"
|
"react": ">=0.13"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-chartjs-2": {
|
||||||
|
"version": "5.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz",
|
||||||
|
"integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"chart.js": "^4.1.1",
|
||||||
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-dom": {
|
"node_modules/react-dom": {
|
||||||
"version": "18.3.1",
|
"version": "18.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
|
||||||
|
|||||||
@@ -12,9 +12,11 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@reduxjs/toolkit": "^2.2.7",
|
"@reduxjs/toolkit": "^2.2.7",
|
||||||
"apexcharts": "^4.5.0",
|
"apexcharts": "^4.5.0",
|
||||||
|
"chart.js": "^4.4.8",
|
||||||
"flowbite": "^2.5.1",
|
"flowbite": "^2.5.1",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-apexcharts": "^1.7.0",
|
"react-apexcharts": "^1.7.0",
|
||||||
|
"react-chartjs-2": "^5.3.0",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-icons": "^5.3.0",
|
"react-icons": "^5.3.0",
|
||||||
"react-player": "^2.16.0",
|
"react-player": "^2.16.0",
|
||||||
|
|||||||
@@ -0,0 +1 @@
|
|||||||
|
<svg viewBox="-2.4 -2.4 28.80 28.80" xmlns="http://www.w3.org/2000/svg" fill="#000000" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="3.2640000000000002"> <title></title> <g id="Complete"> <g id="add-square"> <g> <rect data-name="--Rectangle" fill="none" height="20" id="_--Rectangle" rx="2" ry="2" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" width="20" x="2" y="2"></rect> <line fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" x1="15.5" x2="8.5" y1="12" y2="12"></line> <line fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" x1="12" x2="12" y1="15.5" y2="8.5"></line> </g> </g> </g> </g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="add-square"> <g> <rect data-name="--Rectangle" fill="none" height="20" id="_--Rectangle" rx="2" ry="2" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" width="20" x="2" y="2"></rect> <line fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" x1="15.5" x2="8.5" y1="12" y2="12"></line> <line fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" x1="12" x2="12" y1="15.5" y2="8.5"></line> </g> </g> </g> </g></svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -37,6 +37,7 @@ function App() {
|
|||||||
<>
|
<>
|
||||||
<div className="w-full h-auto flex-col relative">
|
<div className="w-full h-auto flex-col relative">
|
||||||
<Navbar />
|
<Navbar />
|
||||||
|
<div className="h-28"></div>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
<div
|
<div
|
||||||
className={`${
|
className={`${
|
||||||
|
|||||||
@@ -0,0 +1,126 @@
|
|||||||
|
const FarmList = () => {
|
||||||
|
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">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" class="px-6 py-3">
|
||||||
|
Farm name
|
||||||
|
</th>
|
||||||
|
<th scope="col" class="px-6 py-3">
|
||||||
|
Location
|
||||||
|
</th>
|
||||||
|
<th scope="col" class="px-6 py-3">
|
||||||
|
Type
|
||||||
|
</th>
|
||||||
|
<th scope="col" class="px-6 py-3">
|
||||||
|
Size (acres)
|
||||||
|
</th>
|
||||||
|
<th scope="col" class="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>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FarmList;
|
||||||
@@ -3,8 +3,8 @@ import { Link } from "react-router-dom";
|
|||||||
const Logs = () => {
|
const Logs = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div class="relative overflow-x-auto">
|
<div class="relative overflow-y-hidden">
|
||||||
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 border">
|
||||||
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col" class="px-6 py-3">
|
<th scope="col" class="px-6 py-3">
|
||||||
@@ -55,11 +55,12 @@ const Logs = () => {
|
|||||||
<td class="px-6 py-4">Accessories</td>
|
<td class="px-6 py-4">Accessories</td>
|
||||||
<td class="px-6 py-4">$99</td>
|
<td class="px-6 py-4">$99</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>{" "}
|
||||||
<Link to="/logs" className="text-[#2323FF]">
|
</table>{" "}
|
||||||
View all Logs
|
<Link to="/logs" className="text-[#2323FF] pl-5">
|
||||||
</Link>
|
<hr />
|
||||||
</table>
|
View all Logs
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,205 +1,87 @@
|
|||||||
import React from "react";
|
|
||||||
import { Link, useNavigate } from "react-router-dom";
|
|
||||||
import { useSelector } from "react-redux";
|
|
||||||
import { BACKEND_URL } from "../constants";
|
|
||||||
|
|
||||||
const Navbar = () => {
|
const Navbar = () => {
|
||||||
const user = useSelector((store) => store.user);
|
|
||||||
|
|
||||||
//console.log("User is : ", user);
|
|
||||||
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const handleLogOut = async () => {
|
|
||||||
const responce = await fetch(`${BACKEND_URL}/api/v1/logout`, {
|
|
||||||
method: "Get",
|
|
||||||
credentials: "include",
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await responce.json();
|
|
||||||
|
|
||||||
//console.log("User Logged out data is : ", data);
|
|
||||||
|
|
||||||
if (data.success == true) {
|
|
||||||
navigate("/user/login");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return (
|
return (
|
||||||
<>
|
<nav className="h-18 mt-3 mb-3 w-[97.5%] mx-5 fixed z-20 dark:bg-gray-800/30 backdrop-blur-sm border border-gray-200 rounded-full">
|
||||||
<nav className="bg-white border-gray-200 dark:bg-gray-900">
|
<div className="h-full flex items-center justify-between p-4">
|
||||||
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
<a href="#" className="flex items-center space-x-3 rtl:space-x-reverse">
|
||||||
<a
|
<img src="/images/logo.png" className="h-8" alt="Logo" />
|
||||||
href="/"
|
<span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
|
||||||
className="flex items-center space-x-3 rtl:space-x-reverse"
|
Crop Compass
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="text-black bg-white rounded-full hover:bg-green-100 focus:ring-4 focus:outline-none focus:ring-black-300 font-medium text-sm px-5 py-2 text-center"
|
||||||
>
|
>
|
||||||
<img
|
Get started
|
||||||
src="/images/logo.jpg"
|
</button>
|
||||||
className="h-9 rounded-full"
|
<button
|
||||||
alt="Flowbite Logo"
|
data-collapse-toggle="navbar-sticky"
|
||||||
/>
|
type="button"
|
||||||
<span className="self-center text-xl font-bold whitespace-nowrap dark:text-white">
|
className="inline-flex items-center p-2 w-10 h-10 mt-2 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-purple-400 dark:focus:ring-gray-600"
|
||||||
MentorFlux
|
aria-controls="navbar-sticky"
|
||||||
</span>
|
aria-expanded="false"
|
||||||
</a>
|
>
|
||||||
<div className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
|
<span className="sr-only">Open main menu</span>
|
||||||
<button
|
<svg
|
||||||
type="button"
|
className="w-5 h-5"
|
||||||
className="flex text-sm bg-gray-800 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
|
aria-hidden="true"
|
||||||
id="user-menu-button"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
aria-expanded="false"
|
fill="none"
|
||||||
data-dropdown-toggle="user-dropdown"
|
viewBox="0 0 17 14"
|
||||||
data-dropdown-placement="bottom"
|
|
||||||
>
|
>
|
||||||
<span className="sr-only">Open user menu</span>
|
<path
|
||||||
<img
|
stroke="currentColor"
|
||||||
className="w-8 h-8 rounded-full"
|
strokeLinecap="round"
|
||||||
src={`${user?.avatar}`}
|
strokeLinejoin="round"
|
||||||
alt="user photo"
|
strokeWidth="2"
|
||||||
|
d="M1 1h15M1 7h15M1 13h15"
|
||||||
/>
|
/>
|
||||||
</button>
|
</svg>
|
||||||
{/* <!-- Dropdown menu --> */}
|
</button>
|
||||||
<div
|
|
||||||
className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600 cursor-pointer"
|
|
||||||
id="user-dropdown"
|
|
||||||
>
|
|
||||||
{user?.name !== "Unloggedin User" && (
|
|
||||||
<div className="px-4 py-3">
|
|
||||||
<span className="block text-sm text-gray-900 dark:text-white">
|
|
||||||
{user?.name}
|
|
||||||
</span>
|
|
||||||
<span className="block text-sm text-gray-500 truncate dark:text-gray-400">
|
|
||||||
{user?.email}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<ul className="py-2" aria-labelledby="user-menu-button">
|
|
||||||
{user?.name !== "Unloggedin User" && (
|
|
||||||
<>
|
|
||||||
<li>
|
|
||||||
<Link
|
|
||||||
to={"/user/dashboard"}
|
|
||||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
|
||||||
>
|
|
||||||
Dashboard
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link
|
|
||||||
to={"/user/dashboard/settings"}
|
|
||||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
|
||||||
>
|
|
||||||
Settings
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
|
||||||
>
|
|
||||||
Earnings
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{user?.name === "Unloggedin User" ? (
|
|
||||||
<li>
|
|
||||||
<Link
|
|
||||||
to={"/user/login"}
|
|
||||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
|
||||||
>
|
|
||||||
Sign In
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
) : (
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
onClick={handleLogOut}
|
|
||||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
|
||||||
>
|
|
||||||
Sign out
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
data-collapse-toggle="navbar-user"
|
|
||||||
type="button"
|
|
||||||
className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
|
||||||
aria-controls="navbar-user"
|
|
||||||
aria-expanded="false"
|
|
||||||
>
|
|
||||||
<span className="sr-only">Open main menu</span>
|
|
||||||
<svg
|
|
||||||
className="w-5 h-5"
|
|
||||||
aria-hidden="true"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 17 14"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M1 1h15M1 7h15M1 13h15"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
|
|
||||||
id="navbar-user"
|
|
||||||
>
|
|
||||||
<ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
|
||||||
<li>
|
|
||||||
<Link
|
|
||||||
to={"/"}
|
|
||||||
className="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
|
|
||||||
aria-current="page"
|
|
||||||
>
|
|
||||||
Home
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
|
||||||
>
|
|
||||||
About
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
|
||||||
>
|
|
||||||
Services
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
|
||||||
>
|
|
||||||
Pricing
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
|
||||||
>
|
|
||||||
Contact
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
<div
|
||||||
</>
|
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
|
||||||
|
id="navbar-sticky"
|
||||||
|
>
|
||||||
|
<ul className="flex flex-col p-4 md:p-0 font-bold mt-4 gap-3 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 bg-transparent">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="block py-1 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
|
||||||
|
aria-current="page"
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="block py-1 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent "
|
||||||
|
>
|
||||||
|
About
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="block py-1 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
|
||||||
|
>
|
||||||
|
Services
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="block py-1 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
|
||||||
|
>
|
||||||
|
Contact
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -4,9 +4,6 @@ const TotalSpent = () => {
|
|||||||
<a
|
<a
|
||||||
href="#"
|
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"
|
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"
|
||||||
style={{
|
|
||||||
backgroundImage: `url("/home/atharva/git repo/Frontend/public/images/plant-1573.svg")`,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<h5 className="mb-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-white">
|
<h5 className="mb-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-white">
|
||||||
100,000
|
100,000
|
||||||
|
|||||||
@@ -0,0 +1,28 @@
|
|||||||
|
// ActivityFeed.jsx
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const ActivityFeed = () => {
|
||||||
|
// Hard-coded activity feed data
|
||||||
|
const activities = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
description: "Farm A reported increased yield",
|
||||||
|
time: "10 mins ago",
|
||||||
|
},
|
||||||
|
{ id: 2, description: "Sensor B recalibrated", time: "20 mins ago" },
|
||||||
|
{ id: 3, description: "Alert triggered on Farm C", time: "30 mins ago" },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{activities.map((activity) => (
|
||||||
|
<li key={activity.id} className="bg-gray-50 p-2 rounded shadow">
|
||||||
|
<p className="text-sm">{activity.description}</p>
|
||||||
|
<span className="text-xs text-gray-500">{activity.time}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ActivityFeed;
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
// AlertsPanel.jsx
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const AlertsPanel = () => {
|
||||||
|
// Hard-coded alerts data
|
||||||
|
const alerts = [
|
||||||
|
{ id: 1, message: "Temperature exceeds threshold", type: "warning" },
|
||||||
|
{ id: 2, message: "New sensor connected", type: "info" },
|
||||||
|
{ id: 3, message: "Power consumption high", type: "warning" },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{alerts.map((alert) => (
|
||||||
|
<div
|
||||||
|
key={alert.id}
|
||||||
|
className={`p-2 rounded mb-2 ${
|
||||||
|
alert.type === "warning" ? "bg-red-100" : "bg-blue-100"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p className="text-sm">{alert.message}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AlertsPanel;
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
// MetricsCard.jsx
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const MetricsCard = ({ title, value }) => {
|
||||||
|
return (
|
||||||
|
<div className="bg-white p-4 rounded-lg shadow">
|
||||||
|
<h3 className="text-gray-500 text-sm font-medium">{title}</h3>
|
||||||
|
<p className="text-2xl font-bold">{value}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MetricsCard;
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
// PerformanceChart.jsx
|
||||||
|
import React from "react";
|
||||||
|
import { Line } from "react-chartjs-2";
|
||||||
|
import {
|
||||||
|
Chart as ChartJS,
|
||||||
|
CategoryScale,
|
||||||
|
LinearScale,
|
||||||
|
PointElement,
|
||||||
|
LineElement,
|
||||||
|
Title,
|
||||||
|
Tooltip,
|
||||||
|
Legend,
|
||||||
|
} from "chart.js";
|
||||||
|
|
||||||
|
ChartJS.register(
|
||||||
|
CategoryScale,
|
||||||
|
LinearScale,
|
||||||
|
PointElement,
|
||||||
|
LineElement,
|
||||||
|
Title,
|
||||||
|
Tooltip,
|
||||||
|
Legend
|
||||||
|
);
|
||||||
|
|
||||||
|
const PerformanceChart = () => {
|
||||||
|
const data = {
|
||||||
|
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: "Yield",
|
||||||
|
data: [65, 59, 80, 81, 56, 55, 70], // hard-coded values
|
||||||
|
fill: false,
|
||||||
|
backgroundColor: "rgb(75, 192, 192)",
|
||||||
|
borderColor: "rgba(75, 192, 192, 0.2)",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
responsive: true,
|
||||||
|
plugins: {
|
||||||
|
legend: { position: "top" },
|
||||||
|
title: { display: true, text: "Performance Trend" },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return <Line data={data} options={options} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PerformanceChart;
|
||||||
@@ -1,219 +1,31 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import Piechart from "../../components/Piechart";
|
import Piechart from "../../components/monitoring charts/Piechart";
|
||||||
import TotalSpent from "../../components/TotalSpent";
|
import TotalSpent from "../../components/TotalSpent";
|
||||||
import Logs from "../../components/Logs";
|
import FarmList from "../../components/FarmList";
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="w-full bg-white rounded-lg shadow p-4">
|
||||||
<div className="w-full bg-white rounded-lg shadow p-4">
|
<div className="mb-4 flex justify-end space-x-4">
|
||||||
{/* <div className="flex flex-col justify-center items-center mb-4">
|
<button
|
||||||
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
type="button"
|
||||||
Upcoming Sessions{" "}
|
className="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 font-semibold rounded-xl text-md px-6 py-3 mr-2 mb-2 dark:bg-gradient-to-r dark:from-blue-600 dark:via-blue-700 dark:to-blue-800 dark:hover:bg-gradient-to-br focus:outline-none dark:focus:ring-blue-800 float-right shadow-lg transform transition-transform hover:scale-105"
|
||||||
</h2>
|
>
|
||||||
<div className="bg-gray-300 w-full h-52 rounded-lg"></div>
|
<img
|
||||||
</div>
|
src="/images/add.svg"
|
||||||
|
alt="Add"
|
||||||
<div className="mb-4">
|
className="inline-block h-5 w-5 mr-2 mb-1"
|
||||||
<h3 className="text-lg font-medium">Recent Activity</h3>
|
/>
|
||||||
<p className="text-gray-500 text-sm mt-2">
|
New Farm
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
</button>
|
||||||
</p>
|
|
||||||
<div className="grid grid-cols-1 gap-4 mt-4">
|
|
||||||
<input type="range" className="w-full h-auto" readOnly:true/>
|
|
||||||
<div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
|
|
||||||
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
className="h-6 w-6 text-green-500"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="2"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span className="ml-2 font-medium">Topup</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<span className="text-gray-500 text-sm">06:24:45 AM</span>
|
|
||||||
<span className="ml-2 text-green-500 text-sm">+$5,553</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<h3 className="text-lg font-medium">Weekly Summary</h3>
|
|
||||||
<div className="grid grid-cols-8 gap-2 mt-4">
|
|
||||||
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
|
||||||
<span className="text-gray-500 text-xs">Sun</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
|
||||||
<span className="text-gray-500 text-xs">Mon</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
|
||||||
<span className="text-gray-500 text-xs">Tue</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
|
||||||
<span className="text-gray-500 text-xs">Wed</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
|
||||||
<span className="text-gray-500 text-xs">Thu</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
|
||||||
<span className="text-gray-500 text-xs">Fri</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
|
||||||
<span className="text-gray-500 text-xs">Sat</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
|
||||||
<span className="text-gray-500 text-xs">Completed</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-8 gap-2 mt-2">
|
|
||||||
<div
|
|
||||||
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
|
||||||
style={{ height: "100px" }}
|
|
||||||
>
|
|
||||||
<div className="bg-green-500 rounded-t-lg h-16"></div>
|
|
||||||
<div className="bg-gray-300 h-4"></div>
|
|
||||||
<div className="bg-red-500 rounded-b-lg h-16"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
|
||||||
style={{ height: "100px" }}
|
|
||||||
>
|
|
||||||
<div className="bg-green-500 rounded-t-lg h-20"></div>
|
|
||||||
<div className="bg-gray-300 h-8"></div>
|
|
||||||
<div className="bg-red-500 rounded-b-lg h-12"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
|
||||||
style={{ height: "100px" }}
|
|
||||||
>
|
|
||||||
<div className="bg-green-500 rounded-t-lg h-12"></div>
|
|
||||||
<div className="bg-gray-300 h-12"></div>
|
|
||||||
<div className="bg-red-500 rounded-b-lg h-20"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
|
||||||
style={{ height: "100px" }}
|
|
||||||
>
|
|
||||||
<div className="bg-green-500 rounded-t-lg h-24"></div>
|
|
||||||
<div className="bg-gray-300 h-4"></div>
|
|
||||||
<div className="bg-red-500 rounded-b-lg h-8"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
|
||||||
style={{ height: "100px" }}
|
|
||||||
>
|
|
||||||
<div className="bg-green-500 rounded-t-lg h-16"></div>
|
|
||||||
<div className="bg-gray-300 h-12"></div>
|
|
||||||
<div className="bg-red-500 rounded-b-lg h-16"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
|
||||||
style={{ height: "100px" }}
|
|
||||||
>
|
|
||||||
<div className="bg-green-500 rounded-t-lg h-16"></div>
|
|
||||||
<div className="bg-gray-300 h-4"></div>
|
|
||||||
<div className="bg-red-500 rounded-b-lg h-24"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
|
||||||
style={{ height: "100px" }}
|
|
||||||
>
|
|
||||||
<div className="bg-green-500 rounded-t-lg h-8"></div>
|
|
||||||
<div className="bg-gray-300 h-16"></div>
|
|
||||||
<div className="bg-red-500 rounded-b-lg h-20"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
|
||||||
style={{ height: "100px" }}
|
|
||||||
>
|
|
||||||
<div className="bg-gray-300 h-24"></div>
|
|
||||||
<div className="bg-gray-300 h-24"></div>
|
|
||||||
<div className="bg-gray-300 h-24"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<h3 className="text-lg font-medium">Notifications</h3>
|
|
||||||
<div className="grid grid-cols-1 gap-4 mt-4">
|
|
||||||
<div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
className="h-6 w-6 text-green-500"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="2"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span className="ml-2 font-medium">Topup</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<span className="text-gray-500 text-sm">06:24:45 AM</span>
|
|
||||||
<span className="ml-2 text-green-500 text-sm">+$5,553</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 gap-4 mt-4">
|
|
||||||
<div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
className="h-6 w-6 text-green-500"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="2"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span className="ml-2 font-medium">Topup</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<span className="text-gray-500 text-sm">06:24:45 AM</span>
|
|
||||||
<span className="ml-2 text-green-500 text-sm">+$5,553</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> */}
|
|
||||||
<div className="mb-4 flex justify-end space-x-4">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 float-right"
|
|
||||||
>
|
|
||||||
New Farm
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-4 flex space-x-4">
|
|
||||||
<Piechart />
|
|
||||||
<TotalSpent />
|
|
||||||
</div>
|
|
||||||
<Logs />
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
|
||||||
|
<div className="mb-4 flex space-x-4">
|
||||||
|
<Piechart />
|
||||||
|
<TotalSpent />
|
||||||
|
</div>
|
||||||
|
<FarmList></FarmList>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,47 @@
|
|||||||
const Monitoring = () => {
|
// MonitoringPage.jsx
|
||||||
|
import React from "react";
|
||||||
|
import MetricsCard from "../../components/monitoring charts/MetricCard";
|
||||||
|
import PerformanceChart from "../../components/monitoring charts/PerformanceChart";
|
||||||
|
import AlertsPanel from "../../components/monitoring charts/AlertsPanel";
|
||||||
|
import ActivityFeed from "../../components/monitoring charts/ActivityField";
|
||||||
|
import Piechart from "../../components/monitoring charts/Piechart";
|
||||||
|
|
||||||
|
const MonitoringPage = () => {
|
||||||
return (
|
return (
|
||||||
|
<div className="w-full bg-white rounded-lg shadow p-4">
|
||||||
|
<div className="p-6">
|
||||||
|
{/* Summary Metrics */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
|
||||||
|
<MetricsCard title="Active Farms" value="12" />
|
||||||
|
<MetricsCard title="Total Yield" value="3500 kg" />
|
||||||
|
<MetricsCard title="Alerts" value="3" />
|
||||||
|
<MetricsCard title="Uptime" value="99.9%" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Performance Trend Chart */}
|
||||||
|
<div className="mb-6 bg-white p-4 rounded-lg shadow">
|
||||||
|
<h2 className="text-lg font-semibold mb-2">Performance Trend</h2>
|
||||||
|
<PerformanceChart />
|
||||||
|
</div>
|
||||||
|
<div className="mb-6 bg-white p-4 rounded-lg shadow">
|
||||||
|
<h2 className="text-lg font-semibold mb-2">Performance Trend</h2>
|
||||||
|
<Piechart></Piechart>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Alerts and Activity Feed */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="bg-white p-4 rounded-lg shadow">
|
||||||
|
<h2 className="text-lg font-semibold mb-2">Alerts</h2>
|
||||||
|
<AlertsPanel />
|
||||||
|
</div>
|
||||||
|
<div className="bg-white p-4 rounded-lg shadow">
|
||||||
|
<h2 className="text-lg font-semibold mb-2">Recent Activity</h2>
|
||||||
|
<ActivityFeed />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Monitoring;
|
export default MonitoringPage;
|
||||||
|
|||||||
Reference in New Issue
Block a user