From 56b741df5b063564b3cea74eecf8fb86fd4071d9 Mon Sep 17 00:00:00 2001 From: eman-bfloat Date: Wed, 11 Dec 2024 19:14:10 +0300 Subject: [PATCH 1/4] feat: courier map view --- apps/courier/package.json | 2 +- apps/courier/src/Layout/layout.tsx | 2 +- apps/courier/src/pages/index.tsx | 20 +- packages/features/Maps/BottomNav.tsx | 74 ++++++++ packages/features/Maps/MapView.tsx | 269 +++++++++++++++++++++++++++ packages/features/Maps/TripInfo.tsx | 42 +++++ packages/features/package.json | 3 +- yarn.lock | 40 ++++ 8 files changed, 435 insertions(+), 17 deletions(-) create mode 100644 packages/features/Maps/BottomNav.tsx create mode 100644 packages/features/Maps/MapView.tsx create mode 100644 packages/features/Maps/TripInfo.tsx diff --git a/apps/courier/package.json b/apps/courier/package.json index 64594538..e86ed6be 100644 --- a/apps/courier/package.json +++ b/apps/courier/package.json @@ -12,7 +12,7 @@ "@apollo/react-hooks": "^4.0.0", "@formkit/auto-animate": "^0.7.0", "@hookform/resolvers": "^3.3.0", - "@react-google-maps/api": "^2.19.2", + "@react-google-maps/api": "^2.20.3", "@sahil/configs": "*", "@sahil/features": "*", "@sahil/lib": "*", diff --git a/apps/courier/src/Layout/layout.tsx b/apps/courier/src/Layout/layout.tsx index d1c155fa..9c7ff04b 100644 --- a/apps/courier/src/Layout/layout.tsx +++ b/apps/courier/src/Layout/layout.tsx @@ -40,7 +40,7 @@ export default function Layout({ children, ...props }: LayoutProps) { user={session?.user} /> )} -
{children}
+
{children}
); } diff --git a/apps/courier/src/pages/index.tsx b/apps/courier/src/pages/index.tsx index 9f15086e..f07c9da4 100644 --- a/apps/courier/src/pages/index.tsx +++ b/apps/courier/src/pages/index.tsx @@ -1,20 +1,12 @@ -import Image from "next/image"; -import { Inter } from "next/font/google"; -import { useFetchCouriers } from "@sahil/lib/hooks/couriers"; -import { LatestDeliveries } from "@sahil/features/Couriers/LatestDeliveries"; -import { IncomingDeliveryRequest } from "@sahil/features/Couriers/IncomingDeliveryRequest"; -import { PhoneNumberInput } from "@sahil/features/auth/PhoneNumberInput"; -import { VerificationCodeInput } from "@sahil/features/auth/VerificationCodeInput"; - -const request = { - id: 1, - name: "BBQ Pizza", -}; - +import { MapView } from "@sahil/features/Maps/MapView"; +import { BottomNav } from "@sahil/features/Maps/BottomNav"; +import { TripInfo } from "@sahil/features/Maps/TripInfo"; export default function Home() { return (
- + + +
); } diff --git a/packages/features/Maps/BottomNav.tsx b/packages/features/Maps/BottomNav.tsx new file mode 100644 index 00000000..71acf822 --- /dev/null +++ b/packages/features/Maps/BottomNav.tsx @@ -0,0 +1,74 @@ +"use client"; + +import { useState } from "react"; + +import { HiOutlineMapPin, HiOutlineChevronUp, HiOutlineHome, HiOutlineBell, HiOutlineUser } from "react-icons/hi2"; + +import { useRouter, usePathname } from "next/navigation"; +import Link from "next/link"; + + +interface NavItem { + icon: typeof HiOutlineHome + label: string + href: string + } + +const navItems: NavItem[] = [ + { + icon: HiOutlineHome, + label: 'Home', + href: '/' + }, + { + icon: HiOutlineMapPin, + label: 'Discover', + href: '/discover' + }, + { + href: "/requests", + label: "Requests", + icon: HiOutlineBell, + }, + { + icon: HiOutlineUser, + label: 'Profile', + href: '/profile' + } + ] + +export function BottomNav () { + const pathname = usePathname(); + + + return ( +
+
+ {navItems.map((item) => { + const isActive = pathname === item.href; + return ( +
+ + + + + {item.label} + +
+ ); + })} +
+
+ ) +} \ No newline at end of file diff --git a/packages/features/Maps/MapView.tsx b/packages/features/Maps/MapView.tsx new file mode 100644 index 00000000..e541c994 --- /dev/null +++ b/packages/features/Maps/MapView.tsx @@ -0,0 +1,269 @@ +import React, { useState, useRef, useCallback } from "react"; +import { + GoogleMap, + Marker, + OverlayView, + useJsApiLoader, + DirectionsRenderer, +} from "@react-google-maps/api"; +import { + HiOutlineFlag, + HiOutlineMapPin, + HiOutlineArrowUpCircle, +} from "react-icons/hi2"; + +const defaultCenter = { + lat: -1.94995, + lng: 30.05885, +}; + +const mapContainerStyle = { + width: "100%", + height: "75vh", +}; + +type LocationType = "Origin" | "Destination" | "CurrentLocation"; + +const origin = { + id: 4, + name: "Heaven Restaurant", + description: + "An upscale restaurant featuring local and international dishes.", + lat: -1.9446, + lng: 30.0593, + icon: HiOutlineMapPin, + type: "Origin", +}; + +const destination = { + id: 5, + name: "Kigali Marriott Hotel", + description: "A luxury hotel with top-notch dining options.", + lat: -1.95174, + lng: 30.06185, + icon: HiOutlineFlag, + type: "Destination", +}; + +const currentLocation = { + id: 6, + name: "Current Location", + lat: -1.94815, + lng: 30.06057, + icon: HiOutlineArrowUpCircle, + type: "CurrentLocation", +}; + +export const cleanMapStyle = [ + { + // Hide all businesses/POIs that aren't ours + featureType: "poi", + elementType: "labels", + stylers: [{ visibility: "off" }], + }, + { + // Hide transit stations/lines + featureType: "transit", + elementType: "labels", + stylers: [{ visibility: "off" }], + }, + { + // Keep only major road labels + featureType: "road", + elementType: "labels", + stylers: [{ visibility: "simplified" }], + }, + { + // Simplify road network visibility + featureType: "road.local", + elementType: "labels", + stylers: [{ visibility: "off" }], + }, + { + // Hide business districts + featureType: "administrative.neighborhood", + elementType: "labels", + stylers: [{ visibility: "off" }], + }, + { + // Minimal landmark labels + featureType: "landscape.man_made", + elementType: "labels", + stylers: [{ visibility: "off" }], + }, +]; + +const CurrentLocationMarker = ({ currentLocation }) => { + return ( +
+ +
+ ); +}; + +export const MapView = () => { + const { isLoaded } = useJsApiLoader({ + id: "google-map-script", + googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY as string, + }); + + const [directions, setDirections] = + useState(null); + const mapRef = useRef(null); + + const onMapLoad = useCallback((map: google.maps.Map) => { + mapRef.current = map; + }, []); + + const fetchDirections = useCallback( + (start: google.maps.LatLngLiteral, end: google.maps.LatLngLiteral) => { + if (!mapRef.current) { + console.log("Map ref not available"); + return; + } + + const directionsService = new google.maps.DirectionsService(); + console.log("Fetching directions from:", start, "to:", end); + + directionsService.route( + { + origin: start, + destination: end, + travelMode: google.maps.TravelMode.DRIVING, + }, + (result, status) => { + console.log("Direction service status:", status); + if (status === google.maps.DirectionsStatus.OK && result) { + console.log("Received directions:", result); + setDirections(result); + } else { + console.error("Failed to get directions:", status); + } + } + ); + }, + [] + ); + + React.useEffect(() => { + console.log( + "Effect running with origin:", + origin, + "destination:", + destination + ); + const start = { lat: origin.lat, lng: origin.lng }; + const end = { lat: destination.lat, lng: destination.lng }; + fetchDirections(start, end); + }, [fetchDirections, origin, destination]); + + if (!isLoaded) { + return
Loading...
; + } + + return ( +
+ {isLoaded ? ( + + {[origin, destination, currentLocation].map((location) => { + console.log("Location:", location); + console.log("type", location.type === "CurrentLocation"); + return ( + + ({ + x: -(width / 2), + y: -(height + 20), + })} + > + {location.type === "CurrentLocation" ? ( + + ) : ( +
+
+ +
+ + {/* Text Content */} +
+

+ {location.name} +

+
+
+ )} + + + ); + })} + {directions && ( + + )} + + ) : ( +
Loading...
+ )} +
+ ); +}; diff --git a/packages/features/Maps/TripInfo.tsx b/packages/features/Maps/TripInfo.tsx new file mode 100644 index 00000000..da1fda1b --- /dev/null +++ b/packages/features/Maps/TripInfo.tsx @@ -0,0 +1,42 @@ +import { Card } from "ui"; +import { HiArrowLeft, HiArrowUp, HiOutlineClock, HiMap } from "react-icons/hi2"; + +interface TripInfoProps { + currentStreet?: string; + nextStreet?: string; + distance?: string; + duration?: string; + nextTurn?: "left" | "right" | "straight"; +} + +export const TripInfo = ({ + currentStreet = "Bryant St", + nextStreet = "N 50th St", + distance = "0.3 mi", + duration = "3 min", + nextTurn = "left", +}: TripInfoProps) => { + return ( + + {/* Main Direction Info */} +
+
+ + 19:14 +
+
+
+

+ {distance} +

+

{currentStreet}

+
+
+
+ + {duration} +
+
+ + ); +}; \ No newline at end of file diff --git a/packages/features/package.json b/packages/features/package.json index e3007d2f..78d3f2ee 100644 --- a/packages/features/package.json +++ b/packages/features/package.json @@ -4,8 +4,9 @@ "main": "index.js", "license": "MIT", "dependencies": { - "@sahil/lib": "*", + "@react-google-maps/api": "^2.20.3", "@sahil/configs": "*", + "@sahil/lib": "*", "ui": "*" } } diff --git a/yarn.lock b/yarn.lock index 94526747..cfd69158 100644 --- a/yarn.lock +++ b/yarn.lock @@ -950,6 +950,11 @@ dependencies: fast-deep-equal "^3.1.3" +"@googlemaps/js-api-loader@1.16.8": + version "1.16.8" + resolved "https://registry.yarnpkg.com/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz#1595a2af80ca07e551fc961d921a2437d1cb3643" + integrity sha512-CROqqwfKotdO6EBjZO/gQGVTbeDps5V7Mt9+8+5Q+jTg5CRMi3Ii/L9PmV3USROrt2uWxtGzJHORmByxyo9pSQ== + "@googlemaps/markerclusterer@2.3.2": version "2.3.2" resolved "https://registry.yarnpkg.com/@googlemaps/markerclusterer/-/markerclusterer-2.3.2.tgz#b311c26a0c0e8bb6325759ea690aef68c7150d8a" @@ -958,6 +963,14 @@ fast-deep-equal "^3.1.3" supercluster "^8.0.1" +"@googlemaps/markerclusterer@2.5.3": + version "2.5.3" + resolved "https://registry.yarnpkg.com/@googlemaps/markerclusterer/-/markerclusterer-2.5.3.tgz#9f891ce7e8e161775f3a3e2c9f66956810284591" + integrity sha512-x7lX0R5yYOoiNectr10wLgCBasNcXFHiADIBdmn7jQllF2B5ENQw5XtZK+hIw4xnV0Df0xhN4LN98XqA5jaiOw== + dependencies: + fast-deep-equal "^3.1.3" + supercluster "^8.0.1" + "@googlemaps/url-signature@^1.0.4": version "1.0.31" resolved "https://registry.yarnpkg.com/@googlemaps/url-signature/-/url-signature-1.0.31.tgz#35f846bfae76c5da56771495f10b5e31ae7be82b" @@ -2092,16 +2105,38 @@ "@types/google.maps" "3.53.5" invariant "2.2.4" +"@react-google-maps/api@^2.20.3": + version "2.20.3" + resolved "https://registry.yarnpkg.com/@react-google-maps/api/-/api-2.20.3.tgz#0d30e6753d7cddc34f2cd9cc7c5a5a7460adb438" + integrity sha512-ndXC8nZDPT78nCceZnftGSvA/iVhwx2XhlfEYaoUy2biGelhrE2vDzjyTuZhb4RV+bVYpd4LkIf3hzyxAFd+Qg== + dependencies: + "@googlemaps/js-api-loader" "1.16.8" + "@googlemaps/markerclusterer" "2.5.3" + "@react-google-maps/infobox" "2.20.0" + "@react-google-maps/marker-clusterer" "2.20.0" + "@types/google.maps" "3.58.1" + invariant "2.2.4" + "@react-google-maps/infobox@2.19.2": version "2.19.2" resolved "https://registry.yarnpkg.com/@react-google-maps/infobox/-/infobox-2.19.2.tgz#b6bda962a4fa1074fdd3dfd63bc4c7d68b1dd745" integrity sha512-6wvBqeJsQ/eFSvoxg+9VoncQvNoVCdmxzxRpLvmjPD+nNC6mHM0vJH1xSqaKijkMrfLJT0nfkTGpovrF896jwg== +"@react-google-maps/infobox@2.20.0": + version "2.20.0" + resolved "https://registry.yarnpkg.com/@react-google-maps/infobox/-/infobox-2.20.0.tgz#7c3dd1821c9f1e1e92570f37419b97f6f956c7ee" + integrity sha512-03PJHjohhaVLkX6+NHhlr8CIlvUxWaXhryqDjyaZ8iIqqix/nV8GFdz9O3m5OsjtxtNho09F/15j14yV0nuyLQ== + "@react-google-maps/marker-clusterer@2.19.2": version "2.19.2" resolved "https://registry.yarnpkg.com/@react-google-maps/marker-clusterer/-/marker-clusterer-2.19.2.tgz#24d9fb9aa555bb063ba5fe82f80fcd7d48662184" integrity sha512-x9ibmsP0ZVqzyCo1Pitbw+4b6iEXRw/r1TCy3vOUR3eKrzWLnHYZMR325BkZW2r8fnuWE/V3Fp4QZOP9qYORCw== +"@react-google-maps/marker-clusterer@2.20.0": + version "2.20.0" + resolved "https://registry.yarnpkg.com/@react-google-maps/marker-clusterer/-/marker-clusterer-2.20.0.tgz#6b64177843a60c66e0ebaf85037a47ecd07007df" + integrity sha512-tieX9Va5w1yP88vMgfH1pHTacDQ9TgDTjox3tLlisKDXRQWdjw+QeVVghhf5XqqIxXHgPdcGwBvKY6UP+SIvLw== + "@repeaterjs/repeater@^3.0.4": version "3.0.5" resolved "https://registry.yarnpkg.com/@repeaterjs/repeater/-/repeater-3.0.5.tgz#b77571685410217a548a9c753aa3cdfc215bfc78" @@ -2316,6 +2351,11 @@ resolved "https://registry.yarnpkg.com/@types/google.maps/-/google.maps-3.53.5.tgz#0f3010ab4eabe46721f3604462196975b640aab9" integrity sha512-HoRq4Te8J6krH7hj+TfdYepqegoKZCj3kkaK5gf+ySFSHLvyqYkDvkrtbcVJXQ6QBphQ0h1TF7p4J6sOh4r/zg== +"@types/google.maps@3.58.1": + version "3.58.1" + resolved "https://registry.yarnpkg.com/@types/google.maps/-/google.maps-3.58.1.tgz#71ce3dec44de1452f56641d2c87c7dd8ea964b4d" + integrity sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ== + "@types/http-cache-semantics@^4.0.1": version "4.0.4" resolved "https://registry.yarnpkg.com/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz#b979ebad3919799c979b17c72621c0bc0a31c6c4" From ecfaf3e24c483af31bee2a2f369319f8d7fedf10 Mon Sep 17 00:00:00 2001 From: eman-bfloat Date: Wed, 11 Dec 2024 19:43:08 +0300 Subject: [PATCH 2/4] feat: improve mapview ui --- apps/courier/src/Layout/layout.tsx | 2 +- .../src/pages/requests/[requestId].tsx | 2 +- apps/courier/src/pages/requests/index.tsx | 2 +- packages/features/Maps/BottomNav.tsx | 4 +- packages/features/Maps/MapView.tsx | 76 +++++++++---------- 5 files changed, 39 insertions(+), 47 deletions(-) diff --git a/apps/courier/src/Layout/layout.tsx b/apps/courier/src/Layout/layout.tsx index 9c7ff04b..940cf989 100644 --- a/apps/courier/src/Layout/layout.tsx +++ b/apps/courier/src/Layout/layout.tsx @@ -40,7 +40,7 @@ export default function Layout({ children, ...props }: LayoutProps) { user={session?.user} /> )} -
{children}
+
{children}
); } diff --git a/apps/courier/src/pages/requests/[requestId].tsx b/apps/courier/src/pages/requests/[requestId].tsx index a38cb4d0..25ee20f0 100644 --- a/apps/courier/src/pages/requests/[requestId].tsx +++ b/apps/courier/src/pages/requests/[requestId].tsx @@ -82,7 +82,7 @@ export default function RequestPage() { const isSingleOrder = deliveryRequest[0].delivery_request_orders.length === 1; return ( -
+
diff --git a/apps/courier/src/pages/requests/index.tsx b/apps/courier/src/pages/requests/index.tsx index a5af0a62..f971b519 100644 --- a/apps/courier/src/pages/requests/index.tsx +++ b/apps/courier/src/pages/requests/index.tsx @@ -2,7 +2,7 @@ import { ListDeliveryRequests } from "@sahil/features/Deliveries/ListDeliveryReq export default function Requests() { return ( -
+
); diff --git a/packages/features/Maps/BottomNav.tsx b/packages/features/Maps/BottomNav.tsx index 71acf822..fed2b5b1 100644 --- a/packages/features/Maps/BottomNav.tsx +++ b/packages/features/Maps/BottomNav.tsx @@ -49,11 +49,11 @@ export function BottomNav () { return (
{ return (
{ ); }; +const LocationMarker = ({ location }) => { + return ( +
+
+ +
+ + {/* Text Content */} +
+

+ {location.name} +

+
+
+ ); +}; + export const MapView = () => { const { isLoaded } = useJsApiLoader({ id: "google-map-script", @@ -188,8 +217,6 @@ export const MapView = () => { }} > {[origin, destination, currentLocation].map((location) => { - console.log("Location:", location); - console.log("type", location.type === "CurrentLocation"); return ( { {location.type === "CurrentLocation" ? ( ) : ( -
-
- -
- - {/* Text Content */} -
-

- {location.name} -

-
-
+ )} From be7432b84b7eda9a70a1659191af1a3e0482b2a9 Mon Sep 17 00:00:00 2001 From: eman-bfloat Date: Wed, 11 Dec 2024 20:06:09 +0300 Subject: [PATCH 3/4] feat: update request details --- apps/courier/src/pages/requests/index.tsx | 13 +++++++++- .../DeliveryRequestOverviewCard.tsx | 26 ++++++++----------- packages/features/Maps/MapView.tsx | 4 +-- 3 files changed, 25 insertions(+), 18 deletions(-) diff --git a/apps/courier/src/pages/requests/index.tsx b/apps/courier/src/pages/requests/index.tsx index f971b519..88f0f31a 100644 --- a/apps/courier/src/pages/requests/index.tsx +++ b/apps/courier/src/pages/requests/index.tsx @@ -1,8 +1,19 @@ import { ListDeliveryRequests } from "@sahil/features/Deliveries/ListDeliveryRequests"; +import { Button } from "ui"; +import { HiOutlineArrowRight } from "react-icons/hi2"; export default function Requests() { return ( -
+
+
+
+

Hello, James

+

Here are your delivery requests

+
+
+ +
+
); diff --git a/packages/features/Deliveries/DeliveryRequestOverviewCard.tsx b/packages/features/Deliveries/DeliveryRequestOverviewCard.tsx index 79b7dc78..38ab8f0c 100644 --- a/packages/features/Deliveries/DeliveryRequestOverviewCard.tsx +++ b/packages/features/Deliveries/DeliveryRequestOverviewCard.tsx @@ -1,5 +1,5 @@ import { FC } from "react"; -import { Card } from "ui"; +import { Card, Button } from "ui"; import { HiCalendarDays, HiOutlineArrowRight } from "react-icons/hi2"; import Link from "next/link"; @@ -10,34 +10,30 @@ export const DeliveryRequestOverviewCard: FC<{ request: any }> = ({ request }) = const updatedDate = new Date(request.updated_at); return ( - +
+
+

Request ID: ${request.id.slice(0, 8)}

+
- {request.status}
-

{createdDate.toLocaleDateString()}

{createdDate.toLocaleTimeString()}

-

Courier ID: {request?.courierId?.slice(0, 8)}

Delivery Method: {request.delivery_method || 'Not specified'}

Orders: {request.delivery_request_orders.length}

-

Last Updated: {updatedDate.toLocaleString()}

- {hasActions && ( -
- - -
- )} - - View Details - + + +
+ + +
); }; diff --git a/packages/features/Maps/MapView.tsx b/packages/features/Maps/MapView.tsx index 29810b76..740ae782 100644 --- a/packages/features/Maps/MapView.tsx +++ b/packages/features/Maps/MapView.tsx @@ -50,8 +50,8 @@ const destination = { const currentLocation = { id: 6, name: "Current Location", - lat: -1.9446, - lng: 30.0593, +lat: -1.94815, +lng: 30.06057, icon: HiOutlineArrowUpCircle, type: "CurrentLocation", }; From d3ad1a77e9359c80257a82e3829739e303d3bc8d Mon Sep 17 00:00:00 2001 From: eman-bfloat Date: Wed, 11 Dec 2024 20:50:28 +0300 Subject: [PATCH 4/4] 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)}