118 lines
5.0 KiB
TypeScript
118 lines
5.0 KiB
TypeScript
"use client"
|
||
|
||
import React, { useState } from 'react'
|
||
import { useQuery } from '@apollo/client'
|
||
import { Card } from '@/components/ui/card'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Sidebar } from '@/components/dashboard/sidebar'
|
||
import { useSidebar } from '@/hooks/useSidebar'
|
||
import { MessengerConversations } from './messenger-conversations'
|
||
import { MessengerChat } from './messenger-chat'
|
||
import { MessengerEmptyState } from './messenger-empty-state'
|
||
import { GET_MY_COUNTERPARTIES } from '@/graphql/queries'
|
||
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'
|
||
import { MessageCircle } from 'lucide-react'
|
||
|
||
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 }>
|
||
users?: Array<{ id: string, avatar?: string }>
|
||
createdAt: string
|
||
}
|
||
|
||
export function MessengerDashboard() {
|
||
const { getSidebarMargin } = useSidebar()
|
||
const [selectedCounterparty, setSelectedCounterparty] = useState<string | null>(null)
|
||
|
||
const { data: counterpartiesData, loading: counterpartiesLoading } = useQuery(GET_MY_COUNTERPARTIES)
|
||
const counterparties = counterpartiesData?.myCounterparties || []
|
||
|
||
const handleSelectCounterparty = (counterpartyId: string) => {
|
||
setSelectedCounterparty(counterpartyId)
|
||
}
|
||
|
||
const selectedCounterpartyData = counterparties.find((cp: Organization) => cp.id === selectedCounterparty)
|
||
|
||
// Если нет контрагентов, показываем заглушку
|
||
if (!counterpartiesLoading && counterparties.length === 0) {
|
||
return (
|
||
<div className="h-screen flex overflow-hidden">
|
||
<Sidebar />
|
||
<main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
|
||
<div className="h-full w-full flex flex-col">
|
||
<div className="flex-1 overflow-hidden">
|
||
<Card className="glass-card h-full overflow-hidden p-6">
|
||
<MessengerEmptyState />
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="h-screen flex overflow-hidden">
|
||
<Sidebar />
|
||
<main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
|
||
<div className="h-full w-full flex flex-col">
|
||
{/* Основной контент */}
|
||
<div className="flex-1 overflow-hidden">
|
||
<PanelGroup direction="horizontal" className="h-full">
|
||
{/* Левая панель - список контрагентов */}
|
||
<Panel
|
||
defaultSize={30}
|
||
minSize={15}
|
||
maxSize={50}
|
||
className="pr-2"
|
||
>
|
||
<Card className="glass-card h-full overflow-hidden p-4">
|
||
<MessengerConversations
|
||
counterparties={counterparties}
|
||
loading={counterpartiesLoading}
|
||
selectedCounterparty={selectedCounterparty}
|
||
onSelectCounterparty={handleSelectCounterparty}
|
||
compact={false}
|
||
/>
|
||
</Card>
|
||
</Panel>
|
||
|
||
{/* Разделитель для изменения размера */}
|
||
<PanelResizeHandle className="w-2 hover:bg-white/10 transition-colors relative group cursor-col-resize">
|
||
<div className="absolute inset-y-0 left-1/2 transform -translate-x-1/2 w-1 bg-white/10 group-hover:bg-white/20 transition-colors" />
|
||
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1 h-8 bg-white/30 rounded-full opacity-0 group-hover:opacity-100 transition-opacity" />
|
||
</PanelResizeHandle>
|
||
|
||
{/* Правая панель - чат */}
|
||
<Panel defaultSize={70} className="pl-2">
|
||
<Card className="glass-card h-full overflow-hidden">
|
||
{selectedCounterparty && selectedCounterpartyData ? (
|
||
<MessengerChat counterparty={selectedCounterpartyData} />
|
||
) : (
|
||
<div className="flex items-center justify-center h-full">
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<MessageCircle className="h-8 w-8 text-white/40" />
|
||
</div>
|
||
<p className="text-white/60 text-lg mb-2">Выберите контрагента</p>
|
||
<p className="text-white/40 text-sm">
|
||
Начните беседу с одним из ваших контрагентов
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Card>
|
||
</Panel>
|
||
</PanelGroup>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
)
|
||
}
|