definecoder · codermehraj · Mar 29, 2024 · Mar 28, 2024 · Mar 28, 2024 · Mar 28, 2024
diff --git a/client/app/profile/[userId]/page.tsx b/client/app/profile/[userId]/page.tsx
@@ -1,39 +1,176 @@
 "use client";
+import BackgroundComponent from "@/components/profile/backgroundComp";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import useGetUserProfile from "@/hooks/user_data/useGetUserProfile";
 import { PersonIcon } from "@radix-ui/react-icons";
 import { useParams } from "next/navigation";
 import { useRouter } from "next/navigation";
+import { EditIcon, Factory, CircleUser } from "lucide-react";
+import {useEffect, useState} from "react";
+import { ProfileEditModal } from "@/components/modals/ProfileEditModal";
+import useGetAllRole from "@/hooks/user_data/useGetAllRole";
+
+type RolesWithPermisson = {
+  id: string;
+  name: string;
+  permissions: [{
+    name: string;
+    description: string;
+}]
+};
+
 
 export default function ProfilePage() {
-  const userId = useParams().userId.toString();
+
   const router = useRouter();
-  const { userData } = useGetUserProfile(userId);
+  const { user, stsDetails, landfillDetails, getUserDetails} = useGetUserProfile(); // Destructure user and getUserDetails
+  const [role, setRole] = useState<string>("Role Name");
+  // const [permissions, setPermissions] = useState<RolesWithPermisson[]>([]);
+  const RolePlace = 'Station';
+  const { fetchAllRoles, roles, rolesWithPermissions } = useGetAllRole();
+  useEffect(() => {
+    const fetchData = async () => {
+      await getUserDetails();
+      await fetchAllRoles();
+
+      setRole(user.roleName);
+    };
+
+    fetchData();
+
+  }, []);
+
 
   return (
-    <div className="w-screen h-screen flex flex-col items-center justify-center gap-6">
+    <div className="w-screen h-screen ">
+      <BackgroundComponent />
       <Button
         variant="outline"
-        className="w-40"
+        className="absolute top-[40px] m-24 mx-40"
         onClick={() => router.push("/dashboard")}
       >
         Back to Dashboard
       </Button>
-      <div className="border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground p-10 rounded-xl flex flex-col justify-center items-center gap-8">
+      <div className="absolute top-[20px] right-[100px] text-3xl text-white flex">
+      {user.roleName}<CircleUser className="mx-2 h-8 w-8" />
+      </div>
+      <div className="absolute top-[85px] w-4/5 mx-40 my-24  h-4/6 flex ">
+      <div className="h-full w-96 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground p-10 rounded-xl flex flex-col justify-center items-center gap-8">
         <Avatar className="w-24 h-24">
           <AvatarFallback>
             <PersonIcon className="w-3/6 h-3/6" />
           </AvatarFallback>
         </Avatar>
         <h1 className="font-bold text-xl">Profile Page</h1>
         <div className="flex flex-col justify-center items-center">
-          <h1><span className="font-bold">ID: </span>{userId}</h1>
-          <p><span className="font-bold">Email: </span>{userData.email}</p>
-          <p><span className="font-bold">Role: </span>{userData.role}</p>
-          <p><span className="font-bold">Name: </span>{userData.name}</p>
-          <p><span className="font-bold">Assigned Area: </span>{userData.assignedArea}</p>
+          <h1><span className="font-bold">ID: </span></h1>
+          <p><span className="font-bold">Email: </span>{user.email}</p>
+          <p><span className="font-bold">Role: </span>{user.roleName}</p>
+          <p><span className="font-bold">Profile Name: </span>{user.profileName}</p>
+          <p><span className="font-bold">Username: </span>{user.username}</p>
+          <p><span className="font-bold">Role Description: </span>{user.roleDescription}</p>
         </div>
+        <ProfileEditModal profileInfo={user}/>
+
+      </div>
+
+
+      <div className="h-full w-4/6 ml-32 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground p-10 rounded-xl flex flex-col justify-center items-center gap-8">
+
+        <Factory className="w-24 h-24" />
+
+        {user?.roleName === 'STS_MANAGER' && stsDetails?.stsId?.toString().length > 1 &&<div>
+        <div className="font-bold text-2xl mb-4">STS Details</div>
+        <p><span className="font-bold">Id: </span>{stsDetails.stsId}</p>
+          <p><span className="font-bold">STS Name: </span>{stsDetails.stsName}</p>
+          <p><span className="font-bold">Ward Number: </span>{stsDetails.stsWardNumber}</p>
+          <p><span className="font-bold">Capacity: </span>{stsDetails.stsCapacity}</p>
+          <p><span className="font-bold">Current Total Waste: </span>{stsDetails.stsCurrentTotalWaste}</p>
+          <p><span className="font-bold">Coordinate: </span>{stsDetails.stsLatitude}, {stsDetails.stsLongitude}</p>
+
+
+        </div>
+
+        }
+
+{user?.roleName === 'STS_MANAGER' && stsDetails?.stsId?.toString().length < 1 && <div>
+      <div className="font-bold text-2xl my-4">STS Not Assigned</div>
+    Call your admin to assign your STS.
+  </div>
+        }
+{user?.roleName === 'STS_MANAGER' && rolesWithPermissions.some(role => role.name === 'STS_MANAGER') && (
+  <div>
+    <h1><b>STS Manager Permissions:</b></h1>
+    <ul>
+      {rolesWithPermissions
+        .find(role => role.name === 'STS_MANAGER')
+        ?.permissions.map(permission => (
+          <li key={permission.name}>
+            <strong>{permission.name}:</strong> {permission.description}
+          </li>
+        ))}
+    </ul>
+  </div>
+)}
+
+
+      {user?.roleName === 'LAND_MANAGER' && landfillDetails?.landfillId?.toString().length > 1 &&<div>
+        <div className="font-bold text-2xl my-4">Landfill Details </div>
+        <p><span className="font-bold">ID: </span>{landfillDetails.landfillId}</p>
+          <p><span className="font-bold">Landfill Name: </span>{landfillDetails.landFillName}</p>
+          <p><span className="font-bold">Capacity: </span>{landfillDetails.landFillCapacity}</p>
+          <p><span className="font-bold">Current Total Waste: </span>{landfillDetails.landFillCurrentWaste}</p>
+          <p><span className="font-bold">Coordinate: </span>{landfillDetails.landfillLatitude}, {landfillDetails.landFillLongitude}</p>
+        </div>}
+
+        {user?.roleName === 'LAND_MANAGER' && landfillDetails?.landfillId?.toString().length < 1 && (
+             <div>
+                   <div className="font-bold text-2xl my-4">LandFill Not Assigned</div>
+                 Call your admin to assign your Landfill.
+             </div>
+           )}
+
+{user?.roleName === 'LAND_MANAGER' && rolesWithPermissions.some(role => role.name === 'LAND_MANAGER') && (
+  <div>
+    <h1><b>Land Manager Permissions:</b></h1>
+    <ul>
+      {rolesWithPermissions
+        .find(role => role.name === 'LAND_MANAGER')
+        ?.permissions.map(permission => (
+          <li key={permission.name}>
+            <strong>{permission.name}:</strong> {permission.description}
+          </li>
+        ))}
+    </ul>
+  </div>
+)}
+
+        {user?.roleName === 'SYSTEM_ADMIN' && <div>
+        <div className="font-bold text-2xl my-4">Admin</div>
+          <div>You are admin</div>
+        </div>}
+      {user?.roleName !== 'STS_MANAGER' && user?.roleName !== 'LAND_MANAGER' && user?.roleName !== 'SYSTEM_ADMIN' && (
+        <div>Oops! Your role has not assigned yet</div>
+      )}
+
+{user?.roleName === 'SYSTEM_ADMIN' && rolesWithPermissions.some(role => role.name === 'SYSTEM_ADMIN') && (
+  <div>
+    <h1><b>System Admin Permissions:</b></h1>
+    <ul>
+      {rolesWithPermissions
+        .find(role => role.name === 'SYSTEM_ADMIN')
+        ?.permissions.map(permission => (
+          <li key={permission.name}>
+            <strong>{permission.name}:</strong> {permission.description}
+          </li>
+        ))}
+    </ul>
+  </div>
+)}
+
+
+      </div>
       </div>
     </div>
   );

diff --git a/client/components/maps/AllStsShow.tsx b/client/components/maps/AllStsShow.tsx
@@ -2,6 +2,7 @@
 import useGetAllSTS from "@/hooks/stsdata/useGetAllSTS";
 import GoogleMapComponent from "@/components/maps/GoogleMap";
 import * as React from "react";
+import useGetUserProfile from "@/hooks/user_data/useGetUserProfile";
 
 type StsShow = {
     lat: number;
@@ -11,6 +12,7 @@ type StsShow = {
 
 export const AllStsMapShow: React.FC = () => {
     const { getAllSTS, stsCoordinate, storagePercentage } = useGetAllSTS();
+
     const [coordinates, setCoordinates] = React.useState<StsShow[]>([]);    
 
 //     const staticCoordinates: StsShow[] = [
@@ -34,9 +36,11 @@ export const AllStsMapShow: React.FC = () => {
     }, [stsCoordinate]);
 
 
+
     React.useEffect(() => {
         getMapData();
     }, []);    
 
+
     return coordinates && <GoogleMapComponent coordinates={coordinates} dumpFills={storagePercentage} />;
 };
diff --git a/client/components/modals/LandFillVehicleEntryModal.tsx b/client/components/modals/LandFillVehicleEntryModal.tsx
@@ -35,6 +35,11 @@ import useVehicleReleaseFromSTS from "@/hooks/StsDashboard/useVehicleReleaseFrom
 import useUpcomingVehicle from "@/hooks/landFillDashboard/useUpcomingVehiclesList";
 import useTripComplete from "@/hooks/landFillDashboard/useTripComplete";
 
+import DatePicker from "react-datepicker";
+
+import "react-datepicker/dist/react-datepicker.css";
+
+
 type Vehicle = {
   tripId: string;
   weightOfWaste: string;
@@ -62,12 +67,22 @@ export const LandfillVehicleEntryModal = ({
   const [duration, setDuration] = useState<string>("");
   const { TripComplete } = useTripComplete();
 
+
+
+  const [selectedDateTime, setSelectedDateTime] = useState<Date>(new Date());
+
+const handleDateChange = (date: Date) => {
+  setSelectedDateTime(date);
+};
+
+
+
   const handleSaveChanges = async () => {
     try {
       const postEntry = await TripComplete({
         tripId: vehicleInfo.tripId,
         weightOfWaste: weightOfWaste,
-        entryTime: entryTime,
+        entryTime: selectedDateTime.toISOString()//entryTime,
       });
 
       window.location.reload();
@@ -136,13 +151,24 @@ export const LandfillVehicleEntryModal = ({
             <Label htmlFor="capacity" className="text-right">
               LandFill Entry Time
             </Label>
-            <Input
+            {/* <Input
               id="capacity"
               placeholder="1-100"
               className="col-span-3"
               value={entryTime}
               onChange={(e) => setEntryTime(e.target.value)}
-            />
+            /> */}
+             <div className="flex flex-col">
+    {/* Other component content */}
+    <DatePicker
+      selected={selectedDateTime}
+      onChange={handleDateChange}
+      showTimeSelect
+      timeFormat="hh:mm aa"
+      dateFormat="dd/MM/yy hh:mm aa" // Set desired date format
+      locale="en-GB"
+    />
+  </div>
           </div>
         </div>
         <DialogFooter>