-
-
-
+
+ {countsError &&
{countsError}
}
+
+
+
+
{format(currentMonth, 'LLLL yyyy', { locale: ru })}
+
+
+
+
+
-
-
- {['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'].map(day => (
-
- {day}
+
{['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'].map(day =>
{day}
)}
+
+ {Array.from({ length: (getDay(startOfMonth(currentMonth)) + 6) % 7 }).map((_, i) =>
)}
+ {days.map(day => {
+ const count = getCount(day);
+ const today = isToday(day);
+ return
;
+ })}
+
+
{isLoadingCounts ? <>Обновляем календарь… : countsError ? 'Количество доставок временно недоступно. Дни можно открывать.' : 'Число под датой — количество доставок'}
+
+
+ Ближайшие 7 дней
+ {isLoadingCounts ? Загружаем план доставок…
: countsError ? Обновите календарь, чтобы увидеть ближайшие даты.
: upcoming.length === 0 ? На неделю пока нет заявок
Выберите день в календаре или создайте доставку.
: upcoming.map(day => (
+
+
+
-
-
- {Array.from({ length: (getDay(startOfMonth(currentMonth)) + 6) % 7 }).map((_, i) => (
-
- ))}
- {days.map((day) => {
- const count = getCountForDate(day);
- const isTodayDate = isToday(day);
-
- return (
-
- );
- })}
-
-
-
-
-
Ближайшие даты с доставками
- {upcomingDays
- .filter(day => getCountForDate(day) > 0)
- .map(day => {
- const count = getCountForDate(day);
- return (
-
-
-
-
- {format(day, 'd')}
-
-
- {format(day, 'MMM', { locale: ru })}
-
-
-
-
- {count} {count === 1 ? 'доставка' : count < 5 ? 'доставки' : 'доставок'}
-
-
- {format(day, 'EEEE', { locale: ru })}
-
-
-
-
-
-
- );
- })}
-
- {upcomingDays.filter(day => getCountForDate(day) > 0).length === 0 && (
-
- Нет запланированных доставок
-
-
- )}
+
);
};
-
export default Dashboard;
diff --git a/frontend/src/pages/DeliveryListPage.tsx b/frontend/src/pages/DeliveryListPage.tsx
index efc6f08..d24d9fc 100644
--- a/frontend/src/pages/DeliveryListPage.tsx
+++ b/frontend/src/pages/DeliveryListPage.tsx
@@ -1,148 +1,79 @@
-import { useState, useEffect, useMemo } from 'react';
-import { ArrowLeft, Filter, Loader2, AlertCircle } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { ArrowLeft, Plus, ChevronLeft, ChevronRight, Search, AlertCircle, Loader2, Filter } from 'lucide-react';
+import { addDays, format, parse } from 'date-fns';
+import { ru } from 'date-fns/locale';
import { useDeliveryStore } from '../stores/deliveryStore';
-import { DeliveryList as DeliveryListComponent } from '../components/delivery/DeliveryList';
+import { useToastStore } from '../stores/toastStore';
+import { DeliveryList } from '../components/delivery/DeliveryList';
import { DeliveryForm } from '../components/delivery/DeliveryForm';
import { Button } from '../components/ui/Button';
+import { Input } from '../components/ui/Input';
import { Select } from '../components/ui/Select';
import { pickupFilterOptions } from '../constants/pickup';
-import type { Delivery, PickupLocation } from '../types';
-
-interface DeliveryListPageProps {
- selectedDate: string;
- onBack: () => void;
-}
-
-const DeliveryListPage = ({ selectedDate, onBack }: DeliveryListPageProps) => {
- const {
- deliveries,
- isLoading,
- error,
- fetchDeliveriesByDate,
- toggleStatus,
- deleteDelivery,
- updateDelivery,
- addDelivery,
- clearError,
- } = useDeliveryStore();
-
- // Fetch deliveries when date changes
- useEffect(() => {
- fetchDeliveriesByDate(selectedDate);
- }, [selectedDate, fetchDeliveriesByDate]);
-
- const [isFormOpen, setIsFormOpen] = useState(false);
- const [editingDelivery, setEditingDelivery] = useState
(null);
- const [pickupFilter, setPickupFilter] = useState('all');
-
- // Use all deliveries from store (already filtered by API)
- const filteredDeliveries = useMemo(() => {
- if (pickupFilter === 'all') return deliveries;
- return deliveries.filter(d => d.pickupLocation === pickupFilter || d.pickupLocation2 === pickupFilter);
- }, [deliveries, pickupFilter]);
-
- const handleStatusChange = async (id: string) => {
- const delivery = deliveries.find(d => d.id === id);
- if (delivery) {
- await toggleStatus(id, delivery.status);
- }
- };
-
- const handleEdit = (delivery: Delivery) => {
- setEditingDelivery(delivery);
- setIsFormOpen(true);
- };
-
- const handleDelete = async (id: string) => {
- if (confirm('Удалить эту доставку?')) {
- try {
- await deleteDelivery(id);
- } catch {
- // Error is handled by store
- }
- }
- };
+import { formatDateForInput, parseDateFromInput, getTodayFrontend } from '../utils/date';
+import type { Delivery, DeliveryStatus, PickupLocation } from '../types';
+interface DeliveryListPageProps { selectedDate: string; onBack: () => void; onDateSelect: (date: string) => void }
+const DeliveryListPage = ({ selectedDate, onBack, onDateSelect }: DeliveryListPageProps) => {
+ const { deliveries, currentDate, isLoading, error, pendingIds, fetchDeliveriesByDate, toggleStatus, deleteDelivery, updateDelivery, addDelivery } = useDeliveryStore();
+ const [isFormOpen, setFormOpen] = useState(false);
+ const [editing, setEditing] = useState(null);
+ const [pickup, setPickup] = useState('all');
+ const [status, setStatus] = useState('all');
+ const [search, setSearch] = useState('');
+ const [filtersOpen, setFiltersOpen] = useState(false);
+ useEffect(() => { void fetchDeliveriesByDate(selectedDate); }, [selectedDate, fetchDeliveriesByDate]);
+ const dayDeliveries = useMemo(() => currentDate === selectedDate ? deliveries : [], [currentDate, selectedDate, deliveries]);
+ const filtered = useMemo(() => {
+ const query = search.trim().toLocaleLowerCase('ru');
+ const digits = query.replace(/\D/g, '');
+ return dayDeliveries.filter(d => (pickup === 'all' || d.pickupLocation === pickup || d.pickupLocation2 === pickup)
+ && (status === 'all' || d.status === status)
+ && (!query || [d.customerName, d.street, d.house, d.productName, d.productName2 || '', d.phone, d.additionalPhone || ''].some(value => value.toLocaleLowerCase('ru').includes(query))
+ || (digits.length >= 3 && [d.phone, d.additionalPhone || ''].some(value => value.replace(/\D/g, '').includes(digits)))));
+ }, [dayDeliveries, pickup, status, search]);
+ const resetFilters = () => { setSearch(''); setPickup('all'); setStatus('all'); };
+ const hasFilters = !!search.trim() || pickup !== 'all' || status !== 'all';
const handleSubmit = async (data: Omit) => {
- try {
- if (editingDelivery) {
- await updateDelivery(editingDelivery.id, data);
- } else {
- await addDelivery(data);
- }
- setEditingDelivery(null);
- } catch {
- // Error is handled by store
- }
+ if (editing) await updateDelivery(editing.id, data);
+ else await addDelivery(data);
+ useToastStore.getState().addToast(data.date !== selectedDate ? `Доставка сохранена на ${data.date}` : editing ? 'Изменения сохранены' : 'Доставка создана', 'success');
};
-
- const handleAdd = () => {
- setEditingDelivery(null);
- setIsFormOpen(true);
- };
-
- const handleCloseForm = () => {
- setIsFormOpen(false);
- setEditingDelivery(null);
- };
-
+ const date = parse(selectedDate, 'dd-MM-yyyy', new Date());
+ const shiftDay = (offset: number) => onDateSelect(format(addDays(date, offset), 'dd-MM-yyyy'));
return (
-
-
-
-
-
-
- Всего: {filteredDeliveries.length}
-
-
-
-
+
+
+
+
{format(date, 'd MMMM yyyy', { locale: ru })}
{format(date, 'EEEE', { locale: ru })}
+
-
- {isLoading ? (
-
-
-
- ) : error ? (
-
-
-
-
{error}
+
+
+
{ if (e.target.value) onDateSelect(parseDateFromInput(e.target.value)); }} />
+
+
+
+
+
+
setSearch(e.target.value)} className="pl-10" />
+
+
+
-
- ) : (
-
- )}
-
-
+ {hasFilters &&
}
+
+ {isLoading || currentDate !== selectedDate ?
Загружаем доставки…
+ : error ?
{error}
+ :
{ const d = dayDeliveries.find(item => item.id === id); if (d) void toggleStatus(id, d.status).catch(() => {}); }}
+ onEdit={d => { setEditing(d); setFormOpen(true); }}
+ onDelete={id => { const d = dayDeliveries.find(item => item.id === id); if (window.confirm(`Удалить доставку для ${d?.customerName || 'клиента'}?`)) void deleteDelivery(id).catch(() => {}); }}
+ onAdd={() => { setEditing(null); setFormOpen(true); }} />}
+ { setFormOpen(false); setEditing(null); }} onSubmit={handleSubmit} initialData={editing} defaultDate={selectedDate} />
);
};
-
export default DeliveryListPage;
diff --git a/frontend/src/stores/deliveryStore.ts b/frontend/src/stores/deliveryStore.ts
index fe3de7f..5f53945 100644
--- a/frontend/src/stores/deliveryStore.ts
+++ b/frontend/src/stores/deliveryStore.ts
@@ -1,6 +1,7 @@
import { create } from 'zustand';
import { deliveriesApi } from '../api';
import { useToastStore } from './toastStore';
+import { deliveryErrorMessage } from '../utils/errors';
import type { Delivery, DeliveryStatus } from '../types';
interface DeliveryState {
@@ -13,6 +14,8 @@ interface DeliveryState {
isLoading: boolean;
isLoadingCounts: boolean;
error: string | null;
+ countsError: string | null;
+ pendingIds: string[];
// Actions
fetchDeliveriesByDate: (date: string) => Promise
;
@@ -33,6 +36,9 @@ interface DeliveryState {
handleWsDeliveryDeleted: (id: string) => void;
}
+let listRequest = 0;
+let countsRequest = 0;
+
export const useDeliveryStore = create()((set, get) => ({
// Initial state
deliveries: [],
@@ -41,127 +47,91 @@ export const useDeliveryStore = create()((set, get) => ({
isLoading: false,
isLoadingCounts: false,
error: null,
+ countsError: null,
+ pendingIds: [],
- // Fetch deliveries for a specific date
+ // Ignore stale responses when users switch days quickly.
fetchDeliveriesByDate: async (date: string) => {
- set({ isLoading: true, error: null, currentDate: date });
+ const request = ++listRequest;
+ set({ isLoading: true, error: null, currentDate: date, deliveries: get().currentDate === date ? get().deliveries : [] });
try {
const deliveries = await deliveriesApi.getByDate(date);
- set({ deliveries, isLoading: false });
+ if (request === listRequest) set({ deliveries, isLoading: false });
} catch (err) {
- const message = err instanceof Error ? err.message : 'Failed to fetch deliveries';
- set({
- error: message,
- isLoading: false,
- });
- useToastStore.getState().addToast(message, 'error');
+ if (request !== listRequest) return;
+ set({ error: deliveryErrorMessage(err, 'Не удалось загрузить доставки.'), isLoading: false });
}
},
- // Fetch delivery counts for calendar
fetchDeliveryCounts: async () => {
- set({ isLoadingCounts: true, error: null });
+ const request = ++countsRequest;
+ set({ isLoadingCounts: true, countsError: null });
try {
const counts = await deliveriesApi.getCounts();
- set({ deliveryCounts: counts, isLoadingCounts: false });
+ if (request === countsRequest) set({ deliveryCounts: counts, isLoadingCounts: false });
} catch (err) {
- const message = err instanceof Error ? err.message : 'Failed to fetch counts';
- set({
- error: message,
- isLoadingCounts: false,
- });
- useToastStore.getState().addToast(message, 'error');
+ if (request === countsRequest) set({ countsError: deliveryErrorMessage(err, 'Не удалось обновить календарь.'), isLoadingCounts: false });
}
},
- // Add new delivery
- addDelivery: async (delivery) => {
- set({ isLoading: true, error: null });
+ // Mutations keep the current day and list mounted. Count refresh failures
+ // must not turn a successfully saved delivery into a failed submission.
+ addDelivery: async delivery => {
try {
- await deliveriesApi.create(delivery);
- // Refresh deliveries for that date
- await get().fetchDeliveriesByDate(delivery.date);
- // Refresh counts
- await get().fetchDeliveryCounts();
- set({ isLoading: false });
+ const id = await deliveriesApi.create(delivery);
+ get().handleWsDeliveryCreated({ ...delivery, id, createdAt: Date.now(), updatedAt: Date.now() });
+ void get().fetchDeliveryCounts();
} catch (err) {
- const message = err instanceof Error ? err.message : 'Failed to create delivery';
- set({
- error: message,
- isLoading: false,
- });
- useToastStore.getState().addToast(message, 'error');
+ useToastStore.getState().addToast(deliveryErrorMessage(err, 'Не удалось создать доставку.'), 'error');
throw err;
}
},
- // Update delivery
updateDelivery: async (id, updates) => {
- set({ isLoading: true, error: null });
+ if (get().pendingIds.includes(id)) throw new Error('Delivery is already being updated');
+ set(state => ({ pendingIds: [...state.pendingIds, id] }));
try {
await deliveriesApi.update(id, updates);
- // Refresh deliveries for that date
- await get().fetchDeliveriesByDate(updates.date);
- // Refresh counts (in case date changed)
- await get().fetchDeliveryCounts();
- set({ isLoading: false });
+ const existing = get().deliveries.find(d => d.id === id);
+ get().handleWsDeliveryUpdated({ ...updates, id, createdAt: existing?.createdAt || Date.now(), updatedAt: Date.now() });
+ void get().fetchDeliveryCounts();
} catch (err) {
- const message = err instanceof Error ? err.message : 'Failed to update delivery';
- set({
- error: message,
- isLoading: false,
- });
- useToastStore.getState().addToast(message, 'error');
+ useToastStore.getState().addToast(deliveryErrorMessage(err, 'Не удалось сохранить доставку.'), 'error');
throw err;
+ } finally {
+ set(state => ({ pendingIds: state.pendingIds.filter(pending => pending !== id) }));
}
},
- // Delete delivery
- deleteDelivery: async (id) => {
- set({ isLoading: true, error: null });
+ deleteDelivery: async id => {
+ if (get().pendingIds.includes(id)) return;
+ set(state => ({ pendingIds: [...state.pendingIds, id] }));
try {
await deliveriesApi.delete(id);
- // Remove from local state
- set((state) => ({
- deliveries: state.deliveries.filter((d) => d.id !== id),
- isLoading: false,
- }));
- // Refresh counts
- await get().fetchDeliveryCounts();
+ get().handleWsDeliveryDeleted(id);
+ void get().fetchDeliveryCounts();
+ useToastStore.getState().addToast('Доставка удалена', 'success');
} catch (err) {
- const message = err instanceof Error ? err.message : 'Failed to delete delivery';
- set({
- error: message,
- isLoading: false,
- });
- useToastStore.getState().addToast(message, 'error');
+ useToastStore.getState().addToast(deliveryErrorMessage(err, 'Не удалось удалить доставку.'), 'error');
throw err;
+ } finally {
+ set(state => ({ pendingIds: state.pendingIds.filter(pending => pending !== id) }));
}
},
- // Toggle delivery status
toggleStatus: async (id, currentStatus) => {
- set({ isLoading: true, error: null });
+ if (get().pendingIds.includes(id)) return;
+ set(state => ({ pendingIds: [...state.pendingIds, id] }));
try {
- const newStatus = currentStatus === 'new' ? 'delivered' : 'new';
- await deliveriesApi.updateStatus(id, newStatus);
- // Update local state
- set((state) => ({
- deliveries: state.deliveries.map((d) =>
- d.id === id
- ? { ...d, status: newStatus, updatedAt: Date.now() }
- : d
- ),
- isLoading: false,
- }));
+ const status = currentStatus === 'new' ? 'delivered' : 'new';
+ await deliveriesApi.updateStatus(id, status);
+ get().handleWsStatusChanged(id, status);
+ useToastStore.getState().addToast(status === 'delivered' ? 'Доставка отмечена выполненной' : 'Доставка возвращена в новые', 'success');
} catch (err) {
- const message = err instanceof Error ? err.message : 'Failed to update status';
- set({
- error: message,
- isLoading: false,
- });
- useToastStore.getState().addToast(message, 'error');
+ useToastStore.getState().addToast(deliveryErrorMessage(err, 'Не удалось изменить статус.'), 'error');
throw err;
+ } finally {
+ set(state => ({ pendingIds: state.pendingIds.filter(pending => pending !== id) }));
}
},
diff --git a/frontend/src/utils/errors.ts b/frontend/src/utils/errors.ts
new file mode 100644
index 0000000..a8f509e
--- /dev/null
+++ b/frontend/src/utils/errors.ts
@@ -0,0 +1,12 @@
+import { ApiError } from '../api/client';
+
+export function deliveryErrorMessage(error: unknown, action: string): string {
+ if (error instanceof ApiError) {
+ if (error.status === 401) return 'Сессия истекла. Войдите снова.';
+ if (error.status === 403) return 'Недостаточно прав для этого действия.';
+ if (error.status === 404) return 'Доставка больше не найдена. Обновите список.';
+ if (error.status === 400) return `${action} Проверьте данные доставки.`;
+ if (error.status === 429) return `${action} Слишком много запросов. Попробуйте чуть позже.`;
+ }
+ return `${action} Проверьте соединение и попробуйте ещё раз.`;
+}
diff --git a/frontend/tests/deliveryStore.test.mjs b/frontend/tests/deliveryStore.test.mjs
new file mode 100644
index 0000000..9a2863b
--- /dev/null
+++ b/frontend/tests/deliveryStore.test.mjs
@@ -0,0 +1,79 @@
+import assert from 'node:assert/strict';
+import { after, beforeEach, test } from 'node:test';
+import { createServer } from 'vite';
+
+// Load the real TypeScript store with Vite's existing transformer; no test
+// dependency or production authentication bypass is required.
+const vite = await createServer({ configFile: false, root: new URL('..', import.meta.url).pathname, server: { middlewareMode: true, hmr: false, watch: null, ws: false }, appType: 'custom', optimizeDeps: { noDiscovery: true, include: [] } });
+const { useDeliveryStore: store } = await vite.ssrLoadModule('/src/stores/deliveryStore.ts');
+const { deliveriesApi: api } = await vite.ssrLoadModule('/src/api/deliveries.ts');
+const original = { ...api };
+const day = '08-10-2026';
+const nextDay = '09-10-2026';
+const delivery = { id: 'one', date: day, productName: 'Диван', pickupLocation: 'symbat', customerName: 'Тестовый клиент', street: 'Тестовая', house: '1', address: 'Тестовый адрес', phone: '+77761234567', hasElevator: true, paymentStatus: 'paid', comment: '', status: 'new', createdAt: 1, updatedAt: 1 };
+const deferred = () => { let resolve; const promise = new Promise(done => { resolve = done; }); return { promise, resolve }; };
+const settle = () => new Promise(resolve => setImmediate(resolve));
+beforeEach(() => {
+ Object.assign(api, original, { getCounts: async () => ({ [day]: 1 }) });
+ store.setState({ deliveries: [{ ...delivery }], currentDate: day, isLoading: false, isLoadingCounts: false, error: null, countsError: null, pendingIds: [] });
+});
+after(async () => { Object.assign(api, original); await vite.close(); });
+
+test('moving a delivery keeps the open day and removes only the moved delivery', async () => {
+ api.update = async () => {};
+ let fetchedList = false;
+ api.getByDate = async () => { fetchedList = true; return []; };
+ await store.getState().updateDelivery('one', { ...delivery, date: nextDay });
+ assert.equal(store.getState().currentDate, day);
+ assert.deepEqual(store.getState().deliveries, []);
+ assert.equal(fetchedList, false);
+ assert.equal(store.getState().isLoading, false);
+});
+
+test('failed save rejects its callback and leaves existing data intact', async () => {
+ api.create = async () => { throw new Error('network down'); };
+ await assert.rejects(store.getState().addDelivery(delivery));
+ assert.deepEqual(store.getState().deliveries, [delivery]);
+ assert.equal(store.getState().isLoading, false);
+});
+
+test('count refresh failure cannot turn successful creation into a failed save', async () => {
+ api.create = async () => 'two';
+ api.getCounts = async () => { throw new Error('count failure'); };
+ await store.getState().addDelivery({ ...delivery, productName: 'Кресло' });
+ await settle();
+ assert.equal(store.getState().deliveries.length, 2);
+ assert.equal(store.getState().error, null);
+ assert.match(store.getState().countsError, /календарь/);
+});
+
+test('status mutation has local pending state and suppresses repeated requests', async () => {
+ const wait = deferred();
+ let requests = 0;
+ api.updateStatus = async () => { requests++; await wait.promise; };
+ const first = store.getState().toggleStatus('one', 'new');
+ assert.deepEqual(store.getState().pendingIds, ['one']);
+ assert.equal(store.getState().isLoading, false);
+ assert.equal(store.getState().deliveries.length, 1);
+ await store.getState().toggleStatus('one', 'new');
+ assert.equal(requests, 1);
+ wait.resolve();
+ await first;
+ assert.equal(store.getState().deliveries[0].status, 'delivered');
+ assert.deepEqual(store.getState().pendingIds, []);
+});
+
+test('late response from an old day cannot overwrite the selected day', async () => {
+ const old = deferred();
+ const recent = deferred();
+ api.getByDate = date => date === day ? old.promise : recent.promise;
+ const first = store.getState().fetchDeliveriesByDate(day);
+ const second = store.getState().fetchDeliveriesByDate(nextDay);
+ recent.resolve([{ ...delivery, id: 'two', date: nextDay }]);
+ await second;
+ old.resolve([delivery]);
+ await first;
+ assert.equal(store.getState().currentDate, nextDay);
+ assert.equal(store.getState().deliveries[0].id, 'two');
+ assert.equal(store.getState().isLoading, false);
+});