{
const [viewMode, setViewMode] = useState<'kanban' | 'table'>('kanban');
- const newDeliveries = deliveries.filter(d => d.status === 'new');
- const deliveredDeliveries = deliveries.filter(d => d.status === 'delivered');
+ const newDeliveries = useMemo(() => deliveries.filter(d => d.status === 'new'), [deliveries]);
+ const deliveredDeliveries = useMemo(() => deliveries.filter(d => d.status === 'delivered'), [deliveries]);
return (
diff --git a/frontend/src/components/delivery/DeliveryRow.tsx b/frontend/src/components/delivery/DeliveryRow.tsx
index 263920c..3d38ceb 100644
--- a/frontend/src/components/delivery/DeliveryRow.tsx
+++ b/frontend/src/components/delivery/DeliveryRow.tsx
@@ -1,3 +1,4 @@
+import { memo } from 'react';
import { MapPin, Phone } from 'lucide-react';
import type { Delivery } from '../../types';
import { pickupLocationLabels } from '../../types';
@@ -10,7 +11,7 @@ interface DeliveryRowProps {
onDelete: (id: string) => void;
}
-export const DeliveryRow = ({ delivery, onStatusChange, onEdit, onDelete }: DeliveryRowProps) => {
+export const DeliveryRow = memo(({ delivery, onStatusChange, onEdit, onDelete }: DeliveryRowProps) => {
const handleAddressClick = (e: React.MouseEvent) => {
e.stopPropagation();
const encodedAddress = encodeURIComponent(delivery.address);
@@ -75,4 +76,6 @@ export const DeliveryRow = ({ delivery, onStatusChange, onEdit, onDelete }: Deli
);
-};
+});
+
+DeliveryRow.displayName = 'DeliveryRow';
diff --git a/frontend/src/components/ui/Toast.tsx b/frontend/src/components/ui/Toast.tsx
new file mode 100644
index 0000000..9771a1e
--- /dev/null
+++ b/frontend/src/components/ui/Toast.tsx
@@ -0,0 +1,45 @@
+import { useToastStore } from '../../stores/toastStore';
+import { X, CheckCircle, AlertCircle, Info } from 'lucide-react';
+
+const icons = {
+ success: CheckCircle,
+ error: AlertCircle,
+ info: Info,
+};
+
+const styles = {
+ success: 'bg-green-50 border-green-200 text-green-800',
+ error: 'bg-red-50 border-red-200 text-red-800',
+ info: 'bg-blue-50 border-blue-200 text-blue-800',
+};
+
+export const ToastContainer = () => {
+ const { toasts, removeToast } = useToastStore();
+
+ if (toasts.length === 0) return null;
+
+ return (
+
+ {toasts.map((toast) => {
+ const Icon = icons[toast.type];
+ return (
+
+
+
{toast.message}
+
+
+ );
+ })}
+
+ );
+};
diff --git a/frontend/src/constants/pickup.ts b/frontend/src/constants/pickup.ts
new file mode 100644
index 0000000..2226b12
--- /dev/null
+++ b/frontend/src/constants/pickup.ts
@@ -0,0 +1,14 @@
+import type { PickupLocation } from '../types';
+import { pickupLocationLabels } from '../types';
+
+export const pickupOptions: { value: PickupLocation; label: string }[] = [
+ { value: 'warehouse', label: pickupLocationLabels.warehouse },
+ { value: 'symbat', label: pickupLocationLabels.symbat },
+ { value: 'nursaya', label: pickupLocationLabels.nursaya },
+ { value: 'galaktika', label: pickupLocationLabels.galaktika },
+];
+
+export const pickupFilterOptions: { value: PickupLocation | 'all'; label: string }[] = [
+ { value: 'all', label: 'Все места загрузки' },
+ ...pickupOptions,
+];
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 49af7b7..c6de4d2 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -1,9 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
import { Plus, Printer, ChevronRight, CalendarDays } from 'lucide-react';
import { format, startOfMonth, endOfMonth, eachDayOfInterval, isToday } from 'date-fns';
import { ru } from 'date-fns/locale';
import { useDeliveryStore } from '../stores/deliveryStore';
import type { Delivery } from '../types';
+import { pickupLocationLabels } from '../types';
import { Button } from '../components/ui/Button';
import { Card } from '../components/ui/Card';
@@ -12,7 +13,7 @@ interface DashboardProps {
onAddDelivery: () => void;
}
-export const Dashboard = ({ onDateSelect, onAddDelivery }: DashboardProps) => {
+const Dashboard = ({ onDateSelect, onAddDelivery }: DashboardProps) => {
const deliveryCounts = useDeliveryStore(state => state.deliveryCounts);
const fetchDeliveryCounts = useDeliveryStore(state => state.fetchDeliveryCounts);
const [currentMonth, setCurrentMonth] = useState(new Date());
@@ -22,9 +23,11 @@ export const Dashboard = ({ onDateSelect, onAddDelivery }: DashboardProps) => {
fetchDeliveryCounts();
}, [fetchDeliveryCounts]);
- const monthStart = startOfMonth(currentMonth);
- const monthEnd = endOfMonth(currentMonth);
- const days = eachDayOfInterval({ start: monthStart, end: monthEnd });
+ const days = useMemo(() => {
+ const monthStart = startOfMonth(currentMonth);
+ const monthEnd = endOfMonth(currentMonth);
+ return eachDayOfInterval({ start: monthStart, end: monthEnd });
+ }, [currentMonth]);
const getCountForDate = (date: Date) => {
const dateStr = format(date, 'dd-MM-yyyy');
@@ -76,7 +79,7 @@ export const Dashboard = ({ onDateSelect, onAddDelivery }: DashboardProps) => {
${dayDeliveries.map((d: Delivery) => `
| ${d.status === 'new' ? 'Новое' : 'Доставлено'} |
- ${d.pickupLocation === 'warehouse' ? 'Склад' : d.pickupLocation === 'symbat' ? 'Сымбат' : d.pickupLocation === 'nursaya' ? 'Нурсая' : 'Галактика'} |
+ ${pickupLocationLabels[d.pickupLocation]} |
${d.productName} |
${d.address} |
${d.phone} |
@@ -118,7 +121,7 @@ export const Dashboard = ({ onDateSelect, onAddDelivery }: DashboardProps) => {
- {format(currentMonth, 'MMMM yyyy', { locale: ru })}
+ {format(currentMonth, 'LLLL yyyy', { locale: ru })}
);
};
+
+export default Dashboard;
diff --git a/frontend/src/pages/DeliveryListPage.tsx b/frontend/src/pages/DeliveryListPage.tsx
index e076360..27e69e0 100644
--- a/frontend/src/pages/DeliveryListPage.tsx
+++ b/frontend/src/pages/DeliveryListPage.tsx
@@ -1,28 +1,30 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
import { ArrowLeft, Filter, Loader2, AlertCircle } from 'lucide-react';
import { useDeliveryStore } from '../stores/deliveryStore';
import { DeliveryList as DeliveryListComponent } from '../components/delivery/DeliveryList';
import { DeliveryForm } from '../components/delivery/DeliveryForm';
import { Button } from '../components/ui/Button';
import { Select } from '../components/ui/Select';
+import { pickupFilterOptions } from '../constants/pickup';
import type { Delivery, PickupLocation } from '../types';
-import { pickupLocationLabels } from '../types';
interface DeliveryListPageProps {
selectedDate: string;
onBack: () => void;
}
-export const DeliveryListPage = ({ selectedDate, onBack }: DeliveryListPageProps) => {
- const deliveries = useDeliveryStore(state => state.deliveries);
- const isLoading = useDeliveryStore(state => state.isLoading);
- const error = useDeliveryStore(state => state.error);
- const fetchDeliveriesByDate = useDeliveryStore(state => state.fetchDeliveriesByDate);
- const toggleStatus = useDeliveryStore(state => state.toggleStatus);
- const deleteDelivery = useDeliveryStore(state => state.deleteDelivery);
- const updateDelivery = useDeliveryStore(state => state.updateDelivery);
- const addDelivery = useDeliveryStore(state => state.addDelivery);
- const clearError = useDeliveryStore(state => state.clearError);
+const DeliveryListPage = ({ selectedDate, onBack }: DeliveryListPageProps) => {
+ const {
+ deliveries,
+ isLoading,
+ error,
+ fetchDeliveriesByDate,
+ toggleStatus,
+ deleteDelivery,
+ updateDelivery,
+ addDelivery,
+ clearError,
+ } = useDeliveryStore();
// Fetch deliveries when date changes
useEffect(() => {
@@ -34,18 +36,10 @@ export const DeliveryListPage = ({ selectedDate, onBack }: DeliveryListPageProps
const [pickupFilter, setPickupFilter] = useState
('all');
// Use all deliveries from store (already filtered by API)
- const dayDeliveries = deliveries;
- const filteredDeliveries = pickupFilter === 'all'
- ? dayDeliveries
- : dayDeliveries.filter(d => d.pickupLocation === pickupFilter);
-
- const pickupOptions: { value: PickupLocation | 'all'; label: string }[] = [
- { value: 'all', label: 'Все места загрузки' },
- { value: 'warehouse', label: pickupLocationLabels.warehouse },
- { value: 'symbat', label: pickupLocationLabels.symbat },
- { value: 'nursaya', label: pickupLocationLabels.nursaya },
- { value: 'galaktika', label: pickupLocationLabels.galaktika },
- ];
+ const filteredDeliveries = useMemo(() => {
+ if (pickupFilter === 'all') return deliveries;
+ return deliveries.filter(d => d.pickupLocation === pickupFilter);
+ }, [deliveries, pickupFilter]);
const handleStatusChange = async (id: string) => {
const delivery = deliveries.find(d => d.id === id);
@@ -110,7 +104,7 @@ export const DeliveryListPage = ({ selectedDate, onBack }: DeliveryListPageProps
label=""
value={pickupFilter}
onChange={(e) => setPickupFilter(e.target.value as PickupLocation | 'all')}
- options={pickupOptions}
+ options={pickupFilterOptions}
/>
@@ -150,3 +144,5 @@ export const DeliveryListPage = ({ selectedDate, onBack }: DeliveryListPageProps
);
};
+
+export default DeliveryListPage;
diff --git a/frontend/src/stores/deliveryStore.ts b/frontend/src/stores/deliveryStore.ts
index 70c9b01..5161fec 100644
--- a/frontend/src/stores/deliveryStore.ts
+++ b/frontend/src/stores/deliveryStore.ts
@@ -1,5 +1,6 @@
import { create } from 'zustand';
import { deliveriesApi } from '../api';
+import { useToastStore } from './toastStore';
import type { Delivery, DeliveryStatus } from '../types';
interface DeliveryState {
@@ -40,10 +41,12 @@ export const useDeliveryStore = create()((set, get) => ({
const deliveries = await deliveriesApi.getByDate(date);
set({ deliveries, isLoading: false });
} catch (err) {
+ const message = err instanceof Error ? err.message : 'Failed to fetch deliveries';
set({
- error: err instanceof Error ? err.message : 'Failed to fetch deliveries',
+ error: message,
isLoading: false,
});
+ useToastStore.getState().addToast(message, 'error');
}
},
@@ -54,10 +57,12 @@ export const useDeliveryStore = create()((set, get) => ({
const counts = await deliveriesApi.getCounts();
set({ deliveryCounts: counts, isLoadingCounts: false });
} catch (err) {
+ const message = err instanceof Error ? err.message : 'Failed to fetch counts';
set({
- error: err instanceof Error ? err.message : 'Failed to fetch counts',
+ error: message,
isLoadingCounts: false,
});
+ useToastStore.getState().addToast(message, 'error');
}
},
@@ -72,10 +77,12 @@ export const useDeliveryStore = create()((set, get) => ({
await get().fetchDeliveryCounts();
set({ isLoading: false });
} catch (err) {
+ const message = err instanceof Error ? err.message : 'Failed to create delivery';
set({
- error: err instanceof Error ? err.message : 'Failed to create delivery',
+ error: message,
isLoading: false,
});
+ useToastStore.getState().addToast(message, 'error');
throw err;
}
},
@@ -91,10 +98,12 @@ export const useDeliveryStore = create()((set, get) => ({
await get().fetchDeliveryCounts();
set({ isLoading: false });
} catch (err) {
+ const message = err instanceof Error ? err.message : 'Failed to update delivery';
set({
- error: err instanceof Error ? err.message : 'Failed to update delivery',
+ error: message,
isLoading: false,
});
+ useToastStore.getState().addToast(message, 'error');
throw err;
}
},
@@ -112,10 +121,12 @@ export const useDeliveryStore = create()((set, get) => ({
// Refresh counts
await get().fetchDeliveryCounts();
} catch (err) {
+ const message = err instanceof Error ? err.message : 'Failed to delete delivery';
set({
- error: err instanceof Error ? err.message : 'Failed to delete delivery',
+ error: message,
isLoading: false,
});
+ useToastStore.getState().addToast(message, 'error');
throw err;
}
},
@@ -136,10 +147,12 @@ export const useDeliveryStore = create()((set, get) => ({
isLoading: false,
}));
} catch (err) {
+ const message = err instanceof Error ? err.message : 'Failed to update status';
set({
- error: err instanceof Error ? err.message : 'Failed to update status',
+ error: message,
isLoading: false,
});
+ useToastStore.getState().addToast(message, 'error');
throw err;
}
},
diff --git a/frontend/src/utils/date.ts b/frontend/src/utils/date.ts
new file mode 100644
index 0000000..ffdc131
--- /dev/null
+++ b/frontend/src/utils/date.ts
@@ -0,0 +1,52 @@
+import { format, parse, type Locale } from 'date-fns';
+
+/**
+ * Convert backend date format (YYYY-MM-DD) to frontend format (DD-MM-YYYY)
+ */
+export function backendDateToFrontend(dateStr: string): string {
+ const [year, month, day] = dateStr.split('-');
+ return `${day}-${month}-${year}`;
+}
+
+/**
+ * Convert frontend date format (DD-MM-YYYY) to backend format (YYYY-MM-DD)
+ */
+export function frontendDateToBackend(dateStr: string): string {
+ const [day, month, year] = dateStr.split('-');
+ return `${year}-${month}-${day}`;
+}
+
+/**
+ * Format frontend date for HTML input type="date" (YYYY-MM-DD)
+ */
+export function formatDateForInput(dateStr: string): string {
+ const [day, month, year] = dateStr.split('-');
+ return `${year}-${month}-${day}`;
+}
+
+/**
+ * Parse date from HTML input type="date" to frontend format (DD-MM-YYYY)
+ */
+export function parseDateFromInput(dateStr: string): string {
+ const [year, month, day] = dateStr.split('-');
+ return `${day}-${month}-${year}`;
+}
+
+/**
+ * Get today's date in frontend format
+ */
+export function getTodayFrontend(): string {
+ return format(new Date(), 'dd-MM-yyyy');
+}
+
+/**
+ * Format frontend date for display with date-fns
+ */
+export function formatFrontendDate(
+ dateStr: string,
+ formatStr: string,
+ options?: { locale?: Locale }
+): string {
+ const date = parse(dateStr, 'dd-MM-yyyy', new Date());
+ return format(date, formatStr, options);
+}