Skip to content

Commit

Permalink
Merge pull request #8 from lksnjw/this-is-the-eding-branch
Browse files Browse the repository at this point in the history 
This is the eding branch
  • Loading branch information
@lksnjw
lksnjw authored Sep 30, 2024
2 parents b3edb8b + 064fbc2 commit 7b42dec
Show file tree
Hide file tree
Showing 2 changed files with 279 additions and 90 deletions.
200 changes: 166 additions & 34 deletions frontend/src/Pages/delivery/DLDriverDashboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import DeliverySidebar from '../../Components/delivery/DeliverySidebar';
import { FaCheck, FaTruck, FaClipboardCheck, FaShippingFast } from 'react-icons/fa'; // Import icons for status

const DLDriverDashboard = () => {
const [driver, setDriver] = useState(null);
Expand Down Expand Up @@ -64,8 +65,76 @@ const DLDriverDashboard = () => {
}
};

const handleStatusUpdate = async (deliveryId, currentStatus) => {
let newStatus;

// Determine next status
if (currentStatus === 'Ready') {
newStatus = 'Picked Up';
} else if (currentStatus === 'Picked Up') {
newStatus = 'On The Way';
} else if (currentStatus === 'On The Way') {
newStatus = 'Delivered';
} else {
return; // If already delivered or status is not eligible for change, do nothing
}

try {
const driverToken = localStorage.getItem('driverToken');
await axios.put(
`/api/delivery/${deliveryId}/status`,
{ deliveryStatus: newStatus },
{
headers: {
Authorization: `Bearer ${driverToken}`,
},
}
);

// Update the delivery status in the state
setOngoingDeliveries((prevDeliveries) =>
prevDeliveries.map((delivery) =>
delivery._id === deliveryId
? { ...delivery, deliveryStatus: newStatus }
: delivery
)
);
} catch (error) {
console.error('Error updating delivery status:', error);
}
};

const handleViewDelivery = (deliveryId) => {
navigate(`/driver/delivery/${deliveryId}`); // Redirect to delivery view page
};

if (loading) return <div>Loading...</div>;

// Helper function to render delivery status with icons
const renderDeliveryStatus = (status) => {
if (status === 'Ready') {
return <FaClipboardCheck className="text-yellow-500" />;
} else if (status === 'Picked Up') {
return <FaTruck className="text-blue-500" />;
} else if (status === 'On The Way') {
return <FaShippingFast className="text-green-500" />;
} else if (status === 'Delivered') {
return <FaCheck className="text-gray-500" />;
}
};

// Helper function to render progress bar based on status
const renderProgressBar = (status) => {
const progress = status === 'Ready' ? 25 : status === 'Picked Up' ? 50 : status === 'On The Way' ? 75 : 100;
const bgColor = progress === 100 ? 'bg-gray-400' : 'bg-green-500';

return (
<div className="w-full bg-gray-200 rounded-full h-2.5">
<div className={`${bgColor} h-2.5 rounded-full`} style={{ width: `${progress}%` }}></div>
</div>
);
};

