feat:Added total spent card and Removed some typos
This commit is contained in:
@@ -93,7 +93,7 @@ const Piechart = () => {
|
||||
);
|
||||
chart.render();
|
||||
|
||||
// Get all the checkboxes by their class name
|
||||
// Get all the checkboxes by their className name
|
||||
const checkboxes = document.querySelectorAll(
|
||||
'#devices input[type="checkbox"]'
|
||||
);
|
||||
@@ -130,16 +130,16 @@ const Piechart = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class="max-w-sm w-full bg-white rounded-lg shadow-sm dark:bg-gray-800 p-4 md:p-6">
|
||||
<div class="flex justify-between mb-3">
|
||||
<div class="flex justify-center items-center">
|
||||
<h5 class="text-xl font-bold leading-none text-gray-900 dark:text-white pe-1">
|
||||
<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"
|
||||
class="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"
|
||||
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"
|
||||
@@ -151,10 +151,10 @@ const Piechart = () => {
|
||||
data-popover
|
||||
id="chart-info"
|
||||
role="tooltip"
|
||||
class="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"
|
||||
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 class="p-3 space-y-2">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white">
|
||||
<div className="p-3 space-y-2">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">
|
||||
Activity growth - Incremental
|
||||
</h3>
|
||||
<p>
|
||||
@@ -163,7 +163,7 @@ const Piechart = () => {
|
||||
stagnating chart signifies a significant decrease of community
|
||||
activity.
|
||||
</p>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">
|
||||
Calculation
|
||||
</h3>
|
||||
<p>
|
||||
@@ -174,11 +174,11 @@ const Piechart = () => {
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center font-medium text-blue-600 dark:text-blue-500 dark:hover:text-blue-600 hover:text-blue-700 hover:underline"
|
||||
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
|
||||
class="w-2 h-2 ms-1.5 rtl:rotate-180"
|
||||
className="w-2 h-2 ms-1.5 rtl:rotate-180"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
@@ -186,9 +186,9 @@ const Piechart = () => {
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="m1 9 4-4-4-4"
|
||||
/>
|
||||
</svg>
|
||||
@@ -202,10 +202,10 @@ const Piechart = () => {
|
||||
type="button"
|
||||
data-tooltip-target="data-tooltip"
|
||||
data-tooltip-placement="bottom"
|
||||
class="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"
|
||||
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
|
||||
class="w-3.5 h-3.5"
|
||||
className="w-3.5 h-3.5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
@@ -213,65 +213,65 @@ const Piechart = () => {
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
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 class="sr-only">Download data</span>
|
||||
<span className="sr-only">Download data</span>
|
||||
</button>
|
||||
<div
|
||||
id="data-tooltip"
|
||||
role="tooltip"
|
||||
class="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"
|
||||
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 class="tooltip-arrow" data-popper-arrow></div>
|
||||
<div className="tooltip-arrow" data-popper-arrow></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex" id="devices">
|
||||
<div class="flex items-center me-4">
|
||||
<div className="flex" id="devices">
|
||||
<div className="flex items-center me-4">
|
||||
<input
|
||||
id="desktop"
|
||||
type="checkbox"
|
||||
value="desktop"
|
||||
class="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"
|
||||
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"
|
||||
class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
Desktop
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center me-4">
|
||||
<div className="flex items-center me-4">
|
||||
<input
|
||||
id="tablet"
|
||||
type="checkbox"
|
||||
value="tablet"
|
||||
class="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"
|
||||
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"
|
||||
class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
Tablet
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center me-4">
|
||||
<div className="flex items-center me-4">
|
||||
<input
|
||||
id="mobile"
|
||||
type="checkbox"
|
||||
value="mobile"
|
||||
class="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"
|
||||
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"
|
||||
class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
Mobile
|
||||
</label>
|
||||
@@ -279,20 +279,20 @@ const Piechart = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-6" id="donut-chart"></div>
|
||||
<div className="py-6" id="donut-chart"></div>
|
||||
|
||||
<div class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
|
||||
<div class="flex justify-between items-center pt-5">
|
||||
<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"
|
||||
class="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"
|
||||
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
|
||||
class="w-2.5 m-2.5 ms-1.5"
|
||||
className="w-2.5 m-2.5 ms-1.5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
@@ -300,25 +300,25 @@ const Piechart = () => {
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="m1 1 4 4 4-4"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
id="lastDaysdropdown"
|
||||
class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700"
|
||||
className="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700"
|
||||
>
|
||||
<ul
|
||||
class="py-2 text-sm text-gray-700 dark:text-gray-200"
|
||||
className="py-2 text-sm text-gray-700 dark:text-gray-200"
|
||||
aria-labelledby="dropdownDefaultButton"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
>
|
||||
Yesterday
|
||||
</a>
|
||||
@@ -326,7 +326,7 @@ const Piechart = () => {
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
>
|
||||
Today
|
||||
</a>
|
||||
@@ -334,7 +334,7 @@ const Piechart = () => {
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
>
|
||||
Last 7 days
|
||||
</a>
|
||||
@@ -342,7 +342,7 @@ const Piechart = () => {
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
>
|
||||
Last 30 days
|
||||
</a>
|
||||
@@ -350,7 +350,7 @@ const Piechart = () => {
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
>
|
||||
Last 90 days
|
||||
</a>
|
||||
@@ -359,11 +359,11 @@ const Piechart = () => {
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="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"
|
||||
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
|
||||
class="w-2.5 h-2.5 ms-1.5 rtl:rotate-180"
|
||||
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"
|
||||
@@ -371,9 +371,9 @@ const Piechart = () => {
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="m1 9 4-4-4-4"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
const TotalSpent = () => {
|
||||
return (
|
||||
<>
|
||||
<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')` }}
|
||||
>
|
||||
<h5 className="mb-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-white">
|
||||
100,000
|
||||
</h5>
|
||||
<p className="font-normal text-gray-700 dark:text-gray-400">
|
||||
This is the total cost which you spent on this farm
|
||||
</p>
|
||||
</a>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default TotalSpent;
|
||||
@@ -61,4 +61,3 @@ createRoot(document.getElementById("root")).render(
|
||||
</Provider>
|
||||
</StrictMode>
|
||||
);
|
||||
d;
|
||||
|
||||
@@ -33,9 +33,9 @@ const Hero = () => {
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from "react";
|
||||
import Piechart from "../../components/Piechart";
|
||||
import TotalSpent from "../../components/TotalSpent";
|
||||
|
||||
const Dashboard = () => {
|
||||
return (
|
||||
@@ -197,8 +198,9 @@ const Dashboard = () => {
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="mb-4 flex ">
|
||||
<Piechart />
|
||||
<TotalSpent />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -111,9 +111,9 @@ const Settings = () => {
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
Reference in New Issue
Block a user