{/* Сообщения о сохранении */}
{saveMessage && (
diff --git a/src/components/market/market-dashboard.tsx b/src/components/market/market-dashboard.tsx
index d2c894b..e7cd994 100644
--- a/src/components/market/market-dashboard.tsx
+++ b/src/components/market/market-dashboard.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Card } from '@/components/ui/card'
import { Sidebar } from '@/components/dashboard/sidebar'
+import { useSidebar } from '@/hooks/useSidebar'
import { MarketProducts } from './market-products'
import { MarketCategories } from './market-categories'
import { MarketRequests } from './market-requests'
@@ -12,6 +13,7 @@ import { MarketBusiness } from './market-business'
import { FavoritesDashboard } from '../favorites/favorites-dashboard'
export function MarketDashboard() {
+ const { getSidebarMargin } = useSidebar()
const [productsView, setProductsView] = useState<'categories' | 'products' | 'cart' | 'favorites'>('categories')
const [selectedCategory, setSelectedCategory] = useState<{ id: string; name: string } | null>(null)
@@ -38,7 +40,7 @@ export function MarketDashboard() {
return (
+
{/* Основной контент с табами */}
diff --git a/src/components/messenger/messenger-dashboard.tsx b/src/components/messenger/messenger-dashboard.tsx
index 47d655d..fa56874 100644
--- a/src/components/messenger/messenger-dashboard.tsx
+++ b/src/components/messenger/messenger-dashboard.tsx
@@ -1,22 +1,17 @@
"use client"
-import React, { useState, useRef, useCallback } from 'react'
+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 {
- MessageCircle,
- PanelLeftOpen,
- PanelLeftClose,
- Maximize2,
- Minimize2,
- Settings
-} from 'lucide-react'
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'
+import { MessageCircle } from 'lucide-react'
interface Organization {
id: string
@@ -31,14 +26,9 @@ interface Organization {
createdAt: string
}
-type LeftPanelSize = 'compact' | 'normal' | 'wide' | 'hidden'
-
export function MessengerDashboard() {
+ const { getSidebarMargin } = useSidebar()
const [selectedCounterparty, setSelectedCounterparty] = useState(null)
- const [leftPanelSize, setLeftPanelSize] = useState('normal')
- const [isResizing, setIsResizing] = useState(false)
- const [leftPanelWidth, setLeftPanelWidth] = useState(350)
- const resizeRef = useRef(null)
const { data: counterpartiesData, loading: counterpartiesLoading } = useQuery(GET_MY_COUNTERPARTIES)
const counterparties = counterpartiesData?.myCounterparties || []
@@ -49,85 +39,13 @@ export function MessengerDashboard() {
const selectedCounterpartyData = counterparties.find((cp: Organization) => cp.id === selectedCounterparty)
- // Получение ширины для разных размеров панели
- const getPanelWidth = (size: LeftPanelSize) => {
- switch (size) {
- case 'hidden': return 0
- case 'compact': return 280
- case 'normal': return 350
- case 'wide': return 450
- default: return 350
- }
- }
-
- const currentWidth = leftPanelSize === 'normal' ? leftPanelWidth : getPanelWidth(leftPanelSize)
-
- // Обработка изменения размера панели
- const handleMouseDown = useCallback((e: React.MouseEvent) => {
- setIsResizing(true)
- e.preventDefault()
- }, [])
-
- const handleMouseMove = useCallback((e: MouseEvent) => {
- if (!isResizing) return
-
- const newWidth = Math.min(Math.max(280, e.clientX - 56 - 24), 600) // 56px sidebar + 24px padding
- setLeftPanelWidth(newWidth)
- setLeftPanelSize('normal')
- }, [isResizing])
-
- const handleMouseUp = useCallback(() => {
- setIsResizing(false)
- }, [])
-
- // Добавляем глобальные обработчики для изменения размера
- React.useEffect(() => {
- if (isResizing) {
- document.addEventListener('mousemove', handleMouseMove)
- document.addEventListener('mouseup', handleMouseUp)
- document.body.style.cursor = 'col-resize'
- document.body.style.userSelect = 'none'
- } else {
- document.removeEventListener('mousemove', handleMouseMove)
- document.removeEventListener('mouseup', handleMouseUp)
- document.body.style.cursor = ''
- document.body.style.userSelect = ''
- }
-
- return () => {
- document.removeEventListener('mousemove', handleMouseMove)
- document.removeEventListener('mouseup', handleMouseUp)
- document.body.style.cursor = ''
- document.body.style.userSelect = ''
- }
- }, [isResizing, handleMouseMove, handleMouseUp])
-
- // Переключение размеров панели
- const togglePanelSize = () => {
- const sizes: LeftPanelSize[] = ['compact', 'normal', 'wide']
- const currentIndex = sizes.indexOf(leftPanelSize)
- const nextIndex = (currentIndex + 1) % sizes.length
- setLeftPanelSize(sizes[nextIndex])
- }
-
- const togglePanelVisibility = () => {
- setLeftPanelSize(leftPanelSize === 'hidden' ? 'normal' : 'hidden')
- }
-
// Если нет контрагентов, показываем заглушку
if (!counterpartiesLoading && counterparties.length === 0) {
return (
+
-
+
-
-
-
- Мессенджер
-Общение с контрагентами
-
- {/* Заголовок с управлением панелями */}
-
-
-
{/* Основной контент */}
-
-
- {/* Управление панелями */}
- Мессенджер
-Общение с контрагентами
-
-
-
- {leftPanelSize !== 'hidden' && (
-
- )}
-
-
-
+
+
{/* Левая панель - список контрагентов */}
- {leftPanelSize !== 'hidden' && (
- <>
-
-
+
+
+
+
- {/* Разделитель для изменения размера */}
- {leftPanelSize === 'normal' && (
-
+
+
+
{/* Правая панель - чат */}
-
- {selectedCounterparty && selectedCounterpartyData ? (
-
diff --git a/src/components/partners/partners-dashboard.tsx b/src/components/partners/partners-dashboard.tsx
index 59cd4eb..5321459 100644
--- a/src/components/partners/partners-dashboard.tsx
+++ b/src/components/partners/partners-dashboard.tsx
@@ -3,6 +3,7 @@
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Card } from '@/components/ui/card'
import { Sidebar } from '@/components/dashboard/sidebar'
+import { useSidebar } from '@/hooks/useSidebar'
import { MarketCounterparties } from '../market/market-counterparties'
import { MarketFulfillment } from '../market/market-fulfillment'
import { MarketSellers } from '../market/market-sellers'
@@ -10,10 +11,11 @@ import { MarketLogistics } from '../market/market-logistics'
import { MarketWholesale } from '../market/market-wholesale'
export function PartnersDashboard() {
+ const { getSidebarMargin } = useSidebar()
return (
-
-
-
- )}
-
- )}
+ {/* Разделитель для изменения размера */}
+
-
-
+ )}
+
+
+
-
+
+ {selectedCounterparty && selectedCounterpartyData ? (
+
- )}
-
-
+
-
+
-
+
+ Выберите контрагента
++ Начните беседу с одним из ваших контрагентов +
Выберите контрагента
-- Начните беседу с одним из ваших контрагентов -
- {leftPanelSize === 'hidden' && ( - - )}
{/* Основной контент с табами */}
diff --git a/src/components/services/services-dashboard.tsx b/src/components/services/services-dashboard.tsx
index 93c0dd8..cca22f7 100644
--- a/src/components/services/services-dashboard.tsx
+++ b/src/components/services/services-dashboard.tsx
@@ -2,15 +2,17 @@
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Sidebar } from '@/components/dashboard/sidebar'
+import { useSidebar } from '@/hooks/useSidebar'
import { ServicesTab } from './services-tab'
import { SuppliesTab } from './supplies-tab'
import { LogisticsTab } from './logistics-tab'
export function ServicesDashboard() {
+ const { getSidebarMargin } = useSidebar()
return (
+
{/* Основной контент с табами */}
diff --git a/src/components/warehouse/warehouse-dashboard.tsx b/src/components/warehouse/warehouse-dashboard.tsx
index bf4e311..bd2c85d 100644
--- a/src/components/warehouse/warehouse-dashboard.tsx
+++ b/src/components/warehouse/warehouse-dashboard.tsx
@@ -6,6 +6,7 @@ import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { Sidebar } from '@/components/dashboard/sidebar'
+import { useSidebar } from '@/hooks/useSidebar'
import { ProductForm } from './product-form'
import { ProductCard } from './product-card'
import { GET_MY_PRODUCTS } from '@/graphql/queries'
@@ -34,6 +35,7 @@ interface Product {
}
export function WarehouseDashboard() {
+ const { getSidebarMargin } = useSidebar()
const [isDialogOpen, setIsDialogOpen] = useState(false)
const [editingProduct, setEditingProduct] = useState(null)
const [searchQuery, setSearchQuery] = useState('')
@@ -104,7 +106,7 @@ export function WarehouseDashboard() {
return (
+
{/* Заголовок и поиск */}
@@ -114,14 +116,6 @@ export function WarehouseDashboard() {
-
-