Skip to content

frontend : added detailed order information modal #51

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.

Sign up for GitHub

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

Open
Stephendelali wants to merge 1 commit into
base: main
Choose a base branch
from
Open

frontend : added detailed order information modal #51

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
176 changes: 121 additions & 55 deletions client/src/pages/Customer/OrderTracking.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,50 @@
import React, { useState } from "react";
import { FaBell, FaUser, FaSearch } from "react-icons/fa";

// Sample orders
const orders = [
{ status: "Delivered", item: "Red Tomato", payment: "Card payment", price: "GH₵182.94", date: "Jan 17, 2022" },
{ status: "Delivered", item: "Pepper", payment: "Card payment", price: "GH₵99.00", date: "Jan 17, 2022" },
{ status: "Pending", item: "Cabbage", payment: "Cash on delivery", price: "GH₵50.00", date: "Jan 18, 2022" },
{ status: "Cancelled", item: "Onions", payment: "Card payment", price: "GH₵120.00", date: "Jan 19, 2022" },
{
customer: "John Doe",
email: "john.doe@example.com",
status: "Delivered",
item: "Red Tomato",
payment: "Card payment",
price: "GH₵182.94",
date: "Jan 17, 2022",
},
{
customer: "Jane Smith",
email: "jane.smith@example.com",
status: "Delivered",
item: "Pepper",
payment: "Card payment",
price: "GH₵99.00",
date: "Jan 17, 2022",
},
{
customer: "Michael Brown",
email: "michael.brown@example.com",
status: "Pending",
item: "Cabbage",
payment: "Cash on delivery",
price: "GH₵50.00",
date: "Jan 18, 2022",
},
{
customer: "Emily Johnson",
email: "emily.johnson@example.com",
status: "Cancelled",
item: "Onions",
payment: "Card payment",
price: "GH₵120.00",
date: "Jan 19, 2022",
},
];

