https://www.figma.com/design/zlEXw2f8Pdbwug2gUVt7aJ/Untitled?
node-id=11-
1842&t=zFXK1OCcAi23dMy1-1
Order Delivery System: Front-End
Requirement Specification
1. Pages Overview & Navigation
The front-end will be divided into several key sections that ensure ease of navigation, rider
assignment, customer order handling, and reporting. Here’s an overview of the main
components/pages that the front-end team will need to build.
1.1 Dashboard
Admin Dashboard
This page allows the admin to view incoming orders, assign orders, manage riders, and track the
overall progress of order deliveries.
Sidebar Items:
1. Home
2. Orders Management
3. Rider Management
4. Wallet
5. Reports (Admin View)
6. Settings
Main Dashboard Elements:
o Orders Panel: Displays all incoming orders in a table format with the following
columns:
Order ID
Customer Location
Assigned Rider (if assigned)
Timer (20-minute timer once an order is assigned)
Status (Unassigned, Assigned, Order Started, Completed)
Actions: Admin can assign an order, change the timer, or mark it as
complete.
o Riders Status Panel: Displays active riders and their availability. The admin can
view each rider's status, the number of orders they are handling, and assign orders
manually if necessary.
o Order Summary: An overview of all orders (pending, in progress, completed)
with filtering options (today’s orders, weekly, etc.).
o Wallet Summary: Displays an overview of the admin’s wallet, pending
payments, and payment discrepancies.
o Notification Center: Shows all notifications related to the order status and rider
actions.
Rider Dashboard
This page allows the rider to view their assigned orders, respond to new orders, update order
statuses, and track their earnings.
Sidebar Items:
1. Home
2. Assigned Orders
3. Wallet
4. Reports (Rider View)
5. Profile/Settings
Main Dashboard Elements:
o Active Orders Panel: Displays a list of all assigned orders with a status timer.
Rider can click on each order to view details such as:
Order ID
Customer Location (without phone number)
Delivery Instructions
Order Status (Started, Arrived, Completed)
o Order Status Controls: Riders can update the status of each order directly from
this panel.
o New Orders Notification: Riders will be notified of new orders assigned to them
via Chrome notifications and can accept/decline orders.
o Wallet Summary: Displays the rider’s earnings, including the breakdown of
commissions for completed orders.
o Reports Section: Displays rider’s performance, delivery time efficiency, and
pending payments.
2. Order Management Pages
These pages are the core of the order handling functionality. Here’s how the front-end will break
down the order process:
2.1 Unassigned Orders (Admin Only)
Description: Displays all incoming orders that haven’t been automatically or manually
assigned to a rider.
UI Elements:
o Table View:
Order ID
Customer Location
Time Received
Auto-Assignment Status (matched rider or unassigned)
o Assign Order Button: Allows the admin to manually assign an order if it hasn't
been automatically matched to a rider based on location.
o View Order Details Modal: Clicking an order opens a modal with detailed
information (Customer Location, Items Ordered, Preferred Payment Method).
2.2 Active Orders (Admin & Rider)
Description: Displays all active orders that are in progress or yet to be delivered.
UI Elements:
o Table View:
Order ID
Customer Location
Rider Assigned
Order Timer
Status (Started, Bill Sent, Arrived, Completed)
o Order Details Modal: Riders can click on any order to view the order details and
update the status (Order Started, Arrived, Completed).
2.3 Completed Orders (Admin & Rider)
Description: Displays a list of all completed orders.
UI Elements:
o Table View:
Order ID
Customer Location
Payment Method
Status: Completed
o Payment Status Update: Admin can confirm payments made by the customer.
3. Wallet Management Pages
3.1 Admin Wallet
Description: Displays the balance and breakdown of the admin’s earnings, commissions,
and pending payments.
UI Elements:
o Total Balance: Shows the total wallet balance.
o Pending Payments Section: Lists any payments due to the admin from
completed orders.
o Filter Options: Filter by date, rider, and payment status.
3.2 Rider Wallet
Description: Displays the rider’s wallet with earnings, commission breakdown, and
pending payments.
UI Elements:
o Total Earnings: Shows the total earnings of the rider.
o Completed Orders Section: Lists orders completed and payments received.
o Company Commission Section: Shows the company’s 7% commission deducted
from each order.
4. Reports Pages
4.1 Admin Reports
Order Summary Report Page: Displays detailed reports of all orders, with filtering
options.
o Columns: Order ID, Rider, Customer Location, Time, Status
Rider Performance Report Page: Provides a breakdown of rider performance.
o Columns: Rider Name, Orders Handled, Average Delivery Time, Delays
Order Completion Rate Report Page: Shows the percentage of orders completed
within the 20-minute timeframe or custom timeframe.
Payment Report Page: Tracks all customer payments and highlights pending ones.
Customer Wallet Report Page: Displays detailed information on customer wallets.
4.2 Rider Reports
Daily Order Report Page: Lists all orders for the day, with status and payment
information.
Earnings Report Page: Displays the rider’s daily, weekly, and monthly earnings.
Delivery Time Report Page: Shows average delivery time and any delays for
performance tracking.
4.3 Business Owner Reports
Business Performance Report Page: A comprehensive overview of orders completed
and payments received.
Rider Efficiency Report Page: Analysis of rider performance, including number of
orders completed and average delivery time.
Customer Satisfaction Report Page: Displays customer feedback and ratings over time.
Financial Report Page: Summarizes total payments received, rider commissions,
company commissions, and outstanding balances.
5. Notifications System
Chrome Notifications: Notifications to both admin and riders for new orders, payment
updates, and order statuses.
Web Notifications: In-app notifications for admin and riders for order updates and new
assignments.
6. Sidebar Navigation and Menu
6.1 Admin Sidebar Menu
Home: Displays the dashboard overview.
Orders Management: Leads to the orders dashboard (unassigned, active, and
completed).
Rider Management: Leads to rider status and assignment.
Wallet: Displays admin wallet overview and earnings.
Reports: Leads to all reports for admin view.
Settings: Manages notification preferences, account settings, etc.
6.2 Rider Sidebar Menu
Home: Displays the rider dashboard.
Assigned Orders: Shows all active and completed orders for the rider.
Wallet: Displays rider earnings and payment status.
Reports: Leads to rider performance reports.
Profile/Settings: Manages rider account settings and notification preferences.
