Title: Enhancements and Feature Additions for a Seamless BikeHub Expe…

…rience - update admin profile pic and name - update admin color for charts - make login for admin as form, to press enter to login - add new api endpoint : - get /bikes/park/:parkId?/:status?/:limit? - get /bikes/status/:status/:limit? - get parks/open && get parks/closed - update avatar image to fetch it from database - update env cors_allow with port 3002 - update data scheme with bike and rental ondelete cascade - update prisma seed logic and add new images - fix header and footer links to take u to the section - make button signin/signup background color change depend on current page - add park name to bike model - bike now get image from database - add selector for location choose - make arrow under cards in center, green, hover effect, start/end color gray - change buttonToTop color to light green from grey - update review section with new reviews and picture signin should be home green
nuuxcode · Dec 17, 2023 · 9d71e34 · 9d71e34
1 parent bb96f4e
commit 9d71e34
Show file tree

Hide file tree

Showing 35 changed files with 7,896 additions and 29,757 deletions.
diff --git a/admin/package.json b/admin/package.json
@@ -2,6 +2,31 @@
   "name": "@bike/admin",
   "version": "0.0.1",
   "private": true,
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "pretty": "prettier --write \"./**/*.{js,jsx,json}\""
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "dependencies": {
     "@chakra-ui/hooks": "^2.1.4",
     "@chakra-ui/modal": "^2.2.9",
@@ -29,42 +54,16 @@
     "react-calendar": "^3.9.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
-    "react-router-dom": "^6.4.0",
+    "react-router-dom": "^6.19.0",
     "react-scripts": "5.0.1",
     "react-table": "^7.8.0",
     "tailwindcss-rtl": "^0.9.0",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "pretty": "prettier --write \"./**/*.{js,jsx,json}\""
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/react-calendar": "^3.5.2",
-    "@types/react-router-dom": "^5.3.3",
     "@types/react-table": "^7.7.12",
     "autoprefixer": "^10.4.8",
     "postcss": "^8.4.16",

diff --git a/admin/src/components/navbar/index.tsx b/admin/src/components/navbar/index.tsx
@@ -10,7 +10,7 @@ import {
   IoMdNotificationsOutline,
   IoMdInformationCircleOutline,
 } from "react-icons/io";
-import avatar from "assets/img/avatars/avatar4.png";
+import avatar from "assets/img/avatars/avatar3.png";
 import useAuth from "utils/auth/AuthHook";
 
 const Navbar = (props: {
@@ -20,8 +20,8 @@ const Navbar = (props: {
 }) => {
   const { onOpenSidenav, brandText } = props;
   const [darkmode, setDarkmode] = React.useState(false);
-  const { logOut } = useAuth();
-
+  const { logOut, user } = useAuth();
+  console.log("user", user)
   const handleLogout = () => {
     logOut();
   };
@@ -190,7 +190,7 @@ const Navbar = (props: {
           button={
             <img
               className="h-10 w-10 rounded-full"
-              src={avatar}
+              src={user?.image}
               alt="Elon Musk"
             />
           }
@@ -199,7 +199,7 @@ const Navbar = (props: {
               <div className="ml-4 mt-3">
                 <div className="flex items-center gap-2">
                   <p className="text-sm font-bold text-navy-700 dark:text-white">
-                    👋 Hey,
+                    👋 Hey, {user?.name}
                   </p>{" "}
                 </div>
               </div>

diff --git a/admin/src/utils/auth/AuthProvider.tsx b/admin/src/utils/auth/AuthProvider.tsx
@@ -1,19 +1,35 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import AuthContext from "./AuthContext";
 
 const AuthProvider = ({ children }: any) => {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [user, setUser] = useState(null);
 
-  const logIn = () => {
+  // Load user data from localStorage when the component mounts
+  useEffect(() => {
+    const storedUser = localStorage.getItem('user');
+    if (storedUser) {
+      setUser(JSON.parse(storedUser));
+      setIsAuthenticated(true);
+    }
+  }, []);
+
+  const logIn = (userData: any) => {
     setIsAuthenticated(true);
+    setUser(userData);
+    // Save user data to localStorage
+    localStorage.setItem('user', JSON.stringify(userData));
   };
 
   const logOut = () => {
     setIsAuthenticated(false);
+    setUser(null);
+    // Remove user data from localStorage
+    localStorage.removeItem('user');
   };
 
   return (
-    <AuthContext.Provider value={{ isAuthenticated, logIn, logOut }}>
+    <AuthContext.Provider value={{ isAuthenticated, user, logIn, logOut }}>
       {children}
     </AuthContext.Provider>
   );

diff --git a/admin/src/variables/charts-config.ts b/admin/src/variables/charts-config.ts
@@ -43,12 +43,12 @@ export let BarChartOptionsTopCustomers: (
           [
             {
               offset: 0,
-              color: "#4318FF",
+              color: "#38B2AC",
               opacity: 1,
             },
             {
               offset: 100,
-              color: "rgba(67, 24, 255, 1)",
+              color: "rgba(56, 178, 172, 1)",
               opacity: 0.28,
             },
           ],

diff --git a/admin/src/views/admin/bike/index.tsx b/admin/src/views/admin/bike/index.tsx
@@ -15,7 +15,7 @@ const columnHeaders = [
     title: "Status",
   },
   {
-    id: "price_tier",
+    id: "price",
     title: "Price Tier",
   },
   {

diff --git a/admin/src/views/admin/default/components/BikeTierPie.tsx b/admin/src/views/admin/default/components/BikeTierPie.tsx
@@ -11,7 +11,7 @@ type Bike = {
   status: string;
   lock: boolean;
   location: string;
-  price_tier: string;
+  price: string;
   park_id: number;
   created_at: string;
   updated_at: string;
@@ -52,10 +52,10 @@ const BikeTierPie = () => {
         // Count bikes by price tier
         const bikeCounts: { [priceTier: string]: number } = {};
         bikes.forEach((bike) => {
-          if (bike.price_tier in bikeCounts) {
-            bikeCounts[bike.price_tier]++;
+          if (bike.price in bikeCounts) {
+            bikeCounts[bike.price]++;
           } else {
-            bikeCounts[bike.price_tier] = 1;
+            bikeCounts[bike.price] = 1;
           }
         });
 

diff --git a/admin/src/views/admin/default/components/TopCustomers.tsx b/admin/src/views/admin/default/components/TopCustomers.tsx
@@ -32,14 +32,15 @@ const TopCustomers = () => {
             withCredentials: true,
           }),
         ]);
-        console.log("-response------------")
-        console.log(usersResponse)
-        console.log("-response------------")
-        console.log(rentalsResponse)
+        console.log("-response usersResponse------------")
+        console.log(usersResponse.data)
+        console.log("-response rentalsResponse------------")
+        console.log(rentalsResponse.data)
         console.log("-------------")
         const rentals: Rental[] = rentalsResponse.data;
         const users: User[] = usersResponse.data;
-
+        console.log("rentals", rentals)
+        console.log("users", users)
         // Count rentals by user
         const rentalCounts: { [userId: string]: number } = {};
         rentals.forEach((rental) => {
@@ -49,19 +50,19 @@ const TopCustomers = () => {
             rentalCounts[rental.user_id] = 1;
           }
         });
-
+        console.log("rentalCounts", rentalCounts)
         // Sort users by rental count and take top 5
         const sortedUsers = users
           .sort((a, b) => rentalCounts[b.id] - rentalCounts[a.id])
           .slice(0, 5);
-
+        console.log("sortedUsers", sortedUsers)
         const chartDataTransform = {
           name: "Rents Count",
           data: sortedUsers.map((user) => rentalCounts[user.id]),
         };
-
+        console.log("chartDataTransform", chartDataTransform)
         const customerNames = sortedUsers.map((user) => user.name);
-
+        console.log(sortedUsers)
         setChartData([chartDataTransform]);
         setCustomerNames(customerNames);
       } catch (error) {

diff --git a/admin/src/views/auth/SignIn.tsx b/admin/src/views/auth/SignIn.tsx
@@ -11,7 +11,8 @@ export default function SignIn() {
   const navigate = useNavigate();
   const { logIn } = useAuth();
 
-  const handleLogin = async () => {
+  const handleLogin = async (event: React.FormEvent) => {
+    event.preventDefault(); // Prevent the form from refreshing the page
     console.log(process.env.REACT_APP_API_URL);
     const response = await fetch(
       `${process.env.REACT_APP_API_URL}auth/login`,
@@ -26,7 +27,8 @@ export default function SignIn() {
     const data = await response.json();
 
     if (data?.user?.role === "admin") {
-      logIn();
+      console.log("data.user", data.user)
+      logIn(data.user);
       navigate("/admin");
     } else if (data?.user?.role === "user") {
       setError("This page only for admins");
@@ -45,45 +47,47 @@ export default function SignIn() {
         <p className="mb-9 ml-1 text-base text-gray-600">
           Enter your email and password to sign in!
         </p>
-        {/* Email */}
-        <InputField
-          variant="auth"
-          extra="mb-3"
-          label="Email*"
-          placeholder="mail@gmail.com"
-          id="email"
-          type="text"
-          value={email}
-          onChange={(e: any) => setEmail(e.target.value)}
-        />
+        <form onSubmit={handleLogin}>
+          {/* Email */}
+          <InputField
+            variant="auth"
+            extra="mb-3"
+            label="Email*"
+            placeholder="mail@gmail.com"
+            id="email"
+            type="text"
+            value={email}
+            onChange={(e: any) => setEmail(e.target.value)}
+          />
 
-        {/* Password */}
-        <InputField
-          variant="auth"
-          extra="mb-3"
-          label="Password*"
-          placeholder="Min. 8 characters"
-          id="password"
-          type="password"
-          value={password}
-          onChange={(e: any) => setPassword(e.target.value)}
-        />
-        {/* Checkbox */}
-        <div className="mb-4 flex items-center justify-between px-2">
-          <div className="flex items-center">
-            <Checkbox />
-            <p className="ml-2 text-sm font-medium text-navy-700 dark:text-white">
-              Keep me logged In
-            </p>
+          {/* Password */}
+          <InputField
+            variant="auth"
+            extra="mb-3"
+            label="Password*"
+            placeholder="Min. 8 characters"
+            id="password"
+            type="password"
+            value={password}
+            onChange={(e: any) => setPassword(e.target.value)}
+          />
+          {/* Checkbox */}
+          <div className="mb-4 flex items-center justify-between px-2">
+            <div className="flex items-center">
+              <Checkbox />
+              <p className="ml-2 text-sm font-medium text-navy-700 dark:text-white">
+                Keep me logged In
+              </p>
+            </div>
           </div>
-        </div>
-        {error && <div className="text-center text-red-500">{error}</div>}
-        <button
-          onClick={handleLogin}
-          className="linear mt-2 w-full rounded-xl bg-teal-600 py-[12px] text-base font-medium text-white transition duration-200 hover:bg-teal-600 active:bg-teal-700 dark:bg-teal-400 dark:text-white dark:hover:bg-teal-300 dark:active:bg-teal-200"
-        >
-          Sign In
-        </button>
+          {error && <div className="text-center text-red-500">{error}</div>}
+          <button
+            onClick={handleLogin}
+            className="linear mt-2 w-full rounded-xl bg-teal-600 py-[12px] text-base font-medium text-white transition duration-200 hover:bg-teal-600 active:bg-teal-700 dark:bg-teal-400 dark:text-white dark:hover:bg-teal-300 dark:active:bg-teal-200"
+          >
+            Sign In
+          </button>
+        </form>
         {/* <div className="mt-4">
           <span className=" text-sm font-medium text-navy-700 dark:text-gray-600">
             Not registered yet?