From 8c4d503ef6c0eb1e2edcbf0b1ac66019114ab88b Mon Sep 17 00:00:00 2001
From: Tharindu Jayawardhana <tharinduimalka915@gmail.com>
Date: Mon, 24 Jun 2024 19:52:12 +0530
Subject: [PATCH 1/5] added the multiline graph

---
 .../order-card/OrderCardComponent.tsx         | 32 +++++++++++++++++++
 .../services/OnlineOrderService.tsx           | 25 +++++++++++++++
 src/shared/navbar/CashierNavBar.tsx           | 13 +++++++-
 3 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx
 create mode 100644 src/features/cashier-dashboard/services/OnlineOrderService.tsx

diff --git a/src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx b/src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx
new file mode 100644
index 0000000..d3e6921
--- /dev/null
+++ b/src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx
@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+import useOnlineOrderService from '../../services/OnlineOrderService';
+import { useUserContext } from '../../../../context/UserContext';
+
+type Props = {
+  onClose: () => void;
+};
+
+function OrderCardComponent({ onClose }: Props) {
+  const { getOnlineOrders } = useOnlineOrderService();
+
+  useEffect(() => {
+    getOnlineOrders();
+  }, []);
+
+  return (
+    <div className='fixed top-0 left-0 w-full h-full flex justify-center items-center bg-gray bg-opacity-50 z-50 backdrop-blur-sm'>
+      <div className='bg-gray-800 rounded-lg p-6 w-[500px] border border-gray-200'>
+        OrderCardComponent
+        <button
+          type='button'
+          onClick={onClose}
+          className='focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900'
+        >
+          Back
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default OrderCardComponent;
diff --git a/src/features/cashier-dashboard/services/OnlineOrderService.tsx b/src/features/cashier-dashboard/services/OnlineOrderService.tsx
new file mode 100644
index 0000000..c6864ca
--- /dev/null
+++ b/src/features/cashier-dashboard/services/OnlineOrderService.tsx
@@ -0,0 +1,25 @@
+import axios from 'axios';
+import { useUserContext } from '../../../context/UserContext';
+import useAxiosInstance from '../../login/services/useAxiosInstance';
+
+const useOnlineOrderService = () => {
+  const http = useAxiosInstance();
+  const user = useUserContext();
+
+  const getOnlineOrders = async () => {
+    try {
+      const res = await axios.get(
+        `http://localhost:8081/prescriptionOrders/${user.user?.branchId}`
+      );
+      console.log(res);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return {
+    getOnlineOrders,
+  };
+};
+
+export default useOnlineOrderService;
diff --git a/src/shared/navbar/CashierNavBar.tsx b/src/shared/navbar/CashierNavBar.tsx
index 579ffb8..3a54811 100644
--- a/src/shared/navbar/CashierNavBar.tsx
+++ b/src/shared/navbar/CashierNavBar.tsx
@@ -8,9 +8,16 @@ import { LiaHistorySolid } from 'react-icons/lia';
 import { PiDeviceMobileSpeakerThin } from 'react-icons/pi';
 import ProfileNameCard from '../cashier_profile/ProfileNameCard';
 import Divider from '../divider/Divider';
+import { useState } from 'react';
+import OrderCardComponent from '../../features/cashier-dashboard/components/order-card/OrderCardComponent';
 const Logo = require('../../assets/logo/logo.png');
 
 const CashierNavBar = () => {
+  const [showOnlineOrders, setShowOnlineOrders] = useState(false);
+
+  const handleShowOnlineOrders = () => {
+    setShowOnlineOrders(!showOnlineOrders);
+  };
   const handleClick = () => {};
   return (
     <div className='flex items-center justify-between w-full p-2 font-poppins shadow-md'>
@@ -53,13 +60,17 @@ const CashierNavBar = () => {
       <ButtonWithIconAndText
         icon={<PiDeviceMobileSpeakerThin size={20} />}
         text='Online Orders'
-        onClick={handleClick}
+        onClick={handleShowOnlineOrders}
       />
 
       <Divider />
 
       {/* Cashier name,number and profile picture */}
       <ProfileNameCard />
+
+      {showOnlineOrders && (
+        <OrderCardComponent onClose={handleShowOnlineOrders} />
+      )}
     </div>
   );
 };

From dff61c4168332399693cb138ee6f24f44fac1e40 Mon Sep 17 00:00:00 2001
From: Tharindu Jayawardhana <tharinduimalka915@gmail.com>
Date: Wed, 26 Jun 2024 00:45:13 +0530
Subject: [PATCH 2/5] online order component is done

---
 .../order-card/OrderCardComponent.tsx         | 98 ++++++++++++++++---
 .../interfaces/OnlineOrder.tsx                | 11 +++
 .../services/OnlineOrderService.tsx           | 52 +++++++++-
 .../services/BranchService.tsx                |  7 +-
 4 files changed, 149 insertions(+), 19 deletions(-)
 create mode 100644 src/features/cashier-dashboard/interfaces/OnlineOrder.tsx

diff --git a/src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx b/src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx
index d3e6921..06f9bde 100644
--- a/src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx
+++ b/src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx
@@ -1,29 +1,101 @@
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import useOnlineOrderService from '../../services/OnlineOrderService';
-import { useUserContext } from '../../../../context/UserContext';
+import { Loader } from 'lucide-react';
 
 type Props = {
   onClose: () => void;
 };
 
 function OrderCardComponent({ onClose }: Props) {
-  const { getOnlineOrders } = useOnlineOrderService();
+  const {
+    getOnlineOrders,
+    loadingOnlineOrders,
+    onlineOrders,
+    prescriptionImages,
+  } = useOnlineOrderService();
+
+  const [messages, setMessages] = useState<{ [key: string]: string }>({});
 
   useEffect(() => {
     getOnlineOrders();
   }, []);
 
+  const handleAccept = (orderId: string) => {
+    // Handle accept logic here, e.g., updating the order status or making an API call
+    console.log(`Order ${orderId} accepted with message: ${messages[orderId]}`);
+  };
+
+  const handleReject = (orderId: string) => {
+    // Handle reject logic here, e.g., updating the order status or making an API call
+    console.log(`Order ${orderId} rejected with message: ${messages[orderId]}`);
+  };
+
+  const handleMessageChange = (orderId: string, message: string) => {
+    setMessages((prevMessages) => ({
+      ...prevMessages,
+      [orderId]: message,
+    }));
+  };
+
   return (
-    <div className='fixed top-0 left-0 w-full h-full flex justify-center items-center bg-gray bg-opacity-50 z-50 backdrop-blur-sm'>
-      <div className='bg-gray-800 rounded-lg p-6 w-[500px] border border-gray-200'>
-        OrderCardComponent
-        <button
-          type='button'
-          onClick={onClose}
-          className='focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900'
-        >
-          Back
-        </button>
+    <div className='fixed top-0 left-0 w-full h-full flex justify-center items-center bg-gray-900 bg-opacity-75 z-50 backdrop-blur-sm'>
+      <div className='bg-white rounded-lg p-6 w-full border border-gray-200 h-full overflow-auto shadow-lg'>
+        <h2 className='text-2xl font-semibold text-gray-800 mb-4'>
+          Online Orders
+        </h2>
+        {loadingOnlineOrders ? (
+          <div className='flex justify-center items-center h-full'>
+            <Loader className='w-10 h-10 animate-spin' />
+          </div>
+        ) : (
+          onlineOrders.map((order) => (
+            <div key={order.id} className='mb-4 border-b border-gray-300 pb-4'>
+              <div className='flex gap-4'>
+                {prescriptionImages[order.prescriptionId] && (
+                  <img
+                    src={prescriptionImages[order.prescriptionId]}
+                    alt={`Prescription for Order ${order.id}`}
+                    className='w-48 h-auto mb-4 rounded-md'
+                  />
+                )}
+                <textarea
+                  className='w-full p-2 border border-gray-300 rounded-md'
+                  placeholder='Write a message...'
+                  value={messages[order.id] || ''}
+                  onChange={(e) =>
+                    handleMessageChange(order.id, e.target.value)
+                  }
+                />
+              </div>
+              <p className='text-lg font-semibold text-gray-800'>
+                Customer Message:{' '}
+                {order.customerMessage ? order.customerMessage : 'N/A'}
+              </p>
+              <div className='flex justify-end space-x-2 mt-4'>
+                <button
+                  onClick={() => handleAccept(order.id)}
+                  className='bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition duration-300'
+                >
+                  Accept
+                </button>
+                <button
+                  onClick={() => handleReject(order.id)}
+                  className='bg-red text-white px-4 py-2 rounded hover:bg-red-600 transition duration-300'
+                >
+                  Reject
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+        <div className='flex justify-end mt-4'>
+          <button
+            onClick={onClose}
+            className='bg-blue text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300'
+          >
+            Close
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/src/features/cashier-dashboard/interfaces/OnlineOrder.tsx b/src/features/cashier-dashboard/interfaces/OnlineOrder.tsx
new file mode 100644
index 0000000..caf1c0b
--- /dev/null
+++ b/src/features/cashier-dashboard/interfaces/OnlineOrder.tsx
@@ -0,0 +1,11 @@
+export interface OnlineOrder {
+  id: string;
+  customerId: number;
+  prescriptionId: string;
+  prescriptionImageId: string;
+  availablePharmacies: { [key: number]: string };
+  selectedPharmacyId: number;
+  orderStatus: boolean;
+  customerMessage: string;
+  createdOn: string; // LocalDateTime can be represented as a string in ISO format
+}
diff --git a/src/features/cashier-dashboard/services/OnlineOrderService.tsx b/src/features/cashier-dashboard/services/OnlineOrderService.tsx
index c6864ca..f128665 100644
--- a/src/features/cashier-dashboard/services/OnlineOrderService.tsx
+++ b/src/features/cashier-dashboard/services/OnlineOrderService.tsx
@@ -1,24 +1,68 @@
 import axios from 'axios';
 import { useUserContext } from '../../../context/UserContext';
-import useAxiosInstance from '../../login/services/useAxiosInstance';
+import { useState } from 'react';
+import { OnlineOrder } from '../interfaces/OnlineOrder';
 
 const useOnlineOrderService = () => {
-  const http = useAxiosInstance();
   const user = useUserContext();
 
+  const [loadingOnlineOrders, setLoadingOnlineOrders] = useState(false);
+  const [onlineOrders, setOnlineOrders] = useState<OnlineOrder[]>([]);
+  const [prescriptionImages, setPrescriptionImages] = useState<{
+    [key: string]: string;
+  }>({});
+
   const getOnlineOrders = async () => {
     try {
+      setLoadingOnlineOrders(true);
       const res = await axios.get(
-        `http://localhost:8081/prescriptionOrders/${user.user?.branchId}`
+        `http://localhost:8081/prescriptionOrders/myOrders/${user.user?.branchId}`
       );
-      console.log(res);
+      const orders: OnlineOrder[] = res.data;
+      setOnlineOrders(orders);
+      console.log(orders);
+      // Fetch prescription images for each order
+      await fetchPrescriptionImages(orders);
     } catch (error) {
       console.log(error);
+    } finally {
+      setLoadingOnlineOrders(false);
     }
   };
 
+  const fetchPrescriptionImages = async (orders: OnlineOrder[]) => {
+    const imagesPromises = orders.map((order) =>
+      axios
+        .get(
+          `http://localhost:8081/prescriptionImages/${order.prescriptionId}`,
+          {
+            responseType: 'arraybuffer',
+          }
+        )
+        .then((res) => {
+          const base64 = btoa(
+            new Uint8Array(res.data).reduce(
+              (data, byte) => data + String.fromCharCode(byte),
+              ''
+            )
+          );
+          return { [order.prescriptionId]: `data:image/*;base64,${base64}` };
+        })
+    );
+
+    const images = await Promise.all(imagesPromises);
+    const imagesObject = images.reduce(
+      (acc, image) => ({ ...acc, ...image }),
+      {}
+    );
+    setPrescriptionImages(imagesObject);
+  };
+
   return {
     getOnlineOrders,
+    loadingOnlineOrders,
+    onlineOrders,
+    prescriptionImages, // Return prescription images from the hook
   };
 };
 
diff --git a/src/features/manager-dashboard/services/BranchService.tsx b/src/features/manager-dashboard/services/BranchService.tsx
index c034de5..f9c59fd 100644
--- a/src/features/manager-dashboard/services/BranchService.tsx
+++ b/src/features/manager-dashboard/services/BranchService.tsx
@@ -8,13 +8,16 @@ const UseBranchService = () => {
   const http = useAxiosInstance();
   const [branchData, setBranchData] = useState<IBranchData>();
   // const { user } = useUserContext(); //dont remove this from code because this is for the branch id
-  const branchID = 3; //replace this with actual id
+  // const branchID = ; //replace this with actual id
   const [loading, setLoading] = useState<boolean>(false);
+  const user = useUserContext();
 
   const fetchBranchData = async () => {
     try {
       setLoading(true);
-      const res = await http.get(`/branch-summary/sales-summary/${branchID}`);
+      const res = await http.get(
+        `/branch-summary/sales-summary/${user.user?.branchId}`
+      );
       console.log(res);
       const { data } = res;
       setBranchData(data.data);

From 072beb0824be282866e0166229deb651cda77316 Mon Sep 17 00:00:00 2001
From: Tharindu Jayawardhana <tharinduimalka915@gmail.com>
Date: Wed, 26 Jun 2024 02:43:59 +0530
Subject: [PATCH 3/5] added loading states

---
 .../order-card/OrderCardComponent.tsx         | 21 +++++++----
 .../services/OnlineOrderService.tsx           | 18 +++++++++
 .../components/SummaryCard.tsx                | 37 +++++++++++++++----
 3 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx b/src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx
index 06f9bde..51fedaf 100644
--- a/src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx
+++ b/src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx
@@ -12,21 +12,24 @@ function OrderCardComponent({ onClose }: Props) {
     loadingOnlineOrders,
     onlineOrders,
     prescriptionImages,
+    messages,
+    setMessages,
+    acceptOrder,
   } = useOnlineOrderService();
 
-  const [messages, setMessages] = useState<{ [key: string]: string }>({});
-
   useEffect(() => {
     getOnlineOrders();
   }, []);
 
   const handleAccept = (orderId: string) => {
     // Handle accept logic here, e.g., updating the order status or making an API call
+    acceptOrder(orderId);
     console.log(`Order ${orderId} accepted with message: ${messages[orderId]}`);
   };
 
   const handleReject = (orderId: string) => {
     // Handle reject logic here, e.g., updating the order status or making an API call
+
     console.log(`Order ${orderId} rejected with message: ${messages[orderId]}`);
   };
 
@@ -40,7 +43,7 @@ function OrderCardComponent({ onClose }: Props) {
   return (
     <div className='fixed top-0 left-0 w-full h-full flex justify-center items-center bg-gray-900 bg-opacity-75 z-50 backdrop-blur-sm'>
       <div className='bg-white rounded-lg p-6 w-full border border-gray-200 h-full overflow-auto shadow-lg'>
-        <h2 className='text-2xl font-semibold text-gray-800 mb-4'>
+        <h2 className='text-2xl font-semibold text-gray-800 mb-4 text-center'>
           Online Orders
         </h2>
         {loadingOnlineOrders ? (
@@ -61,19 +64,23 @@ function OrderCardComponent({ onClose }: Props) {
                 <textarea
                   className='w-full p-2 border border-gray-300 rounded-md'
                   placeholder='Write a message...'
-                  value={messages[order.id] || ''}
+                  value={messages[order.prescriptionId] || ''}
                   onChange={(e) =>
-                    handleMessageChange(order.id, e.target.value)
+                    handleMessageChange(order.prescriptionId, e.target.value)
                   }
                 />
               </div>
-              <p className='text-lg font-semibold text-gray-800'>
+              <p className='text-sm font-normal text-gray-800 p-2'>
+                Order Date: {order.createdOn.toString().split('T')[0]}
+              </p>
+              <p className='text-sm font-semibold text-gray-800 p-2'>
                 Customer Message:{' '}
                 {order.customerMessage ? order.customerMessage : 'N/A'}
               </p>
+
               <div className='flex justify-end space-x-2 mt-4'>
                 <button
-                  onClick={() => handleAccept(order.id)}
+                  onClick={() => handleAccept(order.prescriptionId)}
                   className='bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition duration-300'
                 >
                   Accept
diff --git a/src/features/cashier-dashboard/services/OnlineOrderService.tsx b/src/features/cashier-dashboard/services/OnlineOrderService.tsx
index f128665..f118a6d 100644
--- a/src/features/cashier-dashboard/services/OnlineOrderService.tsx
+++ b/src/features/cashier-dashboard/services/OnlineOrderService.tsx
@@ -58,11 +58,29 @@ const useOnlineOrderService = () => {
     setPrescriptionImages(imagesObject);
   };
 
+  const [messages, setMessages] = useState<{ [key: string]: string }>({});
+
+  const acceptOrder = async (orderId: string) => {
+    console.log(messages[orderId]);
+    try {
+      const res = await axios.put(
+        `http://localhost:8081/prescriptionOrders/${orderId}/${user.user?.branchId}`,
+        messages[orderId]
+      );
+      console.log(res.data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   return {
     getOnlineOrders,
     loadingOnlineOrders,
     onlineOrders,
     prescriptionImages, // Return prescription images from the hook
+    messages,
+    setMessages,
+    acceptOrder,
   };
 };
 
diff --git a/src/features/main-manager-dashboard/components/SummaryCard.tsx b/src/features/main-manager-dashboard/components/SummaryCard.tsx
index ffe1998..7f7bf8a 100644
--- a/src/features/main-manager-dashboard/components/SummaryCard.tsx
+++ b/src/features/main-manager-dashboard/components/SummaryCard.tsx
@@ -7,6 +7,7 @@ import {
 } from 'react-icons/gi';
 import useBranchService from '../../manager-dashboard/services/BranchService';
 import { IBranchData } from '../../manager-dashboard/interfaces/IBranchData';
+import { Loader } from 'lucide-react';
 
 type Props = {
   branchData: IBranchData;
@@ -23,9 +24,13 @@ function SummaryCard({ branchData }: Props) {
         </div>
         <div className='mt-4'>
           <p className='text-gray-600 text-lg'>Total Amount:</p>
-          <p className='text-2xl font-semibold text-green-700'>{`LKR ${branchData?.sales.toFixed(
-            2
-          )}`}</p>
+          <p className='text-2xl font-semibold text-green-700'>
+            {branchData ? (
+              `LKR ${branchData?.sales.toFixed(2)}`
+            ) : (
+              <Loader className='w-10 h-10 animate-spin' />
+            )}
+          </p>
         </div>
       </div>
 
@@ -38,7 +43,11 @@ function SummaryCard({ branchData }: Props) {
         <div className='mt-4'>
           <p className='text-gray-600 text-lg'>Number of Orders:</p>
           <p className='text-2xl font-semibold text-blue-700'>
-            {branchData?.orders}
+            {branchData ? (
+              branchData?.orders
+            ) : (
+              <Loader className='w-10 h-10 animate-spin' />
+            )}
           </p>
         </div>
       </div>
@@ -52,7 +61,11 @@ function SummaryCard({ branchData }: Props) {
         <div className='mt-4'>
           <p className='text-gray-600 text-lg'>Number of Workers:</p>
           <p className='text-2xl font-semibold text-yellow-700'>
-            {branchData?.branchDTO.branchId}
+            {branchData ? (
+              branchData?.branchDTO.branchId
+            ) : (
+              <Loader className='w-10 h-10 animate-spin' />
+            )}
           </p>
         </div>
       </div>
@@ -61,12 +74,20 @@ function SummaryCard({ branchData }: Props) {
       <div className='bg-white rounded-lg shadow-md p-6 flex-1'>
         <div className='flex items-center'>
           <GiFactory className='text-red-500 text-3xl mr-4' />
-          <h2 className='text-xl font-semibold'>Total Branches</h2>
+          <h2 className='text-xl font-semibold'>Status</h2>
         </div>
         <div className='mt-4'>
-          <p className='text-gray-600 text-lg'>Number of Branches:</p>
+          <p className='text-gray-600 text-lg'>Branch Status:</p>
           <p className='text-2xl font-semibold text-red-700'>
-            {branchData?.branchDTO?.branchStatus ? 'Active' : 'Inactive'}
+            {branchData ? (
+              branchData?.branchDTO?.branchStatus ? (
+                'Active'
+              ) : (
+                'Inactive'
+              )
+            ) : (
+              <Loader className='w-10 h-10 animate-spin' />
+            )}
           </p>
         </div>
       </div>

From d514c9a4452077bcfae4e9689d9022d167c562db Mon Sep 17 00:00:00 2001
From: Tharindu Jayawardhana <tharinduimalka915@gmail.com>
Date: Wed, 26 Jun 2024 08:15:38 +0530
Subject: [PATCH 4/5] added more configs

---
 .../components/medicine-table/Medicine.tsx    | 17 +++++++++++++++++
 .../order-card/OrderCardComponent.tsx         | 19 +++++++++++++------
 .../services/OnlineOrderService.tsx           | 14 ++++++++++----
 .../login/services/useAxiosInstance.tsx       |  2 +-
 .../components/LatestTransactionDetails.tsx   |  7 +++++--
 .../layout/MainManagerDashboard.tsx           |  7 ++++++-
 .../components/sidebar/ManagerSidebar.tsx     |  4 ++--
 7 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/src/features/cashier-dashboard/components/medicine-table/Medicine.tsx b/src/features/cashier-dashboard/components/medicine-table/Medicine.tsx
index 6e1611c..69df774 100644
--- a/src/features/cashier-dashboard/components/medicine-table/Medicine.tsx
+++ b/src/features/cashier-dashboard/components/medicine-table/Medicine.tsx
@@ -4,6 +4,7 @@ import { usePaymentContext } from '../../layout/MainCashierDashboard';
 import { MedicineType } from './MedicineColumns';
 import { useEffect, useState } from 'react';
 import useItemService from '../../services/ItemService';
+import useOnlineOrderService from '../../services/OnlineOrderService';
 
 const Medicine = () => {
   const { orderedMedicine, setOrderedMedicine } = usePaymentContext();
@@ -15,6 +16,8 @@ const Medicine = () => {
     loading,
   } = useItemService();
 
+  const { getOnlineOrders } = useOnlineOrderService();
+
   // const { setMedicine, medicine, setFilteredMedicine, filteredMedicine } =
   //   usePaymentContext();
 
@@ -36,6 +39,20 @@ const Medicine = () => {
     //fetchMedicine from server
     getAllItems();
   }, []);
+
+  // useEffect(() => {
+  //   // Initial fetch
+  //   getOnlineOrders();
+
+  //   // Fetch every 120 seconds
+  //   const intervalId = setInterval(() => {
+  //     getOnlineOrders();
+  //   }, 120000); // 120000 milliseconds = 120 seconds
+
+  //   // Cleanup function to clear interval on unmount
+  //   return () => clearInterval(intervalId);
+  // }, []);
+
   //
 
   return (
diff --git a/src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx b/src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx
index 51fedaf..771698f 100644
--- a/src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx
+++ b/src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import useOnlineOrderService from '../../services/OnlineOrderService';
 import { Loader } from 'lucide-react';
+import { OnlineOrder } from '../../interfaces/OnlineOrder';
 
 type Props = {
   onClose: () => void;
@@ -39,6 +40,12 @@ function OrderCardComponent({ onClose }: Props) {
       [orderId]: message,
     }));
   };
+  const sortedOrders = onlineOrders
+    .slice()
+    .sort(
+      (a: OnlineOrder, b: OnlineOrder) =>
+        new Date(b.createdOn).getTime() - new Date(a.createdOn).getTime()
+    );
 
   return (
     <div className='fixed top-0 left-0 w-full h-full flex justify-center items-center bg-gray-900 bg-opacity-75 z-50 backdrop-blur-sm'>
@@ -51,20 +58,20 @@ function OrderCardComponent({ onClose }: Props) {
             <Loader className='w-10 h-10 animate-spin' />
           </div>
         ) : (
-          onlineOrders.map((order) => (
+          sortedOrders.map((order) => (
             <div key={order.id} className='mb-4 border-b border-gray-300 pb-4'>
               <div className='flex gap-4'>
                 {prescriptionImages[order.prescriptionId] && (
                   <img
                     src={prescriptionImages[order.prescriptionId]}
                     alt={`Prescription for Order ${order.id}`}
-                    className='w-48 h-auto mb-4 rounded-md'
+                    className=' w-2/5 h-auto mb-4 rounded-md'
                   />
                 )}
                 <textarea
                   className='w-full p-2 border border-gray-300 rounded-md'
                   placeholder='Write a message...'
-                  value={messages[order.prescriptionId] || ''}
+                  value={messages[order.id] || ''}
                   onChange={(e) =>
                     handleMessageChange(order.prescriptionId, e.target.value)
                   }
@@ -80,17 +87,17 @@ function OrderCardComponent({ onClose }: Props) {
 
               <div className='flex justify-end space-x-2 mt-4'>
                 <button
-                  onClick={() => handleAccept(order.prescriptionId)}
+                  onClick={() => handleAccept(order.id)}
                   className='bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition duration-300'
                 >
                   Accept
                 </button>
-                <button
+                {/* <button
                   onClick={() => handleReject(order.id)}
                   className='bg-red text-white px-4 py-2 rounded hover:bg-red-600 transition duration-300'
                 >
                   Reject
-                </button>
+                </button> */}
               </div>
             </div>
           ))
diff --git a/src/features/cashier-dashboard/services/OnlineOrderService.tsx b/src/features/cashier-dashboard/services/OnlineOrderService.tsx
index f118a6d..9654f65 100644
--- a/src/features/cashier-dashboard/services/OnlineOrderService.tsx
+++ b/src/features/cashier-dashboard/services/OnlineOrderService.tsx
@@ -16,11 +16,12 @@ const useOnlineOrderService = () => {
     try {
       setLoadingOnlineOrders(true);
       const res = await axios.get(
-        `http://localhost:8081/prescriptionOrders/myOrders/${user.user?.branchId}`
+        `http://52.200.74.128/prescriptionOrders/myOrders/${user.user?.branchId}`
       );
       const orders: OnlineOrder[] = res.data;
       setOnlineOrders(orders);
       console.log(orders);
+
       // Fetch prescription images for each order
       await fetchPrescriptionImages(orders);
     } catch (error) {
@@ -34,7 +35,7 @@ const useOnlineOrderService = () => {
     const imagesPromises = orders.map((order) =>
       axios
         .get(
-          `http://localhost:8081/prescriptionImages/${order.prescriptionId}`,
+          `http://52.200.74.128/prescriptionImages/${order.prescriptionId}`,
           {
             responseType: 'arraybuffer',
           }
@@ -64,8 +65,13 @@ const useOnlineOrderService = () => {
     console.log(messages[orderId]);
     try {
       const res = await axios.put(
-        `http://localhost:8081/prescriptionOrders/${orderId}/${user.user?.branchId}`,
-        messages[orderId]
+        `http://52.200.74.128:8081/prescriptionOrders/${orderId}/${user.user?.branchId}`,
+        messages[orderId],
+        {
+          headers: {
+            'Content-Type': 'text/plain',
+          },
+        }
       );
       console.log(res.data);
     } catch (error) {
diff --git a/src/features/login/services/useAxiosInstance.tsx b/src/features/login/services/useAxiosInstance.tsx
index 4818b3f..ed9215b 100644
--- a/src/features/login/services/useAxiosInstance.tsx
+++ b/src/features/login/services/useAxiosInstance.tsx
@@ -5,7 +5,7 @@ import { useEffect } from 'react';
 const useAxiosInstance = () => {
   const instance = axios.create({
     // baseURL: 'http://localhost:8079/lifepill/v1',
-    baseURL: 'http://localhost:8079/lifepill/v1',
+    baseURL: 'http://35.174.112.238/lifepill/v1',
     headers: {
       'Content-type': 'application/json',
     },
diff --git a/src/features/main-manager-dashboard/components/LatestTransactionDetails.tsx b/src/features/main-manager-dashboard/components/LatestTransactionDetails.tsx
index a04f3c1..d785631 100644
--- a/src/features/main-manager-dashboard/components/LatestTransactionDetails.tsx
+++ b/src/features/main-manager-dashboard/components/LatestTransactionDetails.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import useOrderService from '../services/OrderService';
+import { Loader } from 'lucide-react';
 
 const LatestTransactionDetails = () => {
   const { fetchOrderData, orderData, loading } = useOrderService();
@@ -17,10 +18,12 @@ const LatestTransactionDetails = () => {
       </div>
       <div className='border-s border-gray-200 dark:border-gray-700 max-h-96 overflow-y-scroll'>
         {loading ? (
-          <div>Loading...</div>
+          <div className='flex justify-center items-center h-full'>
+            <Loader className='w-10 h-10 animate-spin' />
+          </div>
         ) : (
           <ul className='divide-y divide-gray-200 dark:divide-gray-700'>
-            {orderData?.map((transaction, index) => (
+            {orderData?.reverse().map((transaction, index) => (
               <li key={index}>
                 <div className='py-4'>
                   <div className='flex space-x-3'>
diff --git a/src/features/main-manager-dashboard/layout/MainManagerDashboard.tsx b/src/features/main-manager-dashboard/layout/MainManagerDashboard.tsx
index 3f554bd..873f914 100644
--- a/src/features/main-manager-dashboard/layout/MainManagerDashboard.tsx
+++ b/src/features/main-manager-dashboard/layout/MainManagerDashboard.tsx
@@ -4,6 +4,7 @@ import LatestTransactionDetails from '../components/LatestTransactionDetails';
 import SummaryCard from '../components/SummaryCard';
 import BranchDetailsCard from '../components/BranchDetailsCard';
 import UseBranchService from '../../manager-dashboard/services/BranchService';
+import { Loader } from 'lucide-react';
 
 function MainManagerDashboard() {
   const { fetchBranchData, branchData } = UseBranchService();
@@ -17,7 +18,7 @@ function MainManagerDashboard() {
       className=' w-full max-h-screen overflow-hidden flex flex-col'
       data-testid='dashboard'
     >
-      {branchData && (
+      {branchData ? (
         <>
           <div className=' p-4 bg-slate-200 rounded-md max-h-[300px]'>
             <SummaryCard branchData={branchData} />
@@ -31,6 +32,10 @@ function MainManagerDashboard() {
             </div>
           </div>
         </>
+      ) : (
+        <div className='flex justify-center items-center h-screen'>
+          <Loader className='w-10 h-10 animate-spin' />
+        </div>
       )}
     </div>
   );
diff --git a/src/features/manager-dashboard/components/sidebar/ManagerSidebar.tsx b/src/features/manager-dashboard/components/sidebar/ManagerSidebar.tsx
index 946070d..6ee201a 100644
--- a/src/features/manager-dashboard/components/sidebar/ManagerSidebar.tsx
+++ b/src/features/manager-dashboard/components/sidebar/ManagerSidebar.tsx
@@ -50,12 +50,12 @@ const ManagerSidebar = ({ onItemClick }: Props) => {
         onClick={() => onItemClick('Branches')}
         testid='branches'
       />
-      <ButtonWithIconAndTextVertical
+      {/* <ButtonWithIconAndTextVertical
         icon={<IoSaveOutline size={25} />}
         text='Saved Reports'
         onClick={() => onItemClick('Reports')}
         testid='reports'
-      />
+      /> */}
       <ButtonWithIconAndTextVertical
         icon={<VscFeedback size={25} />}
         text='Orders'

From 52cdc1c0e46e4533788ba284b23af8232b9d9a93 Mon Sep 17 00:00:00 2001
From: Tharindu Jayawardhana <tharinduimalka915@gmail.com>
Date: Wed, 26 Jun 2024 09:26:27 +0530
Subject: [PATCH 5/5] cookie

---
 .../first-aid-table/FirstAidTable.tsx         |  8 +---
 .../MedicalDeviceTable.tsx                    |  8 +---
 .../components/medicine-table/Medicine.tsx    | 10 ++---
 .../nutrition-table/NutritionTable.tsx        |  8 +---
 .../personal-care-table/PersonalCareTable.tsx |  8 +---
 .../components/sports-table/SportsTable.tsx   |  8 +---
 .../services/OnlineOrderService.tsx           |  2 +-
 .../login/services/useAxiosInstance.tsx       | 39 +++++++++++++------
 src/features/login/utils/getCookie.ts         | 12 ++++++
 src/shared/navbar/CashierNavBar.tsx           | 10 ++---
 10 files changed, 58 insertions(+), 55 deletions(-)
 create mode 100644 src/features/login/utils/getCookie.ts

diff --git a/src/features/cashier-dashboard/components/first-aid-table/FirstAidTable.tsx b/src/features/cashier-dashboard/components/first-aid-table/FirstAidTable.tsx
index d130801..c48096e 100644
--- a/src/features/cashier-dashboard/components/first-aid-table/FirstAidTable.tsx
+++ b/src/features/cashier-dashboard/components/first-aid-table/FirstAidTable.tsx
@@ -57,9 +57,7 @@ const FirstAidTable = (props: Props) => {
             <th scope='col' className='px-6 py-3'>
               Medicine ID
             </th>
-            <th scope='col' className='px-6 py-3'>
-              Image
-            </th>
+
             <th scope='col' className='px-6 py-3'>
               Name
             </th>
@@ -79,9 +77,7 @@ const FirstAidTable = (props: Props) => {
           {medicine.map((cashier) => (
             <tr className='bg-slate-50 border-b'>
               <td className='px-6 py-4'>{cashier.id}</td>
-              <td className='px-6 py-4 w-8 h-8'>
-                <img src={cashier.image} alt={cashier.name} />
-              </td>
+
               <td className='px-6 py-4'>{cashier.name}</td>
               <td className='px-6 py-4'>{cashier.price}</td>
               <td className='px-6 py-4'>{cashier.quantity}</td>
diff --git a/src/features/cashier-dashboard/components/medical-device-table/MedicalDeviceTable.tsx b/src/features/cashier-dashboard/components/medical-device-table/MedicalDeviceTable.tsx
index 9be912e..ce5d6d5 100644
--- a/src/features/cashier-dashboard/components/medical-device-table/MedicalDeviceTable.tsx
+++ b/src/features/cashier-dashboard/components/medical-device-table/MedicalDeviceTable.tsx
@@ -47,9 +47,7 @@ const MedicalDeviceTable = () => {
             <th scope='col' className='px-6 py-3'>
               Medicine ID
             </th>
-            <th scope='col' className='px-6 py-3'>
-              Image
-            </th>
+
             <th scope='col' className='px-6 py-3'>
               Name
             </th>
@@ -69,9 +67,7 @@ const MedicalDeviceTable = () => {
           {medicine.map((cashier) => (
             <tr className='bg-slate-50 border-b'>
               <td className='px-6 py-4'>{cashier.id}</td>
-              <td className='px-6 py-4 w-8 h-8'>
-                <img src={cashier.image} alt={cashier.name} />
-              </td>
+
               <td className='px-6 py-4'>{cashier.name}</td>
               <td className='px-6 py-4'>{cashier.price}</td>
               <td className='px-6 py-4'>{cashier.quantity}</td>
diff --git a/src/features/cashier-dashboard/components/medicine-table/Medicine.tsx b/src/features/cashier-dashboard/components/medicine-table/Medicine.tsx
index 69df774..588d651 100644
--- a/src/features/cashier-dashboard/components/medicine-table/Medicine.tsx
+++ b/src/features/cashier-dashboard/components/medicine-table/Medicine.tsx
@@ -59,7 +59,7 @@ const Medicine = () => {
     <div className='max-h-[750px] overflow-y-scroll w-full'>
       {loading ? (
         <p>Loading...</p>
-      ) : !medicine ? (
+      ) : medicine.length === 0 ? (
         <p>No medicines available.</p>
       ) : (
         <table className='text-sm text-left text-gray-500 dark:text-gray-400 max-h-screen overflow-scroll w-full'>
@@ -68,9 +68,7 @@ const Medicine = () => {
               <th scope='col' className='px-6 py-3'>
                 Medicine ID
               </th>
-              <th scope='col' className='px-6 py-3'>
-                Image
-              </th>
+              
               <th scope='col' className='px-6 py-3'>
                 Name
               </th>
@@ -90,9 +88,7 @@ const Medicine = () => {
             {filteredMedicine.map((cashier) => (
               <tr className='bg-slate-50 border-b'>
                 <td className='px-6 py-4'>{cashier.id}</td>
-                <td className='px-6 py-4 w-8 h-8'>
-                  <img src={cashier.image} alt={cashier.name} />
-                </td>
+                
                 <td className='px-6 py-4'>{cashier.name}</td>
                 <td className='px-6 py-4'>{cashier.price}</td>
                 <td className='px-6 py-4'>
diff --git a/src/features/cashier-dashboard/components/nutrition-table/NutritionTable.tsx b/src/features/cashier-dashboard/components/nutrition-table/NutritionTable.tsx
index 1e3074d..4ad4f86 100644
--- a/src/features/cashier-dashboard/components/nutrition-table/NutritionTable.tsx
+++ b/src/features/cashier-dashboard/components/nutrition-table/NutritionTable.tsx
@@ -49,9 +49,7 @@ const NutritionTable = () => {
             <th scope='col' className='px-6 py-3'>
               Medicine ID
             </th>
-            <th scope='col' className='px-6 py-3'>
-              Image
-            </th>
+
             <th scope='col' className='px-6 py-3'>
               Name
             </th>
@@ -71,9 +69,7 @@ const NutritionTable = () => {
           {medicine.map((cashier) => (
             <tr className='bg-slate-50 border-b'>
               <td className='px-6 py-4'>{cashier.id}</td>
-              <td className='px-6 py-4 w-8 h-8'>
-                <img src={cashier.image} alt={cashier.name} />
-              </td>
+
               <td className='px-6 py-4'>{cashier.name}</td>
               <td className='px-6 py-4'>{cashier.price}</td>
               <td className='px-6 py-4'>{cashier.quantity}</td>
diff --git a/src/features/cashier-dashboard/components/personal-care-table/PersonalCareTable.tsx b/src/features/cashier-dashboard/components/personal-care-table/PersonalCareTable.tsx
index a42c539..f5309ea 100644
--- a/src/features/cashier-dashboard/components/personal-care-table/PersonalCareTable.tsx
+++ b/src/features/cashier-dashboard/components/personal-care-table/PersonalCareTable.tsx
@@ -49,9 +49,7 @@ const PersonalCareTable = () => {
             <th scope='col' className='px-6 py-3'>
               Medicine ID
             </th>
-            <th scope='col' className='px-6 py-3'>
-              Image
-            </th>
+
             <th scope='col' className='px-6 py-3'>
               Name
             </th>
@@ -71,9 +69,7 @@ const PersonalCareTable = () => {
           {medicine.map((cashier) => (
             <tr className='bg-slate-50 border-b'>
               <td className='px-6 py-4'>{cashier.id}</td>
-              <td className='px-6 py-4 w-8 h-8'>
-                <img src={cashier.image} alt={cashier.name} />
-              </td>
+
               <td className='px-6 py-4'>{cashier.name}</td>
               <td className='px-6 py-4'>{cashier.price}</td>
               <td className='px-6 py-4'>{cashier.quantity}</td>
diff --git a/src/features/cashier-dashboard/components/sports-table/SportsTable.tsx b/src/features/cashier-dashboard/components/sports-table/SportsTable.tsx
index 6737c4b..e004921 100644
--- a/src/features/cashier-dashboard/components/sports-table/SportsTable.tsx
+++ b/src/features/cashier-dashboard/components/sports-table/SportsTable.tsx
@@ -48,9 +48,7 @@ const SportsTable = () => {
             <th scope='col' className='px-6 py-3'>
               Medicine ID
             </th>
-            <th scope='col' className='px-6 py-3'>
-              Image
-            </th>
+
             <th scope='col' className='px-6 py-3'>
               Name
             </th>
@@ -70,9 +68,7 @@ const SportsTable = () => {
           {medicine.map((cashier) => (
             <tr className='bg-slate-50 border-b'>
               <td className='px-6 py-4'>{cashier.id}</td>
-              <td className='px-6 py-4 w-8 h-8'>
-                <img src={cashier.image} alt={cashier.name} />
-              </td>
+
               <td className='px-6 py-4'>{cashier.name}</td>
               <td className='px-6 py-4'>{cashier.price}</td>
               <td className='px-6 py-4'>{cashier.quantity}</td>
diff --git a/src/features/cashier-dashboard/services/OnlineOrderService.tsx b/src/features/cashier-dashboard/services/OnlineOrderService.tsx
index 9654f65..95124a3 100644
--- a/src/features/cashier-dashboard/services/OnlineOrderService.tsx
+++ b/src/features/cashier-dashboard/services/OnlineOrderService.tsx
@@ -65,7 +65,7 @@ const useOnlineOrderService = () => {
     console.log(messages[orderId]);
     try {
       const res = await axios.put(
-        `http://52.200.74.128:8081/prescriptionOrders/${orderId}/${user.user?.branchId}`,
+        `http://52.200.74.128/prescriptionOrders/${orderId}/${user.user?.branchId}`,
         messages[orderId],
         {
           headers: {
diff --git a/src/features/login/services/useAxiosInstance.tsx b/src/features/login/services/useAxiosInstance.tsx
index ed9215b..8ac0ee9 100644
--- a/src/features/login/services/useAxiosInstance.tsx
+++ b/src/features/login/services/useAxiosInstance.tsx
@@ -1,29 +1,44 @@
 import axios from 'axios';
 import { useEffect } from 'react';
+import { getCookie } from '../utils/getCookie';
+import { useUserContext } from '../../../context/UserContext';
 // import { useUserContext } from '../../../context/UserContext';
 
 const useAxiosInstance = () => {
+  const { cookie } = useUserContext();
+
   const instance = axios.create({
     // baseURL: 'http://localhost:8079/lifepill/v1',
     baseURL: 'http://35.174.112.238/lifepill/v1',
     headers: {
       'Content-type': 'application/json',
+      Authorization: `Bearer ${cookie}`,
     },
   });
 
+  // console.log(getCookie('Authorization'));
+  console.log(cookie);
+  // console.log(user);
+  useEffect(() => {
+    // Update instance headers when cookie changes
+    instance.defaults.headers.common['Authorization'] = `Bearer ${cookie}`;
+    console.log(`Bearer ${cookie}`);
+  }, [cookie, instance]);
+
   useEffect(() => {
-    const cookieString = document.cookie;
-    const cookies = cookieString.split(';').reduce((acc: any, cookie) => {
-      const [name, value] = cookie.trim().split('=');
-      acc[name] = value;
-      return acc;
-    }, {});
-
-    const token = cookies.Authorization;
-    if (token) {
-      console.log('Setting token:', token);
-      instance.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-    }
+    // const cookieString = document.cookie;
+    // const cookies = cookieString.split(';').reduce((acc: any, cookie) => {
+    //   const [name, value] = cookie.trim().split('=');
+    //   acc[name] = value;
+    //   return acc;
+    // }, {});
+
+    // const token = cookies.Authorization;
+    // console.log(token);
+    // if (token) {
+    //   console.log('Setting token:', token);
+    //   instance.defaults.headers.common['Authorization'] = `Bearer ${getCookie('Authorization')}`;
+    // }
 
     instance.interceptors.response.use(
       (response) => {
diff --git a/src/features/login/utils/getCookie.ts b/src/features/login/utils/getCookie.ts
new file mode 100644
index 0000000..0304fe4
--- /dev/null
+++ b/src/features/login/utils/getCookie.ts
@@ -0,0 +1,12 @@
+export function getCookie(name: string) {
+  const cookies = document.cookie.split(';');
+  for (let i = 0; i < cookies.length; i++) {
+    const cookie = cookies[i].trim();
+    // Check if this cookie name matches the requested name
+    if (cookie.startsWith(name + '=')) {
+      // Return the cookie value after removing the name=
+      return cookie.substring(name.length + 1);
+    }
+  }
+  return ''; // Return an empty string if cookie not found
+}
diff --git a/src/shared/navbar/CashierNavBar.tsx b/src/shared/navbar/CashierNavBar.tsx
index 3a54811..ec40bbe 100644
--- a/src/shared/navbar/CashierNavBar.tsx
+++ b/src/shared/navbar/CashierNavBar.tsx
@@ -22,15 +22,15 @@ const CashierNavBar = () => {
   return (
     <div className='flex items-center justify-between w-full p-2 font-poppins shadow-md'>
       {/* Back Button */}
-      <div className='ml-2'>
+      {/* <div className='ml-2'>
         <IoArrowBackCircleOutline size={40} style={{ color: 'gray' }} />
       </div>
 
-      <Divider />
+      <Divider /> */}
 
       {/* Logo */}
       <div>
-        <img src={Logo} alt='Logo' width={60} height={60} />
+        <img src={Logo} alt='Logo' width={60} height={60} className='ml-4' />
       </div>
 
       {/* Date and time */}
@@ -42,7 +42,7 @@ const CashierNavBar = () => {
       <Divider />
 
       {/* Buttons for home,orders,history and online orders */}
-      <ButtonWithIconAndText
+      {/* <ButtonWithIconAndText
         icon={<AiFillHome size={20} />}
         text='Home'
         onClick={handleClick}
@@ -56,7 +56,7 @@ const CashierNavBar = () => {
         icon={<LiaHistorySolid size={20} />}
         text='History'
         onClick={handleClick}
-      />
+      /> */}
       <ButtonWithIconAndText
         icon={<PiDeviceMobileSpeakerThin size={20} />}
         text='Online Orders'