Life-Pill · TheTharz · Jun 26, 2024 · Jun 24, 2024 · Jun 25, 2024 · Jun 25, 2024
diff --git 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
@@ -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
@@ -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,13 +39,27 @@ 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 (
     <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'>
@@ -51,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>
@@ -73,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
@@ -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/order-card/OrderCardComponent.tsx b/src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx
@@ -0,0 +1,118 @@
+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;
+};
+
+function OrderCardComponent({ onClose }: Props) {
+  const {
+    getOnlineOrders,
+    loadingOnlineOrders,
+    onlineOrders,
+    prescriptionImages,
+    messages,
+    setMessages,
+    acceptOrder,
+  } = useOnlineOrderService();
+
+  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]}`);
+  };
+
+  const handleMessageChange = (orderId: string, message: string) => {
+    setMessages((prevMessages) => ({
+      ...prevMessages,
+      [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'>
+      <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 text-center'>
+          Online Orders
+        </h2>
+        {loadingOnlineOrders ? (
+          <div className='flex justify-center items-center h-full'>
+            <Loader className='w-10 h-10 animate-spin' />
+          </div>
+        ) : (
+          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-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.id] || ''}
+                  onChange={(e) =>
+                    handleMessageChange(order.prescriptionId, e.target.value)
+                  }
+                />
+              </div>
+              <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)}
+                  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>
+  );
+}
+
+export default OrderCardComponent;
diff --git 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
@@ -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/interfaces/OnlineOrder.tsx 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
+}