Sfera/sfera-new
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Оптимизирована производительность React компонентов с помощью мемоизации

Browse Source 
КРИТИЧНЫЕ КОМПОНЕНТЫ ОПТИМИЗИРОВАНЫ:
• AdminDashboard (346 kB) - добавлены React.memo, useCallback, useMemo
• SellerStatisticsDashboard (329 kB) - мемоизация кэша и callback функций
• CreateSupplyPage (276 kB) - оптимизированы вычисления и обработчики
• EmployeesDashboard (268 kB) - мемоизация списков и функций
• SalesTab + AdvertisingTab - React.memo обертка

ТЕХНИЧЕСКИЕ УЛУЧШЕНИЯ:
✅ React.memo() для предотвращения лишних рендеров
✅ useMemo() для тяжелых вычислений
✅ useCallback() для стабильных ссылок на функции
✅ Мемоизация фильтрации и сортировки списков
✅ Оптимизация пропсов в компонентах-контейнерах

РЕЗУЛЬТАТЫ:
• Все компоненты успешно компилируются
• Линтер проходит без критических ошибок
• Сохранена вся функциональность
• Улучшена производительность рендеринга
• Снижена нагрузка на React дерево

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Veronika Smirnova
2025-08-06 13:18:45 +03:00
parent ef5de31ce7
commit bf27f3ba29
317 changed files with 26722 additions and 38332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

452
src/components/supplier-orders/supplier-order-card.tsx
View File

