-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #57 from Life-Pill/dev-test-frontend
Dev test frontend
- Loading branch information
Showing
17 changed files
with
356 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
118 changes: 118 additions & 0 deletions
118
src/features/cashier-dashboard/components/order-card/OrderCardComponent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| } |
Oops, something went wrong.