export default function OrderTracking() {
const [searchTerm, setSearchTerm] = useState("");
const [filteredStatus, setFilteredStatus] = useState("All");
const [ordersList, setOrdersList] = useState(orders);
const [selectedOrder, setSelectedOrder] = useState(null);

// Function to determine the status color
const getStatusColor = (status) => {
switch (status) {
case "Delivered":
Expand All @@ -37,31 +67,24 @@ export default function OrderTracking() {
case "Cancelled":
return "bg-red-600";
default:
return "bg-gray-600";
return "bg-gray-600";
}
};

// Filter orders based on search term and selected status
const filteredOrders = ordersList.filter(
const filteredOrders = orders.filter(
(order) =>
(order.status.toLowerCase().includes(searchTerm.toLowerCase()) ||
order.item.toLowerCase().includes(searchTerm.toLowerCase()) ||
order.payment.toLowerCase().includes(searchTerm.toLowerCase())) &&
(filteredStatus === "All" || order.status === filteredStatus)
);

// Handle item removal
const handleRemoveItem = (index) => {
const newOrdersList = [...ordersList];
newOrdersList.splice(index, 1);
setOrdersList(newOrdersList);
};
const closeModal = () => setSelectedOrder(null);

return (
<div className="bg-gray-100 min-h-screen p-2 py-2 ">
<div className="bg-gray-100 min-h-screen p-2 py-2">
<header className="flex justify-between items-center border rounded-lg bg-stone-200 p-1">
<h1 className="text-3xl font-semibold text-green-700">CropCircle</h1>

<div className="flex items-center gap-4">
<div className="relative">
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500" />
Expand All @@ -73,23 +96,19 @@ export default function OrderTracking() {
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
</div>

<div className="flex items-center gap-4 ">
<button className="relative text-gray-600 hover:text-gray-800">
<FaBell className="h-6 w-6 text-gray-500 hover:text-yellow-500" />
<span className="absolute top-0 right-0 inline-flex items-center justify-center px-1 text-xs font-bold leading-none text-white bg-red-500 rounded-full">
<span className="absolute top-0 right-0 px-1 text-xs font-bold text-white bg-red-500 rounded-full">
3
</span>
</button>

<div className="flex items-center gap-2">
<img
src="https://randomuser.me/api/portraits/women/44.jpg"
alt="User"
className="h-10 w-10 rounded-full object-cover border-2 border-green-500"
className="h-10 w-10 rounded-full border-2 border-green-500"
/>
<div className="flex flex-col">
<div>
<p className="text-gray-700 font-medium">Sarah</p>
<p className="text-gray-500 text-sm">Welcome back</p>
</div>
Expand All @@ -99,9 +118,7 @@ export default function OrderTracking() {

<main className="mt-10">
<div className="flex justify-between items-center mb-4">
<h2 className="text-3xl font-semibold ">Orders</h2>


<h2 className="text-3xl font-semibold">Orders</h2>
<select
value={filteredStatus}
onChange={(e) => setFilteredStatus(e.target.value)}
Expand All @@ -112,45 +129,94 @@ export default function OrderTracking() {
<option value="Pending">Pending</option>
<option value="Cancelled">Cancelled</option>
</select>

{/* Search input */}
{/* <input
type="text"
placeholder="Filter by status, name, etc..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="border p-2 rounded-lg border-gray-300 text-gray-600"
/> */}
</div>
<p className="text-gray-500 mb-6">View and track all your orders here.</p>

<div className="bg-white rounded shadow-md overflow-hidden">
{filteredOrders.map((order, index) => (
<div key={index} className="flex items-center justify-between p-4 border-b border-gray-200 border">
<span className={`flex items-center ${getStatusColor(order.status)} px-3 py-1 rounded-full text-gray-700 font-medium text-xs `}>
<div
key={index}
className="flex items-center justify-between p-4 border-b border-gray-200 cursor-pointer"
onClick={() => setSelectedOrder(order)}
>
<span
className={`flex items-center ${getStatusColor(order.status)} px-3 py-1 rounded-full text-gray-700 font-medium text-xs`}
>
<span className={`w-3 h-2 rounded-full ${getDotColor(order.status)} mr-2`}></span>
{order.status}
</span>
<div className="flex flex-col">
<span className="text-gray-700 font-medium">{order.item}</span>
<span className="text-gray-500 text-sm">{order.payment}</span>
<div>
<p className="text-gray-700 font-medium">{order.item}</p>
<p className="text-gray-500 text-sm">{order.payment}</p>
</div>
<div className="flex flex-col items-end">
<span className="text-gray-700 font-medium">{order.price}</span>
<span className="text-gray-500 text-sm">{order.date}</span>
<div className="text-right">
<p className="text-gray-700 font-medium">{order.price}</p>
<p className="text-gray-500 text-sm">{order.date}</p>
</div>
<button
className="text-gray-400 hover:text-gray-600"
onClick={() => handleRemoveItem(index)}
>
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
))}
</div>
</main>

{selectedOrder && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
<div className="bg-white rounded-lg p-8 w-1/2 shadow-lg">
<h2 className="text-3xl font-bold text-center mb-6">Order Detail</h2>
<div className="space-y-6 shadow-lg hover:shadow-xl p-6 bg-white border border-gray-200 rounded-lg">
<div className="flex justify-between">
<span className="font-medium text-gray-700">Customer</span>
<div className="text-right">
<p className="text-gray-900 font-medium">{selectedOrder.customer}</p>
<p className="text-sm text-gray-500">{selectedOrder.email}</p>
</div>
</div>
<div className="flex justify-between">
<span className="font-medium text-gray-700">Payment Method</span>
<p className="text-gray-900 font-medium">{selectedOrder.payment}</p>
</div>
<div className="flex justify-between">
<span className="font-medium text-gray-700">Date</span>
<p className="text-gray-900 font-medium">{selectedOrder.date}</p>
</div>
<div className="flex justify-between">
<span className="font-medium text-gray-700">Order Status</span>
<span
className={`px-3 py-1 rounded-full text-sm font-medium ${
selectedOrder.status === "Delivered"
? "bg-green-100 text-green-600"
: selectedOrder.status === "Pending"
? "bg-yellow-100 text-yellow-600"
: "bg-red-100 text-red-600"
}`}
>
{selectedOrder.status}
</span>
</div>
<div className="flex justify-between">
<span className="font-medium text-gray-700">Total Price</span>
<p className="text-gray-900 font-medium">{selectedOrder.price}</p>
</div>
</div>

<div className="mt-8 flex justify-center gap-4">
<button
className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
onClick={closeModal}
>
Close
</button>
<button
className="px-6 py-2 bg-green-500 text-white rounded hover:bg-green-600"
onClick={() => {
alert("Order marked as complete!");
closeModal();
}}
>
Complete
</button>
</div>
</div>
</div>
)}
</div>
);
}
}