definecoder · codermehraj · Mar 30, 2024 · Mar 27, 2024 · Mar 27, 2024 · Mar 27, 2024
diff --git a/client/app/auth/change-password/page.tsx b/client/app/auth/change-password/page.tsx
@@ -16,14 +16,14 @@ import { setCookie } from "@/lib/cookieFunctions";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
+import ReCAPTCHA from "react-google-recaptcha";
 
 export default function ChangePassword() {
   const router = useRouter();
 
   const { changePass, setPassChangeData } = useChangePass();
 
-  const [correctCaptcha, setCorrectCaptcha] = useState("");
-  const [userCaptcha, setUserCaptcha] = useState("");
+  const [isVerified, setIsCaptchaVerified] = useState<string | null>();
   const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
 
@@ -33,8 +33,8 @@ export default function ChangePassword() {
     let timer = setInterval(() => {
       setTime((time) => {
         if (time === 0) {
-          clearInterval(timer);    
-          alert("Time Expired!");      
+          clearInterval(timer);
+          alert("Time Expired!");
           router.push("/dashboard");
           return 0;
         } else return time - 0.5;
@@ -44,15 +44,15 @@ export default function ChangePassword() {
 
   async function submitForm() {
     setPassChangeData({ oldPassword, newPassword });
-    correctCaptcha === userCaptcha &&
-      (await changePass()) &&
-      router.push("/dashboard");
-    correctCaptcha !== userCaptcha && alert("Invalid Captcha!");
+    isVerified && (await changePass()) && router.push("/dashboard");
+    !isVerified && alert("Invalid Captcha!");
   }
 
   return (
     <div className="flex flex-col gap-4 justify-center items-center h-screen w-screen">
-      <Button variant="outline" onClick={() => router.push("/dashboard")}>Back to Dashboard</Button>      
+      <Button variant="outline" onClick={() => router.push("/dashboard")}>
+        Back to Dashboard
+      </Button>
       <Card className="w-full max-w-sm">
         <CardHeader className="text-center">
           <CardTitle className="text-2xl">Change Password</CardTitle>
@@ -62,7 +62,7 @@ export default function ChangePassword() {
             {`${time % 60}`.padStart(2, "0")} mins.
           </CardDescription>
         </CardHeader>
-        <CardContent className="grid gap-4">
+        <CardContent className="grid gap-6">
           <form onSubmit={submitForm}>
             <div className="grid gap-2">
               <Label htmlFor="old-password">Old Password</Label>
@@ -84,10 +84,12 @@ export default function ChangePassword() {
                 required
               />
             </div>
-            <CaptchaDiv
-              setCorrectCaptcha={setCorrectCaptcha}
-              setUserCaptcha={setUserCaptcha}
-            />
+            <div className="mt-3 flex items-center justify-center">
+            <ReCAPTCHA
+                sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!}
+                onChange={setIsCaptchaVerified}
+              />
+              </div>
           </form>
         </CardContent>
         <CardFooter>

diff --git a/client/app/auth/reset-password/initiate/forgetPasswordInitiate.tsx b/client/app/auth/reset-password/initiate/forgetPasswordInitiate.tsx
@@ -7,14 +7,20 @@ import { Label } from "@/components/ui/label";
 
 import { useRouter } from "next/navigation";
 import useForgetPassInitiate from "@/hooks/auth/useForgetPassInitiate";
-import { useContext } from "react";
+import { useContext, useState } from "react";
+import ReCAPTCHA from "react-google-recaptcha";
 
 function ForgetPassInitiateForm() {
   const { userEmail, setUserEmail, initiate } = useForgetPassInitiate();
+  const [isCaptchaVerified, setIsCaptchaVerified] = useState<string | null>();
   const router = useRouter();  
 
   async function handleFormSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
+    if (!isCaptchaVerified) {
+      alert("Please verify that you are not a robot.");
+      return;
+    }
     const success = await initiate();
     success && router.push("/auth/reset-password/confirm" + "?email=" + userEmail);
   }
@@ -34,7 +40,8 @@ function ForgetPassInitiateForm() {
             }
             required
           />
-        </div>        
+        </div>
+        <ReCAPTCHA sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!} className="mx-auto" onChange={setIsCaptchaVerified} />
         <Button type="submit" className="w-full">
           Send Reset Password Link
         </Button>

diff --git a/client/app/billPrint/page.tsx b/client/app/billPrint/page.tsx
@@ -0,0 +1,138 @@
+"use client";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import Head from "next/head";
+import { Bill } from "@/components/dataTables/CompletedBillList";
+import { Button } from "@/components/ui/button";
+
+const BillPrintComponent = () => {
+  const searchParams = useSearchParams();
+  const [queryParams, setQueryParams] = useState({
+    id: "",
+    billNo: "",
+    stsName: "",
+    landFillName: "",
+    vehicleNumber: "",
+    vehicleType: "",
+    weightOfWaste: 0,
+    shortage: 0,
+    loadedFuelCostPerKm: 0,
+    unloadedFuelCostPerKm: 0,
+    capacity: 0,
+    estimatedFuelCost: 0,
+    distance: 0,
+    estimatedDuration: 0,
+    actualDuration: 0,
+    allocatedFuelCost: 0,
+    tripId: "",
+  });
+
+  useEffect(() => {
+    setQueryParams({
+      id: searchParams.get("id") || "",
+      billNo: searchParams.get("billNo") || "",
+      stsName: searchParams.get("stsName") || "",
+      landFillName: searchParams.get("landFillName") || "",
+      vehicleNumber: searchParams.get("vehicleNumber") || "",
+      vehicleType: searchParams.get("vehicleType") || "",
+      weightOfWaste: Number(searchParams.get("weightOfWaste")) || 0,
+      shortage: Number(searchParams.get("shortage")) || 0,
+      loadedFuelCostPerKm: Number(searchParams.get("loadedFuelCostPerKm")) || 0,
+      unloadedFuelCostPerKm:
+        Number(searchParams.get("unloadedFuelCostPerKm")) || 0,
+      capacity: Number(searchParams.get("capacity")) || 0,
+      estimatedFuelCost: Number(searchParams.get("estimatedFuelCost")) || 0,
+      distance: Number(searchParams.get("distance")) || 0,
+      estimatedDuration: Number(searchParams.get("estimatedDuration")) || 0,
+      actualDuration: Number(searchParams.get("actualDuration")) || 0,
+      allocatedFuelCost: Number(searchParams.get("allocatedFuelCost")) || 0,
+      tripId: searchParams.get("tripId") || "",
+    });
+  }, [searchParams]);
+
+return (
+    <>
+        <div className="flex  justify-center items-center mt-4 print:mt-0 w-screen print:h-[99vh]">
+            <div className="m-4 p-10 border rounded-xl bg-primary-foreground text-primary flex flex-col gap-4 min-w-[500px] max-w-min">
+                <div className="flex justify-between items-center mb-2">
+                    <span>
+                        <b>Bill number:</b>&nbsp; {queryParams.billNo}
+                    </span>
+                    <img src="logoBlack.png" alt="logo" className="w-16 h-16" />
+                </div>
+                <div className="flex justify-between">
+                    <div>
+                        <b>STS:</b> <br /> {queryParams.stsName}{" "}
+                    </div>
+                    <div className="text-right">
+                        <b>Landfill:</b> <br /> {queryParams.landFillName}
+                    </div>
+                </div>
+                <div className="flex justify-between">
+                    <div>
+                        <b>Vehicle Number:</b> <br /> {queryParams.vehicleNumber}{" "}
+                    </div>
+                    <div className="text-right">
+                        <b>Vehicle Type:</b> <br /> {queryParams.vehicleType}
+                    </div>
+                </div>
+                <div className="flex justify-between">
+                    <div>
+                        <b>Capacity:</b> <br /> {queryParams.capacity} Ton{" "}
+                    </div>
+                    <div className="text-center">
+                        <b>
+                            Weight Trasfered: <br /> {queryParams.weightOfWaste} Ton{" "}
+                        </b>
+                    </div>
+                    <div className="text-right">
+                        <b>Shortage:</b> <br /> {queryParams.shortage} Ton
+                    </div>
+                </div>
+                <div className="flex justify-between">
+                    <div>
+                        <b>Loaded Fuel Cost:</b> <br /> {queryParams.loadedFuelCostPerKm}{" "}
+                        BDT
+                    </div>
+                    <div className="text-right">
+                        <b>Unloaded Fuel Cost:</b> <br />{" "}
+                        {queryParams.unloadedFuelCostPerKm} BDT
+                    </div>
+                </div>
+                <div className="flex justify-between">
+                    <div>
+                        <b>Actual Duration:</b> <br /> {queryParams.estimatedDuration} min
+                    </div>
+                    <div className="text-right">
+                        <b>Estimated Duration:</b> <br /> {queryParams.actualDuration} min
+                    </div>
+                </div>
+                <div className="flex justify-between">
+                    <div>
+                        <b>Total Distance:</b> <br /> {queryParams.distance} km
+                    </div>
+                    <div className="text-right">
+                        <b>Estimated Fuel Cost:</b> <br /> {queryParams.estimatedFuelCost}{" "}
+                        BDT
+                    </div>
+                </div>
+                <div className="flex justify-center text-lg m-2">
+                    <span>
+                        <b>ALLOCATED BILL:&nbsp; {queryParams.allocatedFuelCost} BDT </b>
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div className="flex justify-center mt-4 print:hidden">
+            <Button
+                onClick={() => window.print()}
+                className="bg-primary text-primary-foreground"
+            >
+                Print
+            </Button>
+        </div>
+    </>
+);
+};
+
+export default BillPrintComponent;
diff --git a/client/app/dashboard/page.tsx b/client/app/dashboard/page.tsx
@@ -21,7 +21,7 @@ export default function Dashboard() {
     setCurrentActive(getCookie(curActive));
   }, []);
 
-  console.log('Role: ' + curRole + ' Current Active: ' + currentActive);
+  //console.log('Role: ' + curRole + ' Current Active: ' + currentActive);
 
   return (
     <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">      

diff --git a/client/app/globals.css b/client/app/globals.css
@@ -98,3 +98,21 @@
   background: #0F172A; /* Color of the scrollbar handle on hover */
   border: 2px solid white; /* Color of the scrollbar handle on hover */
 }
+
+nextjs-portal {
+  display: none;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loader {
+  border-top-color: #3498db;
+  animation: spin 1s linear infinite;
+}
diff --git a/client/app/layout.tsx b/client/app/layout.tsx
@@ -1,6 +1,10 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import '@mantine/core/styles.css';
+import '@mantine/charts/styles.css';
+
+import { ColorSchemeScript, MantineProvider } from '@mantine/core';
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -19,7 +23,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <head>
+        <ColorSchemeScript />
+      </head>
+      <body className={inter.className}><MantineProvider>{children}</MantineProvider></body>
     </html>
   );
 }
diff --git a/client/app/loading.tsx b/client/app/loading.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const LoadingPage = () => {
+  return (
+    <div className="fixed inset-0  flex items-center justify-center bg-white z-50">
+      <div className="flex flex-col items-center justify-center gap-4">
+        <img src={"logoBlack.png"} alt="logo" className="mb-4 w-32 h-32 mx-auto" />
+        <div className="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-16 w-16 mb-4">            
+        </div>
+        <h2 className="text-2xl font-semibold text-gray-900">EcoSync is loading...</h2>
+      </div>
+    </div>
+  );
+};
+
+export default LoadingPage;
diff --git a/client/app/maps/page.tsx b/client/app/maps/page.tsx
@@ -1,11 +1,20 @@
 "use client";
+import { AllStsMapShow } from '@/components/maps/AllStsShow';
 import GoogleMapComponent from '@/components/maps/GoogleMap'
 import RouteMap from '@/components/maps/RouteMap';
 import SetZone from '@/components/maps/SetZone';
 import { ChakraProvider, theme } from '@chakra-ui/react'
 
+type StsShow = {
+
+  lat: number,
+  lng: number,
+  // storagePercentage: number
+
+};
+
 const Map = () => {
-    const coordinates = [
+    const coordinates : StsShow[] = [
         { lat: 23.7031879, lng: 90.35564201 },
         { lat: 23.6856870, lng: 90.44630134 },
         { lat: 23.6843407, lng: 90.56538359 },
@@ -20,9 +29,10 @@ const Map = () => {
     <div className='w-full h-screen'>
         {/* <GoogleMapComponent coordinates={coordinates} dumpFills={dumpFills}></GoogleMapComponent> */}
        {/* <SetZone></SetZone> */}
-       <ChakraProvider theme={theme}>
+       {/* <ChakraProvider theme={theme}>
       <RouteMap/>
-    </ChakraProvider>
+    </ChakraProvider> */}
+    <AllStsMapShow />
     </div>
 
   )