326 lines
14 KiB
TypeScript
326 lines
14 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from 'react'
|
||
import { useQuery, useMutation } from '@apollo/client'
|
||
import { Card } from '@/components/ui/card'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||
import {
|
||
Users,
|
||
Clock,
|
||
Send,
|
||
CheckCircle,
|
||
XCircle,
|
||
ArrowUpCircle,
|
||
ArrowDownCircle
|
||
} from 'lucide-react'
|
||
import { OrganizationCard } from './organization-card'
|
||
import { GET_MY_COUNTERPARTIES, GET_INCOMING_REQUESTS, GET_OUTGOING_REQUESTS } from '@/graphql/queries'
|
||
import { RESPOND_TO_COUNTERPARTY_REQUEST, CANCEL_COUNTERPARTY_REQUEST, REMOVE_COUNTERPARTY } from '@/graphql/mutations'
|
||
|
||
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 }>
|
||
}
|
||
|
||
interface CounterpartyRequest {
|
||
id: string
|
||
message?: string
|
||
status: 'PENDING' | 'ACCEPTED' | 'REJECTED' | 'CANCELLED'
|
||
createdAt: string
|
||
sender: Organization
|
||
receiver: Organization
|
||
}
|
||
|
||
export function MarketCounterparties() {
|
||
const { data: counterpartiesData, loading: counterpartiesLoading, refetch: refetchCounterparties } = useQuery(GET_MY_COUNTERPARTIES)
|
||
const { data: incomingData, loading: incomingLoading, refetch: refetchIncoming } = useQuery(GET_INCOMING_REQUESTS)
|
||
const { data: outgoingData, loading: outgoingLoading, refetch: refetchOutgoing } = useQuery(GET_OUTGOING_REQUESTS)
|
||
|
||
const [respondToRequest] = useMutation(RESPOND_TO_COUNTERPARTY_REQUEST, {
|
||
onCompleted: () => {
|
||
refetchIncoming()
|
||
refetchCounterparties()
|
||
}
|
||
})
|
||
|
||
const [cancelRequest] = useMutation(CANCEL_COUNTERPARTY_REQUEST, {
|
||
onCompleted: () => {
|
||
refetchOutgoing()
|
||
}
|
||
})
|
||
|
||
const [removeCounterparty] = useMutation(REMOVE_COUNTERPARTY, {
|
||
onCompleted: () => {
|
||
refetchCounterparties()
|
||
}
|
||
})
|
||
|
||
const handleAcceptRequest = async (requestId: string) => {
|
||
try {
|
||
await respondToRequest({
|
||
variables: { requestId, response: 'ACCEPTED' }
|
||
})
|
||
} catch (error) {
|
||
console.error('Ошибка при принятии заявки:', error)
|
||
}
|
||
}
|
||
|
||
const handleRejectRequest = async (requestId: string) => {
|
||
try {
|
||
await respondToRequest({
|
||
variables: { requestId, response: 'REJECTED' }
|
||
})
|
||
} catch (error) {
|
||
console.error('Ошибка при отклонении заявки:', error)
|
||
}
|
||
}
|
||
|
||
const handleCancelRequest = async (requestId: string) => {
|
||
try {
|
||
await cancelRequest({
|
||
variables: { requestId }
|
||
})
|
||
} catch (error) {
|
||
console.error('Ошибка при отмене заявки:', error)
|
||
}
|
||
}
|
||
|
||
const handleRemoveCounterparty = async (organizationId: string) => {
|
||
try {
|
||
await removeCounterparty({
|
||
variables: { organizationId }
|
||
})
|
||
} catch (error) {
|
||
console.error('Ошибка при удалении контрагента:', error)
|
||
}
|
||
}
|
||
|
||
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 (error) {
|
||
return 'Ошибка даты'
|
||
}
|
||
}
|
||
|
||
const counterparties = counterpartiesData?.myCounterparties || []
|
||
const incomingRequests = incomingData?.incomingRequests || []
|
||
const outgoingRequests = outgoingData?.outgoingRequests || []
|
||
|
||
return (
|
||
<div className="h-full flex flex-col">
|
||
<div className="flex items-center space-x-3 mb-6">
|
||
<Users className="h-6 w-6 text-blue-400" />
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-white">Мои контрагенты</h3>
|
||
<p className="text-white/60 text-sm">Управление контрагентами и заявками</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-hidden">
|
||
<Tabs defaultValue="counterparties" className="h-full flex flex-col">
|
||
<TabsList className="grid w-full grid-cols-3 bg-white/5 border-white/10">
|
||
<TabsTrigger value="counterparties" className="data-[state=active]:bg-blue-500/20 data-[state=active]:text-blue-300">
|
||
<Users className="h-4 w-4 mr-2" />
|
||
Контрагенты ({counterparties.length})
|
||
</TabsTrigger>
|
||
<TabsTrigger value="incoming" className="data-[state=active]:bg-green-500/20 data-[state=active]:text-green-300">
|
||
<ArrowDownCircle className="h-4 w-4 mr-2" />
|
||
Входящие ({incomingRequests.length})
|
||
</TabsTrigger>
|
||
<TabsTrigger value="outgoing" className="data-[state=active]:bg-orange-500/20 data-[state=active]:text-orange-300">
|
||
<ArrowUpCircle className="h-4 w-4 mr-2" />
|
||
Исходящие ({outgoingRequests.length})
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<TabsContent value="counterparties" className="flex-1 overflow-auto mt-4">
|
||
{counterpartiesLoading ? (
|
||
<div className="flex items-center justify-center p-8">
|
||
<div className="text-white/60">Загрузка...</div>
|
||
</div>
|
||
) : counterparties.length === 0 ? (
|
||
<div className="glass-card p-8">
|
||
<div className="text-center">
|
||
<Users className="h-12 w-12 text-white/20 mx-auto mb-4" />
|
||
<p className="text-white/60">У вас пока нет контрагентов</p>
|
||
<p className="text-white/40 text-sm mt-2">
|
||
Перейдите на другие вкладки, чтобы найти партнеров
|
||
</p>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{counterparties.map((organization: Organization) => (
|
||
<OrganizationCard
|
||
key={organization.id}
|
||
organization={organization}
|
||
onRemove={handleRemoveCounterparty}
|
||
showRemoveButton={true}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
</TabsContent>
|
||
|
||
<TabsContent value="incoming" className="flex-1 overflow-auto mt-4">
|
||
{incomingLoading ? (
|
||
<div className="flex items-center justify-center p-8">
|
||
<div className="text-white/60">Загрузка...</div>
|
||
</div>
|
||
) : incomingRequests.length === 0 ? (
|
||
<div className="glass-card p-8">
|
||
<div className="text-center">
|
||
<ArrowDownCircle className="h-12 w-12 text-white/20 mx-auto mb-4" />
|
||
<p className="text-white/60">Нет входящих заявок</p>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-4">
|
||
{incomingRequests.map((request: CounterpartyRequest) => (
|
||
<Card key={request.id} className="glass-card p-4">
|
||
<div className="flex items-start justify-between">
|
||
<div className="flex items-start space-x-3 flex-1">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold">
|
||
{(request.sender.name || request.sender.fullName || 'O').charAt(0).toUpperCase()}
|
||
</div>
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<h4 className="text-white font-medium">
|
||
{request.sender.name || request.sender.fullName}
|
||
</h4>
|
||
<p className="text-white/60 text-sm">ИНН: {request.sender.inn}</p>
|
||
{request.message && (
|
||
<p className="text-white/80 text-sm mt-2 italic">"{request.message}"</p>
|
||
)}
|
||
<div className="flex items-center space-x-2 mt-2">
|
||
<Clock className="h-3 w-3 text-white/40" />
|
||
<span className="text-white/40 text-xs">{formatDate(request.createdAt)}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex space-x-2 ml-4">
|
||
<Button
|
||
size="sm"
|
||
onClick={() => handleAcceptRequest(request.id)}
|
||
className="bg-green-500/20 hover:bg-green-500/30 text-green-300 border-green-500/30 cursor-pointer"
|
||
>
|
||
<CheckCircle className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => handleRejectRequest(request.id)}
|
||
className="bg-red-500/20 hover:bg-red-500/30 text-red-300 border-red-500/30 cursor-pointer"
|
||
>
|
||
<XCircle className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
)}
|
||
</TabsContent>
|
||
|
||
<TabsContent value="outgoing" className="flex-1 overflow-auto mt-4">
|
||
{outgoingLoading ? (
|
||
<div className="flex items-center justify-center p-8">
|
||
<div className="text-white/60">Загрузка...</div>
|
||
</div>
|
||
) : outgoingRequests.length === 0 ? (
|
||
<div className="glass-card p-8">
|
||
<div className="text-center">
|
||
<ArrowUpCircle className="h-12 w-12 text-white/20 mx-auto mb-4" />
|
||
<p className="text-white/60">Нет исходящих заявок</p>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-4">
|
||
{outgoingRequests.map((request: CounterpartyRequest) => (
|
||
<Card key={request.id} className="glass-card p-4">
|
||
<div className="flex items-start justify-between">
|
||
<div className="flex items-start space-x-3 flex-1">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold">
|
||
{(request.receiver.name || request.receiver.fullName || 'O').charAt(0).toUpperCase()}
|
||
</div>
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<h4 className="text-white font-medium">
|
||
{request.receiver.name || request.receiver.fullName}
|
||
</h4>
|
||
<p className="text-white/60 text-sm">ИНН: {request.receiver.inn}</p>
|
||
{request.message && (
|
||
<p className="text-white/80 text-sm mt-2 italic">"{request.message}"</p>
|
||
)}
|
||
<div className="flex items-center space-x-4 mt-2">
|
||
<div className="flex items-center space-x-2">
|
||
<Clock className="h-3 w-3 text-white/40" />
|
||
<span className="text-white/40 text-xs">{formatDate(request.createdAt)}</span>
|
||
</div>
|
||
<Badge className={
|
||
request.status === 'PENDING' ? 'bg-yellow-500/20 text-yellow-300 border-yellow-500/30' :
|
||
request.status === 'REJECTED' ? 'bg-red-500/20 text-red-300 border-red-500/30' :
|
||
'bg-gray-500/20 text-gray-300 border-gray-500/30'
|
||
}>
|
||
{request.status === 'PENDING' ? 'Ожидает' : request.status === 'REJECTED' ? 'Отклонено' : request.status}
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{request.status === 'PENDING' && (
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => handleCancelRequest(request.id)}
|
||
className="bg-red-500/20 hover:bg-red-500/30 text-red-300 border-red-500/30 cursor-pointer ml-4"
|
||
>
|
||
<XCircle className="h-4 w-4" />
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
)}
|
||
</TabsContent>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|