@ -1,25 +1,6 @@
"use client";
'use client'
import { useState } from "react";
import { useMutation } from "@apollo/client";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";
import {
SUPPLIER_APPROVE_ORDER,
SUPPLIER_REJECT_ORDER,
SUPPLIER_SHIP_ORDER,
} from "@/graphql/mutations";
import { GET_SUPPLY_ORDERS } from "@/graphql/queries";
import { toast } from "sonner";
import { useMutation } from '@apollo/client'
import {
Calendar,
Package,
@ -37,140 +18,142 @@ import {
ChevronUp,
MessageCircle,
Loader2,
} from "lucide-react";
} from 'lucide-react'
import { useState } from 'react'
import { toast } from 'sonner'
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Textarea } from '@/components/ui/textarea'
import { SUPPLIER_APPROVE_ORDER, SUPPLIER_REJECT_ORDER, SUPPLIER_SHIP_ORDER } from '@/graphql/mutations'
import { GET_SUPPLY_ORDERS } from '@/graphql/queries'
interface SupplierOrderCardProps {
order: {
id: string;
organizationId: string;
partnerId: string;
deliveryDate: string;
id: string
organizationId: string
partnerId: string
deliveryDate: string
status:
| "PENDING"
| "SUPPLIER_APPROVED"
| "CONFIRMED"
| "LOGISTICS_CONFIRMED"
| "SHIPPED"
| "IN_TRANSIT"
| "DELIVERED"
| "CANCELLED";
totalAmount: number;
totalItems: number;
createdAt: string;
| 'PENDING'
| 'SUPPLIER_APPROVED'
| 'CONFIRMED'
| 'LOGISTICS_CONFIRMED'
| 'SHIPPED'
| 'IN_TRANSIT'
| 'DELIVERED'
| 'CANCELLED'
totalAmount: number
totalItems: number
createdAt: string
organization: {
id: string;
name?: string;
fullName?: string;
type: string;
inn?: string;
};
id: string
name?: string
fullName?: string
type: string
inn?: string
}
fulfillmentCenter?: {
id: string;
name?: string;
fullName?: string;
type: string;
};
id: string
name?: string
fullName?: string
type: string
}
logisticsPartner?: {
id: string;
name?: string;
fullName?: string;
type: string;
};
id: string
name?: string
fullName?: string
type: string
}
items: Array<{
id: string;
quantity: number;
price: number;
totalPrice: number;
id: string
quantity: number
price: number
totalPrice: number
product: {
id: string;
name: string;
article: string;
description?: string;
id: string
name: string
article: string
description?: string
category?: {
id: string;
name: string;
};
};
}>;
};
id: string
name: string
}
}
}>
}
}
export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
const [isExpanded, setIsExpanded] = useState(false);
const [showRejectModal, setShowRejectModal] = useState(false);
const [rejectReason, setRejectReason] = useState("");
const [isExpanded, setIsExpanded] = useState(false)
const [showRejectModal, setShowRejectModal] = useState(false)
const [rejectReason, setRejectReason] = useState('')
// Мутации для действий поставщика
const [supplierApproveOrder, { loading: approving }] = useMutation(
SUPPLIER_APPROVE_ORDER,
{
refetchQueries: [{ query: GET_SUPPLY_ORDERS }],
onCompleted: (data) => {
if (data.supplierApproveOrder.success) {
toast.success(data.supplierApproveOrder.message);
} else {
toast.error(data.supplierApproveOrder.message);
}
},
onError: (error) => {
console.error("Error approving order:", error);
toast.error("Ошибка при одобрении заказа");
},
}
);
const [supplierApproveOrder, { loading: approving }] = useMutation(SUPPLIER_APPROVE_ORDER, {
refetchQueries: [{ query: GET_SUPPLY_ORDERS }],
onCompleted: (data) => {
if (data.supplierApproveOrder.success) {
toast.success(data.supplierApproveOrder.message)
} else {
toast.error(data.supplierApproveOrder.message)
}
},
onError: (error) => {
console.error('Error approving order:', error)
toast.error('Ошибка при одобрении заказа')
},
})
const [supplierRejectOrder, { loading: rejecting }] = useMutation(
SUPPLIER_REJECT_ORDER,
{
refetchQueries: [{ query: GET_SUPPLY_ORDERS }],
onCompleted: (data) => {
if (data.supplierRejectOrder.success) {
toast.success(data.supplierRejectOrder.message);
} else {
toast.error(data.supplierRejectOrder.message);
}
setShowRejectModal(false);
setRejectReason("");
},
onError: (error) => {
console.error("Error rejecting order:", error);
toast.error("Ошибка при отклонении заказа");
},
}
);
const [supplierRejectOrder, { loading: rejecting }] = useMutation(SUPPLIER_REJECT_ORDER, {
refetchQueries: [{ query: GET_SUPPLY_ORDERS }],
onCompleted: (data) => {
if (data.supplierRejectOrder.success) {
toast.success(data.supplierRejectOrder.message)
} else {
toast.error(data.supplierRejectOrder.message)
}
setShowRejectModal(false)
setRejectReason('')
},
onError: (error) => {
console.error('Error rejecting order:', error)
toast.error('Ошибка при отклонении заказа')
},
})
const [supplierShipOrder, { loading: shipping }] = useMutation(
SUPPLIER_SHIP_ORDER,
{
refetchQueries: [{ query: GET_SUPPLY_ORDERS }],
onCompleted: (data) => {
if (data.supplierShipOrder.success) {
toast.success(data.supplierShipOrder.message);
} else {
toast.error(data.supplierShipOrder.message);
}
},
onError: (error) => {
console.error("Error shipping order:", error);
toast.error("Ошибка при отправке заказа");
},
}
);
const [supplierShipOrder, { loading: shipping }] = useMutation(SUPPLIER_SHIP_ORDER, {
refetchQueries: [{ query: GET_SUPPLY_ORDERS }],
onCompleted: (data) => {
if (data.supplierShipOrder.success) {
toast.success(data.supplierShipOrder.message)
} else {
toast.error(data.supplierShipOrder.message)
}
},
onError: (error) => {
console.error('Error shipping order:', error)
toast.error('Ошибка при отправке заказа')
},
})
const handleApproveOrder = async () => {
try {
await supplierApproveOrder({
variables: { id: order.id },
});
})
} catch (error) {
console.error("Error in handleApproveOrder:", error);
console.error('Error in handleApproveOrder:', error)
}
};
}
const handleRejectOrder = async () => {
if (!rejectReason.trim()) {
toast.error("Укажите причину отклонения заявки");
return;
toast.error('Укажите причину отклонения заявки')
return
}
try {
@ -179,86 +162,62 @@ export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
id: order.id,
reason: rejectReason,
},
});
})
} catch (error) {
console.error("Error in handleRejectOrder:", error);
console.error('Error in handleRejectOrder:', error)
}
};
}
const handleShipOrder = async () => {
try {
await supplierShipOrder({
variables: { id: order.id },
});
})
} catch (error) {
console.error("Error in handleShipOrder:", error);
console.error('Error in handleShipOrder:', error)
}
};
}
const getStatusBadge = (status: string) => {
switch (status) {
case "PENDING":
return (
<Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-400/30">
🟡 ОЖИДАЕТ
</Badge>
);
case "SUPPLIER_APPROVED":
return (
<Badge className="bg-green-500/20 text-green-300 border-green-400/30">
🟢 ОДОБРЕНО
</Badge>
);
case "CONFIRMED":
case "LOGISTICS_CONFIRMED":
return (
<Badge className="bg-blue-500/20 text-blue-300 border-blue-400/30">
🔵 В РАБОТЕ
</Badge>
);
case "SHIPPED":
case "IN_TRANSIT":
return (
<Badge className="bg-orange-500/20 text-orange-300 border-orange-400/30">
🟠 В ПУТИ
</Badge>
);
case "DELIVERED":
return (
<Badge className="bg-emerald-500/20 text-emerald-300 border-emerald-400/30">
✅ ДОСТАВЛЕНО
</Badge>
);
case 'PENDING':
return <Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-400/30">🟡 ОЖИДАЕТ</Badge>
case 'SUPPLIER_APPROVED':
return <Badge className="bg-green-500/20 text-green-300 border-green-400/30">🟢 ОДОБРЕНО</Badge>
case 'CONFIRMED':
case 'LOGISTICS_CONFIRMED':
return <Badge className="bg-blue-500/20 text-blue-300 border-blue-400/30">🔵 В РАБОТЕ</Badge>
case 'SHIPPED':
case 'IN_TRANSIT':
return <Badge className="bg-orange-500/20 text-orange-300 border-orange-400/30">🟠 В ПУТИ</Badge>
case 'DELIVERED':
return <Badge className="bg-emerald-500/20 text-emerald-300 border-emerald-400/30">✅ ДОСТАВЛЕНО</Badge>
default:
return (
<Badge className="bg-white/20 text-white/70 border-white/30">
{status}
</Badge>
);
return <Badge className="bg-white/20 text-white/70 border-white/30">{status}</Badge>
}
};
}
const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleDateString("ru-RU", {
day: "2-digit",
month: "2-digit",
year: "numeric",
});
};
return new Date(dateString).toLocaleDateString('ru-RU', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
})
}
const getInitials = (name: string) => {
return name
.split(" ")
.split(' ')
.map((word) => word[0])
.join("")
.join('')
.toUpperCase()
.slice(0, 2);
};
.slice(0, 2)
}
const calculateVolume = () => {
// Примерный расчет объема - можно улучшить на основе реальных данных о товарах
return (order.totalItems * 0.02).toFixed(1); // 0.02 м³ на единицу товара
};
return (order.totalItems * 0.02).toFixed(1) // 0.02 м³ на единицу товара
}
return (
<>
@ -270,15 +229,11 @@ export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-2">
<Hash className="h-4 w-4 text-white/60" />
<span className="text-white font-semibold">
СФ-{order.id.slice(-8)}
</span>
<span className="text-white font-semibold">СФ-{order.id.slice(-8)}</span>
</div>
<div className="flex items-center space-x-2">
<Calendar className="h-4 w-4 text-blue-400" />
<span className="text-white/70 text-sm">
{formatDate(order.createdAt)}
</span>
<span className="text-white/70 text-sm">{formatDate(order.createdAt)}</span>
</div>
{getStatusBadge(order.status)}
</div>
@ -295,22 +250,14 @@ export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
<div className="flex items-center space-x-3">
<Avatar className="w-8 h-8">
<AvatarFallback className="bg-blue-500 text-white text-sm">
{getInitials(
order.organization.name ||
order.organization.fullName ||
"ОРГ"
)}
{getInitials(order.organization.name || order.organization.fullName || 'ОРГ')}
</AvatarFallback>
</Avatar>
<div>
<p className="text-white font-medium text-sm">
{order.organization.name || order.organization.fullName}
</p>
{order.organization.inn && (
<p className="text-white/60 text-xs">
ИНН: {order.organization.inn}
</p>
)}
{order.organization.inn && <p className="text-white/60 text-xs">ИНН: {order.organization.inn}</p>}
</div>
</div>
</div>
@ -323,8 +270,7 @@ export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
<span className="text-white/60 text-sm">Фулфилмент:</span>
</div>
<p className="text-white font-medium text-sm">
{order.fulfillmentCenter.name ||
order.fulfillmentCenter.fullName}
{order.fulfillmentCenter.name || order.fulfillmentCenter.fullName}
</p>
</div>
)}
@ -337,8 +283,7 @@ export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
<span className="text-white/60 text-sm">Логистика:</span>
</div>
<p className="text-white font-medium text-sm">
{order.logisticsPartner.name ||
order.logisticsPartner.fullName}
{order.logisticsPartner.name || order.logisticsPartner.fullName}
</p>
</div>
)}
@ -351,28 +296,17 @@ export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
<Package className="h-4 w-4 text-green-400" />
<span className="text-white text-sm">
{order.items.length} вид
{order.items.length === 1
? ""
: order.items.length < 5
? "а"
: "ов"}{" "}
товаров
{order.items.length === 1 ? '' : order.items.length < 5 ? 'а' : 'ов'} товаров
</span>
</div>
<div className="flex items-center space-x-2">
<span className="text-white text-sm">
{order.totalItems} единиц
</span>
<span className="text-white text-sm">{order.totalItems} единиц</span>
</div>
<div className="flex items-center space-x-2">
<span className="text-white text-sm">
📏 {calculateVolume()} м³
</span>
<span className="text-white text-sm">📏 {calculateVolume()} м³</span>
</div>
<div className="flex items-center space-x-2">
<span className="text-white font-semibold">
💰 {order.totalAmount.toLocaleString()}₽
</span>
<span className="text-white font-semibold">💰 {order.totalAmount.toLocaleString()}₽</span>
</div>
</div>
@ -385,15 +319,11 @@ export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
className="text-white/70 hover:text-white"
>
Подробности
{isExpanded ? (
<ChevronUp className="h-4 w-4 ml-1" />
) : (
<ChevronDown className="h-4 w-4 ml-1" />
)}
{isExpanded ? <ChevronUp className="h-4 w-4 ml-1" /> : <ChevronDown className="h-4 w-4 ml-1" />}
</Button>
{/* Действия для PENDING */}
{order.status === "PENDING" && (
{order.status === 'PENDING' && (
<>
<Button
size="sm"
@ -421,28 +351,20 @@ export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
)}
{/* Действие для LOGISTICS_CONFIRMED */}
{order.status === "LOGISTICS_CONFIRMED" && (
{order.status === 'LOGISTICS_CONFIRMED' && (
<Button
size="sm"
onClick={handleShipOrder}
disabled={shipping}
className="glass-button bg-orange-500/20 hover:bg-orange-500/30 text-orange-300 border border-orange-500/30"
>
{shipping ? (
<Loader2 className="h-3 w-3 mr-1 animate-spin" />
) : (
<Truck className="h-3 w-3 mr-1" />
)}
{shipping ? <Loader2 className="h-3 w-3 mr-1 animate-spin" /> : <Truck className="h-3 w-3 mr-1" />}
Отгрузить
</Button>
)}
{/* Кнопка связаться всегда доступна */}
<Button
size="sm"
variant="ghost"
className="glass-secondary text-blue-300 hover:text-blue-200"
>
<Button size="sm" variant="ghost" className="glass-secondary text-blue-300 hover:text-blue-200">
<MessageCircle className="h-3 w-3 mr-1" />
Связаться
</Button>
@ -460,9 +382,7 @@ export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
<div className="flex items-center space-x-2">
<Clock className="h-4 w-4 text-white/60" />
<span className="text-white/60 text-sm">Срок:</span>
<span className="text-white text-sm">
{formatDate(order.deliveryDate)}
</span>
<span className="text-white text-sm">{formatDate(order.deliveryDate)}</span>
</div>
</div>
</div>
@ -471,21 +391,14 @@ export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
{/* Расширенная детализация */}
{isExpanded && (
<div className="border-t border-white/10 p-4">
<h4 className="text-white font-semibold mb-3">
📋 ДЕТАЛИ ЗАЯВКИ #{order.id.slice(-8)}
</h4>
<h4 className="text-white font-semibold mb-3">📋 ДЕТАЛИ ЗАЯВКИ #{order.id.slice(-8)}</h4>
{/* Товары в заявке */}
<div className="mb-4">
<h5 className="text-white/80 font-medium mb-2">
📦 ТОВАРЫ В ЗАЯВКЕ:
</h5>
<h5 className="text-white/80 font-medium mb-2">📦 ТОВАРЫ В ЗАЯВКЕ:</h5>
<div className="space-y-2">
{order.items.map((item) => (
<div
key={item.id}
className="flex items-center justify-between p-2 bg-white/5 rounded"
>
<div key={item.id} className="flex items-center justify-between p-2 bg-white/5 rounded">
<div className="flex-1">
<span className="text-white text-sm">
{item.product.name} • {item.quantity} шт • {item.price}
@ -493,8 +406,7 @@ export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
</span>
<div className="text-white/60 text-xs">
Артикул: {item.product.article}
{item.product.category &&
` • ${item.product.category.name}`}
{item.product.category && ` • ${item.product.category.name}`}
</div>
</div>
</div>
@ -509,23 +421,15 @@ export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
{/* Логистическая информация */}
<div className="mb-4">
<h5 className="text-white/80 font-medium mb-2">
📍 ЛОГИСТИЧЕСКАЯ ИНФОРМАЦИЯ:
</h5>
<h5 className="text-white/80 font-medium mb-2">📍 ЛОГИСТИЧЕСКАЯ ИНФОРМАЦИЯ:</h5>
<div className="space-y-1 text-sm">
<div className="text-white/70">
• Объем груза: {calculateVolume()} м³
</div>
<div className="text-white/70">• Объем груза: {calculateVolume()} м³</div>
<div className="text-white/70">
• Предварительная стоимость доставки: ~
{Math.round(
parseFloat(calculateVolume()) * 3500
).toLocaleString()}
₽
{Math.round(parseFloat(calculateVolume()) * 3500).toLocaleString()}₽
</div>
<div className="text-white/70">
• Маршрут: Склад поставщика →{" "}
{order.fulfillmentCenter?.name || "Фулфилмент-центр"}
• Маршрут: Склад поставщика → {order.fulfillmentCenter?.name || 'Фулфилмент-центр'}
</div>
</div>
</div>
@ -535,16 +439,12 @@ export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
<h5 className="text-white/80 font-medium mb-2">📞 КОНТАКТЫ:</h5>
<div className="space-y-1 text-sm">
<div className="text-white/70">
• Заказчик:{" "}
{order.organization.name || order.organization.fullName}
{order.organization.inn &&
` (ИНН: ${order.organization.inn})`}
• Заказчик: {order.organization.name || order.organization.fullName}
{order.organization.inn && ` (ИНН: ${order.organization.inn})`}
</div>
{order.fulfillmentCenter && (
<div className="text-white/70">
• Фулфилмент:{" "}
{order.fulfillmentCenter.name ||
order.fulfillmentCenter.fullName}
• Фулфилмент: {order.fulfillmentCenter.name || order.fulfillmentCenter.fullName}
</div>
)}
</div>
@ -561,9 +461,7 @@ export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
</DialogHeader>
<div className="space-y-4">
<div>
<label className="text-white/90 text-sm mb-2 block">
Причина отклонения заявки:
</label>
<label className="text-white/90 text-sm mb-2 block">Причина отклонения заявки:</label>
<Textarea
value={rejectReason}
onChange={(e) => setRejectReason(e.target.value)}
@ -585,11 +483,7 @@ export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
disabled={rejecting || !rejectReason.trim()}
className="bg-red-500/20 hover:bg-red-500/30 text-red-300 border border-red-500/30"
>
{rejecting ? (
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
) : (
<XCircle className="h-4 w-4 mr-2" />
)}
{rejecting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <XCircle className="h-4 w-4 mr-2" />}
Отклонить заявку
</Button>
</div>
@ -597,5 +491,5 @@ export function SupplierOrderCard({ order }: SupplierOrderCardProps) {
</DialogContent>
</Dialog>
</>
);
)
}