+ {funnelSteps.map((step, i) => {
+ const pct = totalGroups > 0 ? Math.round((step.value / totalGroups) * 100) : 0;
+ const widthPct = step.value > 0 ? Math.max(15, (step.value / totalGroups) * 100) : 15;
+ return (
+
+
+ {step.value}
+
+
0 ? step.color : 'var(--color-border, #334155)',
+ borderRadius: '4px', display: 'flex', alignItems: 'center', justifyContent: 'center',
+ transition: 'width 0.4s ease', minWidth: '40px', maxWidth: '100%',
+ opacity: step.value > 0 ? 1 : 0.5,
+ }}>
+ 0 ? '#fff' : 'var(--color-text-muted)', textShadow: step.value > 0 ? '0 1px 2px rgba(0,0,0,0.3)' : 'none' }}>
+ {pct}%
+
+
+
+ {step.label}
+
+ {i < funnelSteps.length - 1 && (
+
+ )}
- {i < funnelSteps.length - 1 && (
-
- )}
+ );
+ })}
+
+
+
+
Автосогласование
+
{econ.auto_confirm_pct ?? 0}%
+
+
+
Ручное вмешательство
+
{econ.manual_intervention_pct ?? 0}%
+
+
+
Всего согласовано
+
{econ.confirmed_auto_total ?? 0}
- );
- })}
-
-
-
-
Автосогласование
-
{econ.auto_confirm_pct ?? 0}%
-
-
-
Ручное вмешательство
-
{econ.manual_intervention_pct ?? 0}%
-
-
-
Всего согласовано
-
{econ.confirmed_auto_total ?? 0}
+ )}
+
+
+ {/* SMS + Drivers side by side — 4 cols each on desktop */}
+
+
+
+ {[
+ { label: 'SMS 1', val: econ.sms1_sent_count ?? 0 },
+ { label: 'SMS 2', val: econ.sms2_sent_count ?? 0 },
+ { label: 'Всего', val: (econ.sms1_sent_count || 0) + (econ.sms2_sent_count || 0) },
+ ].map((item, i) => (
+
+
{item.label}
+
{item.val}
+
+ ))}
+
- {/* SMS */}
-
- SMS
-
- {[
- { label: 'SMS 1', val: econ.sms1_sent_count ?? 0 },
- { label: 'SMS 2', val: econ.sms2_sent_count ?? 0 },
- { label: 'Всего', val: (econ.sms1_sent_count || 0) + (econ.sms2_sent_count || 0) },
- ].map((item, i) => (
-
-
{item.label}
-
{item.val}
-
- ))}
+ {/* Drivers — 8 cols desktop */}
+
+
+ {driverData.length === 0 ? (
+ Нет данных
+ ) : (
+
+
+
+
+ } />
+
+
+
+
+
+
+ )}
+
+
+ {/* Pickup Stats — full width (12 cols) */}
+
-
-
- {/* Pickup Stats */}
-
-
- {/* Drivers */}
-
- По водителям
- {driverData.length === 0 ? (
- Нет данных
- ) : (
-
-
-
-
- } />
-
-
-
-
-
-
- )}
-
+
);
};
\ No newline at end of file
diff --git a/src/components/admin/PickupStatsPanel.jsx b/src/components/admin/PickupStatsPanel.jsx
index a25ff2a..e8074e4 100644
--- a/src/components/admin/PickupStatsPanel.jsx
+++ b/src/components/admin/PickupStatsPanel.jsx
@@ -11,6 +11,9 @@ const PICKUP_COLORS = {
saturday: '#06b6d4',
pickup: '#f59e0b',
delivery: '#6366f1',
+ picked_up: '#14b8a6',
+ pending: '#94a3b8',
+ manual: '#eab308',
};
const CustomTooltip = ({ active, payload }) => {
@@ -34,17 +37,30 @@ const CustomTooltip = ({ active, payload }) => {
const ProgressBar = ({ label, value, max, color, fontSize, mobile }) => {
const pct = max > 0 ? Math.max(0, (value / max) * 100) : 0;
return (
-
-
{label}
-
+
+
{label}
+
0 ? '4px' : '0' }} />
-
{value}
+
{value}
);
};
-export const PickupStatsPanel = ({ stats, isLoading, mobile, fontSize }) => {
+const SectionHeader = ({ title, subtitle, mobile }) => (
+
+
+ {title}
+
+ {subtitle && (
+
+ {subtitle}
+
+ )}
+
+);
+
+export const PickupStatsPanel = ({ stats, isLoading, mobile, fontSize, periodLabel = '' }) => {
if (isLoading) {
return (
@@ -65,103 +81,137 @@ export const PickupStatsPanel = ({ stats, isLoading, mobile, fontSize }) => {
);
}
- const fs = fontSize || { xs: '0.65rem', s: '0.68rem', m: '0.78rem', l: '0.85rem', xl: '1.1rem' };
+ const fs = fontSize || { xs: '0.72rem', s: '0.78rem', m: '0.85rem', l: '0.95rem' };
const totalPickups = Number(stats.total_pickups) || 0;
+ const pickedUp = Number(stats.picked_up) || 0;
+ const pending = Number(stats.pending) || 0;
+ const manual = Number(stats.manual) || 0;
const pickupRate = Number(stats.pickup_rate) || 0;
const avgDays = stats.avg_days_until_pickup != null ? Number(stats.avg_days_until_pickup) : null;
const dist = stats.delivery_type_dist || {};
- const maxDay = Math.max(
- Number(stats.pickup_today) || 0,
- Number(stats.pickup_tomorrow) || 0,
- Number(stats.pickup_day_after) || 0,
- 1
- );
+ const pickupToday = Number(stats.pickup_today) || 0;
+ const pickupTomorrow = Number(stats.pickup_tomorrow) || 0;
+ const pickupDayAfter = Number(stats.pickup_day_after) || 0;
+ const pickupFirstHalf = Number(stats.pickup_first_half) || 0;
+ const pickupSecondHalf = Number(stats.pickup_second_half) || 0;
+ const pickupOnSaturday = Number(stats.pickup_on_saturday) || 0;
- const maxHalf = Math.max(
- Number(stats.pickup_first_half) || 0,
- Number(stats.pickup_second_half) || 0,
- 1
- );
+ const hasScheduledPickups = pickupToday + pickupTomorrow + pickupDayAfter > 0;
+ const hasTimeSlots = pickupFirstHalf + pickupSecondHalf > 0;
+
+ const maxDay = Math.max(pickupToday, pickupTomorrow, pickupDayAfter, 1);
+ const maxHalf = Math.max(pickupFirstHalf, pickupSecondHalf, 1);
const pieData = [
{ name: 'Самовывоз', value: Number(dist.pickup) || 0, fill: PICKUP_COLORS.pickup },
{ name: 'Доставка', value: Number(dist.delivery) || 0, fill: PICKUP_COLORS.delivery },
].filter(d => d.value > 0);
+ // Desktop: 3-col grid inside panel. Mobile: stacked.
+ const innerCols = mobile ? '1fr' : '1fr 1fr 1fr';
+
return (
-
-
- 📦 Самовывоз
-
+
+
{/* KPI row */}
-
+
{[
- { label: 'Всего самовывоз', val: totalPickups, color: '#f59e0b' },
- { label: 'Доля самовывоза', val: pickupRate + '%', color: '#f59e0b' },
- { label: 'Ср. дней до выдачи', val: avgDays !== null ? avgDays : '—', color: '#3b82f6' },
+ { label: 'Всего', val: totalPickups, color: '#f59e0b' },
+ { label: 'Завершено', val: pickedUp, color: '#14b8a6' },
+ { label: 'Ожидает', val: pending, color: '#94a3b8' },
+ { label: 'Доля', val: pickupRate + '%', color: '#f59e0b' },
].map((kpi, i) => (
-
-
{kpi.label}
-
{kpi.val}
+
+
{kpi.label}
+
{kpi.val}
))}
- {/* Distribution by day */}
-
+ {/* Content grid: status breakdown | schedule | donut */}
+
- {/* Half-day split */}
-
-
- {/* Saturday */}
-
- Самовывоз в субботу
- {Number(stats.pickup_on_saturday) || 0}
-
-
- {/* Delivery vs Pickup donut */}
- {pieData.length > 0 && (
+ {/* Status breakdown */}
-
Доставка vs Самовывоз
-
-
-
- {pieData.map((entry, i) => (
- |
- ))}
-
- } />
-
-
-
- {pieData.map((d, i) => (
-
-
-
{d.name}: {d.value}
-
- ))}
+
По статусам
+
+ {avgDays !== null && avgDays > 0 && (
+
+ Ср. дней до выдачи
+ {avgDays}
+
+ )}
+
+
+ {/* Schedule — only show if there are scheduled pickups */}
+
+
Расписание
+ {hasScheduledPickups ? (
+
+ ) : (
+
+ Нет запланированных самовывозов
+
+ )}
+
+ {hasTimeSlots && (
+
+ )}
+
+
+ Самовывоз в субботу
+ {pickupOnSaturday}
- )}
+
+ {/* Delivery vs Pickup donut */}
+
+
Доставка vs Самовывоз
+ {pieData.length > 0 ? (
+ <>
+
+
+
+ {pieData.map((entry, i) => (
+ |
+ ))}
+
+ } />
+
+
+
+ {pieData.map((d, i) => (
+
+
+
{d.name}: {d.value}
+
+ ))}
+
+
+ ) : (
+
+ Нет данных
+
+ )}
+
+
);
-};
+};
\ No newline at end of file