feat:Added glass navbar and Dashboard components
This commit is contained in:
@@ -1,219 +1,31 @@
|
||||
import React from "react";
|
||||
import Piechart from "../../components/Piechart";
|
||||
import Piechart from "../../components/monitoring charts/Piechart";
|
||||
import TotalSpent from "../../components/TotalSpent";
|
||||
import Logs from "../../components/Logs";
|
||||
import FarmList from "../../components/FarmList";
|
||||
|
||||
const Dashboard = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="w-full bg-white rounded-lg shadow p-4">
|
||||
{/* <div className="flex flex-col justify-center items-center mb-4">
|
||||
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||
Upcoming Sessions{" "}
|
||||
</h2>
|
||||
<div className="bg-gray-300 w-full h-52 rounded-lg"></div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-medium">Recent Activity</h3>
|
||||
<p className="text-gray-500 text-sm mt-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</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 className="w-full bg-white rounded-lg shadow p-4">
|
||||
<div className="mb-4 flex justify-end space-x-4">
|
||||
<button
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
<img
|
||||
src="/images/add.svg"
|
||||
alt="Add"
|
||||
className="inline-block h-5 w-5 mr-2 mb-1"
|
||||
/>
|
||||
New Farm
|
||||
</button>
|
||||
</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 (
|
||||
|
||||
<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