Files
sfera-new/src/components/market/organization-card.tsx
Veronika Smirnova bf27f3ba29 Оптимизирована производительность React компонентов с помощью мемоизации
КРИТИЧНЫЕ КОМПОНЕНТЫ ОПТИМИЗИРОВАНЫ:
• 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>
2025-08-06 13:18:45 +03:00

295 lines
11 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

'use client'
import { Plus, Send, Trash2 } from 'lucide-react'
import { useState } from 'react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { OrganizationAvatar } from './organization-avatar'
interface Organization {
id: string
inn: string
name?: string
fullName?: string
type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
address?: string
phones?: Array<{ value: string }>
emails?: Array<{ value: string }>
createdAt: string
users?: Array<{ id: string; avatar?: string }>
isCounterparty?: boolean
isCurrentUser?: boolean
hasOutgoingRequest?: boolean
hasIncomingRequest?: boolean
}
interface OrganizationCardProps {
organization: Organization
onSendRequest?: (organizationId: string, message: string) => void
onRemove?: (organizationId: string) => void
showRemoveButton?: boolean
actionButtonText?: string
actionButtonColor?: string
requestSending?: boolean
}
export function OrganizationCard({
organization,
onSendRequest,
onRemove,
showRemoveButton = false,
actionButtonText = 'Добавить',
actionButtonColor = 'green',
requestSending = false,
}: OrganizationCardProps) {
const [requestMessage, setRequestMessage] = useState('')
const [isDialogOpen, setIsDialogOpen] = useState(false)
const formatDate = (dateString: string) => {
if (!dateString) return ''
try {
let date: Date
// Проверяем, является ли строка числом (Unix timestamp)
if (/^\d+$/.test(dateString)) {
// Если это Unix timestamp в миллисекундах
const timestamp = parseInt(dateString, 10)
date = new Date(timestamp)
} else {
// Обычная строка даты
date = new Date(dateString)
}
if (isNaN(date.getTime())) {
return 'Неверная дата'
}
return date.toLocaleDateString('ru-RU', {
year: 'numeric',
month: 'long',
day: 'numeric',
})
} catch {
return 'Ошибка даты'
}
}
const getTypeLabel = (type: string) => {
switch (type) {
case 'FULFILLMENT':
return 'Фулфилмент'
case 'SELLER':
return 'Селлер'
case 'LOGIST':
return 'Логистика'
case 'WHOLESALE':
return 'Поставщик'
default:
return type
}
}
const getTypeColor = (type: string) => {
switch (type) {
case 'FULFILLMENT':
return 'bg-blue-500/20 text-blue-300 border-blue-500/30'
case 'SELLER':
return 'bg-green-500/20 text-green-300 border-green-500/30'
case 'LOGIST':
return 'bg-orange-500/20 text-orange-300 border-orange-500/30'
case 'WHOLESALE':
return 'bg-purple-500/20 text-purple-300 border-purple-500/30'
default:
return 'bg-gray-500/20 text-gray-300 border-gray-500/30'
}
}
const getActionButtonColor = (color: string, isDisabled: boolean) => {
if (isDisabled) {
return 'bg-gray-500/20 text-gray-400 border-gray-500/30 cursor-not-allowed'
}
switch (color) {
case 'green':
return 'bg-green-500/20 hover:bg-green-500/30 text-green-300 border-green-500/30'
case 'orange':
return 'bg-orange-500/20 hover:bg-orange-500/30 text-orange-300 border-orange-500/30'
case 'yellow':
return 'bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-300 border-yellow-500/30'
case 'red':
return 'bg-red-500/20 hover:bg-red-500/30 text-red-300 border-red-500/30'
case 'blue':
return 'bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 border-blue-500/30'
default:
return 'bg-gray-500/20 hover:bg-gray-500/30 text-gray-300 border-gray-500/30'
}
}
const handleSendRequest = () => {
if (onSendRequest) {
onSendRequest(organization.id, requestMessage)
setRequestMessage('')
setIsDialogOpen(false)
}
}
const handleRemove = () => {
if (onRemove) {
onRemove(organization.id)
}
}
return (
<div className="glass-card p-4 w-full">
<div className="flex flex-col space-y-4">
<div className="flex items-start space-x-3">
<OrganizationAvatar organization={organization} size="md" />
<div className="flex-1 min-w-0">
<div className="flex flex-col space-y-2 mb-3">
<h4 className="text-white font-medium text-lg leading-tight">
{organization.name || organization.fullName}
</h4>
<div className="flex items-center space-x-3">
<Badge className={getTypeColor(organization.type)}>{getTypeLabel(organization.type)}</Badge>
{organization.isCurrentUser && (
<Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30">Это вы</Badge>
)}
{organization.isCounterparty && !organization.isCurrentUser && (
<Badge className="bg-green-500/20 text-green-300 border-green-500/30">Уже добавлен</Badge>
)}
</div>
</div>
<div className="space-y-2">
<p className="text-white/60 text-sm">ИНН: {organization.inn}</p>
{organization.address && (
<div className="flex items-center text-white/60 text-sm">
<MapPin className="h-4 w-4 mr-2 flex-shrink-0" />
<span className="truncate">{organization.address}</span>
</div>
)}
{organization.phones && organization.phones.length > 0 && (
<div className="flex items-center text-white/60 text-sm">
<Phone className="h-4 w-4 mr-2 flex-shrink-0" />
<span>{organization.phones[0].value}</span>
</div>
)}
{organization.emails && organization.emails.length > 0 && (
<div className="flex items-center text-white/60 text-sm">
<Mail className="h-4 w-4 mr-2 flex-shrink-0" />
<span className="truncate">{organization.emails[0].value}</span>
</div>
)}
<div className="flex items-center text-white/40 text-xs">
<Calendar className="h-4 w-4 mr-2 flex-shrink-0" />
<span>
{showRemoveButton ? 'Добавлен' : 'Зарегистрирован'} {formatDate(organization.createdAt)}
</span>
</div>
</div>
</div>
</div>
{showRemoveButton ? (
<Button
size="sm"
variant="outline"
onClick={handleRemove}
className="bg-red-500/20 hover:bg-red-500/30 text-red-300 border-red-500/30 cursor-pointer w-full"
>
<Trash2 className="h-4 w-4 mr-2" />
Удалить из контрагентов
</Button>
) : organization.isCurrentUser ? (
<Button
size="sm"
variant="outline"
disabled
className="bg-blue-500/10 text-blue-300 border-blue-500/30 w-full opacity-50"
>
<User className="h-4 w-4 mr-2" />
Ваша организация
</Button>
) : (
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
<DialogTrigger asChild>
<Button
size="sm"
disabled={
organization.isCounterparty || organization.hasOutgoingRequest || organization.hasIncomingRequest
}
className={`${getActionButtonColor(actionButtonColor, !!organization.isCounterparty || !!organization.hasOutgoingRequest || !!organization.hasIncomingRequest)} w-full cursor-pointer`}
>
<Plus className="h-4 w-4 mr-2" />
{organization.isCounterparty
? 'Уже добавлен'
: organization.hasOutgoingRequest
? 'Заявка отправлена'
: organization.hasIncomingRequest
? 'Уже подал заявку'
: actionButtonText}
</Button>
</DialogTrigger>
<DialogContent className="bg-gray-900/95 backdrop-blur border-white/10 text-white">
<DialogHeader>
<DialogTitle className="text-white">Отправить заявку в контрагенты</DialogTitle>
</DialogHeader>
<div className="space-y-4">
<div className="p-4 bg-white/5 rounded-lg border border-white/10">
<div className="flex items-center space-x-3">
<OrganizationAvatar organization={organization} size="sm" />
<div>
<h4 className="text-white font-medium">{organization.name || organization.fullName}</h4>
<p className="text-white/60 text-sm">ИНН: {organization.inn}</p>
</div>
</div>
</div>
<div>
<label className="block text-sm font-medium text-white mb-2">Сообщение (необязательно)</label>
<Input
placeholder="Добавьте комментарий к заявке..."
value={requestMessage}
onChange={(e) => setRequestMessage(e.target.value)}
className="glass-input text-white placeholder:text-white/40"
/>
</div>
<div className="flex space-x-3 pt-4">
<Button
onClick={() => setIsDialogOpen(false)}
variant="outline"
className="flex-1 bg-white/5 hover:bg-white/10 text-white border-white/20 cursor-pointer"
>
Отмена
</Button>
<Button
onClick={handleSendRequest}
disabled={requestSending}
className="flex-1 bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 border-blue-500/30 cursor-pointer"
>
{requestSending ? (
'Отправка...'
) : (
<>
<Send className="h-4 w-4 mr-2" />
Отправить
</>
)}
</Button>
</div>
</div>
</DialogContent>
</Dialog>
)}
</div>
</div>
)
}