Skip to main content
The Metrics Display provides a comprehensive financial overview of your business performance, highlighting the impact of RTO on your bottom line with animated, color-coded cards.

​
Component Location

Implemented in: src/components/MetricsDisplay.jsx:26-131

​
Key Performance Indicators

​
Total Revenue

  • Icon: Indian Rupee
  • Calculation: monthlyOrders × averageOrderValue
  • Display: Currency with animated counter
  • Purpose: Shows gross revenue potential before accounting for RTO losses
  • Code Reference: calculations.js:12
Total Revenue represents the maximum possible revenue if all orders were successfully delivered.

​
COD Orders

  • Icon: Package
  • Calculation: Math.round(monthlyOrders × (codPercentage / 100))
  • Display: Whole number count
  • Purpose: Shows order volume at risk of RTO (only COD orders can result in returns)
  • Code Reference: calculations.js:14

​
RTO Orders

  • Icon: PackageX
  • Card Style: Danger (red accent)
  • Calculation: Math.round(codOrders × (rtoPercentage / 100))
  • Display: Whole number count
  • Purpose: Actual number of orders that resulted in Return to Origin
  • Code Reference: calculations.js:18

​
Total RTO Loss

  • Icon: TrendingDown
  • Card Style: Danger (red accent)
  • Calculation: rtoOrders × (forwardShippingCost + returnShippingCost + productCost)
  • Display: Currency (negative impact)
  • Purpose: Total financial impact of RTO including all costs
  • Code Reference: calculations.js:23-24
Total RTO Loss includes forward shipping, return shipping, AND product cost. This represents complete capital loss per RTO order.

​
Realized Revenue

  • Icon: CreditCard
  • Calculation: (prepaidOrders + deliveredCodOrders) × averageOrderValue
  • Where: deliveredCodOrders = codOrders - rtoOrders
  • Display: Currency
  • Purpose: Actual revenue from successfully delivered orders
  • Code Reference: calculations.js:27

​
Net Profit (Post-RTO)

  • Icon: TrendingUp
  • Card Style: Primary (blue accent)
  • Calculation: netRealizedRevenue - totalRtoLoss
  • Display: Currency
  • Purpose: Final profitability after accounting for all RTO losses
  • Code Reference: calculations.js:35
Net Profit Post-RTO is the most critical metric—it shows your actual bottom line after RTO impact.

​
Break-Even RTO Indicator

​
What is Break-Even RTO?

The break-even RTO percentage represents the maximum acceptable RTO rate before your net profit becomes negative. This is a critical threshold for business sustainability.

​
Calculation Formula

const profitPerSuccessfulOrder = averageOrderValue - productCost - forwardShippingCost;
const lossPerRtoOrder = productCost + forwardShippingCost + returnShippingCost;

breakEvenRtoPercentage = 
  (profitPerSuccessfulOrder / (profitPerSuccessfulOrder + lossPerRtoOrder)) × 100;
Code Reference: calculations.js:38-44

​
Visual Display

The break-even indicator (MetricsDisplay.jsx:95-125) shows:
  • Circular gauge with percentage display
  • Color-coded status:
    • Green: Current RTO is below break-even (safe)
    • Red: Current RTO exceeds break-even (critical)
  • Status badge:
    • “Within safe profitability range” (green)
    • “Current RTO exceeds sustainable threshold” (red)

​
Example Calculation

With default values:
  • Profit per successful order: ₹1,500 - ₹500 - ₹60 = ₹940
  • Loss per RTO order: ₹500 + ₹60 + ₹60 = ₹620
  • Break-even RTO: (940 / (940 + 620)) × 100 = 60.3%
Since the default RTO rate is 30%, the business is within the safe range.
The break-even percentage is independent of order volume—it’s purely based on unit economics.

​
Animated Values

All numeric values use the react-countup library (MetricsDisplay.jsx:12-24) to animate from 0 to the calculated value over 1.5 seconds: 
<CountUp
  end={value}
  duration={1.5}
  separator=","
  decimals={0}
/>
This provides visual feedback when inputs change and makes the interface more engaging.

​
Monthly vs. Annual View

All metrics automatically adjust based on the view toggle:
  • Monthly View: Shows metrics as-is
  • Annual View: Multiplies all values by 12 (calculations.js:46-56)
const m = isAnnual ? 12 : 1;

return {
  totalRevenue: totalRevenue * m,
  codOrders: codOrders * m,
  rtoOrders: rtoOrders * m,
  totalRtoLoss: totalRtoLoss * m,
  // ... etc
};

​
Responsive Grid Layout

Metrics are displayed in a responsive grid (MetricsDisplay.jsx:32): 
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  • Mobile: Single column (stacked)
  • Tablet: 2 columns
  • Desktop: 3 columns

​
Color Coding System

  • Default: White/neutral background (informational metrics)
  • Danger: Red accent (negative impact: RTO Orders, RTO Loss)
  • Primary: Blue accent (positive outcome: Net Profit)
  • Success: Green (used in other components when comparing improvements)
This visual hierarchy helps users quickly identify problem areas and positive outcomes.

Build docs developers (and LLMs) love

Get started for freeTalk to us