1148 lines
49 KiB
TypeScript
1148 lines
49 KiB
TypeScript
"use client";
|
||
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Separator } from "@/components/ui/separator";
|
||
import {
|
||
ShoppingCart,
|
||
Package,
|
||
Truck,
|
||
Warehouse,
|
||
CheckCircle,
|
||
Clock,
|
||
AlertCircle,
|
||
ArrowRight,
|
||
Users,
|
||
FileText,
|
||
MapPin,
|
||
DollarSign,
|
||
MessageSquare,
|
||
Building2,
|
||
Settings,
|
||
Handshake,
|
||
MessageCircle,
|
||
Store,
|
||
} from "lucide-react";
|
||
|
||
export function BusinessProcessesDemo() {
|
||
const processSteps = [
|
||
{
|
||
id: 1,
|
||
title: "Селлер заходит в маркет",
|
||
description: "Пользователь входит в систему и переходит в раздел маркета",
|
||
actor: "Селлер",
|
||
status: "completed",
|
||
icon: ShoppingCart,
|
||
location: "Кабинет селлера → Маркет",
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "Выбор категории",
|
||
description: "Селлер выбирает нужную категорию товаров",
|
||
actor: "Селлер",
|
||
status: "completed",
|
||
icon: Package,
|
||
location: "Маркет → Категории",
|
||
},
|
||
{
|
||
id: 3,
|
||
title: "Выбор товара",
|
||
description: "Выбор конкретного товара из каталога",
|
||
actor: "Селлер",
|
||
status: "completed",
|
||
icon: Package,
|
||
location: "Каталог товаров",
|
||
},
|
||
{
|
||
id: 4,
|
||
title: "Заказ количества",
|
||
description: "Указание необходимого количества товара",
|
||
actor: "Селлер",
|
||
status: "completed",
|
||
icon: FileText,
|
||
location: "Форма заказа",
|
||
},
|
||
{
|
||
id: 5,
|
||
title: "Выбор услуг фулфилмента",
|
||
description: "Выбор услуг фулфилмента и расходников для каждого товара",
|
||
actor: "Селлер",
|
||
status: "completed",
|
||
icon: Warehouse,
|
||
location: "Настройки заказа",
|
||
},
|
||
{
|
||
id: 6,
|
||
title: "Создание заявки",
|
||
description:
|
||
"Нажатие кнопки 'Создать заявку' и формирование заявки на поставку",
|
||
actor: "Селлер",
|
||
status: "in-progress",
|
||
icon: FileText,
|
||
location: "Форма заказа",
|
||
},
|
||
{
|
||
id: 7,
|
||
title: "Сохранение в кабинете селлера",
|
||
description:
|
||
"Заявка сохраняется в разделе 'Мои поставки' → 'Поставки на ФФ' → 'Товар'",
|
||
actor: "Система",
|
||
status: "pending",
|
||
icon: Package,
|
||
location: "Кабинет селлера → Мои поставки",
|
||
},
|
||
{
|
||
id: 8,
|
||
title: "Дублирование поставщику",
|
||
description: "Заявка дублируется в кабинет поставщика чей товар заказали",
|
||
actor: "Система",
|
||
status: "pending",
|
||
icon: Users,
|
||
location: "Кабинет поставщика → Заявки",
|
||
},
|
||
{
|
||
id: 9,
|
||
title: "Одобрение поставщиком",
|
||
description: "Поставщик должен одобрить заявку на поставку",
|
||
actor: "Поставщик",
|
||
status: "pending",
|
||
icon: CheckCircle,
|
||
location: "Кабинет поставщика → Заявки",
|
||
},
|
||
{
|
||
id: 10,
|
||
title: "Изменение статуса у селлера",
|
||
description:
|
||
"После одобрения меняется статус поставки в кабинете селлера",
|
||
actor: "Система",
|
||
status: "pending",
|
||
icon: AlertCircle,
|
||
location: "Кабинет селлера → Мои поставки",
|
||
},
|
||
{
|
||
id: 11,
|
||
title: "Появление в кабинете фулфилмента",
|
||
description:
|
||
"Поставка появляется в разделе 'Входящие поставки' → 'Поставки на фулфилмент' → 'Товар' → 'Новые'",
|
||
actor: "Система",
|
||
status: "pending",
|
||
icon: Warehouse,
|
||
location: "Кабинет фулфилмент → Входящие поставки",
|
||
},
|
||
{
|
||
id: 12,
|
||
title: "Назначение ответственного",
|
||
description:
|
||
"Менеджер выбирает ответственного, логистику и нажимает 'Приёмка'",
|
||
actor: "Менеджер фулфилмента",
|
||
status: "pending",
|
||
icon: Users,
|
||
location: "Кабинет фулфилмент → Управление",
|
||
},
|
||
{
|
||
id: 13,
|
||
title: "Перенос в приёмку",
|
||
description:
|
||
"Поставка переносится в подраздел 'Поставка на фулфилмент' → 'Товар' → 'Приёмка'",
|
||
actor: "Система",
|
||
status: "pending",
|
||
icon: Package,
|
||
location: "Кабинет фулфилмент → Приёмка",
|
||
},
|
||
{
|
||
id: 14,
|
||
title: "Появление в логистике",
|
||
description: "Заявка появляется в кабинете логистики в разделе 'Заявки'",
|
||
actor: "Система",
|
||
status: "pending",
|
||
icon: Truck,
|
||
location: "Кабинет логистика → Заявки",
|
||
},
|
||
{
|
||
id: 15,
|
||
title: "Подтверждение логистикой",
|
||
description:
|
||
"Менеджер логистики подтверждает заявку, статусы меняются во всех кабинетах",
|
||
actor: "Менеджер логистики",
|
||
status: "pending",
|
||
icon: CheckCircle,
|
||
location: "Кабинет логистика → Заявки",
|
||
},
|
||
{
|
||
id: 16,
|
||
title: "Доставка товара",
|
||
description: "Логистика доставляет товар на фулфилмент",
|
||
actor: "Логистика",
|
||
status: "pending",
|
||
icon: Truck,
|
||
location: "Физическая доставка",
|
||
},
|
||
{
|
||
id: 17,
|
||
title: "Ввод данных о хранении",
|
||
description:
|
||
"Менеджер фулфилмента вводит данные о месте хранения и нажимает 'Принято'",
|
||
actor: "Менеджер фулфилмента",
|
||
status: "pending",
|
||
icon: MapPin,
|
||
location: "Кабинет фулфилмент → Приёмка",
|
||
},
|
||
{
|
||
id: 18,
|
||
title: "Обновление статусов",
|
||
description: "Статусы меняются во всех кабинетах",
|
||
actor: "Система",
|
||
status: "pending",
|
||
icon: AlertCircle,
|
||
location: "Все кабинеты",
|
||
},
|
||
{
|
||
id: 19,
|
||
title: "Перенос в подготовку",
|
||
description: "Поставка переносится в раздел 'Подготовка'",
|
||
actor: "Система",
|
||
status: "pending",
|
||
icon: Package,
|
||
location: "Кабинет фулфилмент → Подготовка",
|
||
},
|
||
{
|
||
id: 20,
|
||
title: "Обновление места хранения",
|
||
description: "Вносятся данные о новом месте хранения товара-продукта",
|
||
actor: "Менеджер фулфилмента",
|
||
status: "pending",
|
||
icon: MapPin,
|
||
location: "Кабинет фулфилмент → Подготовка",
|
||
},
|
||
{
|
||
id: 21,
|
||
title: "Перенос в работу",
|
||
description: "Поставка переносится в подраздел 'В работе'",
|
||
actor: "Система",
|
||
status: "pending",
|
||
icon: Clock,
|
||
location: "Кабинет фулфилмент → В работе",
|
||
},
|
||
{
|
||
id: 22,
|
||
title: "Контроль качества",
|
||
description: "Вносятся данные о факте количества товара и о браке товара",
|
||
actor: "Менеджер фулфилмента",
|
||
status: "pending",
|
||
icon: CheckCircle,
|
||
location: "Кабинет фулфилмент → В работе",
|
||
},
|
||
{
|
||
id: 23,
|
||
title: "Завершение работ",
|
||
description:
|
||
"При нажатии 'Выполнено' поставка переносится в подраздел 'Выполнено'",
|
||
actor: "Менеджер фулфилмента",
|
||
status: "pending",
|
||
icon: CheckCircle,
|
||
location: "Кабинет фулфилмент → Выполнено",
|
||
},
|
||
{
|
||
id: 24,
|
||
title: "Обновление статуса у селлера",
|
||
description: "В кабинете селлера меняется статус поставки",
|
||
actor: "Система",
|
||
status: "pending",
|
||
icon: AlertCircle,
|
||
location: "Кабинет селлера → Мои поставки",
|
||
},
|
||
{
|
||
id: 25,
|
||
title: "Появление кнопки счёта",
|
||
description: "В поставке появляется кнопка 'Выставить счёт'",
|
||
actor: "Система",
|
||
status: "pending",
|
||
icon: DollarSign,
|
||
location: "Кабинет селлера → Мои поставки",
|
||
},
|
||
{
|
||
id: 26,
|
||
title: "Отправка счёта",
|
||
description: "В сообщения селлеру отправляется счёт на оплату",
|
||
actor: "Система",
|
||
status: "pending",
|
||
icon: MessageSquare,
|
||
location: "Мессенджер селлера",
|
||
},
|
||
];
|
||
|
||
const getStatusColor = (status: string) => {
|
||
switch (status) {
|
||
case "completed":
|
||
return "bg-green-500/20 text-green-400 border-green-500/30";
|
||
case "in-progress":
|
||
return "bg-blue-500/20 text-blue-400 border-blue-500/30";
|
||
case "pending":
|
||
return "bg-yellow-500/20 text-yellow-400 border-yellow-500/30";
|
||
default:
|
||
return "bg-gray-500/20 text-gray-400 border-gray-500/30";
|
||
}
|
||
};
|
||
|
||
const getStatusText = (status: string) => {
|
||
switch (status) {
|
||
case "completed":
|
||
return "Выполнено";
|
||
case "in-progress":
|
||
return "В процессе";
|
||
case "pending":
|
||
return "Ожидает";
|
||
default:
|
||
return "Неизвестно";
|
||
}
|
||
};
|
||
|
||
const actors = [
|
||
{ name: "Селлер", color: "bg-blue-500/20 text-blue-400", count: 5 },
|
||
{ name: "Поставщик", color: "bg-green-500/20 text-green-400", count: 1 },
|
||
{
|
||
name: "Менеджер фулфилмента",
|
||
color: "bg-purple-500/20 text-purple-400",
|
||
count: 5,
|
||
},
|
||
{
|
||
name: "Менеджер логистики",
|
||
color: "bg-orange-500/20 text-orange-400",
|
||
count: 1,
|
||
},
|
||
{ name: "Логистика", color: "bg-red-500/20 text-red-400", count: 1 },
|
||
{ name: "Система", color: "bg-gray-500/20 text-gray-400", count: 13 },
|
||
];
|
||
|
||
// Данные о кабинетах
|
||
const cabinets = [
|
||
{
|
||
id: "admin",
|
||
name: "Админ",
|
||
description: "Управление системой",
|
||
icon: Settings,
|
||
color: "bg-indigo-500/20 text-indigo-400 border-indigo-500/30",
|
||
features: ["UI Kit", "Пользователи", "Категории"],
|
||
role: "Администрирование системы",
|
||
},
|
||
{
|
||
id: "market",
|
||
name: "Маркет",
|
||
description: "Центральная площадка",
|
||
icon: Store,
|
||
color: "bg-emerald-500/20 text-emerald-400 border-emerald-500/30",
|
||
features: ["Поиск партнёров", "Каталог товаров", "Заявки"],
|
||
role: "Объединение всех участников",
|
||
},
|
||
{
|
||
id: "seller",
|
||
name: "Селлер",
|
||
description: "Продажи на маркетплейсах",
|
||
icon: ShoppingCart,
|
||
color: "bg-purple-500/20 text-purple-400 border-purple-500/30",
|
||
features: ["Мои поставки", "Склад WB", "Статистика"],
|
||
role: "Заказчик товаров и услуг",
|
||
},
|
||
{
|
||
id: "fulfillment",
|
||
name: "Фулфилмент",
|
||
description: "Склады и логистика",
|
||
icon: Warehouse,
|
||
color: "bg-red-500/20 text-red-400 border-red-500/30",
|
||
features: [
|
||
"Входящие поставки",
|
||
"Склад",
|
||
"Услуги",
|
||
"Сотрудники",
|
||
"Статистика",
|
||
],
|
||
role: "Обработка и хранение товаров",
|
||
},
|
||
{
|
||
id: "logistics",
|
||
name: "Логистика",
|
||
description: "Логистические решения",
|
||
icon: Truck,
|
||
color: "bg-orange-500/20 text-orange-400 border-orange-500/30",
|
||
features: ["Перевозки", "Заявки"],
|
||
role: "Доставка товаров",
|
||
},
|
||
{
|
||
id: "wholesale",
|
||
name: "Оптовик",
|
||
description: "Оптовые продажи",
|
||
icon: Building2,
|
||
color: "bg-cyan-500/20 text-cyan-400 border-cyan-500/30",
|
||
features: ["Отгрузки", "Склад"],
|
||
role: "Поставщик товаров",
|
||
},
|
||
];
|
||
|
||
const commonModules = [
|
||
{
|
||
name: "Мессенджер",
|
||
description: "Общение между участниками",
|
||
icon: MessageCircle,
|
||
features: ["Чаты", "Файлы", "Голосовые сообщения"],
|
||
connectedTo: ["Все кабинеты"],
|
||
},
|
||
{
|
||
name: "Партнёры",
|
||
description: "Управление контрагентами",
|
||
icon: Handshake,
|
||
features: ["Заявки", "Партнёрская сеть"],
|
||
connectedTo: ["Все кабинеты кроме Админа"],
|
||
},
|
||
{
|
||
name: "Настройки",
|
||
description: "Профиль организации",
|
||
icon: Settings,
|
||
features: ["API ключи", "Данные компании"],
|
||
connectedTo: ["Все кабинеты кроме Админа"],
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div className="space-y-8">
|
||
{/* Заголовок */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white flex items-center gap-2">
|
||
<Package className="h-6 w-6" />
|
||
Бизнес-процессы
|
||
</CardTitle>
|
||
<p className="text-white/70">
|
||
Схема всего проекта по кабинетам со связями между ними и детальная
|
||
визуализация бизнес-процесса поставки товаров
|
||
</p>
|
||
</CardHeader>
|
||
</Card>
|
||
|
||
{/* Общая схема проекта */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white text-xl">
|
||
🏗️ Схема всего проекта по кабинетам
|
||
</CardTitle>
|
||
<p className="text-white/70">
|
||
Полная архитектура системы с типами кабинетов и их взаимосвязями
|
||
</p>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{/* Mermaid диаграмма */}
|
||
<div className="mb-8 bg-white/5 rounded-lg p-4 border border-white/10">
|
||
<div className="text-center mb-4">
|
||
<h3 className="text-white font-medium mb-2">
|
||
Архитектурная схема проекта
|
||
</h3>
|
||
<p className="text-white/60 text-sm">
|
||
Кабинеты, модули и связи между ними
|
||
</p>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-lg p-6 min-h-[500px] overflow-auto">
|
||
<div className="mermaid text-sm">
|
||
{`graph TB
|
||
%% Основные кабинеты
|
||
A["🏢 Админ<br/>Управление системой<br/>UI Kit, Пользователи, Категории"] --> B["🏪 Маркет<br/>Центральная площадка<br/>Поиск партнёров"]
|
||
|
||
%% Типы кабинетов
|
||
C["🛒 Селлер<br/>Продажи на маркетплейсах<br/>• Мои поставки<br/>• Склад WB<br/>• Статистика"]
|
||
|
||
D["📦 Фулфилмент<br/>Склады и логистика<br/>• Входящие поставки<br/>• Склад<br/>• Услуги<br/>• Сотрудники<br/>• Статистика"]
|
||
|
||
E["🚛 Логистика<br/>Логистические решения<br/>• Перевозки<br/>• Заявки"]
|
||
|
||
F["🏭 Оптовик<br/>Оптовые продажи<br/>• Отгрузки<br/>• Склад"]
|
||
|
||
%% Общие модули
|
||
G["💬 Мессенджер<br/>Общение между участниками<br/>• Чаты<br/>• Файлы<br/>• Голосовые"]
|
||
|
||
H["🤝 Партнёры<br/>Управление контрагентами<br/>• Заявки<br/>• Партнёрская сеть"]
|
||
|
||
I["⚙️ Настройки<br/>Профиль организации<br/>• API ключи<br/>• Данные компании"]
|
||
|
||
%% Связи между кабинетами
|
||
B --> C
|
||
B --> D
|
||
B --> E
|
||
B --> F
|
||
|
||
%% Бизнес-процессы
|
||
C -->|"Создаёт заказ"| D
|
||
C -->|"Заказывает товар"| F
|
||
F -->|"Одобряет заявку"| D
|
||
D -->|"Запрос логистики"| E
|
||
E -->|"Доставка"| D
|
||
D -->|"Готовый товар"| C
|
||
|
||
%% Коммуникации
|
||
C --> G
|
||
D --> G
|
||
E --> G
|
||
F --> G
|
||
|
||
%% Партнёрство
|
||
C --> H
|
||
D --> H
|
||
E --> H
|
||
F --> H
|
||
|
||
%% Настройки доступны всем
|
||
C --> I
|
||
D --> I
|
||
E --> I
|
||
F --> I
|
||
|
||
%% Стили для разных типов кабинетов
|
||
classDef admin fill:#4f46e5,stroke:#4338ca,stroke-width:3px,color:#fff
|
||
classDef market fill:#059669,stroke:#047857,stroke-width:3px,color:#fff
|
||
classDef seller fill:#7c3aed,stroke:#6d28d9,stroke-width:3px,color:#fff
|
||
classDef fulfillment fill:#dc2626,stroke:#b91c1c,stroke-width:3px,color:#fff
|
||
classDef logistics fill:#ea580c,stroke:#c2410c,stroke-width:3px,color:#fff
|
||
classDef wholesale fill:#0891b2,stroke:#0e7490,stroke-width:3px,color:#fff
|
||
classDef common fill:#374151,stroke:#1f2937,stroke-width:2px,color:#fff
|
||
|
||
class A admin
|
||
class B market
|
||
class C seller
|
||
class D fulfillment
|
||
class E logistics
|
||
class F wholesale
|
||
class G,H,I common`}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Описание кабинетов */}
|
||
<div className="space-y-6">
|
||
<h3 className="text-white text-lg font-medium">Типы кабинетов</h3>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{cabinets.map((cabinet) => {
|
||
const IconComponent = cabinet.icon;
|
||
return (
|
||
<div
|
||
key={cabinet.id}
|
||
className="p-4 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 transition-all duration-200"
|
||
>
|
||
<div className="flex items-center gap-3 mb-3">
|
||
<div className="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center">
|
||
<IconComponent className="h-5 w-5 text-white" />
|
||
</div>
|
||
<div>
|
||
<h4 className="text-white font-medium">
|
||
{cabinet.name}
|
||
</h4>
|
||
<p className="text-white/60 text-xs">
|
||
{cabinet.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="text-white/70 text-sm mb-3">{cabinet.role}</p>
|
||
|
||
<div className="space-y-2">
|
||
<p className="text-white/50 text-xs font-medium">
|
||
Функции:
|
||
</p>
|
||
<div className="flex flex-wrap gap-1">
|
||
{cabinet.features.map((feature, index) => (
|
||
<Badge
|
||
key={index}
|
||
className={`${cabinet.color} border text-xs px-2 py-1`}
|
||
>
|
||
{feature}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Общие модули */}
|
||
<div className="space-y-6 mt-8">
|
||
<h3 className="text-white text-lg font-medium">Общие модули</h3>
|
||
|
||
<div className="grid md:grid-cols-3 gap-4">
|
||
{commonModules.map((module, index) => {
|
||
const IconComponent = module.icon;
|
||
return (
|
||
<div
|
||
key={index}
|
||
className="p-4 rounded-lg bg-gray-500/10 border border-gray-500/20 hover:bg-gray-500/20 transition-all duration-200"
|
||
>
|
||
<div className="flex items-center gap-3 mb-3">
|
||
<div className="w-10 h-10 rounded-lg bg-gray-500/20 flex items-center justify-center">
|
||
<IconComponent className="h-5 w-5 text-gray-300" />
|
||
</div>
|
||
<div>
|
||
<h4 className="text-white font-medium">
|
||
{module.name}
|
||
</h4>
|
||
<p className="text-white/60 text-xs">
|
||
{module.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<p className="text-white/50 text-xs font-medium">
|
||
Функции:
|
||
</p>
|
||
<div className="flex flex-wrap gap-1 mb-2">
|
||
{module.features.map((feature, featureIndex) => (
|
||
<Badge
|
||
key={featureIndex}
|
||
className="bg-gray-500/20 text-gray-300 border-gray-500/30 border text-xs px-2 py-1"
|
||
>
|
||
{feature}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
<p className="text-white/40 text-xs">
|
||
<span className="font-medium">Доступ:</span>{" "}
|
||
{module.connectedTo.join(", ")}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Ключевые связи */}
|
||
<div className="space-y-4 mt-8">
|
||
<h3 className="text-white text-lg font-medium">
|
||
Ключевые бизнес-связи
|
||
</h3>
|
||
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
<div className="p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
|
||
<h4 className="text-blue-400 font-medium mb-2 flex items-center gap-2">
|
||
<ArrowRight className="h-4 w-4" />
|
||
Процесс заказа
|
||
</h4>
|
||
<p className="text-white/70 text-sm">
|
||
Селлер → Маркет → Оптовик → Фулфилмент → Логистика
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-4 rounded-lg bg-green-500/10 border border-green-500/20">
|
||
<h4 className="text-green-400 font-medium mb-2 flex items-center gap-2">
|
||
<MessageCircle className="h-4 w-4" />
|
||
Коммуникации
|
||
</h4>
|
||
<p className="text-white/70 text-sm">
|
||
Все кабинеты связаны через Мессенджер для обмена информацией
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-4 rounded-lg bg-purple-500/10 border border-purple-500/20">
|
||
<h4 className="text-purple-400 font-medium mb-2 flex items-center gap-2">
|
||
<Handshake className="h-4 w-4" />
|
||
Партнёрство
|
||
</h4>
|
||
<p className="text-white/70 text-sm">
|
||
Система заявок и управления контрагентами между всеми
|
||
участниками
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-4 rounded-lg bg-orange-500/10 border border-orange-500/20">
|
||
<h4 className="text-orange-400 font-medium mb-2 flex items-center gap-2">
|
||
<Settings className="h-4 w-4" />
|
||
Администрирование
|
||
</h4>
|
||
<p className="text-white/70 text-sm">
|
||
Админ-панель для управления пользователями, категориями и UI
|
||
Kit
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Упрощенная схема потоков данных */}
|
||
<div className="space-y-4 mt-8">
|
||
<h3 className="text-white text-lg font-medium">
|
||
Потоки данных между кабинетами
|
||
</h3>
|
||
|
||
<div className="bg-white/5 rounded-lg p-6 border border-white/10">
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
{/* Основной поток заказа */}
|
||
<div className="space-y-4">
|
||
<h4 className="text-blue-400 font-medium text-center mb-4">
|
||
📋 Основной поток заказа
|
||
</h4>
|
||
<div className="space-y-3">
|
||
<div className="flex items-center gap-3 p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
|
||
<div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-xs font-bold text-blue-400">
|
||
1
|
||
</div>
|
||
<div>
|
||
<p className="text-white text-sm font-medium">
|
||
Селлер создаёт заказ
|
||
</p>
|
||
<p className="text-white/60 text-xs">
|
||
Через маркет выбирает товары
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-center">
|
||
<ArrowRight className="h-4 w-4 text-white/30 rotate-90" />
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3 p-3 rounded-lg bg-cyan-500/10 border border-cyan-500/20">
|
||
<div className="w-8 h-8 rounded-full bg-cyan-500/20 flex items-center justify-center text-xs font-bold text-cyan-400">
|
||
2
|
||
</div>
|
||
<div>
|
||
<p className="text-white text-sm font-medium">
|
||
Оптовик одобряет
|
||
</p>
|
||
<p className="text-white/60 text-xs">
|
||
Подтверждает наличие товара
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-center">
|
||
<ArrowRight className="h-4 w-4 text-white/30 rotate-90" />
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3 p-3 rounded-lg bg-red-500/10 border border-red-500/20">
|
||
<div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center text-xs font-bold text-red-400">
|
||
3
|
||
</div>
|
||
<div>
|
||
<p className="text-white text-sm font-medium">
|
||
Фулфилмент принимает
|
||
</p>
|
||
<p className="text-white/60 text-xs">
|
||
Готовится к приёмке товара
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-center">
|
||
<ArrowRight className="h-4 w-4 text-white/30 rotate-90" />
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3 p-3 rounded-lg bg-orange-500/10 border border-orange-500/20">
|
||
<div className="w-8 h-8 rounded-full bg-orange-500/20 flex items-center justify-center text-xs font-bold text-orange-400">
|
||
4
|
||
</div>
|
||
<div>
|
||
<p className="text-white text-sm font-medium">
|
||
Логистика доставляет
|
||
</p>
|
||
<p className="text-white/60 text-xs">
|
||
Транспортирует товар
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Коммуникационный поток */}
|
||
<div className="space-y-4">
|
||
<h4 className="text-green-400 font-medium text-center mb-4">
|
||
💬 Коммуникации
|
||
</h4>
|
||
<div className="space-y-3">
|
||
<div className="p-4 rounded-lg bg-gray-500/10 border border-gray-500/20 text-center">
|
||
<MessageCircle className="h-8 w-8 text-green-400 mx-auto mb-2" />
|
||
<p className="text-white text-sm font-medium mb-2">
|
||
Мессенджер
|
||
</p>
|
||
<p className="text-white/60 text-xs mb-3">
|
||
Центр всех коммуникаций
|
||
</p>
|
||
|
||
<div className="space-y-2">
|
||
<div className="flex items-center justify-between text-xs">
|
||
<span className="text-blue-400">Селлер</span>
|
||
<ArrowRight className="h-3 w-3 text-white/30" />
|
||
<span className="text-green-400">Мессенджер</span>
|
||
</div>
|
||
<div className="flex items-center justify-between text-xs">
|
||
<span className="text-red-400">Фулфилмент</span>
|
||
<ArrowRight className="h-3 w-3 text-white/30" />
|
||
<span className="text-green-400">Мессенджер</span>
|
||
</div>
|
||
<div className="flex items-center justify-between text-xs">
|
||
<span className="text-orange-400">Логистика</span>
|
||
<ArrowRight className="h-3 w-3 text-white/30" />
|
||
<span className="text-green-400">Мессенджер</span>
|
||
</div>
|
||
<div className="flex items-center justify-between text-xs">
|
||
<span className="text-cyan-400">Оптовик</span>
|
||
<ArrowRight className="h-3 w-3 text-white/30" />
|
||
<span className="text-green-400">Мессенджер</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Управленческий поток */}
|
||
<div className="space-y-4">
|
||
<h4 className="text-purple-400 font-medium text-center mb-4">
|
||
🤝 Партнёрство
|
||
</h4>
|
||
<div className="space-y-3">
|
||
<div className="p-4 rounded-lg bg-gray-500/10 border border-gray-500/20 text-center">
|
||
<Handshake className="h-8 w-8 text-purple-400 mx-auto mb-2" />
|
||
<p className="text-white text-sm font-medium mb-2">
|
||
Система партнёрства
|
||
</p>
|
||
<p className="text-white/60 text-xs mb-3">
|
||
Управление контрагентами
|
||
</p>
|
||
|
||
<div className="space-y-2 text-xs">
|
||
<div className="p-2 rounded bg-purple-500/10 border border-purple-500/20">
|
||
<p className="text-purple-400 font-medium">
|
||
Заявки на партнёрство
|
||
</p>
|
||
<p className="text-white/60">
|
||
Отправка и получение заявок
|
||
</p>
|
||
</div>
|
||
<div className="p-2 rounded bg-purple-500/10 border border-purple-500/20">
|
||
<p className="text-purple-400 font-medium">
|
||
Управление контрагентами
|
||
</p>
|
||
<p className="text-white/60">
|
||
Ведение базы партнёров
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-4 rounded-lg bg-gray-500/10 border border-gray-500/20 text-center">
|
||
<Settings className="h-8 w-8 text-orange-400 mx-auto mb-2" />
|
||
<p className="text-white text-sm font-medium mb-2">
|
||
Настройки
|
||
</p>
|
||
<p className="text-white/60 text-xs">
|
||
Профиль и конфигурация
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Статистика участников */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white text-lg">
|
||
Участники процесса
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||
{actors.map((actor) => (
|
||
<div key={actor.name} className="text-center">
|
||
<Badge
|
||
className={`${actor.color} border px-3 py-2 text-xs font-medium`}
|
||
>
|
||
{actor.name}
|
||
</Badge>
|
||
<p className="text-white/50 text-xs mt-1">
|
||
{actor.count} шагов
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Визуализация процесса */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white text-lg">
|
||
Схема бизнес-процесса
|
||
</CardTitle>
|
||
<p className="text-white/70 text-sm">
|
||
Полный цикл поставки товара от заказа до выставления счёта
|
||
</p>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
{processSteps.map((step, index) => {
|
||
const IconComponent = step.icon;
|
||
const isLast = index === processSteps.length - 1;
|
||
|
||
return (
|
||
<div key={step.id} className="relative">
|
||
<div className="flex items-start gap-4 p-4 rounded-lg bg-white/5 backdrop-blur border border-white/10 hover:bg-white/10 transition-all duration-200">
|
||
{/* Иконка и номер */}
|
||
<div className="flex-shrink-0 relative">
|
||
<div className="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center border border-white/20">
|
||
<IconComponent className="h-5 w-5 text-white" />
|
||
</div>
|
||
<div className="absolute -top-1 -right-1 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-xs font-bold text-white">
|
||
{step.id}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Контент */}
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-start justify-between gap-4 mb-2">
|
||
<h4 className="text-white font-medium text-sm leading-tight">
|
||
{step.title}
|
||
</h4>
|
||
<Badge
|
||
className={`${getStatusColor(
|
||
step.status
|
||
)} border text-xs flex-shrink-0`}
|
||
>
|
||
{getStatusText(step.status)}
|
||
</Badge>
|
||
</div>
|
||
|
||
<p className="text-white/70 text-xs mb-3 leading-relaxed">
|
||
{step.description}
|
||
</p>
|
||
|
||
<div className="flex items-center gap-4 text-xs">
|
||
<div className="flex items-center gap-1">
|
||
<Users className="h-3 w-3 text-white/50" />
|
||
<span className="text-white/50">{step.actor}</span>
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
<MapPin className="h-3 w-3 text-white/50" />
|
||
<span className="text-white/50">{step.location}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Стрелка к следующему шагу */}
|
||
{!isLast && (
|
||
<div className="flex justify-center py-2">
|
||
<ArrowRight className="h-4 w-4 text-white/30" />
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Легенда статусов */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white text-lg">Легенда статусов</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="flex flex-wrap gap-4">
|
||
<div className="flex items-center gap-2">
|
||
<Badge className="bg-green-500/20 text-green-400 border-green-500/30 border">
|
||
Выполнено
|
||
</Badge>
|
||
<span className="text-white/70 text-sm">Этап завершён</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30 border">
|
||
В процессе
|
||
</Badge>
|
||
<span className="text-white/70 text-sm">Выполняется сейчас</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Badge className="bg-yellow-500/20 text-yellow-400 border-yellow-500/30 border">
|
||
Ожидает
|
||
</Badge>
|
||
<span className="text-white/70 text-sm">Ожидает выполнения</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Диаграмма процесса */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white text-lg">
|
||
Диаграмма бизнес-процесса
|
||
</CardTitle>
|
||
<p className="text-white/70 text-sm">
|
||
Схематическое представление всех этапов процесса поставки
|
||
</p>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||
<p className="text-white/70 text-sm mb-4 text-center">
|
||
Полная схема процесса от создания заказа до получения счёта
|
||
</p>
|
||
<div className="text-xs text-white/50 space-y-1">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-3 h-3 rounded bg-blue-500"></div>
|
||
<span>Селлер - создание и отслеживание заказа</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-3 h-3 rounded bg-green-500"></div>
|
||
<span>Поставщик - одобрение заявки</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-3 h-3 rounded bg-purple-500"></div>
|
||
<span>Фулфилмент - обработка и хранение</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-3 h-3 rounded bg-orange-500"></div>
|
||
<span>Логистика - доставка товара</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-3 h-3 rounded bg-gray-500"></div>
|
||
<span>Система - автоматические операции</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Схема взаимодействия систем */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white text-lg">
|
||
Схема взаимодействия систем
|
||
</CardTitle>
|
||
<p className="text-white/70 text-sm">
|
||
Упрощённая схема движения данных между кабинетами
|
||
</p>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="bg-white/5 rounded-lg p-6 border border-white/10">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{/* Селлер */}
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 mx-auto mb-3 rounded-full bg-blue-500/20 flex items-center justify-center border-2 border-blue-500/30">
|
||
<ShoppingCart className="h-8 w-8 text-blue-400" />
|
||
</div>
|
||
<h4 className="text-blue-400 font-medium mb-2">Селлер</h4>
|
||
<div className="text-xs text-white/70 space-y-1">
|
||
<div>• Создаёт заказ</div>
|
||
<div>• Отслеживает статус</div>
|
||
<div>• Получает счёт</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Поставщик */}
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 mx-auto mb-3 rounded-full bg-green-500/20 flex items-center justify-center border-2 border-green-500/30">
|
||
<Users className="h-8 w-8 text-green-400" />
|
||
</div>
|
||
<h4 className="text-green-400 font-medium mb-2">Поставщик</h4>
|
||
<div className="text-xs text-white/70 space-y-1">
|
||
<div>• Получает заявку</div>
|
||
<div>• Одобряет поставку</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Фулфилмент */}
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 mx-auto mb-3 rounded-full bg-purple-500/20 flex items-center justify-center border-2 border-purple-500/30">
|
||
<Warehouse className="h-8 w-8 text-purple-400" />
|
||
</div>
|
||
<h4 className="text-purple-400 font-medium mb-2">Фулфилмент</h4>
|
||
<div className="text-xs text-white/70 space-y-1">
|
||
<div>• Принимает товар</div>
|
||
<div>• Контролирует качество</div>
|
||
<div>• Управляет складом</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Логистика */}
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 mx-auto mb-3 rounded-full bg-orange-500/20 flex items-center justify-center border-2 border-orange-500/30">
|
||
<Truck className="h-8 w-8 text-orange-400" />
|
||
</div>
|
||
<h4 className="text-orange-400 font-medium mb-2">Логистика</h4>
|
||
<div className="text-xs text-white/70 space-y-1">
|
||
<div>• Подтверждает заявку</div>
|
||
<div>• Доставляет товар</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Стрелки взаимодействия */}
|
||
<div className="mt-8 flex justify-center">
|
||
<div className="flex items-center gap-2 text-white/50 text-xs">
|
||
<ArrowRight className="h-4 w-4" />
|
||
<span>Передача данных</span>
|
||
<ArrowRight className="h-4 w-4" />
|
||
<span>Смена статуса</span>
|
||
<ArrowRight className="h-4 w-4" />
|
||
<span>Уведомления</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Ключевые точки интеграции */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white text-lg">
|
||
Ключевые точки интеграции
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
<div className="p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
|
||
<h4 className="text-blue-400 font-medium mb-2 flex items-center gap-2">
|
||
<ShoppingCart className="h-4 w-4" />
|
||
Кабинет селлера
|
||
</h4>
|
||
<p className="text-white/70 text-sm">
|
||
Создание заказа, отслеживание статуса, получение счёта
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-4 rounded-lg bg-green-500/10 border border-green-500/20">
|
||
<h4 className="text-green-400 font-medium mb-2 flex items-center gap-2">
|
||
<Users className="h-4 w-4" />
|
||
Кабинет поставщика
|
||
</h4>
|
||
<p className="text-white/70 text-sm">
|
||
Получение и одобрение заявок на поставку
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-4 rounded-lg bg-purple-500/10 border border-purple-500/20">
|
||
<h4 className="text-purple-400 font-medium mb-2 flex items-center gap-2">
|
||
<Warehouse className="h-4 w-4" />
|
||
Кабинет фулфилмента
|
||
</h4>
|
||
<p className="text-white/70 text-sm">
|
||
Управление поставками, приёмка, подготовка, контроль качества
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-4 rounded-lg bg-orange-500/10 border border-orange-500/20">
|
||
<h4 className="text-orange-400 font-medium mb-2 flex items-center gap-2">
|
||
<Truck className="h-4 w-4" />
|
||
Кабинет логистики
|
||
</h4>
|
||
<p className="text-white/70 text-sm">
|
||
Подтверждение заявок и организация доставки
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|