Feature: Interactive Cost Calculation
Relevant source files
The following files were used as context for generating this wiki page:The Interactive Cost Calculation feature is a client-side React component designed to quantify the hidden financial costs associated with supply chain inefficiencies. It provides users with an interactive tool to estimate their potential annual losses based on a set of configurable inputs: monthly shipments, average shipment value, current delay rate, and industry sector. The component calculates and displays a total estimated annual impact, broken down into stockout impact, late delivery penalties, and retention loss.
This feature serves as a powerful tool within the application to demonstrate value by translating operational metrics into tangible financial figures. It is rendered within the main App component, positioned between the testimonials and pricing sections, to help justify the service's cost. The component uses framer-motion for animations and lucide-react for icons.
Sources: src/components/CostCalculator.jsx, src/App.jsx:24, package.json:13-15
Component Architecture and State Management
The CostCalculator is a self-contained functional React component. It manages its state using useState and useEffect hooks to handle user inputs and trigger re-calculations and animations.
Sources: src/components/CostCalculator.jsx:2-3, 25
State Variables
The component's interactivity is driven by the following state variables:
| State Variable | Type | Initial Value | Description |
|---|---|---|---|
shipments | Number | 1000 | The user's number of monthly shipments. Controlled by a range slider. |
avgValue | Number | 5000 | The average value of a single shipment. Controlled by a number input. |
delayRate | Number | 15 | The user's current shipment delay rate as a percentage. |
industry | Object | industries[0] | The selected industry, which contains specific multipliers for calculations. |
animatedCost | Number | 0 | The animated value of the total annual cost, used for display purposes. |
Sources: src/components/CostCalculator.jsx:25-29
Data Flow
The diagram below illustrates how user actions update the component's state, which in turn triggers the cost calculation logic and updates the UI.
Core Calculation Logic
All calculations are performed synchronously within the component render cycle whenever an input state variable changes. The formulas are based on an "industry-standard model" mentioned in the UI.
Sources: src/components/CostCalculator.jsx:32, 115-117
The calculation process is as follows:
- Annual Delayed Shipments:
(shipments * 12 * delayRate) / 100 - Lost Revenue (Stockout Impact):
delayedShipments * avgValue * industry.delayMultiplier * 0.3 - Penalty Fees:
delayedShipments * 150(a hardcoded average of $150 per delayed shipment) - Customer Churn (Retention Loss):
delayedShipments * avgValue * industry.churnRate - Total Annual Cost:
lostRevenue + penaltyFees + customerChurn
Sources: src/components/CostCalculator.jsx:32-37, 329-331, 345-347
Calculation Flowchart
This flowchart visualizes the sequence of calculations.
Industry-Specific Configuration
The calculation model is customized based on pre-defined data for different industries. This data is stored in a constant array named industries. Each industry object contains a delayMultiplier to adjust stockout impact and a churnRate for retention loss calculations.
Sources: src/components/CostCalculator.jsx:5-11, 33, 36
Industry Data Table
| Industry Name | delayMultiplier | churnRate |
|---|---|---|
| E-commerce | 1.2 | 0.15 |
| Manufacturing | 1.5 | 0.12 |
| Retail | 1.1 | 0.18 |
| Logistics | 1.3 | 0.10 |
| Pharma | 2.0 | 0.08 |
Sources: src/components/CostCalculator.jsx:5-11
The component initializes with 'E-commerce' as the default selected industry.
// src/components/CostCalculator.jsx:28
const [industry, setIndustry] = useState(industries[0]);
Sources: src/components/CostCalculator.jsx:28
User Interface and Interaction
The UI is built with React and styled using Tailwind CSS. It is divided into an input section on the left and a results display on the right.
User Inputs
- Monthly Shipments: A range slider (
<input type="range">) from 100 to 10,000. - Average Shipment Value: A number input (
<input type="number">). - Current Delay Rate: A range slider from 5% to 40%.
- Industry: A grid of buttons, where the active industry is highlighted.
Sources: src/components/CostCalculator.jsx:130-221
Results Display
The calculated totalAnnualCost is displayed prominently. A useEffect hook is implemented to create a "count-up" animation for this value each time it changes, providing a dynamic user experience. The animation runs for 1 second (1000ms) over 60 steps.
// src/components/CostCalculator.jsx:40-52
useEffect(() => {
const duration = 1000; // 1 second animation
const steps = 60;
const increment = totalAnnualCost / steps;
let current = 0;
const timer = setInterval(() => {
current += increment;
if (current >= totalAnnualCost) {
setAnimatedCost(totalAnnualCost);
clearInterval(timer);
} else {
setAnimatedCost(current);
}
}, duration / steps);
return () => clearInterval(timer);
}, [totalAnnualCost]);
Sources: src/components/CostCalculator.jsx:40-52
A breakdown of the three cost components (lostRevenue, penaltyFees, customerChurn) is also displayed. All currency values are formatted using a helper function, formatCurrency, which abbreviates large numbers (e.g., $1,200,000 becomes $1.20M).
Sources: src/components/CostCalculator.jsx:54-60, 246-261
Interaction Sequence Diagram
This diagram shows the sequence of events when a user interacts with an input control.
Calculation Methodology Display
To provide transparency, the component includes an expandable <details> section titled "Calculation Methodology". This section explicitly shows the formulas used for each part of the calculation, as well as the tables of industry-specific multipliers and churn rates. This reinforces the "Industry-standard model" claim and builds trust with the user.
Sources: src/components/CostCalculator.jsx:288-368
Conclusion
The CostCalculator is a key marketing and sales-enablement feature. It directly addresses the problem statement outlined in other parts of the application, such as the Hero component's claim that "40% of your supply chain is a black box". By allowing users to quantify their financial losses due to these invisible problems, it creates a clear financial justification for adopting the platform's solutions, such as the "Predictive Analytics" detailed in the Features component, and bridges the gap to the Pricing page.
Sources: src/components/CostCalculator.jsx, src/components/Hero.jsx:99-102, src/components/Features.jsx:9-15, src/components/Pricing.jsx