-
-
diff --git a/client/components/dashboard-componenets/mainContent/landFillManagerContents/DumpEntry.tsx b/client/components/dashboard-componenets/mainContent/landFillManagerContents/DumpEntry.tsx
index 0fb2970..4129fb1 100644
--- a/client/components/dashboard-componenets/mainContent/landFillManagerContents/DumpEntry.tsx
+++ b/client/components/dashboard-componenets/mainContent/landFillManagerContents/DumpEntry.tsx
@@ -1,111 +1,42 @@
+"use client";
+import GoogleMapComponent from "@/components/maps/GoogleMap";
+import EmptyFillContainer from "../../cards/EmptyFillContainer";
+import LanfFillUpcomingVehicles from "../../../dataTables/LandFillUpcomingVehicle";
+import LandFillDeliveredVehicles from "../../../dataTables/LandFillDeliveredVehicles";
+import { AllStsMapShow } from "@/components/maps/AllStsShow";
import { Button } from "@/components/ui/button";
-import {
- Card,
- CardHeader,
- CardTitle,
- CardDescription,
- CardContent,
- CardFooter,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "@/components/ui/select";
+import { Cog, LogOut } from "lucide-react";
+
export default function LandfillManagerDumpEntries() {
+
return (
+
-
-
-
+
- CURRENT STORAGE
+
+ : "loading..."}
+
+ {" "}
+
+ {(landfillData?.graphData?.empty !== undefined && landfillData?.graphData?.full !== undefined) ? STORAGE STATUS OF
OF {(landfillData?.name)?.toUpperCase()}
+ OF {(landfillData?.name)?.toUpperCase()}
+ {" "}
+ {landfillData?.graphData?.emptyPercentage}% EMPTY
+
+ {landfillData?.graphData?.fullPercentage}% FULL +
+ + {landfillData?.graphData?.fullPercentage}% FULL +
- PENDING BILLS
+
+
+
+
-
SETTINGS
+
+
- DUMP ENTRIES
+ +
+
+
-
- {/*
ADD NEW DUMP ENTRY
*/} -
-
-
- Create project
-
- Deploy your new project in one-click.
-
-
-
-
-
-
-
-
-
-
-
- ADD STORAGE ENTRIES
-
-
-
- Create project
-
- Deploy your new project in one-click.
-
-
-
-
-
-
-
-
-
-
+
-
ADD DUMP ENTRIES
-
+
- );
+ );
}
diff --git a/client/components/dashboard-componenets/mainContent/landFillManagerContents/Storage.tsx b/client/components/dashboard-componenets/mainContent/landFillManagerContents/Storage.tsx
index fd2cad1..71ff7e3 100644
--- a/client/components/dashboard-componenets/mainContent/landFillManagerContents/Storage.tsx
+++ b/client/components/dashboard-componenets/mainContent/landFillManagerContents/Storage.tsx
@@ -1,60 +1,154 @@
"use client";
import { Button } from "@/components/ui/button";
-import { Cog, UserRoundCog } from "lucide-react";
+import "@mantine/charts/styles.css";
import EmptyFillContainer from "../../cards/EmptyFillContainer";
import { AllStsMapShow } from "@/components/maps/AllStsShow";
import useGetAllSTS from "@/hooks/stsdata/useGetAllSTS";
import { use, useEffect, useState } from "react";
import GoogleMapComponent from "@/components/maps/GoogleMap";
+// import PieChart from "@/components/graphs/PieChart";
+import BarChart from "@/components/graphs/BarChart";
+import { AreaChart, PieChart } from "@mantine/charts";
+import { landfillId } from "@/data/cookieNames";
+import useGetLandfillDatabyID from "@/hooks/landFillDashboard/getLandFillDataById";
+import { getCookie } from "@/lib/cookieFunctions";
export default function LandfillManagerStorageData() {
- const { getAllSTS, stsCoordinate, storagePercentage } = useGetAllSTS();
+ const { getAllSTS, stsCoordinate, storagePercentage } = useGetAllSTS();
+ const { getLandfillDatabyID, landfillData } = useGetLandfillDatabyID();
+
useEffect(() => {
getAllSTS();
+ getLandfillDatabyID(getCookie(landfillId))
}, []);
- useEffect(() => {
- }, [stsCoordinate, storagePercentage]);
+ useEffect(() => {
+ // alert(JSON.stringify(landfillData))
+ }, [landfillData]);
return (
+
+
+
+
+
+
+
+
+
-
Storage
- -
-
-
-
-
-
-
+
+
-
-
+
-
- Storage history
-
-
- Dumping graph
+
+
+ : "loading..."}
+
-
+ {" "}
+
+ {(landfillData?.graphData?.empty !== undefined && landfillData?.graphData?.full !== undefined) ? STORAGE STATUS OF
+ OF {(landfillData?.name)?.toUpperCase()} {" "}
+
+ {" "}
+ {landfillData?.graphData?.emptyPercentage}% EMPTY
+
+
+ {" "}
+ {landfillData?.graphData?.fullPercentage}% FULL{" "}
+
+
- storage status pie
+
diff --git a/client/components/dashboard-componenets/mainContent/mainSectionHeader.tsx b/client/components/dashboard-componenets/mainContent/mainSectionHeader.tsx
index 784cbfb..bfabbba 100644
--- a/client/components/dashboard-componenets/mainContent/mainSectionHeader.tsx
+++ b/client/components/dashboard-componenets/mainContent/mainSectionHeader.tsx
@@ -99,14 +99,14 @@ export default function MainSectionHeader({
+
+ TOTAL WEIGHT HISTOTY
+
+
-
- Storage graph
+
+
+ WEEKLY INCOMING WASTE HISTORY
+
+
{getCookie(curActive)?.startsWith(stsManager) &&
(getCookie(stsName) ? (
- <>YOUR STS : {getCookie(stsName)} >
+ YOUR STS : {getCookie(stsName).toUpperCase()}
) : (
<>{"NO STS ASSIGNED"}>
))}
{getCookie(curActive)?.startsWith(landfillManager) &&
(getCookie(landfillName) ? (
- <>YOUR LANDFILL : {getCookie(landfillName)} >
+ YOUR LANDFILL : {getCookie(landfillName).toUpperCase()}
) : (
<>{"NO LANDFILL ASSIGNED"}>
))}
diff --git a/client/components/graphs/BarChart.tsx b/client/components/graphs/BarChart.tsx
index 7e1cc71..f8d7e71 100644
--- a/client/components/graphs/BarChart.tsx
+++ b/client/components/graphs/BarChart.tsx
@@ -8,9 +8,10 @@ interface ChartDataItem {
data: number[];
backgroundColor: string[];
borderColor: string[];
+ label: string;
}
-const BarChart: React.FC = ({ labels, data, backgroundColor, borderColor }) => {
+const BarChart: React.FC = ({ labels, data, backgroundColor, borderColor, label }) => {
const chartRef = useRef(null);
const chartInstance = useRef(null);
@@ -29,7 +30,7 @@ const BarChart: React.FC = ({ labels, data, backgroundColor, bord
labels: labels,
datasets: [
{
- label: 'My First Dataset',
+ label: label,
data: data,
backgroundColor: backgroundColor,
borderColor: borderColor,
diff --git a/client/components/graphs/PieChart.tsx b/client/components/graphs/PieChart.tsx
index 64cb39b..0ea4655 100644
--- a/client/components/graphs/PieChart.tsx
+++ b/client/components/graphs/PieChart.tsx
@@ -1,8 +1,7 @@
-"use client";
import React, { useRef, useEffect } from 'react';
-import { Chart, CategoryScale } from 'chart.js/auto'; // Import necessary scales
+import { Chart, CategoryScale } from 'chart.js/auto';
-Chart.register(CategoryScale); // Register the scales
+Chart.register(CategoryScale);
interface ChartDataItem {
labels: string[];
@@ -10,11 +9,7 @@ interface ChartDataItem {
background: string[];
}
-// interface DoughnutChartProps {
-// chartData: ChartDataItem[];
-// }
-
-const PieChart: React.FC = ({ labels, data, background }) => {
+const PieChart: React.FC = ({ labels, data, background }) => {
const chartRef = useRef(null);
const chartInstance = useRef(null);
@@ -29,15 +24,27 @@ const PieChart: React.FC = ({ labels, data, background }) => {
chartInstance.current = new Chart(myChartRef, {
type: 'doughnut',
data: {
- labels: labels, //['Red', 'Blue', 'Yellow'],
+ labels: labels,
datasets: [
{
- label: 'My First Dataset',
- data: [300, 50, 100],
- backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)'],
+ label: 'Storage Status',
+ data: data,
+ backgroundColor: background,
},
],
},
+ options: {
+ plugins: {
+ legend: {
+ labels: {
+ font: {
+ weight: 'bold',
+ size: 13,
+ },
+ },
+ },
+ },
+ },
});
}
@@ -49,8 +56,8 @@ const PieChart: React.FC = ({ labels, data, background }) => {
}, []);
return (
-
-
+ = ({ coordinates, dumpFills }) => {
const [hoveredCircle, setHoveredCircle] = useState(null);
- const apiKey: string = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || '';
- const radius= 2000;
+ const apiKey: string = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || "";
+ const radius = 2000;
const handleCircleHover = (index: number) => {
setHoveredCircle(index);
@@ -41,55 +50,60 @@ const GoogleMapComponent: React.FC = ({ coordinates, dumpFills }) => {
return (
<>
-
-
-
- {coordinates.map((coordinate, index) => {
- // let circleColor = '#00FF00'; // Default to green
+
+
+
+ {coordinates.map((coordinate, index) => {
+ // let circleColor = '#00FF00'; // Default to green
- // if (dumpFills[index] >= 40 && dumpFills[index] <= 80) {
- // circleColor = '#FFFF00'; // Yellow
- // } else if (dumpFills[index] > 80) {
- // circleColor = '#FF0000'; // Red
- // }
- let circleColor = threshold(dumpFills[index]);
+ // if (dumpFills[index] >= 40 && dumpFills[index] <= 80) {
+ // circleColor = '#FFFF00'; // Yellow
+ // } else if (dumpFills[index] > 80) {
+ // circleColor = '#FF0000'; // Red
+ // }
+ let circleColor = threshold(dumpFills[index]);
-
- return (
- handleCircleHover(index)}
- onMouseOut={handleCircleMouseOut}
- options={{
- fillColor: circleColor,
- fillOpacity: 0.35,
- strokeColor: circleColor,
- strokeOpacity: 0.8,
- strokeWeight: 2,
- }}
- />
- );
- })}
- {hoveredCircle !== null && (
-
-
- )}
-
-
+ return (
+ handleCircleHover(index)}
+ onMouseOut={handleCircleMouseOut}
+ options={{
+ fillColor: circleColor,
+ fillOpacity: 0.35,
+ strokeColor: circleColor,
+ strokeOpacity: 0.8,
+ strokeWeight: 2,
+ }}
+ />
+ );
+ })}
+ {hoveredCircle !== null && (
+
+
+ )}
+
+
>
);
};
diff --git a/client/components/maps/OptimizedRoute.tsx b/client/components/maps/OptimizedRoute.tsx
index 190610e..6c25786 100644
--- a/client/components/maps/OptimizedRoute.tsx
+++ b/client/components/maps/OptimizedRoute.tsx
@@ -29,16 +29,15 @@ import { ChevronDownIcon } from "@chakra-ui/icons";
const center = { lat: 23.7244018, lng: 90.3887196 };
type StsRouteType = {
- coordinate: string,
- name: string,
-}
+ coordinate: string;
+ name: string;
+};
type MapProps = {
coordinates: StsRouteType[];
-}
-
+};
-const OptimizedRouteMap: React.FC = ({ coordinates }) =>{
+const OptimizedRouteMap: React.FC = ({ coordinates }) => {
const [routeType, setRouteType] = useState(
"Location Based Optimal Route"
);
@@ -54,7 +53,7 @@ const OptimizedRouteMap: React.FC = ({ coordinates }) =>{
const [allCoordinates, setAllCoordinates] = useState([]);
const [landFilCoord, setLandFillCoord] = useState({
coordinate: "23.7244018, 90.3887196",
- name: "Amin Bazar"
+ name: "Amin Bazar",
});
const suggestionsList: string[] = [
@@ -66,16 +65,14 @@ const OptimizedRouteMap: React.FC = ({ coordinates }) =>{
"Gulistan STS",
"Rampura STS",
];
-
+
useEffect(() => {
- const coordinateArray: string[] = coordinates.map(route => route.name);
+ const coordinateArray: string[] = coordinates.map((route) => route.name);
setAllCoordinates(coordinateArray);
-
-}, [coordinates]);
+ }, [coordinates]);
const landfillList: string[] = ["Amin Bazar"];
-
//input studds
const handleChangeInputType = () => {
@@ -146,27 +143,26 @@ const OptimizedRouteMap: React.FC = ({ coordinates }) =>{
}
const getSTSCoodrdinateByName = (stsName: string): string => {
- const vehicle = coordinates.find(sts => sts.name === stsName);
+ const vehicle = coordinates.find((sts) => sts.name === stsName);
if (vehicle) {
- return vehicle.coordinate.toString();
+ return vehicle.coordinate.toString();
}
-
+
// If vehicle is not found, return undefined
return "no vehicle";
-};
-
+ };
async function calculateRoute() {
- if( routeType === "Location Based Optimal Route"){
- if (
+ if (routeType === "Location Based Optimal Route") {
+ if (
!originRef.current ||
!destinationRef.current ||
originRef.current.value === "" ||
- destinationRef.current.value === "") {
+ destinationRef.current.value === ""
+ ) {
return;
}
-
const directionsService = new google.maps.DirectionsService();
const results = await directionsService.route({
origin: originRef.current.value,
@@ -179,11 +175,10 @@ const OptimizedRouteMap: React.FC = ({ coordinates }) =>{
setDistance(results.routes[0].legs[0].distance?.text || "");
setDuration(results.routes[0].legs[0].duration?.text || "");
}
- }else{
-
+ } else {
const stsCoord = getSTSCoodrdinateByName(searchTerm);
const newString = stsCoord.substring(0, 11);
- console.log(stsCoord);
+ console.log(stsCoord);
const directionsService = new google.maps.DirectionsService();
const results = await directionsService.route({
origin: stsCoord,
@@ -196,13 +191,7 @@ const OptimizedRouteMap: React.FC = ({ coordinates }) =>{
setDistance(results.routes[0].legs[0].distance?.text || "");
setDuration(results.routes[0].legs[0].duration?.text || "");
}
-
}
-
-
-
-
-
}
function clearRoute() {
@@ -358,6 +347,6 @@ const OptimizedRouteMap: React.FC = ({ coordinates }) =>{
);
-}
+};
export default OptimizedRouteMap;
diff --git a/client/components/modals/billControl/BillCreationModal.tsx b/client/components/modals/billControl/BillCreationModal.tsx
index 1cb45d6..ece447f 100644
--- a/client/components/modals/billControl/BillCreationModal.tsx
+++ b/client/components/modals/billControl/BillCreationModal.tsx
@@ -12,7 +12,7 @@ import {
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import React, { use, useEffect, useState } from "react";
-import { EditIcon, Trash } from "lucide-react";
+import { EditIcon, Ghost, Receipt, Trash } from "lucide-react";
import deleteUser from "@/hooks/user_data/deleteUser";
import {
Select,
@@ -40,8 +40,8 @@ export const BillCreationModal = ({ tripInfo }: { tripInfo: Trip }) => {
return (
+
);
};
diff --git a/client/components/maps/GoogleMap.tsx b/client/components/maps/GoogleMap.tsx
index f69c490..a89496a 100644
--- a/client/components/maps/GoogleMap.tsx
+++ b/client/components/maps/GoogleMap.tsx
@@ -1,19 +1,28 @@
"use client";
-import React, { useState } from 'react';
-import { GoogleMap, LoadScript, Marker, Circle, InfoWindow } from '@react-google-maps/api';
-import { threshold } from '@/hooks/functions/threshold';
-import { Button } from '../ui/button';
+import React, { useState } from "react";
+import {
+ GoogleMap,
+ LoadScript,
+ Marker,
+ Circle,
+ InfoWindow,
+} from "@react-google-maps/api";
+import { threshold } from "@/hooks/functions/threshold";
+import { Button } from "../ui/button";
+import { ReloadIcon } from "@radix-ui/react-icons";
+import { RefreshCcw } from "lucide-react";
const MapContainerStyle = {
- width: '100%',
- height: 'calc(100% - 44px)',
- borderRadius: '12px',
- boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+ width: "100%",
+ height: "calc(100% - 44px)",
+ minHeight: "400px",
+ borderRadius: "12px",
+ boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
};
const defaultCenter = {
- lat: 23.7244018,
- lng: 90.38871960,
+ lat: 23.7244018,
+ lng: 90.3887196,
};
interface Coordinate {
@@ -28,8 +37,8 @@ interface MapProps {
const GoogleMapComponent: React.FC
-
- STS DUMP LOAD HEATMAP
- -
+
+ STS DUMP LOAD HEATMAP
+ +
- Trash: {dumpFills[hoveredCircle]}%
-
- Trash: {dumpFills[hoveredCircle]}%
+