return (
<div className="flex min-h-screen bg-gray-50">
{/* Sidebar */}
Expand All @@ -75,6 +144,15 @@ const DLDriverDashboard = () => {

{/* Main content */}
<main className="flex-1 ml-64 p-16 overflow-y-auto">

{/* NIC and Password Equality Check */}
{driver && driver.idCardNumber === driver.password && (
<div className="bg-red-500 text-white p-4 rounded-md mb-6 text-center">
<strong>Warning:</strong> Your NIC number and password are the same. Please update your password for better security.
</div>
)}


<div className="max-w-5xl mx-auto p-8 bg-white shadow-lg rounded-lg">
<h1 className="text-3xl font-bold mb-6 text-center">Welcome, {driver.fullName}</h1>

Expand Down Expand Up @@ -111,41 +189,95 @@ const DLDriverDashboard = () => {
</div>

{/* Ongoing Deliveries Section */}
<div className="bg-gray-100 p-6 rounded-lg shadow-lg">
<h2 className="text-2xl font-bold mb-4">Ongoing Deliveries</h2>
{ongoingDeliveries.length > 0 ? (
<table className="min-w-full bg-white border border-gray-200">
<thead>
<tr className="bg-gray-200">
<th className="px-4 py-2 border">Tracking ID</th>
<th className="px-4 py-2 border">Shop Name</th>
<th className="px-4 py-2 border">Pickup Address</th>
<th className="px-4 py-2 border">Dropoff Address</th>
<th className="px-4 py-2 border">Status</th>
<th className="px-4 py-2 border">Actions</th>
</tr>
</thead>
<tbody>
{ongoingDeliveries.map((delivery) => (
<tr key={delivery._id} className="hover:bg-gray-100">
<td className="px-4 py-2 border">{delivery.trackingID}</td>
<td className="px-4 py-2 border">{delivery.shopName}</td>
<td className="px-4 py-2 border">{delivery.pickupAddress}</td>
<td className="px-4 py-2 border">{delivery.dropOffAddress}</td>
<td className="px-4 py-2 border">{delivery.deliveryStatus}</td>
<td className="px-4 py-2 border">
<button className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
View
</button>
</td>
</tr>
))}
</tbody>
</table>
) : (
<p>No ongoing deliveries at the moment.</p>
)}
<div className="bg-gray-100 p-6 rounded-lg shadow-lg">
<h2 className="text-2xl font-bold mb-4">Ongoing Deliveries</h2>

{ongoingDeliveries.length > 0 ? (
<div className="space-y-6">
{ongoingDeliveries.map((delivery) => (
<div key={delivery._id} className="bg-white p-6 shadow-lg rounded-lg">
{/* Delivery Tracking ID */}
<h3 className="text-xl font-semibold mb-4">Tracking ID: {delivery.trackingID}</h3>

{/* Delivery Status Progress Bar */}
<div className="relative pt-1 mb-4">
<div className="flex mb-2 items-center justify-between">
<div>
<span className="text-base font-medium text-green-500">
Status: {delivery.deliveryStatus}
</span>
</div>
</div>
<div className="overflow-hidden h-6 mb-4 text-xs flex rounded bg-gray-200">
<div
style={{
width: `${
delivery.deliveryStatus === 'Ready'
? 25
: delivery.deliveryStatus === 'Picked Up'
? 50
: delivery.deliveryStatus === 'On The Way'
? 75
: 100
}%`,
}}
className={`${
delivery.deliveryStatus === 'Delivered' ? 'bg-gray-400' : 'bg-green-500'
} h-full rounded-full`}
></div>
</div>
<div className="text-sm text-gray-600">
Progress:
{delivery.deliveryStatus === 'Ready'
? '25%'
: delivery.deliveryStatus === 'Picked Up'
? '50%'
: delivery.deliveryStatus === 'On The Way'
? '75%'
: '100% (Delivered)'}
</div>
</div>

{/* Delivery Table for Detailed Info */}
<table className="min-w-full bg-white border border-gray-200 mb-4">
<thead>
<tr className="bg-gray-200">
<th className="px-4 py-2 border">Shop Name</th>
<th className="px-4 py-2 border">Pickup Address</th>
<th className="px-4 py-2 border">Dropoff Address</th>
<th className="px-4 py-2 border">Actions</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-gray-100">
<td className="px-4 py-2 border">{delivery.shopName}</td>
<td className="px-4 py-2 border">{delivery.pickupAddress}</td>
<td className="px-4 py-2 border">{delivery.dropOffAddress}</td>
<td className="px-4 py-2 border space-y-2">
<button
onClick={() => handleStatusUpdate(delivery._id, delivery.deliveryStatus)}
className="block w-full px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-md"
>
Update Status
</button>
<button
onClick={() => handleViewDelivery(delivery._id)}
className="block w-full px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md"
>
View
</button>
</td>
</tr>
</tbody>
</table>
</div>
))}
</div>
) : (
<p>No ongoing deliveries at the moment.</p>
)}
</div>

</div>
</main>
</div>
Expand Down
Loading

0 comments on commit 7b42dec

Please sign in to comment.