From d3ad1a77e9359c80257a82e3829739e303d3bc8d Mon Sep 17 00:00:00 2001 From: eman-bfloat Date: Wed, 11 Dec 2024 20:50:28 +0300 Subject: [PATCH] feat: update delivery pages --- .../src/pages/deliveries/[deliveryId].tsx | 177 ++++------------- apps/courier/src/pages/deliveries/index.tsx | 19 +- apps/courier/src/pages/requests/index.tsx | 19 +- .../features/Deliveries/DeliveryDetails.tsx | 184 ++++++++++++++++++ .../features/Deliveries/DeliveryOrders.tsx | 32 +++ .../features/Deliveries/DeliveryStatus.tsx | 62 ++++++ .../Deliveries/NavigationPreferences.tsx | 34 ++++ packages/features/Maps/BottomNav.tsx | 4 +- packages/ui/components/Avatar.tsx | 2 +- 9 files changed, 388 insertions(+), 145 deletions(-) create mode 100644 packages/features/Deliveries/DeliveryDetails.tsx create mode 100644 packages/features/Deliveries/DeliveryOrders.tsx create mode 100644 packages/features/Deliveries/DeliveryStatus.tsx create mode 100644 packages/features/Deliveries/NavigationPreferences.tsx diff --git a/apps/courier/src/pages/deliveries/[deliveryId].tsx b/apps/courier/src/pages/deliveries/[deliveryId].tsx index f8ddc8c9..f230fa92 100644 --- a/apps/courier/src/pages/deliveries/[deliveryId].tsx +++ b/apps/courier/src/pages/deliveries/[deliveryId].tsx @@ -1,84 +1,10 @@ import { useRouter } from "next/router"; import { useFetchDeliveryByPK } from "@sahil/lib/hooks/deliveries"; -import { Card } from "ui"; -import { OrderItem } from "@sahil/features/Orders/OrderItems"; -import { OrderInfoItem } from "@sahil/features/Orders/OrderDetails"; -import { formatDateTime } from "@sahil/lib/dates"; -import { - HiCalendarDays, - HiOutlineBanknotes, - HiOutlineBriefcase, - HiOutlineMap, - HiOutlineMapPin, - HiOutlineCheck, - HiOutlineTruck, -} from "react-icons/hi2"; +import { DeliveryDetails } from "@sahil/features/Deliveries/DeliveryDetails"; -const DeliveryOrders = ({ order, deliveryStatus, onUpdateStatus }) => { - console.log(order); - return ( -
- {order?.order_items.map((order) => ( - -

Order Details

-

Delivery Order ID: {order.id}

- {order?.order_items && order?.order_items?.length > 0 ? ( -
- {order.order_items.map((item, index) => ( - - ))} -
- ) : ( -

No items found for this order.

- )} - - - ))} -
- ); -}; - -const DeliveryActions = ({ orderId, deliveryStatus, onUpdateStatus }) => { - return ( -
- - - -
- ); -}; - -// Stub for useUpdateDeliveryStatus hook const useUpdateDeliveryStatus = () => { const updateDeliveryStatus = async (orderId: string, newStatus: string) => { console.log(`Updating order ${orderId} to status ${newStatus}`); - // Implement actual update logic here when the hook is ready }; return { updateDeliveryStatus }; @@ -98,25 +24,7 @@ export default function DeliveryPage() { if (loading) return

Loading delivery information...

; if (!delivery) return

No delivery found

