feat:1.Added logo 2.changed color palet
This commit is contained in:
@@ -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 (
|
||||
<>
|
||||
<nav className="bg-white border-gray-200 dark:bg-gray-900">
|
||||
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
||||
<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 gap-x-12">
|
||||
<a
|
||||
href="/"
|
||||
className="flex items-center space-x-3 rtl:space-x-reverse"
|
||||
>
|
||||
<img
|
||||
src="/images/logo.jpg"
|
||||
src="/images/logo.png"
|
||||
className="h-9 rounded-full"
|
||||
alt="Flowbite Logo"
|
||||
/>
|
||||
<span className="self-center text-xl font-bold whitespace-nowrap dark:text-white">
|
||||
Farmalyze
|
||||
Crop Compass
|
||||
</span>
|
||||
</a>
|
||||
<div className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
|
||||
@@ -73,7 +73,7 @@ const Navbar = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ul className="py-2" aria-labelledby="user-menu-button">
|
||||
<ul className="py-2" aria-labelledby="user-menu-button ">
|
||||
{user?.name !== "Unloggedin User" && (
|
||||
<>
|
||||
<li>
|
||||
@@ -153,7 +153,7 @@ const Navbar = () => {
|
||||
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">
|
||||
<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>
|
||||
<Link
|
||||
to={"/"}
|
||||
|
||||
@@ -1,387 +1,45 @@
|
||||
import React, { useState } from "react";
|
||||
import Chart from "react-apexcharts";
|
||||
|
||||
const Piechart = () => {
|
||||
const getChartOptions = () => {
|
||||
return {
|
||||
series: [35.1, 23.5, 2.4, 5.4],
|
||||
colors: ["#1C64F2", "#16BDCA", "#FDBA8C", "#E74694"],
|
||||
chart: {
|
||||
height: 320,
|
||||
width: "100%",
|
||||
type: "donut",
|
||||
},
|
||||
stroke: {
|
||||
colors: ["transparent"],
|
||||
lineCap: "",
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
labels: {
|
||||
const [series, setSeries] = useState([35.1, 23.5, 2.4, 5.4]);
|
||||
|
||||
const chartOptions = {
|
||||
series: series,
|
||||
labels: ["Fertilizers", "Pestisides", "Manner", "Urea"],
|
||||
colors: ["#1C64F2", "#16BDCA", "#FDBA8C", "#E74694"],
|
||||
chart: {
|
||||
type: "donut",
|
||||
height: 320,
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
labels: {
|
||||
show: true,
|
||||
total: {
|
||||
show: true,
|
||||
name: {
|
||||
show: true,
|
||||
fontFamily: "Inter, sans-serif",
|
||||
offsetY: 20,
|
||||
},
|
||||
total: {
|
||||
showAlways: true,
|
||||
show: true,
|
||||
label: "Unique visitors",
|
||||
fontFamily: "Inter, sans-serif",
|
||||
formatter: function (w) {
|
||||
const sum = w.globals.seriesTotals.reduce((a, b) => {
|
||||
return a + b;
|
||||
}, 0);
|
||||
return "$" + sum + "k";
|
||||
},
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
fontFamily: "Inter, sans-serif",
|
||||
offsetY: -20,
|
||||
formatter: function (value) {
|
||||
return value + "k";
|
||||
},
|
||||
label: "Total",
|
||||
formatter: function (w) {
|
||||
return w.globals.seriesTotals.reduce((a, b) => a + b, 0) + "k";
|
||||
},
|
||||
},
|
||||
size: "80%",
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -2,
|
||||
},
|
||||
},
|
||||
labels: ["Direct", "Sponsor", "Affiliate", "Email marketing"],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
legend: {
|
||||
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,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
legend: {
|
||||
position: "bottom",
|
||||
},
|
||||
};
|
||||
|
||||
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 (
|
||||
<>
|
||||
<div className="max-w-sm w-full bg-white rounded-lg shadow-sm dark:bg-gray-800 p-4 md:p-6">
|
||||
<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
|
||||
</h5>
|
||||
<svg
|
||||
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 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>
|
||||
</>
|
||||
<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">
|
||||
<h5 className="text-xl font-bold text-gray-900 dark:text-white mb-4 font-bold">
|
||||
Cost Analysis
|
||||
</h5>
|
||||
<Chart options={chartOptions} series={series} type="donut" height={320} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
const TotalSpent = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="h-full">
|
||||
<a
|
||||
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"
|
||||
style={{ backgroundImage: `url('./images/plant-1573.png')` }}
|
||||
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">
|
||||
100,000
|
||||
@@ -13,7 +15,8 @@ const TotalSpent = () => {
|
||||
This is the total cost which you spent on this farm
|
||||
</p>
|
||||
</a>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TotalSpent;
|
||||
|
||||
Reference in New Issue
Block a user