notkshitij/CropCompass
1
1
Fork 0
Code Issues 8 Pull Requests Projects 1 Releases Activity

feat:Added total spent card and Removed some typos

Browse Source
This commit is contained in:
Atharva
2025-02-22 16:01:56 +05:30
parent f7cb1af2c4
commit d9c299a58f
7 changed files with 93 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/public/images/plant-1573.svg
+12
View File
@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
<defs>
</defs>
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
<path d="M 37.712 41.541 c -2.437 -10.14 2.919 -19.609 8.772 -25.137 c -6.221 11.54 -7.41 20.104 -3.461 33.177 l 2.29 -0.854 c -0.882 -2.464 -1.413 -4.873 -1.685 -7.241 c 8.23 -2.355 13.883 -7.209 15.231 -15.926 C 59.796 13.651 52.042 6.72 43.718 0.117 c 3.04 9.758 -11.581 17.964 -10.296 30.949 c 0.271 2.741 0.697 5.33 1.326 7.825" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(127,178,65); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<path d="M 34.069 30.999 c 0.917 -12.923 13.599 -21.098 9.649 -30.883 c 1.394 8.216 -9.771 12.38 -12.663 22.195 c -1.575 5.836 -1.151 11.452 3.693 16.579 C 34.119 36.396 33.937 33.751 34.069 30.999 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(113,156,64); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<polygon points="68.77,61.09 70.46,47.61 43.69,47.61 19.54,47.61 21.23,61.09 " style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(160,126,99); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) "/>
<polyline points="63.11,61.09 59.5,90 44.01,90 30.5,90 26.89,61.09 " style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(160,126,99); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) "/>
<polygon points="62.61,65.09 63.11,61.09 26.89,61.09 27.39,65.09 " style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(145,107,77); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

Frontend/src/components/Piechart.jsx
+53 -53
View File
@@ -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>
Frontend/src/components/TotalSpent.jsx
+19
View File
@@ -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;
Frontend/src/main.jsx
-1
View File
@@ -61,4 +61,3 @@ createRoot(document.getElementById("root")).render(
</Provider>
</StrictMode>
);
d;
Frontend/src/pages/Home/Hero.jsx
+3 -3
View File
@@ -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>
Frontend/src/pages/UserPanel/Dashboard.jsx
+3 -1
View File
@@ -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>
</>
Frontend/src/pages/UserPanel/Settings.jsx
+3 -3
View File
@@ -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>