Merge pull request #231 from Sahil-Connect/SAH-117

[SAH-117]: Courier Map View

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": "*",

apps/courier/src/Layout/layout.tsx

@@ -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>
     </>
   );
 }

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 (
-    <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>
   );
 }

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 (
-    <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>
   );

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 (
     <section>
-      <VerificationCodeInput />
+      <MapView />
+      <TripInfo />
+      <BottomNav />
     </section>
   );
 }

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 (
-    <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">

apps/courier/src/pages/requests/index.tsx

@@ -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>
   );