Добавлены новые интерфейсы для поставок, маршрутов и поставщиков в компонент FulfillmentGoodsTab. Обновлены мок-данные для поставок с новой структурой, включая информацию о маршрутах и поставщиках. Реализованы функции для управления состоянием развертывания поставок, маршрутов и поставщиков. Улучшена логика отображения статусов маршрутов и поставщиков с использованием новых компонентов Badge.
This commit is contained in:
Veronika Smirnova
@ -29,6 +29,7 @@ import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Store,
|
||||
Building2,
|
||||
} from "lucide-react";
|
||||
|
||||
// Интерфейсы для данных
|
||||
@ -47,8 +48,66 @@ interface Organization {
|
||||
type: string;
|
||||
}
|
||||
|
||||
// Новый интерфейс для поставщика/оптовика
|
||||
interface Supplier {
|
||||
id: string;
|
||||
name: string;
|
||||
fullName?: string;
|
||||
inn: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
address: string;
|
||||
managerName: string;
|
||||
type: "WHOLESALE" | "SUPPLIER";
|
||||
products?: {
|
||||
id: string;
|
||||
name: string;
|
||||
quantity: number;
|
||||
price: number;
|
||||
totalValue: number;
|
||||
}[];
|
||||
totalValue: number;
|
||||
status: "active" | "inactive" | "pending";
|
||||
}
|
||||
|
||||
interface Route {
|
||||
id: string;
|
||||
routeName: string;
|
||||
fromAddress: string;
|
||||
toAddress: string;
|
||||
distance: number;
|
||||
estimatedTime: string;
|
||||
transportType: string;
|
||||
cost: number;
|
||||
status: "planned" | "in-transit" | "delivered" | "delayed";
|
||||
suppliers: Supplier[]; // Добавляем массив поставщиков
|
||||
}
|
||||
|
||||
interface Supply {
|
||||
id: string;
|
||||
supplyNumber: string;
|
||||
supplyDate: string;
|
||||
seller: {
|
||||
id: string;
|
||||
name: string;
|
||||
storeName: string;
|
||||
managerName: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
inn: string;
|
||||
};
|
||||
itemsQuantity: number;
|
||||
cargoPlaces: number;
|
||||
volume: number;
|
||||
responsibleEmployeeId: string;
|
||||
logisticsPartnerId: string;
|
||||
status: string;
|
||||
totalValue: number;
|
||||
routes: Route[];
|
||||
}
|
||||
|
||||
// Мок данные для поставок с новой структурой
|
||||
const mockFulfillmentSupplies = [
|
||||
const mockFulfillmentSupplies: Supply[] = [
|
||||
{
|
||||
id: "1",
|
||||
supplyNumber: "ФФ-2024-001",
|
||||
@ -69,6 +128,73 @@ const mockFulfillmentSupplies = [
|
||||
logisticsPartnerId: "log1",
|
||||
status: "planned",
|
||||
totalValue: 2500000,
|
||||
routes: [
|
||||
{
|
||||
id: "route1-1",
|
||||
routeName: "Москва → Подольск (Основной)",
|
||||
fromAddress: "Москва, ул. Складская, 15",
|
||||
toAddress: "Подольск, ул. Логистическая, 25",
|
||||
distance: 45,
|
||||
estimatedTime: "1ч 20мин",
|
||||
transportType: "Фура 20т",
|
||||
cost: 15000,
|
||||
status: "planned",
|
||||
suppliers: [
|
||||
{
|
||||
id: "sup1-1",
|
||||
name: "ООО 'ПромСтрой'",
|
||||
fullName: "ООО 'ПромСтрой' - Оптовый поставщик",
|
||||
inn: "7701234567890",
|
||||
phone: "+7 (495) 111-22-33",
|
||||
email: "info@prosmstroi.ru",
|
||||
address: "Москва, ул. Строительная, 10",
|
||||
managerName: "Иванов Иван",
|
||||
type: "WHOLESALE",
|
||||
totalValue: 1000000,
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "sup1-2",
|
||||
name: "ИП 'СтройМаг'",
|
||||
fullName: "ИП 'СтройМаг' - Оптовый поставщик",
|
||||
inn: "7709876543210",
|
||||
phone: "+7 (495) 999-88-77",
|
||||
email: "orders@stroymag.ru",
|
||||
address: "Москва, ул. Магистральная, 5",
|
||||
managerName: "Петров Петр",
|
||||
type: "SUPPLIER",
|
||||
totalValue: 500000,
|
||||
status: "inactive",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "route1-2",
|
||||
routeName: "Подольск → Тула (Резервный)",
|
||||
fromAddress: "Подольск, ул. Логистическая, 25",
|
||||
toAddress: "Тула, ул. Промышленная, 8",
|
||||
distance: 180,
|
||||
estimatedTime: "3ч 15мин",
|
||||
transportType: "Газель",
|
||||
cost: 8500,
|
||||
status: "planned",
|
||||
suppliers: [
|
||||
{
|
||||
id: "sup1-3",
|
||||
name: "ООО 'СтройТорг'",
|
||||
fullName: "ООО 'СтройТорг' - Оптовый поставщик",
|
||||
inn: "7701123456789",
|
||||
phone: "+7 (495) 222-33-44",
|
||||
email: "sales@stroitorg.ru",
|
||||
address: "Подольск, ул. Логистическая, 25",
|
||||
managerName: "Сидоров Сидор",
|
||||
type: "WHOLESALE",
|
||||
totalValue: 1500000,
|
||||
status: "active",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
@ -90,6 +216,34 @@ const mockFulfillmentSupplies = [
|
||||
logisticsPartnerId: "log2",
|
||||
status: "in-transit",
|
||||
totalValue: 3750000,
|
||||
routes: [
|
||||
{
|
||||
id: "route2-1",
|
||||
routeName: "СПб → Москва (Экспресс)",
|
||||
fromAddress: "Санкт-Петербург, пр. Обуховской Обороны, 120",
|
||||
toAddress: "Москва, МКАД 47км",
|
||||
distance: 635,
|
||||
estimatedTime: "8ч 45мин",
|
||||
transportType: "Фура 40т",
|
||||
cost: 45000,
|
||||
status: "in-transit",
|
||||
suppliers: [
|
||||
{
|
||||
id: "sup2-1",
|
||||
name: "ООО 'ЭлектроТорг'",
|
||||
fullName: "ООО 'ЭлектроТорг' - Оптовый поставщик",
|
||||
inn: "7701234567890",
|
||||
phone: "+7 (495) 333-44-55",
|
||||
email: "info@elektortorg.ru",
|
||||
address: "Санкт-Петербург, ул. Электронная, 10",
|
||||
managerName: "Иванов Иван",
|
||||
type: "WHOLESALE",
|
||||
totalValue: 2000000,
|
||||
status: "active",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
@ -111,6 +265,60 @@ const mockFulfillmentSupplies = [
|
||||
logisticsPartnerId: "log1",
|
||||
status: "delivered",
|
||||
totalValue: 2800000,
|
||||
routes: [
|
||||
{
|
||||
id: "route3-1",
|
||||
routeName: "Казань → Москва (Основной)",
|
||||
fromAddress: "Казань, ул. Портовая, 18",
|
||||
toAddress: "Москва, ул. Складская, 15",
|
||||
distance: 815,
|
||||
estimatedTime: "12ч 30мин",
|
||||
transportType: "Фура 20т",
|
||||
cost: 38000,
|
||||
status: "delivered",
|
||||
suppliers: [
|
||||
{
|
||||
id: "sup3-1",
|
||||
name: "ООО 'МеталлСтрой'",
|
||||
fullName: "ООО 'МеталлСтрой' - Оптовый поставщик",
|
||||
inn: "7701234567890",
|
||||
phone: "+7 (495) 444-55-66",
|
||||
email: "sales@metallstroi.ru",
|
||||
address: "Казань, ул. Портовая, 18",
|
||||
managerName: "Иванов Иван",
|
||||
type: "WHOLESALE",
|
||||
totalValue: 1800000,
|
||||
status: "active",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "route3-2",
|
||||
routeName: "Москва → Тверь (Доставка)",
|
||||
fromAddress: "Москва, ул. Складская, 15",
|
||||
toAddress: "Тверь, ул. Вагжанова, 7",
|
||||
distance: 170,
|
||||
estimatedTime: "2ч 45мин",
|
||||
transportType: "Газель",
|
||||
cost: 12000,
|
||||
status: "delivered",
|
||||
suppliers: [
|
||||
{
|
||||
id: "sup3-2",
|
||||
name: "ИП 'СтройМаг'",
|
||||
fullName: "ИП 'СтройМаг' - Оптовый поставщик",
|
||||
inn: "7709876543210",
|
||||
phone: "+7 (495) 999-88-77",
|
||||
email: "orders@stroymag.ru",
|
||||
address: "Москва, ул. Складская, 15",
|
||||
managerName: "Петров Петр",
|
||||
type: "SUPPLIER",
|
||||
totalValue: 1000000,
|
||||
status: "inactive",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -120,6 +328,13 @@ export function FulfillmentGoodsTab() {
|
||||
const [expandedSellers, setExpandedSellers] = useState<Set<string>>(
|
||||
new Set()
|
||||
);
|
||||
const [expandedSupplies, setExpandedSupplies] = useState<Set<string>>(
|
||||
new Set()
|
||||
);
|
||||
const [expandedRoutes, setExpandedRoutes] = useState<Set<string>>(new Set());
|
||||
const [expandedSuppliers, setExpandedSuppliers] = useState<Set<string>>(
|
||||
new Set()
|
||||
);
|
||||
|
||||
// Загружаем сотрудников для селектора ответственных
|
||||
const { data: employeesData, loading: employeesLoading } =
|
||||
@ -145,6 +360,36 @@ export function FulfillmentGoodsTab() {
|
||||
setExpandedSellers(newExpanded);
|
||||
};
|
||||
|
||||
const toggleSupplyExpansion = (supplyId: string) => {
|
||||
const newExpanded = new Set(expandedSupplies);
|
||||
if (newExpanded.has(supplyId)) {
|
||||
newExpanded.delete(supplyId);
|
||||
} else {
|
||||
newExpanded.add(supplyId);
|
||||
}
|
||||
setExpandedSupplies(newExpanded);
|
||||
};
|
||||
|
||||
const toggleRouteExpansion = (routeId: string) => {
|
||||
const newExpanded = new Set(expandedRoutes);
|
||||
if (newExpanded.has(routeId)) {
|
||||
newExpanded.delete(routeId);
|
||||
} else {
|
||||
newExpanded.add(routeId);
|
||||
}
|
||||
setExpandedRoutes(newExpanded);
|
||||
};
|
||||
|
||||
const toggleSupplierExpansion = (supplierId: string) => {
|
||||
const newExpanded = new Set(expandedSuppliers);
|
||||
if (newExpanded.has(supplierId)) {
|
||||
newExpanded.delete(supplierId);
|
||||
} else {
|
||||
newExpanded.add(supplierId);
|
||||
}
|
||||
setExpandedSuppliers(newExpanded);
|
||||
};
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat("ru-RU", {
|
||||
style: "currency",
|
||||
@ -191,6 +436,62 @@ export function FulfillmentGoodsTab() {
|
||||
);
|
||||
};
|
||||
|
||||
const getRouteStatusBadge = (status: string) => {
|
||||
const statusConfig = {
|
||||
planned: {
|
||||
color: "text-blue-300 border-blue-400/30 bg-blue-500/10",
|
||||
label: "Запланирован",
|
||||
},
|
||||
"in-transit": {
|
||||
color: "text-yellow-300 border-yellow-400/30 bg-yellow-500/10",
|
||||
label: "В пути",
|
||||
},
|
||||
delivered: {
|
||||
color: "text-green-300 border-green-400/30 bg-green-500/10",
|
||||
label: "Доставлен",
|
||||
},
|
||||
delayed: {
|
||||
color: "text-red-300 border-red-400/30 bg-red-500/10",
|
||||
label: "Задержка",
|
||||
},
|
||||
};
|
||||
|
||||
const config =
|
||||
statusConfig[status as keyof typeof statusConfig] || statusConfig.planned;
|
||||
|
||||
return (
|
||||
<Badge variant="outline" className={`${config.color} text-xs`}>
|
||||
{config.label}
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
const getSupplierStatusBadge = (status: string) => {
|
||||
const statusConfig = {
|
||||
active: {
|
||||
color: "text-green-300 border-green-400/30 bg-green-500/10",
|
||||
label: "Активен",
|
||||
},
|
||||
inactive: {
|
||||
color: "text-gray-300 border-gray-400/30 bg-gray-500/10",
|
||||
label: "Неактивен",
|
||||
},
|
||||
pending: {
|
||||
color: "text-yellow-300 border-yellow-400/30 bg-yellow-500/10",
|
||||
label: "Ожидает",
|
||||
},
|
||||
};
|
||||
|
||||
const config =
|
||||
statusConfig[status as keyof typeof statusConfig] || statusConfig.active;
|
||||
|
||||
return (
|
||||
<Badge variant="outline" className={`${config.color} text-xs`}>
|
||||
{config.label}
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
const getEmployeeName = (employeeId: string) => {
|
||||
const employee = employees.find((emp) => emp.id === employeeId);
|
||||
return employee
|
||||
@ -336,8 +637,9 @@ export function FulfillmentGoodsTab() {
|
||||
{/* Список поставок */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<div className="h-full overflow-y-auto space-y-3">
|
||||
{filteredSupplies.map((supply) => {
|
||||
{filteredSupplies.map((supply, index) => {
|
||||
const isSellerExpanded = expandedSellers.has(supply.seller.id);
|
||||
const isSupplyExpanded = expandedSupplies.has(supply.id);
|
||||
|
||||
return (
|
||||
<Card
|
||||
@ -404,18 +706,28 @@ export function FulfillmentGoodsTab() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => toggleSellerExpansion(supply.seller.id)}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isSellerExpanded ? (
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
) : (
|
||||
<ChevronRight className="h-3 w-3" />
|
||||
)}
|
||||
</Button>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-white/60 text-xs">
|
||||
Номер поставки
|
||||
</span>
|
||||
<span className="text-primary font-semibold text-sm">
|
||||
{supply.supplyNumber}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => toggleSellerExpansion(supply.seller.id)}
|
||||
className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{isSellerExpanded ? (
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
) : (
|
||||
<ChevronRight className="h-3 w-3" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Скрытая детальная информация о магазине */}
|
||||
@ -447,14 +759,21 @@ export function FulfillmentGoodsTab() {
|
||||
)}
|
||||
|
||||
{/* Единый блок со всеми параметрами в одной строке */}
|
||||
<div className="bg-white/5 rounded-lg p-4">
|
||||
<div
|
||||
className="bg-white/5 rounded-lg p-4 cursor-pointer hover:bg-white/10 transition-colors"
|
||||
onClick={() => toggleSupplyExpansion(supply.id)}
|
||||
>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-9 gap-4 items-center">
|
||||
{/* Номер поставки */}
|
||||
{/* Порядковый номер */}
|
||||
<div className="text-center">
|
||||
<p className="text-white/60 text-xs mb-1">Номер</p>
|
||||
<p className="text-white font-semibold text-sm">
|
||||
{supply.supplyNumber}
|
||||
</p>
|
||||
<p className="text-white/60 text-xs mb-1">№</p>
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="bg-blue-500/20 rounded-full w-8 h-8 flex items-center justify-center">
|
||||
<span className="text-blue-300 font-bold text-sm">
|
||||
{filteredSupplies.length - index}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Дата поставки */}
|
||||
@ -498,13 +817,16 @@ export function FulfillmentGoodsTab() {
|
||||
</div>
|
||||
|
||||
{/* Ответственный сотрудник */}
|
||||
<div className="col-span-1">
|
||||
<div
|
||||
className="text-center"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Ответственный
|
||||
</p>
|
||||
<Select defaultValue={supply.responsibleEmployeeId}>
|
||||
<SelectTrigger className="h-8 glass-input bg-white/10 border-white/20 text-white hover:bg-white/15 focus:bg-white/15 focus:ring-1 focus:ring-purple-400/50 text-xs">
|
||||
<SelectValue placeholder="Выберите" />
|
||||
<Select defaultValue="">
|
||||
<SelectTrigger className="h-6 w-full glass-input bg-white/10 border-white/20 text-white hover:bg-white/15 focus:bg-white/15 focus:ring-1 focus:ring-purple-400/50 text-xs px-2">
|
||||
<SelectValue placeholder="не выбрано" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-gray-900/95 backdrop-blur border-white/20 text-white">
|
||||
{employees.map((employee) => (
|
||||
@ -528,11 +850,14 @@ export function FulfillmentGoodsTab() {
|
||||
</div>
|
||||
|
||||
{/* Логистический партнер */}
|
||||
<div className="col-span-1">
|
||||
<div
|
||||
className="text-center"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<p className="text-white/60 text-xs mb-1">Логистика</p>
|
||||
<Select defaultValue={supply.logisticsPartnerId}>
|
||||
<SelectTrigger className="h-8 glass-input bg-white/10 border-white/20 text-white hover:bg-white/15 focus:bg-white/15 focus:ring-1 focus:ring-orange-400/50 text-xs">
|
||||
<SelectValue placeholder="Выберите" />
|
||||
<Select defaultValue="">
|
||||
<SelectTrigger className="h-6 w-full glass-input bg-white/10 border-white/20 text-white hover:bg-white/15 focus:bg-white/15 focus:ring-1 focus:ring-orange-400/50 text-xs px-2">
|
||||
<SelectValue placeholder="не выбрано" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-gray-900/95 backdrop-blur border-white/20 text-white">
|
||||
{logisticsPartners.map((partner: Organization) => (
|
||||
@ -565,6 +890,339 @@ export function FulfillmentGoodsTab() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Второй уровень - Маршруты */}
|
||||
{isSupplyExpanded &&
|
||||
supply.routes &&
|
||||
supply.routes.length > 0 && (
|
||||
<div className="mt-4 pt-4 border-t border-white/10">
|
||||
<div className="mb-3">
|
||||
<h4 className="text-white font-medium text-sm flex items-center gap-2">
|
||||
<Truck className="h-4 w-4 text-orange-400" />
|
||||
Маршруты ({supply.routes.length})
|
||||
</h4>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{supply.routes.map((route) => {
|
||||
const isRouteExpanded = expandedRoutes.has(
|
||||
route.id
|
||||
);
|
||||
return (
|
||||
<div
|
||||
key={route.id}
|
||||
className="bg-white/5 rounded-lg p-3 border border-white/10"
|
||||
>
|
||||
<div
|
||||
className="grid grid-cols-1 lg:grid-cols-8 gap-3 items-center cursor-pointer hover:bg-white/5 transition-colors rounded-lg p-1"
|
||||
onClick={() =>
|
||||
toggleRouteExpansion(route.id)
|
||||
}
|
||||
>
|
||||
{/* Название маршрута */}
|
||||
<div className="lg:col-span-2">
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Маршрут
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-white font-medium text-sm">
|
||||
{route.routeName}
|
||||
</p>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-4 w-4 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleRouteExpansion(route.id);
|
||||
}}
|
||||
>
|
||||
{isRouteExpanded ? (
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
) : (
|
||||
<ChevronRight className="h-3 w-3" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Откуда */}
|
||||
<div>
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Откуда
|
||||
</p>
|
||||
<p className="text-white text-xs">
|
||||
{route.fromAddress}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Куда */}
|
||||
<div>
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Куда
|
||||
</p>
|
||||
<p className="text-white text-xs">
|
||||
{route.toAddress}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Расстояние */}
|
||||
<div className="text-center">
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Расстояние
|
||||
</p>
|
||||
<p className="text-white font-semibold text-sm">
|
||||
{route.distance} км
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Время в пути */}
|
||||
<div className="text-center">
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Время
|
||||
</p>
|
||||
<p className="text-white font-semibold text-sm">
|
||||
{route.estimatedTime}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Транспорт */}
|
||||
<div className="text-center">
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Транспорт
|
||||
</p>
|
||||
<p className="text-white text-xs">
|
||||
{route.transportType}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Стоимость и статус */}
|
||||
<div className="text-center">
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Стоимость
|
||||
</p>
|
||||
<p className="text-green-400 font-semibold text-sm mb-1">
|
||||
{formatCurrency(route.cost)}
|
||||
</p>
|
||||
{getRouteStatusBadge(route.status)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Третий уровень - Поставщики/Оптовики */}
|
||||
{isRouteExpanded &&
|
||||
route.suppliers &&
|
||||
route.suppliers.length > 0 && (
|
||||
<div className="mt-4 pt-4 border-t border-white/10">
|
||||
<div className="mb-3">
|
||||
<h5 className="text-white font-medium text-sm flex items-center gap-2">
|
||||
<Building2 className="h-4 w-4 text-purple-400" />
|
||||
Поставщики/Оптовики (
|
||||
{route.suppliers.length})
|
||||
</h5>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{route.suppliers.map((supplier) => {
|
||||
const isSupplierExpanded =
|
||||
expandedSuppliers.has(
|
||||
supplier.id
|
||||
);
|
||||
return (
|
||||
<div
|
||||
key={supplier.id}
|
||||
className="bg-white/5 rounded-lg p-3 border border-white/5"
|
||||
>
|
||||
<div
|
||||
className="grid grid-cols-1 lg:grid-cols-7 gap-3 items-center cursor-pointer hover:bg-white/5 transition-colors rounded-lg p-1"
|
||||
onClick={() =>
|
||||
toggleSupplierExpansion(
|
||||
supplier.id
|
||||
)
|
||||
}
|
||||
>
|
||||
{/* Название поставщика */}
|
||||
<div className="lg:col-span-2">
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Поставщик
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-white font-medium text-sm">
|
||||
{supplier.name}
|
||||
</p>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-4 w-4 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleSupplierExpansion(
|
||||
supplier.id
|
||||
);
|
||||
}}
|
||||
>
|
||||
{isSupplierExpanded ? (
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
) : (
|
||||
<ChevronRight className="h-3 w-3" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ИНН */}
|
||||
<div>
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
ИНН
|
||||
</p>
|
||||
<p className="text-white text-xs font-mono">
|
||||
{supplier.inn}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Тип */}
|
||||
<div className="text-center">
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Тип
|
||||
</p>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs ${
|
||||
supplier.type ===
|
||||
"WHOLESALE"
|
||||
? "text-blue-300 border-blue-400/30 bg-blue-500/10"
|
||||
: "text-orange-300 border-orange-400/30 bg-orange-500/10"
|
||||
}`}
|
||||
>
|
||||
{supplier.type ===
|
||||
"WHOLESALE"
|
||||
? "Оптовик"
|
||||
: "Поставщик"}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Менеджер */}
|
||||
<div>
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Менеджер
|
||||
</p>
|
||||
<p className="text-white text-xs">
|
||||
{supplier.managerName}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Стоимость */}
|
||||
<div className="text-center">
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Стоимость
|
||||
</p>
|
||||
<p className="text-green-400 font-semibold text-sm">
|
||||
{formatCurrency(
|
||||
supplier.totalValue
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Статус */}
|
||||
<div className="text-center">
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Статус
|
||||
</p>
|
||||
{getSupplierStatusBadge(
|
||||
supplier.status
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Детальная информация о поставщике */}
|
||||
{isSupplierExpanded && (
|
||||
<div className="mt-3 pt-3 border-t border-white/5">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Полное название
|
||||
</p>
|
||||
<p className="text-white text-sm">
|
||||
{supplier.fullName ||
|
||||
supplier.name}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Телефон
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-white text-sm">
|
||||
{supplier.phone}
|
||||
</p>
|
||||
<div className="flex items-center gap-1">
|
||||
<a
|
||||
href={`https://t.me/${supplier.phone.replace(
|
||||
/[^\d]/g,
|
||||
""
|
||||
)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-1 bg-blue-500/20 rounded hover:bg-blue-500/30 transition-colors"
|
||||
title="Написать в Telegram"
|
||||
>
|
||||
<svg
|
||||
className="h-3 w-3 text-blue-400"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href={`https://wa.me/${supplier.phone.replace(
|
||||
/[^\d]/g,
|
||||
""
|
||||
)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-1 bg-green-500/20 rounded hover:bg-green-500/30 transition-colors"
|
||||
title="Написать в WhatsApp"
|
||||
>
|
||||
<svg
|
||||
className="h-3 w-3 text-green-400"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Email
|
||||
</p>
|
||||
<p className="text-white text-sm">
|
||||
{supplier.email}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<p className="text-white/60 text-xs mb-1">
|
||||
Адрес
|
||||
</p>
|
||||
<p className="text-white text-sm">
|
||||
{supplier.address}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Package, Wrench, RotateCcw, Package2, Building2 } from "lucide-react";
|
||||
import { Package, Wrench, RotateCcw, Building2 } from "lucide-react";
|
||||
|
||||
// Импорты компонентов подкатегорий
|
||||
import { FulfillmentGoodsTab } from "./fulfillment-goods-tab";
|
||||
@ -10,7 +10,6 @@ import { PvzReturnsTab } from "./pvz-returns-tab";
|
||||
import { SuppliesConsumablesTab } from "../../supplies/consumables-supplies/consumables-supplies-tab";
|
||||
|
||||
// Новые компоненты для детального просмотра (копия из supplies модуля)
|
||||
import { FulfillmentDetailedGoodsTab } from "./fulfillment-detailed-goods-tab";
|
||||
import { FulfillmentDetailedSuppliesTab } from "./fulfillment-detailed-supplies-tab";
|
||||
|
||||
export function FulfillmentSuppliesTab() {
|
||||
@ -23,34 +22,27 @@ export function FulfillmentSuppliesTab() {
|
||||
onValueChange={setActiveTab}
|
||||
className="h-full flex flex-col"
|
||||
>
|
||||
<TabsList className="grid w-full grid-cols-5 bg-white/10 backdrop-blur border-white/10 flex-shrink-0 h-10 mb-3 mx-4 mt-4">
|
||||
<TabsList className="grid w-full grid-cols-4 bg-white/10 backdrop-blur border-white/10 flex-shrink-0 h-10 mb-3 mx-4 mt-4">
|
||||
<TabsTrigger
|
||||
value="goods"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs"
|
||||
>
|
||||
<Package className="h-3 w-3" />
|
||||
Поставки
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="detailed-goods"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs"
|
||||
>
|
||||
<Package2 className="h-3 w-3" />
|
||||
Товары детально
|
||||
Товар
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="detailed-supplies"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs"
|
||||
>
|
||||
<Building2 className="h-3 w-3" />
|
||||
Расходники детально
|
||||
Расходники (название текущего кабинета)
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="consumables"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs"
|
||||
>
|
||||
<Wrench className="h-3 w-3" />
|
||||
Расходники С
|
||||
Расходники селлеров
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="returns"
|
||||
@ -65,12 +57,6 @@ export function FulfillmentSuppliesTab() {
|
||||
<FulfillmentGoodsTab />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="detailed-goods" className="flex-1 overflow-hidden">
|
||||
<div className="h-full p-4 overflow-y-auto">
|
||||
<FulfillmentDetailedGoodsTab />
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent
|
||||
value="detailed-supplies"
|
||||
className="flex-1 overflow-hidden"
|
||||
|
||||
Reference in New Issue
Block a user