Merge pull request #50 from Life-Pill/dev-test-frontend

Fixing and Enhancing Authentication Flow

src/App.tsx

@@ -10,10 +10,7 @@ import {
   ViewCashier,
 } from './features/cashier-management';
 import ErrorRoutePage from './pages/error-route-page';
-import {
-  AddItems,
-  UpdateItems,
-} from './features/items-management';
+import { AddItems, UpdateItems } from './features/items-management';
 import MainDashboard from './features/manager-dashboard';
 import { useUserContext } from './context/UserContext';
 import ViewItem from './features/items-management/layout/ViewItem';

src/features/cashier-dashboard/components/sidebar/CashierSideBar.tsx

@@ -6,15 +6,20 @@ import { IoIosFitness } from 'react-icons/io';
 import { PiFirstAidKit } from 'react-icons/pi';
 import { CiMedicalClipboard } from 'react-icons/ci';
 import ButtonWithIconAndTextVertical from '../../../../shared/buttons/ButtonWithIconAndTextVertical';
+import { RiLogoutCircleLine } from 'react-icons/ri';
+import useAuthService from '../../services/AuthService';
+import { BiTimeFive } from 'react-icons/bi';
 
 type Props = {
   //pass setactivetable
   setActiveTable: Dispatch<string>;
 };
 
 const CashierSideBar = (props: Props) => {
+  const { logOutCashier, logging, temporaryLogOutCashier, temporayLogout } =
+    useAuthService();
   return (
-    <div className='left-0 max-w-24 p-4 font-poppins flex flex-col'>
+    <div className='left-0 max-w-24 p-4 font-poppins flex flex-col relative'>
       <ButtonWithIconAndTextVertical
         icon={<PiSyringeLight size={25} />}
         text='Medical Devices'
@@ -51,6 +56,21 @@ const CashierSideBar = (props: Props) => {
         onClick={() => props.setActiveTable('nutrition')}
         testid='nutrition'
       />
+
+      <div className='absolute bottom-4 right-4'>
+        <ButtonWithIconAndTextVertical
+          icon={<BiTimeFive size={25} />}
+          text={temporayLogout ? 'Wait ...' : 'Temoprary LogOut'}
+          onClick={temporaryLogOutCashier}
+          testid='test'
+        />
+        <ButtonWithIconAndTextVertical
+          icon={<RiLogoutCircleLine size={25} />}
+          text={logging ? 'Wait ...' : 'LogOut'}
+          onClick={logOutCashier}
+          testid='testtemporary'
+        />
+      </div>
     </div>
   );
 };

src/features/cashier-dashboard/index.tsx

@@ -1 +1,4 @@
 export {};
+//
+//
+//

src/features/cashier-dashboard/services/AuthService.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { useUserContext } from '../../../context/UserContext';
+import useAxiosInstance from '../../login/services/useAxiosInstance';
+import { toast } from 'react-toastify';
+import { useNavigate } from 'react-router-dom';
+
+const useAuthService = () => {
+  const user = useUserContext();
+  const http = useAxiosInstance();
+  const [logging, setLogging] = useState<boolean>();
+  const navigate = useNavigate();
+
+  const logOutCashier = async () => {
+    const confirm = window.confirm('Are you sure log out ?');
+
+    if (confirm) {
+      try {
+        setLogging(true);
+        const res = await http.post('/session/logout/permanent', {
+          username: user.user?.employerEmail,
+        });
+
+        if (res.status === 200) {
+          toast.success('Logged out successfully');
+          navigate('/');
+          // Remove user data from local storage
+          localStorage.removeItem('user');
+        }
+      } catch (error) {
+        console.log(error);
+      } finally {
+        setLogging(false);
+      }
+    }
+  };
+
+  const [temporayLogout, setTemporaryLogout] = useState<boolean>();
+  const temporaryLogOutCashier = async () => {
+    const confirm = window.confirm('Are you sure log out ?');
+
+    if (confirm) {
+      try {
+        setTemporaryLogout(true);
+        const res = await http.post('/session/logout/temporary', {
+          username: user.user?.employerEmail,
+        });
+
+        if (res.status === 200) {
+          toast.success('Logged out successfully');
+          navigate('/temporary-logout');
+        }
+      } catch (error) {
+        console.log(error);
+      } finally {
+        setTemporaryLogout(false);
+      }
+    }
+  };
+
+  return {
+    logOutCashier,
+    logging,
+    temporaryLogOutCashier,
+    temporayLogout,
+  };
+};
+
+export default useAuthService;

src/features/items-management/services/ItemUpdateService.tsx

@@ -47,7 +47,8 @@ const useItemUpdateService = () => {
   const navigate = useNavigate();
   const fetchItemById = async (id: number) => {
     try {
-      const res = await http.get(`/item/get-item-details-by-id/${id}`);
+      const res = await http.get(`/item/get-item-all-details-by-id-old/${id}`);
+      console.log(res);
       const data = mapResponseToItemDTO(res.data);
       console.log(data);
       console.log('data', data);

src/features/login/components/RecentCashier.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
+import { useUserContext } from '../../../context/UserContext';
 
 type Props = {};
 
 const RecentCashier = (props: Props) => {
+  const user = useUserContext();
+
   return (
     <div className='flex items-center justify-center space-x-4 m-8 p-8'>
       {/* Image */}
@@ -15,9 +18,12 @@ const RecentCashier = (props: Props) => {
       </div>
       {/* Details */}
       <div>
-        <p className='font-bold text-3xl'>Cashier-001</p>
+        <p className='font-bold text-3xl'>Cashier-{user.user?.employerId}</p>
         <p className='text-lg'>
-          Logged in as - <span className='font-bold'>Ruwani Manchanayaka</span>
+          Logged in as -{' '}
+          <span className='font-bold'>
+            {user.user?.employerFirstName} {user.user?.employerLastName}
+          </span>
         </p>
       </div>
     </div>

src/features/login/services/AuthService.tsx

@@ -6,7 +6,7 @@ import useAxiosInstance from './useAxiosInstance';
 
 const useSignIn = () => {
   const [loading, setLoading] = useState(false);
-  const { setCookie } = useUserContext(); // Assuming you have a setUser function in your context for setting user data
+  const { setCookie, setUser } = useUserContext(); // Assuming you have a setUser function in your context for setting user data
   const http = useAxiosInstance();
 
   const signIn = async (
@@ -29,7 +29,9 @@ const useSignIn = () => {
         const employee = mapEmployeeReponseToIEmployee(
           res.data.employerDetails
         );
+
         console.log(employee);
+        localStorage.setItem('user', JSON.stringify(employee));
 
         // Set user data or store cookie if needed
         setCookie(res.data.authenticationResponse.access_token);

src/features/manager-dashboard/components/items/ItemsManagementWindow.tsx

@@ -36,7 +36,7 @@ const ItemsManagementWindow = () => {
   ).toFixed(2);
 
   return (
-    <div className='flex flex-col' data-testid='items-management-window'>
+    <div className=' flex flex-col' data-testid='items-management-window'>
       {/* buttons */}
 
       {/* Summary Cards */}
@@ -82,9 +82,9 @@ const ItemsManagementWindow = () => {
           onChange={(e) => handleSearch(e.target.value)}
         />
       </div>
-      <div className='overflow-y-auto max-h-[500px]'>
+      <div className='overflow-y-auto max-h-[450px]'>
         <div className='relative'>
-          <table className='w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400'>
+          <table className='w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 '>
             <thead className='text-xs uppercase bg-slate-300 sticky top-0'>
               <tr>
                 <th scope='col' className='px-6 py-3'>

src/features/manager-dashboard/components/sidebar/ManagerSidebar.tsx

@@ -6,15 +6,18 @@ import { FaRegKeyboard } from 'react-icons/fa';
 import { PiNoteLight } from 'react-icons/pi';
 import { RxDashboard } from 'react-icons/rx';
 import { AiOutlineBranches } from 'react-icons/ai';
+import { RiLogoutCircleLine } from 'react-icons/ri'; // Import the logout icon
+import useAuthService from '../../services/AuthService';
 
 type Props = {
   onItemClick: (itemName: string) => void;
 };
 
 const ManagerSidebar = ({ onItemClick }: Props) => {
+  const { logOut, logging } = useAuthService();
   return (
     <div
-      className='left-0 max-w-24 p-4 font-poppins flex flex-col'
+      className='left-0 max-w-24 p-4 font-poppins flex flex-col relative'
       data-testid='cypress-manager-sidebar'
     >
       <ButtonWithIconAndTextVertical
@@ -59,6 +62,15 @@ const ManagerSidebar = ({ onItemClick }: Props) => {
         onClick={() => onItemClick('Orders')}
         testid='orders'
       />
+      {/* Logout Button */}
+      <div className='absolute bottom-4 left-auto w-full'>
+        <ButtonWithIconAndTextVertical
+          icon={<RiLogoutCircleLine size={25} />} // Use the logout icon
+          text={logging ? 'Logging Out' : 'LogOut'}
+          onClick={logOut} // Implement logout functionality here
+          testid='logout'
+        />
+      </div>
     </div>
   );
 };

src/features/manager-dashboard/layout/MainDashboard.tsx

@@ -45,7 +45,7 @@ const MainDashboard = () => {
       <ManagerNavbar />
       <div className='flex flex-row'>
         <ManagerSidebar onItemClick={handleItemClick} />
-        <div className='flex flex-col w-full p-4 font-poppins'>
+        <div className='flex flex-col w-full p-4 font-poppins scroll-mb-8'>
           {renderSelectedItem()}
         </div>
       </div>

src/features/manager-dashboard/services/AuthService.tsx

@@ -0,0 +1,40 @@
+import { useNavigate } from 'react-router-dom';
+import { useUserContext } from '../../../context/UserContext';
+import useAxiosInstance from '../../login/services/useAxiosInstance';
+import { toast } from 'react-toastify';
+import { useState } from 'react';
+
+const useAuthService = () => {
+  const http = useAxiosInstance();
+  const user = useUserContext();
+  const navigate = useNavigate();
+  const [logging, setLogging] = useState<boolean>();
+
+  const logOut = async () => {
+    // Prompt for confirmation before logging out
+    const confirmed = window.confirm('Are you sure you want to log out?');
+    if (!confirmed) return; // If user cancels logout, do nothing
+
+    try {
+      setLogging(true);
+      const res = await http.post('session/logout/permanent', {
+        user: user.user?.employerEmail,
+      });
+
+      if (res.status === 200) {
+        toast.success('Successfully logged out');
+        navigate('/');
+        // Remove user data from local storage
+        localStorage.removeItem('user');
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLogging(false);
+    }
+  };
+
+  return { logOut, logging };
+};
+
+export default useAuthService;

src/features/order-management/layouts/OrderManagementWindow.tsx

@@ -45,7 +45,7 @@ function OrderManagementWindow({}: Props) {
   };
 
   return (
-    <div className='max-h-screen overflow-y-scroll'>
+    <div className='max-h-screen overflow-y-scroll pb-36'>
       <div className='bg-white flex flex-wrap items-center space-x-4 justify-between'>
         <div className='flex items-center'>
           <label htmlFor='startDate' className='mb-1'>

src/features/order-management/services/OrderManagementService.tsx

@@ -2,22 +2,23 @@ import { useState } from 'react';
 import useAxiosInstance from '../../login/services/useAxiosInstance';
 import { Order } from '../interfaces/OrderDetails';
 import { filterOrdersByBranch } from '../utils/filterUtils';
+import { useUserContext } from '../../../context/UserContext';
 
 const useOrderManagementService = () => {
   const [loading, setLoading] = useState(false);
   const http = useAxiosInstance();
   const [orderData, setOrderData] = useState<Order[]>();
   const [filteredOrderData, setFilteredOrderData] = useState<Order[]>();
+  const user = useUserContext();
   const fetchOrderData = async () => {
     try {
       setLoading(true);
-      const res = await http.get('/order/getAllOrdersWithDetails');
+      const res = await http.get(
+        `/order/getOrderWithDetailsByBranchId/${user.user?.branchId}`
+      );
       console.log(res.data.data);
       setOrderData(res.data.data);
-      const filtered = orderData?.filter((order) => {
-        filterOrdersByBranch(order, '3');
-      });
-      setFilteredOrderData(filtered);
+      setFilteredOrderData(res.data.data);
     } catch (error) {
       console.log(error);
     } finally {

src/pages/cashier-password-page.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import RecentLogBar from '../features/login/components/RecentLogBar';
 import NumberPad from '../shared/cashier_login_numberpad/NumberPad';
 import { useNavigate } from 'react-router-dom';
+import useAuthenticationService from '../services/AuthenticationService';
 
 const LogInCashierPasswordPage = () => {
   const navigate = useNavigate();
@@ -16,9 +17,8 @@ const LogInCashierPasswordPage = () => {
       setPin((prevPin) => prevPin + key);
     }
   };
-  const navigateToCashierDashBoard = () => {
-    navigate('/cashier-dashboard');
-  };
+  const { logInUsingPin, log, logOut, logging } = useAuthenticationService();
+
   return (
     <div className='flex items-center justify-center flex-col h-screen space-y-4'>
       <RecentLogBar />
@@ -36,15 +36,19 @@ const LogInCashierPasswordPage = () => {
       </div>
       <button
         className='signup_button w-64 border border-solid border-blueDarker rounded-full'
-        onClick={navigateToCashierDashBoard}
+        onClick={() => logInUsingPin(pin)}
       >
-        Unlock
+        {log ? 'Wait ...' : 'Unlock'}
       </button>
-      <button className='login_button text-center w-64 border border-solid border-blueDarker'>
-        LogIn / LogOut
+      <button
+        className='login_button text-center w-64 border border-solid border-blueDarker'
+        onClick={logOut}
+      >
+        {logging ? 'Wait...' : 'LogOut'}
       </button>
     </div>
   );
 };
 
 export default LogInCashierPasswordPage;
+//

src/pages/temporary-logout-page.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import DateAndClock from '../shared/clock/DateAndClock';
 import RecentCashier from '../features/login/components/RecentCashier';
 import { useNavigate } from 'react-router-dom';
+import { useUserContext } from '../context/UserContext';
 
 type Props = {};