fix: визуальная обратная связь после сохранения отгрузки водителем

- После нажатия 'Сохранить отгрузку' показывается заметный summary-блок
- Каждая позиция в отдельной карточке: зелёная рамка (отгружено) / оранжевая рамка (не отгружено)
- Причина неотгрузки показана внутри карточки
- Кнопка 'Изменить' позволяет вернуться к редактированию
- При повторном открытии — компактная плашка 'Отгрузка ранее сохранена'
This commit is contained in:
root 2026-06-15 16:01:17 +00:00
parent 41272bdbbf
commit 55c91d8d32
1 changed files with 63 additions and 27 deletions

View File

@ -92,7 +92,8 @@ const parseOrderItems = (order) => {
export const DriverShipmentPanel = ({ order, onShipmentChange, onSaveShipment, isSavingShipment }) => {
const [stopWords, setStopWords] = React.useState([]);
const [scopeActive, setScopeActive] = React.useState(true);
const [savedShipment, setSavedShipment] = React.useState(null); // last saved snapshot
const [savedShipment, setSavedShipment] = React.useState([]);
const [justSaved, setJustSaved] = React.useState(false);
React.useEffect(() => {
if (!supabase) return;
@ -302,14 +303,19 @@ export const DriverShipmentPanel = ({ order, onShipmentChange, onSaveShipment, i
{onSaveShipment && items.length > 0 && (
<div className="flex items-center gap-3">
<Button
onClick={() => onSaveShipment(items.map((item) => ({
onClick={() => {
const data = items.map((item) => ({
id: item.id,
name: item.name,
quantity: item.quantity,
unit: item.unit,
shipped: shippedItems.has(item.id),
comment: shippedItems.has(item.id) ? "" : (comments[item.id] || ""),
})))}
}));
setSavedShipment(data);
setJustSaved(true);
onSaveShipment(data);
}}
disabled={isSavingShipment || shippedCount === 0}
>
{isSavingShipment ? "Сохраняем..." : "Сохранить отгрузку"}
@ -322,33 +328,63 @@ export const DriverShipmentPanel = ({ order, onShipmentChange, onSaveShipment, i
</div>
)}
{savedShipment && savedShipment.length > 0 && (
<div className="rounded-xl border border-[var(--color-accent)] bg-[var(--color-accent-soft)] p-4 text-sm">
<div className="flex items-center gap-2 mb-2">
<span className="text-lg"></span>
{/* Saved shipment summary — show prominently after save */}
{justSaved && savedShipment.length > 0 && (
<div className="rounded-xl border-2 border-[var(--color-accent)] bg-[var(--color-accent-soft)] p-4 text-sm">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<span className="text-xl"></span>
<strong className="text-[var(--color-accent)]">
Отгрузка сохранена: {savedShipment.filter((i) => i.shipped).length} из {savedShipment.length} позиций
Отгрузка сохранена: {savedShipment.filter((i) => i.shipped).length} из {savedShipment.length}
</strong>
</div>
<div className="space-y-1">
<Button variant="ghost" size="sm" onClick={() => setJustSaved(false)}>
Изменить
</Button>
</div>
<div className="space-y-2">
{savedShipment.map((item) => (
<div key={item.id} className="flex items-start gap-2">
<div
key={item.id}
className={[
"rounded-lg px-3 py-2",
item.shipped
? "bg-[var(--color-surface-strong)] border border-[var(--color-accent)]"
: "bg-[var(--color-warning-soft)] border border-[var(--color-warning)]",
].join(" ")}
>
<div className="flex items-center gap-2">
<span className={item.shipped ? "text-[var(--color-accent)]" : "text-[var(--color-warning)]"}>
{item.shipped ? "✓" : "✗"}
</span>
<span className={item.shipped ? "text-[var(--color-text-muted)] line-through" : "text-[var(--color-text)]"}>
<span className={item.shipped ? "text-[var(--color-text-muted)] line-through" : "text-[var(--color-text)] font-medium"}>
{item.name}{item.quantity ? `${item.quantity}${item.unit ? ` ${item.unit}` : ""}` : ""}
</span>
</div>
{!item.shipped && item.comment && (
<span className="text-xs text-[var(--color-warning)] ml-1">
({item.comment})
</span>
<div className="mt-1 ml-6 text-xs text-[var(--color-warning)]">
Причина: {item.comment}
</div>
)}
</div>
))}
</div>
</div>
)}
{/* Restore saved state on load (when not justSaved) */}
{!justSaved && savedShipment.length > 0 && (
<div className="rounded-xl border border-[var(--color-accent)] bg-[var(--color-accent-soft)] px-3 py-2 text-xs text-[var(--color-accent)]">
Отгрузка ранее сохранена: {savedShipment.filter((i) => i.shipped).length}/{savedShipment.length} позиций
<button
type="button"
className="ml-2 underline text-[var(--color-text-muted)]"
onClick={() => setJustSaved(true)}
>
Показать
</button>
</div>
)}
</Panel>
);
};