Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SAH-117]: Courier Map View #231

Merged
merged 4 commits into from
Dec 11, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/courier/package.json
Original file line number Diff line number Diff line change
@@ -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": "*",
2 changes: 1 addition & 1 deletion apps/courier/src/Layout/layout.tsx
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@ export default function Layout({ children, ...props }: LayoutProps) {
user={session?.user}
/>
)}
<main className={session?.user ? "p-4" : "p-0"}>{children}</main>
<main>{children}</main>
</>
);
}
177 changes: 43 additions & 134 deletions apps/courier/src/pages/deliveries/[deliveryId].tsx
Original file line number Diff line number Diff line change
@@ -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 (
<div className="space-y-4">
{order?.order_items.map((order) => (
<Card key={order.id} className="space-y-4">
<h4 className="text-sm font-semibold">Order Details</h4>
<p>Delivery Order ID: {order.id}</p>
{order?.order_items && order?.order_items?.length > 0 ? (
<div className="space-y-2">
{order.order_items.map((item, index) => (
<OrderItem
key={index}
title={item?.product?.name}
quantity={item?.quantity}
price={item?.price}
/>
))}
</div>
) : (
<p>No items found for this order.</p>
)}
<DeliveryActions
orderId={order.id}
deliveryStatus={deliveryStatus}
onUpdateStatus={onUpdateStatus}
/>
</Card>
))}
</div>
);
};

const DeliveryActions = ({ orderId, deliveryStatus, onUpdateStatus }) => {
return (
<div className="flex flex-col sm:flex-row gap-2">
<button
className="btn btn-sm w-full sm:w-auto btn-primary"
onClick={() => onUpdateStatus(orderId, 'delivered')}
>
<HiOutlineCheck className="mr-2" />
Mark as Delivered
</button>
<button
className="btn btn-sm w-full sm:w-auto btn-error"
onClick={() => onUpdateStatus(orderId, 'cancelled')}
>
Cancel Delivery
</button>
<button
className="btn btn-sm w-full sm:w-auto btn-success"
onClick={() => onUpdateStatus(orderId, 'completed')}
>
<HiOutlineCheck className="mr-2" />
Mark as Completed
</button>
</div>
);
};

// 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 <p>Loading delivery information...</p>;
if (!delivery) return <p>No delivery found</p>;

const deliveryInfoItems = [
{
icon: <HiOutlineBanknotes />,
label: "Payment Method",
value: "N/A",
},
{
icon: <HiOutlineBriefcase />,
label: "Client",
value: "N/A",
},
{
icon: <HiOutlineTruck />,
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 (
<section className="space-y-4">
<Card title={`Delivery ID: ${delivery[0].id}`}>
<div className="space-y-4">
<div className="w-full grid grid-cols-1 md:grid-cols-3 gap-4">
{deliveryInfoItems.map((item, index) => (
<OrderInfoItem
key={index}
icon={item.icon}
label={item.label}
value={item.value}
/>
))}
</div>
<div className="flex flex-col sm:flex-row gap-2">
<button className="btn btn-sm w-full sm:w-auto btn-primary">
<HiOutlineMap className="mr-2" />
Follow Recommended Route
</button>
<button className="btn btn-sm w-full sm:w-auto">
<HiOutlineMapPin className="mr-2" />
Navigate Independently
</button>
</div>
{/* {

delivery.status === 'pending' && (
<button
className="btn btn-sm w-full sm:w-auto btn-secondary"
onClick={() => handleUpdateStatus(delivery.id, 'en_route')}
>
Start Trip
</button>
)} */}
<section className="p-4 space-y-4">
<DeliveryDetails {...dummyDeliveryData} />
{dummyDeliveryData.status === 'pending' && (
<div className="flex justify-between">
<button
className="btn btn-primary grow"
onClick={() => handleUpdateStatus(delivery[0].id, 'en_route')}
>
Start Delivery
</button>
<button
className="btn btn-ghost grow"
onClick={() => handleUpdateStatus(delivery[0].id, 'en_route')}
>
Cancel Delivery
</button>
</div>
</Card>
<DeliveryOrders
order={delivery[0]?.order}
deliveryStatus={"en_route"}
onUpdateStatus={handleUpdateStatus}
/>
)}
</section>
);
}
19 changes: 18 additions & 1 deletion apps/courier/src/pages/deliveries/index.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<section>
<section className="p-4 space-y-4">
<div className="flex justify-between items-center">
<IconButton icon={HiOutlineArrowLeft} className="btn btn-ghost btn-md" />
<Button variant="outline" className="text-sm btn-sm" size="sm">
Past Deliveries <HiOutlineArrowRight />
</Button>
</div>
<div className="space-y-2">
<h3 className="text-2xl font-bold">Hello, James</h3>
<p className="text-sm text-gray-500">
Here are your delivery requests
</p>
</div>
<div className="divider"></div>
<ListDeliveries />
</section>
);
20 changes: 6 additions & 14 deletions apps/courier/src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<section>
<VerificationCodeInput />
<MapView />
<TripInfo />
<BottomNav />
</section>
);
}
2 changes: 1 addition & 1 deletion apps/courier/src/pages/requests/[requestId].tsx
Original file line number Diff line number Diff line change
@@ -82,7 +82,7 @@ export default function RequestPage() {
const isSingleOrder = deliveryRequest[0].delivery_request_orders.length === 1;

return (
<section className="space-y-4">
<section className="space-y-4 p-4">
<Card title={`Request ID: ${deliveryRequest[0].id}`}>
<div className="space-y-4">
<div className="w-full grid grid-cols-1 md:grid-cols-3 gap-4">
18 changes: 17 additions & 1 deletion apps/courier/src/pages/requests/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,24 @@
import { ListDeliveryRequests } from "@sahil/features/Deliveries/ListDeliveryRequests";
import { Button } from "ui";
import { HiOutlineArrowRight } from "react-icons/hi2";

export default function Requests() {
return (
<section>
<section className="p-4 space-y-4">
<div className="flex justify-between items-start">
<div className="space-y-2">
<h3 className="text-2xl font-bold">Hello, James</h3>
<p className="text-sm text-gray-500">
Here are your delivery requests
</p>
</div>
<div>
<Button variant="outline" className="text-sm btn-sm" size="sm">
{" "}
Past Requests <HiOutlineArrowRight />
</Button>
</div>
</div>
<ListDeliveryRequests />
</section>
);
Loading