🔀 Update (#94)

* UI fixed * progress bar update * UI fixed * Status Update * 🔥 Admin Login Update --------- Co-authored-by: ishara <160392609+ish-2000@users.noreply.github.com>
nmdra · Oct 11, 2024 · 69a1432 · 69a1432
1 parent 190a587
commit 69a1432
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 79 deletions.
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -213,20 +213,37 @@ const router = createBrowserRouter(
 
             {/* delivery and driver Routes */}
             <Route path="/" element={<DLayout />}>
+                 <Route path="/manager" element={<AdminLogin manager={true} />} />
+                <Route element={<StaffPrivateRoute manager={true} />}>
+                    <Route
+                        path="/manager/approve-driver"
+                        element={<DLApproveDriver />}
+                    />
+                    <Route
+                        path="/manager/approve-driver/:id"
+                        element={<DLDriverAccept />}
+                    />
+                    {/*<Route path="/manager/approve-driver/:id/send-email" element={<DLSendEmail />} />*/}
+                    <Route path="/alldrivers" element={<DLALLdrivers />} />
+                    <Route
+                        path="/manager/dashboard"
+                        element={<DLmanageDash />}
+                    />
+                    <Route
+                        path="/manager/view-driver/:id"
+                        element={<DLViewDriver />}
+                    />
+
+                    <Route
+                        path="/manager/delivery/:id"
+                        element={<DLViewDelivery />}
+                    />
+                </Route>
                 <Route
                     path="/register-driver"
                     element={<DLDriverRegistrationForm />}
                 />
                 <Route path="/upload-image" element={<DLImageUpload />} />
-                <Route
-                    path="/manager/approve-driver"
-                    element={<DLApproveDriver />}
-                />
-                <Route
-                    path="/manager/approve-driver/:id"
-                    element={<DLDriverAccept />}
-                />
-                {/*<Route path="/manager/approve-driver/:id/send-email" element={<DLSendEmail />} />*/}
                 <Route path="/driver/login" element={<DLLogin />} />{' '}
                 {/* Driver Login Route */}
                 <Route
@@ -239,22 +256,12 @@ const router = createBrowserRouter(
                     path="/driver/profile/edit"
                     element={<DLEditProfile />}
                 />
-                <Route path="/alldrivers" element={<DLALLdrivers />} />
-                <Route path="/manager/dashboard" element={<DLmanageDash />} />
-                <Route
-                    path="/manager/view-driver/:id"
-                    element={<DLViewDriver />}
-                />
                 <Route path="/driver/logout" element={<DLlogout />} />
                 <Route path="/driver/edit/:id" element={<DLeditdriver />} />
                 <Route path="/a" element={<OrderForm />} />
                 <Route path="/b" element={<OrderTable />} />
                 <Route path="/d" element={<Od />} />
                 <Route path="/DLAllDeliveries" element={<DLAllDeliveries />} />
-                <Route
-                    path="/manager/delivery/:id"
-                    element={<DLViewDelivery />}
-                />
                 <Route path="/ongoing" element={<OngoingDelivery />} />
                 <Route
                     path="/driver/delivery/:id"

diff --git a/frontend/src/Components/Admin/AstaffPrivateRoute.jsx b/frontend/src/Components/Admin/AstaffPrivateRoute.jsx
@@ -1,13 +1,19 @@
-import { Navigate, Outlet } from 'react-router-dom'
+import { Navigate, Outlet } from 'react-router-dom';
 
-const StaffPrivateRoute = () => {
-    // Check if user is authenticated (e.g., by checking for a token in local storage)
-    const staff = localStorage.getItem('staffToken') // Replace with your actual logic
+const StaffPrivateRoute = ({ manager }) => { // Destructure manager from props
+    // Check if the user is authenticated by checking for a token in local storage
+    const staff = localStorage.getItem('staffToken'); // Replace with your actual logic
 
     // Log the user state for debugging
-    console.log(staff)
+    console.log(staff);
 
-    return staff ? <Outlet /> : <Navigate to="/Admin" replace />
-}
+    // If staff token exists and manager prop is true, redirect to /manager
+    if (manager) {
+        return staff ? <Outlet /> : <Navigate to="/manager" replace />;
+    }
 
-export default StaffPrivateRoute
+    // If staff token exists, render the Outlet, otherwise navigate to /Admin
+    return staff ? <Outlet /> : <Navigate to="/Admin" replace />;
+};
+
+export default StaffPrivateRoute;
diff --git a/frontend/src/Components/Admin/admnlogins.jsx b/frontend/src/Components/Admin/admnlogins.jsx
@@ -1,14 +1,14 @@
-import React, { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { ToastContainer, toast } from 'react-toastify'
-import 'react-toastify/dist/ReactToastify.css'
-import farmcartLogo from '../../assets/logo.png' // Update with correct path if needed
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import farmcartLogo from '../../assets/logo.png'; // Update with correct path if needed
 
-const AdminLogin = () => {
-    const navigate = useNavigate()
-    const [email, setEmail] = useState('')
-    const [password, setPassword] = useState('')
-    const [error, setError] = useState('')
+const AdminLogin = ({ manager }) => { // Receive the manager prop
+    const navigate = useNavigate();
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
 
     // Hardcoded usernames and passwords for three users
     const users = [
@@ -24,30 +24,35 @@ const AdminLogin = () => {
             email: 'admin3@example.com',
             password: 'securePass',
         },
-    ]
+    ];
 
     // Login handler
     const handleLogin = (e) => {
-        e.preventDefault()
+        e.preventDefault();
 
         // Find matching user from the list
         const user = users.find(
             (user) => user.email === email && user.password === password
-        )
+        );
 
         if (user) {
-            // If user exists, save token and navigate to /Admin
-            const token =
-                'd0ahfFiO0dPMd1StZ0W7fqYhxxuIJYtEDXgi6t39Pp2J2qaWyfcFT0gJKO3iT6pz' // Replace with actual token logic
-            localStorage.setItem('staffToken', token) // Save token in local storage
-            navigate('/admindashboard')
-            toast.success('Login successful!')
+            // If user exists, save token and navigate based on manager prop
+            const token = 'd0ahfFiO0dPMd1StZ0W7fqYhxxuIJYtEDXgi6t39Pp2J2qaWyfcFT0gJKO3iT6pz'; // Replace with actual token logic
+            localStorage.setItem('staffToken', token); // Save token in local storage
+
+            // Navigate based on the manager prop
+            if (manager) {
+                navigate('/manager/dashboard');
+            } else {
+                navigate('/admindashboard');
+            }
+            toast.success('Login successful!');
         } else {
             // If no match, show error message
-            setError('Invalid email or password.')
-            toast.error('Invalid email or password.')
+            setError('Invalid email or password.');
+            toast.error('Invalid email or password.');
         }
-    }
+    };
 
     return (
         <div className="min-h-screen flex items-center justify-center bg-gray-100">
@@ -77,10 +82,7 @@ const AdminLogin = () => {
                         />
                     </div>
                     <div className="mb-6">
-                        <label
-                            htmlFor="password"
-                            className="block text-gray-700"
-                        >
+                        <label htmlFor="password" className="block text-gray-700">
                             Password
                         </label>
                         <input
@@ -103,7 +105,7 @@ const AdminLogin = () => {
                 </form>
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default AdminLogin
+export default AdminLogin;
diff --git a/frontend/src/Components/Order/ProgressBar.jsx b/frontend/src/Components/Order/ProgressBar.jsx
@@ -2,16 +2,16 @@ import React from 'react'
 import { FaShoppingCart, FaShippingFast, FaCheckCircle } from 'react-icons/fa'
 
 const ProgressBar = ({ currentStep }) => {
-    const totalSteps = 3
-
+    const totalSteps = 3 
+    
     const icons = [
         <FaShoppingCart key="cart" />,
         <FaShippingFast key="shipping" />,
-        <FaCheckCircle key="done" />,
+        <FaCheckCircle key="done" />, 
     ]
 
     return (
-        <div className="flex items-center justify-center mt-3 mb-0">
+        <div className="flex items-center justify-center mt-3 mb-0 ">
             {Array.from({ length: totalSteps }, (_, index) => (
                 <div key={index} className="flex items-center">
                     <div

diff --git a/frontend/src/Pages/Shop/ProductPage.jsx b/frontend/src/Pages/Shop/ProductPage.jsx
@@ -204,12 +204,6 @@ const ProductPage = ({ onAddToCart }) => {
                     <p class="text-xs text-gray-500 mt-2">- Chathura milan</p>
                 </div>
             </div>
-
-            <div class="ml-10 p-4">
-                <button class="bg-yellow-500 ml-6 text-white font-semibold py-2 px-4 rounded-lg shadow-sm hover:bg-yellow-600 transition-colors duration-300">
-                    See More Reviews
-                </button>
-            </div>
         </section>
     )
 }

diff --git a/frontend/src/Pages/Shop/ShopList.jsx b/frontend/src/Pages/Shop/ShopList.jsx
@@ -118,10 +118,11 @@ const ShopList = () => {
                     {/* Search Bar */}
                     <input
                         type="text"
-                        placeholder="Search shops..."
+                        placeholder="   Search shops..."
                         value={searchTerm}
                         onChange={(e) => setSearchTerm(e.target.value)}
-                        className="mb-5 border border-gray-300 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
+                        className="mb-5 border border-gray-300 rounded-full p-2 w-full hover:border-green-500 focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 transition duration-200"
+
                     />
 
                     {/* Loading Message */}

diff --git a/frontend/src/Pages/Shop/ShopPage.jsx b/frontend/src/Pages/Shop/ShopPage.jsx
@@ -69,10 +69,10 @@ const ShopPage = () => {
                 <div className="product-search mb-6 w-2/4">
                     <input
                         type="text"
-                        placeholder="Search products..."
+                        placeholder=" Search products..."
                         value={searchTerm}
                         onChange={handleSearch}
-                        className="border border-gray-300 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
+                        className="border border-gray-300 rounded-full p-2 w-full hover:border-green-500 focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 transition duration-200"
                     />
                 </div>
 

diff --git a/frontend/src/Pages/farmer/FarmerDashboard.jsx b/frontend/src/Pages/farmer/FarmerDashboard.jsx
@@ -337,6 +337,8 @@ const Dashboard = () => {
                                     placeholder="Search orders..."
                                     startContent={<IoSearch />}
                                     onChange={(e) => setSearch(e.target.value)}
+                                    className="border border-gray-50 hover:border-green-500 focus:border-green-500 focus:outline-none transition duration-200 rounded-full"
+
                                 />
                             </div>
                             <div
@@ -453,6 +455,9 @@ const Dashboard = () => {
                                                 <option value="Accept">
                                                     Accept
                                                 </option>
+                                                <option value="Rejected">
+                                                    Rejected
+                                                </option>
                                                 <option value="Ready">
                                                     Ready
                                                 </option>
@@ -465,9 +470,6 @@ const Dashboard = () => {
                                                 <option value="Delivered">
                                                     Delivered
                                                 </option>
-                                                <option value="Rejected">
-                                                    Rejected
-                                                </option>
                                             </select>
                                         </TableCell>
                                         <TableCell className="flex gap-6 justify-center items-center h-16">

diff --git a/frontend/src/Pages/order/Cart.jsx b/frontend/src/Pages/order/Cart.jsx
@@ -82,8 +82,10 @@ const Cart = () => {
     return (
         <div>
             <ProgressBar currentStep={1} />
-            <section className="bg-white py-2 md:py-4 antialiased">
-                <div className="mx-auto max-w-screen-xl px-4 2xl:px-0 border-gray-300 mb-2 ml-10 p-4 bg-gray-100 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
+           <section className="bg-white py-2 md:py-4 antialiased">
+           <div className="mx-auto max-w-screen-xl px-4 2xl:px-0 border-gray-300 mb-2 ml-10 p-4 bg-gray-50 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
+
+
                     <h2 className="text-xl font-semibold text-gray-900  sm:text-2xl">
                         My Shopping Cart
                     </h2>

diff --git a/frontend/src/Pages/order/DeleteOrder.jsx b/frontend/src/Pages/order/DeleteOrder.jsx
@@ -37,7 +37,7 @@ const DeleteOrder = ({
                                 Close
                             </Button>
                             <Button
-                                color="primary"
+                                className={`bg-green-500 hover:bg-green-600 text-white`}
                                 disabled={!orderId}
                                 onClick={async () => {
                                     if (orderId) {

diff --git a/frontend/src/Pages/order/OrderDetailsModal.jsx b/frontend/src/Pages/order/OrderDetailsModal.jsx
@@ -18,14 +18,14 @@ const OrderDetailsModal = ({ isOpen, onOpenChange, clickOrder }) => {
             <ModalContent>
                 {(onClose) => (
                     <>
-                        {/* Modal Header */}
+                        {/* Order modal Header */}
                         <ModalHeader className="flex flex-col gap-1 text-center">
                             <h4 className="text-xl font-bold text-gray-800">
                                 Order Details
                             </h4>
                         </ModalHeader>
 
-                        {/* Modal Body */}
+                        {/* Oeder modal Body */}
                         <ModalBody>
                             <div className="max-w-lg mx-auto bg-gray-50 p-6 rounded-lg shadow-sm">
                                 <div className="mb-2">

diff --git a/frontend/src/Pages/order/checkOut.jsx b/frontend/src/Pages/order/checkOut.jsx
@@ -301,7 +301,7 @@ const CheckOut = () => {
                         <div className=" flex justify-center items-center p-10 ">
                             <div className=" w-[600px]">
                                 <form className="flex flex-col gap-2">
-                                    <div className="flex gap-3">
+                                    <div className="flex gap-3 ">
                                         <Input
                                             label="Your name"
                                             placeholder="Enter your name"