Добавлен новый компонент для отображения бизнес-процессов в интерфейсе управления. Обновлен компонент UIKitSection для интеграции нового демо и улучшения навигации. Оптимизирована логика отображения данных и улучшена читаемость кода. Исправлены текстовые метки для повышения удобства использования.
This commit is contained in:
Veronika Smirnova
1147
src/components/admin/ui-kit/business-processes-demo.tsx
Normal file
1147
src/components/admin/ui-kit/business-processes-demo.tsx
Normal file
@ -0,0 +1,1147 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user