feat:1.Added logo 2.changed color palet
This commit is contained in:
+2
-2
@@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/images/logo.jpg" />
|
<link rel="icon" type="image/svg+xml" href="/images/logo.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Farmalyze</title>
|
<title>Crop Compass</title>
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.css"
|
href="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
Generated
+91
@@ -9,8 +9,10 @@
|
|||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@reduxjs/toolkit": "^2.2.7",
|
"@reduxjs/toolkit": "^2.2.7",
|
||||||
|
"apexcharts": "^4.5.0",
|
||||||
"flowbite": "^2.5.1",
|
"flowbite": "^2.5.1",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
|
"react-apexcharts": "^1.7.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",
|
||||||
@@ -1298,6 +1300,62 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
|
||||||
"integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
|
"integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
|
||||||
},
|
},
|
||||||
|
"node_modules/@svgdotjs/svg.draggable.js": {
|
||||||
|
"version": "3.0.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.draggable.js/-/svg.draggable.js-3.0.6.tgz",
|
||||||
|
"integrity": "sha512-7iJFm9lL3C40HQcqzEfezK2l+dW2CpoVY3b77KQGqc8GXWa6LhhmX5Ckv7alQfUXBuZbjpICZ+Dvq1czlGx7gA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"@svgdotjs/svg.js": "^3.2.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@svgdotjs/svg.filter.js": {
|
||||||
|
"version": "3.0.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.filter.js/-/svg.filter.js-3.0.8.tgz",
|
||||||
|
"integrity": "sha512-YshF2YDaeRA2StyzAs5nUPrev7npQ38oWD0eTRwnsciSL2KrRPMoUw8BzjIXItb3+dccKGTX3IQOd2NFzmHkog==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@svgdotjs/svg.js": "^3.1.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@svgdotjs/svg.js": {
|
||||||
|
"version": "3.2.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.js/-/svg.js-3.2.4.tgz",
|
||||||
|
"integrity": "sha512-BjJ/7vWNowlX3Z8O4ywT58DqbNRyYlkk6Yz/D13aB7hGmfQTvGX4Tkgtm/ApYlu9M7lCQi15xUEidqMUmdMYwg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/Fuzzyma"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@svgdotjs/svg.resize.js": {
|
||||||
|
"version": "2.0.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.resize.js/-/svg.resize.js-2.0.5.tgz",
|
||||||
|
"integrity": "sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 14.18"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@svgdotjs/svg.js": "^3.2.4",
|
||||||
|
"@svgdotjs/svg.select.js": "^4.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@svgdotjs/svg.select.js": {
|
||||||
|
"version": "4.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.select.js/-/svg.select.js-4.0.2.tgz",
|
||||||
|
"integrity": "sha512-5gWdrvoQX3keo03SCmgaBbD+kFftq0F/f2bzCbNnpkkvW6tk4rl4MakORzFuNjvXPWwB4az9GwuvVxQVnjaK2g==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 14.18"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@svgdotjs/svg.js": "^3.2.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@types/babel__core": {
|
"node_modules/@types/babel__core": {
|
||||||
"version": "7.20.5",
|
"version": "7.20.5",
|
||||||
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
|
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
|
||||||
@@ -1398,6 +1456,12 @@
|
|||||||
"vite": "^4.2.0 || ^5.0.0"
|
"vite": "^4.2.0 || ^5.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@yr/monotone-cubic-spline": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/acorn": {
|
"node_modules/acorn": {
|
||||||
"version": "8.12.1",
|
"version": "8.12.1",
|
||||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
|
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
|
||||||
@@ -1475,6 +1539,20 @@
|
|||||||
"node": ">= 8"
|
"node": ">= 8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/apexcharts": {
|
||||||
|
"version": "4.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-4.5.0.tgz",
|
||||||
|
"integrity": "sha512-E7ZkrVqPNBUWy/Rmg8DEIqHNBmElzICE/oxOX5Ekvs2ICQUOK/VkEkMH09JGJu+O/EA0NL31hxlmF+wrwrSLaQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@svgdotjs/svg.draggable.js": "^3.0.4",
|
||||||
|
"@svgdotjs/svg.filter.js": "^3.0.8",
|
||||||
|
"@svgdotjs/svg.js": "^3.2.4",
|
||||||
|
"@svgdotjs/svg.resize.js": "^2.0.2",
|
||||||
|
"@svgdotjs/svg.select.js": "^4.0.1",
|
||||||
|
"@yr/monotone-cubic-spline": "^1.0.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/arg": {
|
"node_modules/arg": {
|
||||||
"version": "5.0.2",
|
"version": "5.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
|
||||||
@@ -4306,6 +4384,19 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-apexcharts": {
|
||||||
|
"version": "1.7.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.7.0.tgz",
|
||||||
|
"integrity": "sha512-03oScKJyNLRf0Oe+ihJxFZliBQM9vW3UWwomVn4YVRTN1jsIR58dLWt0v1sb8RwJVHDMbeHiKQueM0KGpn7nOA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"prop-types": "^15.8.1"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"apexcharts": ">=4.0.0",
|
||||||
|
"react": ">=0.13"
|
||||||
|
}
|
||||||
|
},
|
||||||
"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",
|
||||||
|
|||||||
@@ -11,8 +11,10 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@reduxjs/toolkit": "^2.2.7",
|
"@reduxjs/toolkit": "^2.2.7",
|
||||||
|
"apexcharts": "^4.5.0",
|
||||||
"flowbite": "^2.5.1",
|
"flowbite": "^2.5.1",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
|
"react-apexcharts": "^1.7.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",
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,68 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
const Logs = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div class="relative overflow-x-auto">
|
||||||
|
<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">
|
||||||
|
Product name
|
||||||
|
</th>
|
||||||
|
<th scope="col" class="px-6 py-3">
|
||||||
|
Color
|
||||||
|
</th>
|
||||||
|
<th scope="col" class="px-6 py-3">
|
||||||
|
Category
|
||||||
|
</th>
|
||||||
|
<th scope="col" class="px-6 py-3">
|
||||||
|
Price
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="bg-white border-b dark:bg-gray-800 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"
|
||||||
|
>
|
||||||
|
Apple MacBook Pro 17"
|
||||||
|
</th>
|
||||||
|
<td class="px-6 py-4">Silver</td>
|
||||||
|
<td class="px-6 py-4">Laptop</td>
|
||||||
|
<td class="px-6 py-4">$2999</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="bg-white border-b dark:bg-gray-800 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"
|
||||||
|
>
|
||||||
|
Microsoft Surface Pro
|
||||||
|
</th>
|
||||||
|
<td class="px-6 py-4">White</td>
|
||||||
|
<td class="px-6 py-4">Laptop PC</td>
|
||||||
|
<td class="px-6 py-4">$1999</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="bg-white dark:bg-gray-800">
|
||||||
|
<th
|
||||||
|
scope="row"
|
||||||
|
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||||
|
>
|
||||||
|
Magic Mouse 2
|
||||||
|
</th>
|
||||||
|
<td class="px-6 py-4">Black</td>
|
||||||
|
<td class="px-6 py-4">Accessories</td>
|
||||||
|
<td class="px-6 py-4">$99</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<Link to="/logs" className="text-[#2323FF]">
|
||||||
|
View all Logs
|
||||||
|
</Link>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Logs;
|
||||||
@@ -26,19 +26,19 @@ const Navbar = () => {
|
|||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<nav className="bg-white border-gray-200 dark:bg-gray-900">
|
<nav className="bg-[#3D8D7A] border-gray-200 dark:bg-gray-900 ">
|
||||||
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4 gap-x-12">
|
||||||
<a
|
<a
|
||||||
href="/"
|
href="/"
|
||||||
className="flex items-center space-x-3 rtl:space-x-reverse"
|
className="flex items-center space-x-3 rtl:space-x-reverse"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/images/logo.jpg"
|
src="/images/logo.png"
|
||||||
className="h-9 rounded-full"
|
className="h-9 rounded-full"
|
||||||
alt="Flowbite Logo"
|
alt="Flowbite Logo"
|
||||||
/>
|
/>
|
||||||
<span className="self-center text-xl font-bold whitespace-nowrap dark:text-white">
|
<span className="self-center text-xl font-bold whitespace-nowrap dark:text-white">
|
||||||
Farmalyze
|
Crop Compass
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<div className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
|
<div className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
|
||||||
@@ -153,7 +153,7 @@ const Navbar = () => {
|
|||||||
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
|
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
|
||||||
id="navbar-user"
|
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">
|
<ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border rounded-lg bg-[#3D8D7A] md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 dark:bg-[#3D8D7A] md:dark:bg-[#3D8D7A] dark:border-gray-700">
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
to={"/"}
|
to={"/"}
|
||||||
|
|||||||
@@ -1,387 +1,45 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import Chart from "react-apexcharts";
|
||||||
|
|
||||||
const Piechart = () => {
|
const Piechart = () => {
|
||||||
const getChartOptions = () => {
|
const [series, setSeries] = useState([35.1, 23.5, 2.4, 5.4]);
|
||||||
return {
|
|
||||||
series: [35.1, 23.5, 2.4, 5.4],
|
const chartOptions = {
|
||||||
|
series: series,
|
||||||
|
labels: ["Fertilizers", "Pestisides", "Manner", "Urea"],
|
||||||
colors: ["#1C64F2", "#16BDCA", "#FDBA8C", "#E74694"],
|
colors: ["#1C64F2", "#16BDCA", "#FDBA8C", "#E74694"],
|
||||||
chart: {
|
chart: {
|
||||||
height: 320,
|
|
||||||
width: "100%",
|
|
||||||
type: "donut",
|
type: "donut",
|
||||||
},
|
height: 320,
|
||||||
stroke: {
|
|
||||||
colors: ["transparent"],
|
|
||||||
lineCap: "",
|
|
||||||
},
|
},
|
||||||
plotOptions: {
|
plotOptions: {
|
||||||
pie: {
|
pie: {
|
||||||
donut: {
|
donut: {
|
||||||
labels: {
|
labels: {
|
||||||
show: true,
|
show: true,
|
||||||
name: {
|
|
||||||
show: true,
|
|
||||||
fontFamily: "Inter, sans-serif",
|
|
||||||
offsetY: 20,
|
|
||||||
},
|
|
||||||
total: {
|
total: {
|
||||||
showAlways: true,
|
|
||||||
show: true,
|
show: true,
|
||||||
label: "Unique visitors",
|
label: "Total",
|
||||||
fontFamily: "Inter, sans-serif",
|
|
||||||
formatter: function (w) {
|
formatter: function (w) {
|
||||||
const sum = w.globals.seriesTotals.reduce((a, b) => {
|
return w.globals.seriesTotals.reduce((a, b) => a + b, 0) + "k";
|
||||||
return a + b;
|
|
||||||
}, 0);
|
|
||||||
return "$" + sum + "k";
|
|
||||||
},
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
show: true,
|
|
||||||
fontFamily: "Inter, sans-serif",
|
|
||||||
offsetY: -20,
|
|
||||||
formatter: function (value) {
|
|
||||||
return value + "k";
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
size: "80%",
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
|
||||||
padding: {
|
|
||||||
top: -2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
labels: ["Direct", "Sponsor", "Affiliate", "Email marketing"],
|
|
||||||
dataLabels: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
legend: {
|
legend: {
|
||||||
position: "bottom",
|
position: "bottom",
|
||||||
fontFamily: "Inter, sans-serif",
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
labels: {
|
|
||||||
formatter: function (value) {
|
|
||||||
return value + "k";
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
labels: {
|
|
||||||
formatter: function (value) {
|
|
||||||
return value + "k";
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisTicks: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisBorder: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
|
||||||
|
|
||||||
if (
|
|
||||||
document.getElementById("donut-chart") &&
|
|
||||||
typeof ApexCharts !== "undefined"
|
|
||||||
) {
|
|
||||||
const chart = new ApexCharts(
|
|
||||||
document.getElementById("donut-chart"),
|
|
||||||
getChartOptions()
|
|
||||||
);
|
|
||||||
chart.render();
|
|
||||||
|
|
||||||
// Get all the checkboxes by their className name
|
|
||||||
const checkboxes = document.querySelectorAll(
|
|
||||||
'#devices input[type="checkbox"]'
|
|
||||||
);
|
|
||||||
|
|
||||||
// Function to handle the checkbox change event
|
|
||||||
function handleCheckboxChange(event, chart) {
|
|
||||||
const checkbox = event.target;
|
|
||||||
if (checkbox.checked) {
|
|
||||||
switch (checkbox.value) {
|
|
||||||
case "desktop":
|
|
||||||
chart.updateSeries([15.1, 22.5, 4.4, 8.4]);
|
|
||||||
break;
|
|
||||||
case "tablet":
|
|
||||||
chart.updateSeries([25.1, 26.5, 1.4, 3.4]);
|
|
||||||
break;
|
|
||||||
case "mobile":
|
|
||||||
chart.updateSeries([45.1, 27.5, 8.4, 2.4]);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
chart.updateSeries([55.1, 28.5, 1.4, 5.4]);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
chart.updateSeries([35.1, 23.5, 2.4, 5.4]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Attach the event listener to each checkbox
|
|
||||||
checkboxes.forEach((checkbox) => {
|
|
||||||
checkbox.addEventListener("change", (event) =>
|
|
||||||
handleCheckboxChange(event, chart)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="bg-white md:p-6 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="max-w-sm w-full bg-white rounded-lg shadow-sm dark:bg-gray-800 p-4 md:p-6">
|
<h5 className="text-xl font-bold text-gray-900 dark:text-white mb-4 font-bold">
|
||||||
<div className="flex justify-between mb-3">
|
|
||||||
<div className="flex justify-center items-center">
|
|
||||||
<h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white pe-1">
|
|
||||||
Cost Analysis
|
Cost Analysis
|
||||||
</h5>
|
</h5>
|
||||||
<svg
|
<Chart options={chartOptions} series={series} type="donut" height={320} />
|
||||||
data-popover-target="chart-info"
|
|
||||||
data-popover-placement="bottom"
|
|
||||||
className="w-3.5 h-3.5 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white cursor-pointer ms-1"
|
|
||||||
aria-hidden="true"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="currentColor"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
>
|
|
||||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm0 16a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm1-5.034V12a1 1 0 0 1-2 0v-1.418a1 1 0 0 1 1.038-.999 1.436 1.436 0 0 0 1.488-1.441 1.501 1.501 0 1 0-3-.116.986.986 0 0 1-1.037.961 1 1 0 0 1-.96-1.037A3.5 3.5 0 1 1 11 11.466Z" />
|
|
||||||
</svg>
|
|
||||||
<div
|
|
||||||
data-popover
|
|
||||||
id="chart-info"
|
|
||||||
role="tooltip"
|
|
||||||
className="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400"
|
|
||||||
>
|
|
||||||
<div className="p-3 space-y-2">
|
|
||||||
<h3 className="font-semibold text-gray-900 dark:text-white">
|
|
||||||
Activity growth - Incremental
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
Report helps navigate cumulative growth of community
|
|
||||||
activities. Ideally, the chart should have a growing trend, as
|
|
||||||
stagnating chart signifies a significant decrease of community
|
|
||||||
activity.
|
|
||||||
</p>
|
|
||||||
<h3 className="font-semibold text-gray-900 dark:text-white">
|
|
||||||
Calculation
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
For each date bucket, the all-time volume of activities is
|
|
||||||
calculated. This means that activities in period n contain all
|
|
||||||
activities up to period n, plus the activities generated by
|
|
||||||
your community in period.
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="flex items-center font-medium text-blue-600 dark:text-blue-500 dark:hover:text-blue-600 hover:text-blue-700 hover:underline"
|
|
||||||
>
|
|
||||||
Read more{" "}
|
|
||||||
<svg
|
|
||||||
className="w-2 h-2 ms-1.5 rtl:rotate-180"
|
|
||||||
aria-hidden="true"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 6 10"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="m1 9 4-4-4-4"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div data-popper-arrow></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
data-tooltip-target="data-tooltip"
|
|
||||||
data-tooltip-placement="bottom"
|
|
||||||
className="hidden sm:inline-flex items-center justify-center text-gray-500 w-8 h-8 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
className="w-3.5 h-3.5"
|
|
||||||
aria-hidden="true"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 16 18"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M8 1v11m0 0 4-4m-4 4L4 8m11 4v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span className="sr-only">Download data</span>
|
|
||||||
</button>
|
|
||||||
<div
|
|
||||||
id="data-tooltip"
|
|
||||||
role="tooltip"
|
|
||||||
className="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-xs opacity-0 tooltip dark:bg-gray-700"
|
|
||||||
>
|
|
||||||
Download CSV
|
|
||||||
<div className="tooltip-arrow" data-popper-arrow></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div className="flex" id="devices">
|
|
||||||
<div className="flex items-center me-4">
|
|
||||||
<input
|
|
||||||
id="desktop"
|
|
||||||
type="checkbox"
|
|
||||||
value="desktop"
|
|
||||||
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
for="desktop"
|
|
||||||
className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
|
||||||
>
|
|
||||||
Desktop
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center me-4">
|
|
||||||
<input
|
|
||||||
id="tablet"
|
|
||||||
type="checkbox"
|
|
||||||
value="tablet"
|
|
||||||
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
for="tablet"
|
|
||||||
className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
|
||||||
>
|
|
||||||
Tablet
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center me-4">
|
|
||||||
<input
|
|
||||||
id="mobile"
|
|
||||||
type="checkbox"
|
|
||||||
value="mobile"
|
|
||||||
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
for="mobile"
|
|
||||||
className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
|
||||||
>
|
|
||||||
Mobile
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="py-6" id="donut-chart"></div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
|
|
||||||
<div className="flex justify-between items-center pt-5">
|
|
||||||
<button
|
|
||||||
id="dropdownDefaultButton"
|
|
||||||
data-dropdown-toggle="lastDaysdropdown"
|
|
||||||
data-dropdown-placement="bottom"
|
|
||||||
className="text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-900 text-center inline-flex items-center dark:hover:text-white"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Last 7 days
|
|
||||||
<svg
|
|
||||||
className="w-2.5 m-2.5 ms-1.5"
|
|
||||||
aria-hidden="true"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 10 6"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="m1 1 4 4 4-4"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div
|
|
||||||
id="lastDaysdropdown"
|
|
||||||
className="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700"
|
|
||||||
>
|
|
||||||
<ul
|
|
||||||
className="py-2 text-sm text-gray-700 dark:text-gray-200"
|
|
||||||
aria-labelledby="dropdownDefaultButton"
|
|
||||||
>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
|
||||||
>
|
|
||||||
Yesterday
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
|
||||||
>
|
|
||||||
Today
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
|
||||||
>
|
|
||||||
Last 7 days
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
|
||||||
>
|
|
||||||
Last 30 days
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
|
||||||
>
|
|
||||||
Last 90 days
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 dark:hover:text-blue-500 hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2"
|
|
||||||
>
|
|
||||||
Traffic analysis
|
|
||||||
<svg
|
|
||||||
className="w-2.5 h-2.5 ms-1.5 rtl:rotate-180"
|
|
||||||
aria-hidden="true"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 6 10"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="m1 9 4-4-4-4"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
const TotalSpent = () => {
|
const TotalSpent = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="h-full">
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="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('./images/plant-1573.png')` }}
|
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
|
||||||
@@ -13,7 +15,8 @@ const TotalSpent = () => {
|
|||||||
This is the total cost which you spent on this farm
|
This is the total cost which you spent on this farm
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default TotalSpent;
|
export default TotalSpent;
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ const Footer = () => {
|
|||||||
<div className="mb-6 md:mb-0">
|
<div className="mb-6 md:mb-0">
|
||||||
<a href="https://flowbite.com/" class="flex items-center gap-2">
|
<a href="https://flowbite.com/" class="flex items-center gap-2">
|
||||||
<img
|
<img
|
||||||
src="/images/logo.jpg"
|
src="/images/logo.png"
|
||||||
className="h-9 rounded-full"
|
className="h-9 rounded-full"
|
||||||
alt="Flowbite Logo"
|
alt="Flowbite Logo"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import Piechart from "../../components/Piechart";
|
import Piechart from "../../components/Piechart";
|
||||||
import TotalSpent from "../../components/TotalSpent";
|
import TotalSpent from "../../components/TotalSpent";
|
||||||
|
import Logs from "../../components/Logs";
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
return (
|
return (
|
||||||
@@ -197,11 +198,20 @@ const Dashboard = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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 ">
|
<div className="mb-4 flex space-x-4">
|
||||||
<Piechart />
|
<Piechart />
|
||||||
<TotalSpent />
|
<TotalSpent />
|
||||||
</div>
|
</div>
|
||||||
|
<Logs />
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,9 +1,13 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
export default {
|
||||||
darkMode: 'selector',
|
darkMode: 'class', // Change this based on your needs
|
||||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {
|
||||||
|
backgroundImage: {
|
||||||
|
'plant': "url('/home/atharva/public/images/plant-1573.svg')",
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user