; - const deliveryInfoItems = [ - { - icon: , - label: "Payment Method", - value: "N/A", - }, - { - icon: , - label: "Client", - value: "N/A", - }, - { - icon: , - label: "Status", - value: "N/A", - }, - ]; - - const handleUpdateStatus = async (orderId, newStatus) => { + const handleUpdateStatus = async (orderId: string, newStatus: string) => { try { await updateDeliveryStatus(orderId, newStatus); // Optionally, you can refetch the delivery data here to update the UI @@ -125,49 +33,50 @@ export default function DeliveryPage() { } }; - console.log(delivery[0]?.order); + // Dummy data for demonstration + const dummyDeliveryData = { + id: delivery[0]?.id || "D123", + status: "pending" as const, // Type assertion to fix status type + client: { + name: "John Doe", + address: "123 Main St, City, Country", + phone: "+1 234 567 890" + }, + items: [ + { name: "Product 1", quantity: 2, price: 29.99 }, + { name: "Product 2", quantity: 1, price: 49.99 } + ], + payment: { + method: "Credit Card", + total: 109.97, + commission: 10.99 + }, + timing: { + startTime: "2024-03-15 14:30", + duration: "45 mins" + }, + distance: "3.2 km" + }; return ( -
- -
-
- {deliveryInfoItems.map((item, index) => ( - - ))} -
-
- - -
- {/* { - - delivery.status === 'pending' && ( - - )} */} +
+ + {dummyDeliveryData.status === 'pending' && ( +
+ +
- - + )}
); } diff --git a/apps/courier/src/pages/deliveries/index.tsx b/apps/courier/src/pages/deliveries/index.tsx index a51f4733..2d6f52ce 100644 --- a/apps/courier/src/pages/deliveries/index.tsx +++ b/apps/courier/src/pages/deliveries/index.tsx @@ -1,7 +1,24 @@ import { ListDeliveries } from "@sahil/features/Deliveries/ListDeliveries"; +import { Button, IconButton } from "ui"; +import { HiOutlineArrowRight, HiOutlineArrowLeft } from "react-icons/hi2"; + + export default function Deliveries() { return ( -
+
+
+ + +
+
+

Hello, James

+

+ Here are your delivery requests +

+
+
); diff --git a/apps/courier/src/pages/requests/index.tsx b/apps/courier/src/pages/requests/index.tsx index 88f0f31a..1a2a1f0c 100644 --- a/apps/courier/src/pages/requests/index.tsx +++ b/apps/courier/src/pages/requests/index.tsx @@ -6,13 +6,18 @@ export default function Requests() { return (
-
-

Hello, James

-

Here are your delivery requests

-
-
- -
+
+

Hello, James

+

+ Here are your delivery requests +

+
+
+ +
diff --git a/packages/features/Deliveries/DeliveryDetails.tsx b/packages/features/Deliveries/DeliveryDetails.tsx new file mode 100644 index 00000000..af30b2b1 --- /dev/null +++ b/packages/features/Deliveries/DeliveryDetails.tsx @@ -0,0 +1,184 @@ +import { Avatar, Card } from "ui"; +import { + HiOutlineClock, + HiOutlineCreditCard, + HiOutlineSquares2X2, + HiOutlineUser, + HiOutlineTruck, + HiOutlineCurrencyDollar, + HiOutlineMapPin +} from 'react-icons/hi2' + +interface DeliveryItem { + name: string; + quantity: number; + price: number; +} + +interface DeliveryDetailsProps { + id: string; + status: "pending" | "in_progress" | "completed" | "cancelled"; + client: { + name: string; + address: string; + phone: string; + }; + items: DeliveryItem[]; + payment: { + method: string; + total: number; + commission: number; + }; + timing: { + startTime: string; + endTime?: string; + duration?: string; + }; + distance: string; +} + +export function DeliveryDetails({ + id, + status, + client, + items, + payment, + timing, + distance, +}: DeliveryDetailsProps) { + const totalItems = items.reduce((sum, item) => sum + item.quantity, 0); + + return ( +
+
+

Delivery Details

+
+ {status.charAt(0).toUpperCase() + status.slice(1)} +
+
+
+ +
+

{client.name}

+
+
+ + +
+ {/* Client Information */} +
+
+ + Client Information +
+
+

+ + {client.address} +

+

+ + {client.phone} +

+
+
+ +
+ + {/* Timing Information */} +
+
+ + Timing +
+
+
+

Start Time

+

{timing.startTime}

+
+ {timing.endTime && ( +
+

End Time

+

{timing.endTime}

+
+ )} + {timing.duration && ( +
+

Duration

+
+ +

{timing.duration}

+
+
+ )} +
+

Distance

+
+ +

{distance}

+
+
+
+
+ +
+ + {/* Order Items */} +
+
+ + Order Items ({totalItems}) +
+
+ {items.map((item, index) => ( +
+
+
+

{item.name}

+

+ Quantity: {item.quantity} +

+
+

${item.price.toFixed(2)}

+
+ +
+ ))} +
+
+ +
+ + {/* Financial Information */} +
+
+ + Financial Details +
+
+
+

Payment Method

+
+ +

{payment.method}

+
+
+
+

Commission

+

${payment.commission.toFixed(2)}

+
+
+

Total Amount

+

${payment.total.toFixed(2)}

+
+
+
+
+ +
+ ); +} \ No newline at end of file diff --git a/packages/features/Deliveries/DeliveryOrders.tsx b/packages/features/Deliveries/DeliveryOrders.tsx new file mode 100644 index 00000000..028a6b08 --- /dev/null +++ b/packages/features/Deliveries/DeliveryOrders.tsx @@ -0,0 +1,32 @@ +import { Card } from "ui"; +import { OrderItem } from "@sahil/features/Orders/OrderItems"; + +export const DeliveryOrders = ({ order, deliveryStatus, onUpdateStatus }) => { + console.log(order); + return ( +
+ {order?.order_items.map((order) => ( + +

Order Details

+

Delivery Order ID: {order.id}

+ {order?.order_items && order?.order_items?.length > 0 ? ( +
+ {order.order_items.map((item, index) => ( + + ))} +
+ ) : ( +

No items found for this order.

+ )} + + + ))} +
+ ); + }; + \ No newline at end of file diff --git a/packages/features/Deliveries/DeliveryStatus.tsx b/packages/features/Deliveries/DeliveryStatus.tsx new file mode 100644 index 00000000..5b7ffabc --- /dev/null +++ b/packages/features/Deliveries/DeliveryStatus.tsx @@ -0,0 +1,62 @@ +import { useState } from 'react' +import { Button, Card } from "ui" + +import { HiCheckCircle, HiWindow, HiTruck, HiCreditCard } from 'react-icons/hi2' + +interface DeliveryStatusProps { + requestId: string + onStatusUpdate: (status: string) => void +} + +export function DeliveryStatus({ requestId, onStatusUpdate }: DeliveryStatusProps) { + const [currentStatus, setCurrentStatus] = useState('pending') + + const updateStatus = (newStatus: string) => { + setCurrentStatus(newStatus) + onStatusUpdate(newStatus) + } + + return ( + +

Order Status - Request ID: {requestId}

+
+
+ + +
+
+ + +
+
+ + +
+
+ + ) +} + diff --git a/packages/features/Deliveries/NavigationPreferences.tsx b/packages/features/Deliveries/NavigationPreferences.tsx new file mode 100644 index 00000000..1b379355 --- /dev/null +++ b/packages/features/Deliveries/NavigationPreferences.tsx @@ -0,0 +1,34 @@ +import { Button, Card } from "ui" + +import { HiOutlineMap, HiOutlineSignalSlash } from 'react-icons/hi2' +import Link from "next/link" + +export function NavigationPreferences() { + return ( +
+ +

+ Choose Navigation Method +

+
+
+ +

Follow Recommended Routes

+ +

Navigate Independently

+
+ +
+ +
+ ) +} + diff --git a/packages/features/Maps/BottomNav.tsx b/packages/features/Maps/BottomNav.tsx index fed2b5b1..53346a01 100644 --- a/packages/features/Maps/BottomNav.tsx +++ b/packages/features/Maps/BottomNav.tsx @@ -22,8 +22,8 @@ const navItems: NavItem[] = [ }, { icon: HiOutlineMapPin, - label: 'Discover', - href: '/discover' + label: 'Deliveries', + href: '/deliveries' }, { href: "/requests", diff --git a/packages/ui/components/Avatar.tsx b/packages/ui/components/Avatar.tsx index bf860c09..7e50af8c 100644 --- a/packages/ui/components/Avatar.tsx +++ b/packages/ui/components/Avatar.tsx @@ -18,7 +18,7 @@ export const Avatar = ({ alt, src, className }: AvatarProps) => {
) : (
-
+
{generateInitials(alt as string)}