563 lines
21 KiB
JavaScript
563 lines
21 KiB
JavaScript
import React, { useState, useMemo, useCallback } from 'react';
|
||
import PropTypes from 'prop-types';
|
||
import {
|
||
MdTrendingUp,
|
||
MdTrendingDown,
|
||
MdExpandMore,
|
||
MdReceipt,
|
||
MdPayments,
|
||
MdRoute,
|
||
MdLocationOn,
|
||
MdBarChart,
|
||
MdPeopleAlt
|
||
} from 'react-icons/md';
|
||
import './ProfitabilitySection.css';
|
||
|
||
// ─────────────────────────────────────────────────────────────
|
||
// Constants
|
||
// ─────────────────────────────────────────────────────────────
|
||
|
||
/** Revenue rule: ₹30 base for ≤8 km, ₹6/km beyond. */
|
||
const BASE_REVENUE = 30;
|
||
const BASE_KM_LIMIT = 8;
|
||
const EXTRA_RATE_KM = 6;
|
||
|
||
/** Fixed salary cost sliced per slot (₹5000 / 30 days / 1 slot). */
|
||
const FIXED_COST_PER_SLOT = 166.67;
|
||
|
||
/** Variable fuel / wear cost per km. */
|
||
const VARIABLE_RATE_KM = 2.5;
|
||
|
||
/** Status display config keyed by normalised status string. */
|
||
const STATUS_MAP = {
|
||
delivered: { label: 'Delivered', color: '#10b981', bg: '#ecfdf5', border: '#a7f3d0' },
|
||
active: { label: 'Active', color: '#0ea5e9', bg: '#f0f9ff', border: '#bae6fd' },
|
||
picked: { label: 'Picked up', color: '#8b5cf6', bg: '#f5f3ff', border: '#ddd6fe' },
|
||
assigned: { label: 'Assigned', color: '#f59e0b', bg: '#fffbeb', border: '#fde68a' },
|
||
cancelled: { label: 'Cancelled', color: '#ef4444', bg: '#fef2f2', border: '#fca5a5' },
|
||
skipped: { label: 'Skipped', color: '#f97316', bg: '#fff7ed', border: '#ffedd5' }
|
||
};
|
||
|
||
const DEFAULT_STATUS = STATUS_MAP.assigned;
|
||
|
||
// ─────────────────────────────────────────────────────────────
|
||
// Pure helpers
|
||
// ─────────────────────────────────────────────────────────────
|
||
|
||
function getStatusConfig(raw) {
|
||
return STATUS_MAP[String(raw ?? '').toLowerCase()] ?? DEFAULT_STATUS;
|
||
}
|
||
|
||
function orderRevenue(order) {
|
||
const km = parseFloat(order.kms || order.actualkms || 0);
|
||
return km <= BASE_KM_LIMIT ? BASE_REVENUE : BASE_REVENUE + (km - BASE_KM_LIMIT) * EXTRA_RATE_KM;
|
||
}
|
||
|
||
function calcRiderMetrics(rider) {
|
||
const orders = rider.orders ?? [];
|
||
let revenue = 0;
|
||
let kms = 0;
|
||
|
||
for (const o of orders) {
|
||
revenue += orderRevenue(o);
|
||
kms += parseFloat(o.kms || o.actualkms || 0);
|
||
}
|
||
|
||
const varCost = kms * VARIABLE_RATE_KM;
|
||
const fixedCost = FIXED_COST_PER_SLOT;
|
||
const totalCost = varCost + fixedCost;
|
||
const net = revenue - totalCost;
|
||
const margin = revenue > 0 ? (net / revenue) * 100 : 0;
|
||
|
||
return { revenue, kms, varCost, fixedCost, totalCost, net, margin };
|
||
}
|
||
|
||
function rupees(v, decimals = 0) {
|
||
if (v == null) return '—';
|
||
return `₹${parseFloat(v).toFixed(decimals)}`;
|
||
}
|
||
|
||
function riderInitials(name) {
|
||
if (!name) return '?';
|
||
return (
|
||
name
|
||
.trim()
|
||
.split(/\s+/)
|
||
.slice(0, 2)
|
||
.map((w) => w[0] ?? '')
|
||
.join('')
|
||
.toUpperCase() || '?'
|
||
);
|
||
}
|
||
|
||
function clamp(value, min, max) {
|
||
return Math.min(Math.max(value, min), max);
|
||
}
|
||
|
||
// ─────────────────────────────────────────────────────────────
|
||
// Sub-components
|
||
// ─────────────────────────────────────────────────────────────
|
||
|
||
/** Coloured pill with a status dot. */
|
||
function OrderStatusPill({ status }) {
|
||
const cfg = getStatusConfig(status);
|
||
return (
|
||
<span className="order-status-pill" style={{ background: cfg.bg, color: cfg.color, borderColor: cfg.border }}>
|
||
<span className="order-status-dot" aria-hidden="true" />
|
||
{cfg.label}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
/** Customer name + phone + location stacked cell. */
|
||
function CustomerCell({ order }) {
|
||
const name = order.customername ?? order.customer_name ?? order.deliverycustomer ?? order.pickupcustomer ?? 'Unknown customer';
|
||
const phone = order.customerphone ?? order.phone ?? order.mobile ?? '';
|
||
const location = order.locationname ?? order.kitchenname ?? order.kitchenName ?? '';
|
||
|
||
return (
|
||
<div>
|
||
<div className="customer-name" title={name}>
|
||
{name}
|
||
</div>
|
||
{phone && <div className="customer-phone">{phone}</div>}
|
||
{location && (
|
||
<div className="customer-location">
|
||
<MdLocationOn size={12} aria-hidden="true" />
|
||
{location}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** Orders table inside an expanded rider card. */
|
||
function OrdersBreakdownTable({ orders, getRevenue }) {
|
||
if (!orders?.length) {
|
||
return (
|
||
<div className="orders-empty-state" role="status">
|
||
<MdReceipt size={24} aria-hidden="true" />
|
||
<p className="orders-empty-message">No orders assigned to this rider yet.</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="orders-table-container">
|
||
<table className="orders-table" role="table">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">Customer</th>
|
||
<th scope="col">Status</th>
|
||
<th scope="col">Distance</th>
|
||
<th scope="col" style={{ textAlign: 'right' }}>
|
||
Revenue
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{orders.map((order, idx) => {
|
||
const km = parseFloat(order.kms ?? order.actualkms ?? 0);
|
||
const rev = getRevenue(order);
|
||
return (
|
||
<tr key={`${order.orderid ?? 'order'}-${idx}`}>
|
||
<td>
|
||
<CustomerCell order={order} />
|
||
</td>
|
||
<td>
|
||
<OrderStatusPill status={order.orderstatus ?? order.status} />
|
||
</td>
|
||
<td>
|
||
<span className="distance-value">{km.toFixed(1)}</span>
|
||
<span className="distance-unit">km</span>
|
||
</td>
|
||
<td style={{ textAlign: 'right' }}>
|
||
<span className="revenue-amount">{rupees(rev)}</span>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** Expanded cost breakdown + orders for one rider. */
|
||
function RiderDetailPanel({ rider, metrics }) {
|
||
const { varCost, fixedCost, kms, net, margin } = metrics;
|
||
const isProfit = net >= 0;
|
||
|
||
const costTiles = [
|
||
{
|
||
icon: <MdPayments size={16} />,
|
||
iconClass: 'cost-tile-icon--fixed',
|
||
label: 'Fixed cost',
|
||
amount: rupees(fixedCost, 2),
|
||
amountClass: '',
|
||
footnote: 'Salary (per slot)'
|
||
},
|
||
{
|
||
icon: <MdRoute size={16} />,
|
||
iconClass: 'cost-tile-icon--variable',
|
||
label: 'Variable cost',
|
||
amount: rupees(varCost, 2),
|
||
amountClass: '',
|
||
footnote: `${kms.toFixed(1)} km × ₹${VARIABLE_RATE_KM}/km`
|
||
},
|
||
{
|
||
icon: isProfit ? <MdTrendingUp size={16} /> : <MdTrendingDown size={16} />,
|
||
iconClass: isProfit ? 'cost-tile-icon--profit' : 'cost-tile-icon--loss',
|
||
label: isProfit ? 'Net profit' : 'Net loss',
|
||
amount: `${isProfit ? '+' : ''}${rupees(net, 2)}`,
|
||
amountClass: isProfit ? 'cost-tile-amount--profit' : 'cost-tile-amount--loss',
|
||
footnote: `${Math.abs(margin).toFixed(0)}% margin`
|
||
}
|
||
];
|
||
|
||
return (
|
||
<div className="rider-detail-panel" aria-label="Rider cost breakdown">
|
||
<div className="rider-detail-inner">
|
||
{/* Cost breakdown tiles */}
|
||
<div className="cost-breakdown-grid">
|
||
{costTiles.map((tile) => (
|
||
<div className="cost-tile" key={tile.label}>
|
||
<div className={`cost-tile-icon ${tile.iconClass}`} aria-hidden="true">
|
||
{tile.icon}
|
||
</div>
|
||
<div className="cost-tile-content">
|
||
<span className="cost-tile-label">{tile.label}</span>
|
||
<span className={`cost-tile-amount ${tile.amountClass}`}>{tile.amount}</span>
|
||
<span className="cost-tile-footnote">{tile.footnote}</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Revenue breakdown table */}
|
||
<div className="revenue-breakdown">
|
||
<div className="revenue-breakdown-header">
|
||
<div className="revenue-breakdown-title">
|
||
<MdReceipt size={14} aria-hidden="true" />
|
||
Revenue Breakdown
|
||
</div>
|
||
<span className="revenue-breakdown-count">
|
||
{rider.orders?.length ?? 0} order{(rider.orders?.length ?? 0) !== 1 ? 's' : ''}
|
||
</span>
|
||
</div>
|
||
<OrdersBreakdownTable orders={rider.orders} getRevenue={orderRevenue} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** Single expandable rider profitability card. */
|
||
function RiderProfitabilityCard({ rider, metrics, isExpanded, isFocused, onToggle, onFocus }) {
|
||
const { revenue, kms, totalCost, net, margin } = metrics;
|
||
const isProfit = net >= 0;
|
||
const marginBarWidth = `${clamp(Math.abs(margin), 0, 100)}%`;
|
||
const orderCount = rider.orders?.length ?? 0;
|
||
const name = rider.riderName ?? rider.username ?? `Rider #${rider.id}`;
|
||
|
||
const cardClasses = [
|
||
'rider-profitability-card',
|
||
isProfit ? 'rider-profitability-card--profitable' : 'rider-profitability-card--unprofitable',
|
||
isFocused ? 'rider-profitability-card--selected' : ''
|
||
]
|
||
.filter(Boolean)
|
||
.join(' ');
|
||
|
||
function handleActivate() {
|
||
onToggle(rider.id);
|
||
if (!isFocused && onFocus) onFocus(rider);
|
||
}
|
||
|
||
return (
|
||
<div className={cardClasses} aria-label={`Rider: ${name}`}>
|
||
{/* Clickable header row */}
|
||
<div
|
||
className="rider-card-header"
|
||
role="button"
|
||
tabIndex={0}
|
||
aria-expanded={isExpanded}
|
||
onClick={handleActivate}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
handleActivate();
|
||
}
|
||
}}
|
||
>
|
||
{/* Rider identity */}
|
||
<div className="rider-avatar" aria-hidden="true">
|
||
{riderInitials(name)}
|
||
</div>
|
||
<div className="rider-identity">
|
||
<div className="rider-name" title={name}>
|
||
{name}
|
||
</div>
|
||
<div className="rider-order-summary">
|
||
{orderCount} order{orderCount !== 1 ? 's' : ''}
|
||
<span className="rider-order-summary-separator">·</span>
|
||
{kms.toFixed(1)} km total
|
||
</div>
|
||
</div>
|
||
|
||
{/* Summary metrics — hidden on mobile via CSS */}
|
||
<div className="rider-metrics-row" aria-hidden="true">
|
||
<div className="rider-metric">
|
||
<span className="rider-metric-label">Revenue</span>
|
||
<span className="rider-metric-amount rider-metric-amount--revenue">{rupees(revenue)}</span>
|
||
</div>
|
||
<div className="rider-metric">
|
||
<span className="rider-metric-label">Cost</span>
|
||
<span className="rider-metric-amount rider-metric-amount--cost">{rupees(totalCost)}</span>
|
||
</div>
|
||
<div className="rider-net-profit-column">
|
||
<div className="rider-metric">
|
||
<span className="rider-metric-label">Net</span>
|
||
<span className={`rider-metric-amount ${isProfit ? 'rider-metric-amount--net-profit' : 'rider-metric-amount--net-loss'}`}>
|
||
{isProfit ? '+' : ''}
|
||
{rupees(net)}
|
||
</span>
|
||
</div>
|
||
<div className="rider-margin-bar">
|
||
<div
|
||
className={`rider-margin-bar-fill ${isProfit ? 'rider-margin-bar-fill--profit' : 'rider-margin-bar-fill--loss'}`}
|
||
style={{ width: marginBarWidth }}
|
||
role="presentation"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Expand chevron */}
|
||
<div className={`rider-expand-toggle ${isExpanded ? 'rider-expand-toggle--open' : ''}`} aria-hidden="true">
|
||
<MdExpandMore size={22} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Expanded detail panel */}
|
||
{isExpanded && <RiderDetailPanel rider={rider} metrics={metrics} />}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─────────────────────────────────────────────────────────────
|
||
// Main export
|
||
// ─────────────────────────────────────────────────────────────
|
||
|
||
/**
|
||
* ProfitabilitySection
|
||
*
|
||
* Props:
|
||
* riders — Array of rider objects with .orders[]
|
||
* totalDailyProfit — Number: daily aggregate across all slots
|
||
* focusedRider — Rider object (or null) synced with map
|
||
* handleRiderFocus — (rider) => void called when a card is clicked
|
||
*/
|
||
export default function ProfitabilitySection({ riders = [], totalDailyProfit = 0, focusedRider = null, handleRiderFocus }) {
|
||
const [expanded, setExpanded] = useState({});
|
||
const [sortMode, setSortMode] = useState('profit-asc'); // 'profit-asc', 'profit-desc', 'name-asc', 'orders-desc'
|
||
|
||
const toggleRider = useCallback((id) => {
|
||
setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
|
||
}, []);
|
||
|
||
// Enrich riders with computed metrics
|
||
const enriched = useMemo(() => riders.map((r) => ({ ...r, _m: calcRiderMetrics(r) })), [riders]);
|
||
|
||
// Aggregate overall slot totals (pre-filtered for BI consistency)
|
||
const slotRevenue = enriched.reduce((s, r) => s + r._m.revenue, 0);
|
||
const slotCost = enriched.reduce((s, r) => s + r._m.totalCost, 0);
|
||
const slotNet = enriched.reduce((s, r) => s + r._m.net, 0);
|
||
const profitCount = enriched.filter((r) => r._m.net >= 0).length;
|
||
const lossCount = enriched.length - profitCount;
|
||
|
||
const dailyIsProfit = totalDailyProfit >= 0;
|
||
const slotIsProfit = slotNet >= 0;
|
||
|
||
// Filter riders (filtering by search and status tabs removed)
|
||
const filtered = enriched;
|
||
|
||
// Sort riders based on selected sortMode
|
||
const sortedAndFiltered = useMemo(() => {
|
||
const list = [...filtered];
|
||
if (sortMode === 'profit-asc') {
|
||
list.sort((a, b) => a._m.net - b._m.net);
|
||
} else if (sortMode === 'profit-desc') {
|
||
list.sort((a, b) => b._m.net - a._m.net);
|
||
} else if (sortMode === 'name-asc') {
|
||
list.sort((a, b) => {
|
||
const nameA = (a.riderName ?? a.username ?? `Rider #${a.id}`).toLowerCase();
|
||
const nameB = (b.riderName ?? b.username ?? `Rider #${b.id}`).toLowerCase();
|
||
return nameA.localeCompare(nameB);
|
||
});
|
||
} else if (sortMode === 'orders-desc') {
|
||
list.sort((a, b) => (b.orders?.length ?? 0) - (a.orders?.length ?? 0));
|
||
}
|
||
return list;
|
||
}, [filtered, sortMode]);
|
||
|
||
return (
|
||
<div className="profitability-dashboard" role="region" aria-label="Profitability overview">
|
||
{/* ── Header ── */}
|
||
<header className="profitability-header">
|
||
<div className="profitability-header-left">
|
||
<div className="profitability-header-icon" aria-hidden="true">
|
||
<MdBarChart size={18} />
|
||
</div>
|
||
<div>
|
||
<h2 className="profitability-header-title">Profitability Overview</h2>
|
||
<p className="profitability-header-subtitle">
|
||
<span>
|
||
{enriched.length} rider{enriched.length !== 1 ? 's' : ''}
|
||
</span>
|
||
<span className="profitability-header-dot" />
|
||
<span style={{ color: 'var(--profit-green)' }}>{profitCount} profitable</span>
|
||
<span className="profitability-header-dot" />
|
||
<span style={{ color: 'var(--loss-red)' }}>{lossCount} at loss</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="profitability-kpi-group">
|
||
{/* Daily profit / loss */}
|
||
<div className={`profitability-kpi-chip ${dailyIsProfit ? 'profitability-kpi-chip--profit' : 'profitability-kpi-chip--loss'}`}>
|
||
<div className="profitability-kpi-chip-icon" aria-hidden="true">
|
||
{dailyIsProfit ? <MdTrendingUp /> : <MdTrendingDown />}
|
||
</div>
|
||
<div className="profitability-kpi-chip-content">
|
||
<span className="profitability-kpi-chip-label">Daily {dailyIsProfit ? 'profit' : 'loss'}</span>
|
||
<span className="profitability-kpi-chip-amount">{rupees(Math.abs(totalDailyProfit))}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Slot profit / loss */}
|
||
<div className={`profitability-kpi-chip ${slotIsProfit ? 'profitability-kpi-chip--profit' : 'profitability-kpi-chip--loss'}`}>
|
||
<div className="profitability-kpi-chip-icon" aria-hidden="true">
|
||
{slotIsProfit ? <MdTrendingUp /> : <MdTrendingDown />}
|
||
</div>
|
||
<div className="profitability-kpi-chip-content">
|
||
<span className="profitability-kpi-chip-label">Slot {slotIsProfit ? 'profit' : 'loss'}</span>
|
||
<span className="profitability-kpi-chip-amount">{rupees(Math.abs(slotNet))}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{/* ── Summary statistics row ── */}
|
||
<div className="profitability-summary-row" role="group" aria-label="Slot summary">
|
||
<div className="profitability-summary-card profitability-summary-card--primary">
|
||
<span className="profitability-summary-label">Riders Active</span>
|
||
<span className="profitability-summary-value">{enriched.length}</span>
|
||
<span className="profitability-summary-detail">
|
||
{profitCount} in profit · {lossCount} at loss
|
||
</span>
|
||
</div>
|
||
<div className="profitability-summary-card profitability-summary-card--primary">
|
||
<span className="profitability-summary-label">Slot Revenue</span>
|
||
<span className="profitability-summary-value">{rupees(slotRevenue)}</span>
|
||
<span className="profitability-summary-detail">From {enriched.reduce((s, r) => s + (r.orders?.length ?? 0), 0)} orders</span>
|
||
</div>
|
||
<div className="profitability-summary-card profitability-summary-card--loss">
|
||
<span className="profitability-summary-label">Slot Cost</span>
|
||
<span className="profitability-summary-value profitability-summary-value--loss">{rupees(slotCost)}</span>
|
||
<span className="profitability-summary-detail">Fixed + variable</span>
|
||
</div>
|
||
<div className={`profitability-summary-card ${slotIsProfit ? 'card-profit' : 'card-loss'}`}>
|
||
<span className="profitability-summary-label">Slot Net</span>
|
||
<span className={`profitability-summary-value ${slotIsProfit ? 'net-positive' : 'net-negative'}`}>
|
||
{slotIsProfit ? '+' : ''}
|
||
{rupees(slotNet)}
|
||
</span>
|
||
<span
|
||
className={`profitability-summary-detail ${slotRevenue > 0 ? (slotNet / slotRevenue >= 0 ? 'margin-positive' : 'margin-negative') : ''
|
||
}`}
|
||
>
|
||
{slotRevenue > 0
|
||
? `${slotNet / slotRevenue >= 0 ? '+' : ''}${((slotNet / slotRevenue) * 100).toFixed(0)}% margin`
|
||
: '0% margin'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Controls (Search) (removed) ── */}
|
||
|
||
{/* ── Rider feed ── */}
|
||
<div className="rider-profitability-feed" role="list" aria-label="Rider cards">
|
||
<div className="rider-feed-heading" aria-hidden="true">
|
||
Riders List
|
||
</div>
|
||
|
||
{sortedAndFiltered.length === 0 ? (
|
||
<div className="profitability-empty-state" role="status">
|
||
<MdPeopleAlt size={32} aria-hidden="true" />
|
||
<p className="profitability-empty-message">No riders matching the filters.</p>
|
||
</div>
|
||
) : (
|
||
sortedAndFiltered.map((rider) => (
|
||
<div key={rider.id} role="listitem">
|
||
<RiderProfitabilityCard
|
||
rider={rider}
|
||
metrics={rider._m}
|
||
isExpanded={!!expanded[rider.id]}
|
||
isFocused={focusedRider?.id === rider.id}
|
||
onToggle={toggleRider}
|
||
onFocus={handleRiderFocus}
|
||
/>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
OrderStatusPill.propTypes = {
|
||
status: PropTypes.string
|
||
};
|
||
|
||
CustomerCell.propTypes = {
|
||
order: PropTypes.object.isRequired
|
||
};
|
||
|
||
OrdersBreakdownTable.propTypes = {
|
||
orders: PropTypes.array,
|
||
getRevenue: PropTypes.func.isRequired
|
||
};
|
||
|
||
RiderDetailPanel.propTypes = {
|
||
rider: PropTypes.object.isRequired,
|
||
metrics: PropTypes.shape({
|
||
varCost: PropTypes.number.isRequired,
|
||
fixedCost: PropTypes.number.isRequired,
|
||
kms: PropTypes.number.isRequired,
|
||
net: PropTypes.number.isRequired,
|
||
margin: PropTypes.number.isRequired
|
||
}).isRequired
|
||
};
|
||
|
||
RiderProfitabilityCard.propTypes = {
|
||
rider: PropTypes.object.isRequired,
|
||
metrics: PropTypes.shape({
|
||
revenue: PropTypes.number.isRequired,
|
||
kms: PropTypes.number.isRequired,
|
||
totalCost: PropTypes.number.isRequired,
|
||
net: PropTypes.number.isRequired,
|
||
margin: PropTypes.number.isRequired
|
||
}).isRequired,
|
||
isExpanded: PropTypes.bool.isRequired,
|
||
isFocused: PropTypes.bool,
|
||
onToggle: PropTypes.func.isRequired,
|
||
onFocus: PropTypes.func
|
||
};
|
||
|
||
ProfitabilitySection.propTypes = {
|
||
riders: PropTypes.array,
|
||
totalDailyProfit: PropTypes.number,
|
||
focusedRider: PropTypes.object,
|
||
handleRiderFocus: PropTypes.func
|
||
};
|