Какие проблемы решает кастомный веб-интерфейс CRM?
Представьте: у вас 50 менеджеров по продажам, каждый ведёт клиентов в Excel или своей голове. Сделки теряются, лиды не обрабатываются, отчёты собираются неделями. Веб-интерфейс кастомной CRM решает это — но только если он спроектирован под ваши бизнес-процессы, а не под шаблон.
Наша команда за 6 лет реализовала более 15 CRM-систем для B2B-компаний, поэтому мы знаем типовые ошибки и как их избежать. Мы разрабатываем веб-интерфейсы CRM на React и Laravel с нуля: от прототипа до продакшена. В статье разберём типовую архитектуру, ключевые сущности и подводные камни.
Основная задача — не накодить кнопок, а выстроить логику: кто видит какие сделки, как движется воронка, какие уведомления критичны. Без этого даже красивый интерфейс бесполезен. Проект начинается с аудита текущих процессов — за 2-3 дня мы собираем требования и предлагаем архитектуру.
Один из наших клиентов — дистрибьютор электроники — терял до 15% лидов из-за того, что менеджеры не видели историю звонков. Решение: интерфейс с автоматическим логированием всех активностей. Через месяц после внедрения отсев снизился до 3%.
Почему кастомная CRM выгоднее готовых решений?
Готовые CRM (amoCRM, Bitrix24) предлагают стандартный набор функций, но их адаптация под специфику бизнеса часто требует дорогих доработок и ограничивает гибкость. Кастомная разработка на React и Laravel позволяет:
- Оптимизировать воронку под конкретные этапы продаж: например, для дистрибьютора — стадии "Запрос КП", "Согласование цены", "Отгрузка".
- Интегрировать любое внешнее ПО: телефонию, 1С, мессенджеры, email-рассылки.
- Масштабировать функционал без оглядки на лицензионные ограничения.
При этом стоимость владения кастомной CRM уже через год оказывается ниже, чем ежемесячная плата за коробочное решение с аналогичным набором интеграций. По нашим данным, компании экономят до 40% на лицензиях при переходе на собственную разработку.
Типовой набор сущностей и их реализация
В кастомной CRM выделяют пять основных сущностей. Для каждой мы реализуем отдельный модуль с CRUD, фильтрацией и связями.
| Сущность | Назначение | Пример полей |
|---|---|---|
| Контакты | Физические лица с историей взаимодействий | name, email, phone, source |
| Компании | Юридические лица, к которым привязаны контакты | name, inn, address |
| Сделки | Потенциальные и активные продажи со статусами | amount, stage_id, responsible_id |
| Задачи | Поручения с дедлайнами, привязанные к сделкам/контактам | title, due_date, assignee |
| Активности | Лог коммуникаций (звонки, письма, встречи) | type, body, happened_at |
Кастомная разработка на React и Laravel в 2-3 раза быстрее адаптируется к изменениям бизнеса, чем готовые CRM-системы. Например, добавление нового поля или этапа воронки занимает часы, а не дни.
Как мы проектируем CRM под ваш бизнес?
Процесс работы разбит на шесть этапов:
- Аналитика — интервью с ключевыми пользователями, выявление сценариев и болей. (2-3 дня)
- Прототипирование — интерактивные макеты в Figma с утверждением заказчиком. (3-5 дней)
- Разработка бэкенда — Laravel (PHP 8.3+) с RESTful API, PostgreSQL, Redis для кеша и очередей.
- Разработка фронтенда — React 18 + TypeScript, TanStack Table для таблиц, @dnd-kit для воронки.
- Интеграции — телефония (Asterisk, Miko), email (SMTP/API), мессенджеры (Telegram, WhatsApp).
- Тестирование и деплой — CI/CD, нагрузочное тестирование, мониторинг.
Для авторизации используем Laravel Policies — стандартный механизм, который позволяет гибко разграничивать доступ: менеджер видит только свои сделки, руководитель — все в своём отделе.
Архитектура базы данных и API
База данных строится на PostgreSQL с нормализованной схемой. Пример основных таблиц:
CREATE TABLE contacts (
id BIGSERIAL PRIMARY KEY,
company_id BIGINT REFERENCES companies(id),
name VARCHAR(255) NOT NULL,
email VARCHAR(255),
phone VARCHAR(50),
source VARCHAR(64),
responsible_id BIGINT REFERENCES users(id),
created_at TIMESTAMPTZ DEFAULT NOW()
);
CREATE TABLE deals (
id BIGSERIAL PRIMARY KEY,
contact_id BIGINT REFERENCES contacts(id),
company_id BIGINT REFERENCES companies(id),
title VARCHAR(255) NOT NULL,
amount DECIMAL(14,2),
currency CHAR(3) DEFAULT 'RUB',
stage_id BIGINT REFERENCES pipeline_stages(id),
responsible_id BIGINT REFERENCES users(id),
closed_at DATE,
created_at TIMESTAMPTZ DEFAULT NOW()
);
API строится по RESTful-принципам. Пример ресурса сделок:
GET /api/deals?stage_id=2&responsible_id=5
POST /api/deals
PATCH /api/deals/{id}
DELETE /api/deals/{id}
POST /api/deals/{id}/move # смена стадии
{
"id": 1042,
"stage_id": 4,
"stage": { "id": 4, "name": "Переговоры" },
"updated_at": "2024-01-15T14:22:00Z",
"activity": {
"id": 3891,
"type": "stage_change",
"body": "Стадия изменена: Квалификация → Переговоры",
"user_id": 12
}
}
Воронка с drag-and-drop
Воронка продаж визуализируется как Kanban-доска. Используем библиотеку @dnd-kit для перетаскивания карточек между колонками. Optimistic update — ключевой приём: карточка мгновенно меняет позицию без ожидания ответа сервера. При ошибке откатываем.
import { DndContext, DragEndEvent, closestCenter } from '@dnd-kit/core';
import { SortableContext } from '@dnd-kit/sortable';
const Pipeline: React.FC<{ stages: Stage[]; deals: Deal[] }> = ({ stages, deals }) => {
const moveDeal = useMutation({
mutationFn: ({ dealId, stageId }) => api.patch(`/deals/${dealId}/move`, { stage_id: stageId }),
onMutate: async ({ dealId, stageId }) => {
await queryClient.cancelQueries({ queryKey: ['deals'] });
const prev = queryClient.getQueryData(['deals']);
queryClient.setQueryData(['deals'], (old: Deal[]) =>
old.map(d => d.id === dealId ? { ...d, stage_id: stageId } : d)
);
return { prev };
},
onError: (_, __, context) => queryClient.setQueryData(['deals'], context?.prev),
});
return (
<DndContext collisionDetection={closestCenter} onDragEnd={moveDeal.mutate}>
<div className="flex gap-4 overflow-x-auto p-4">
{stages.map(stage => (
<KanbanColumn key={stage.id} stage={stage}
deals={deals.filter(d => d.stage_id === stage.id)} />
))}
</div>
</DndContext>
);
};
Управление правами доступа
CRM требует гранулярных прав. В Laravel это реализуется через Policy-классы и глобальные скоупы модели.
class DealPolicy {
public function view(User $user, Deal $deal): bool {
if ($user->hasRole('admin')) return true;
if ($user->hasRole('team_lead')) {
return $deal->responsible->team_id === $user->team_id;
}
return $deal->responsible_id === $user->id;
}
}
class Deal extends Model {
public function scopeVisibleTo(Builder $query, User $user): Builder {
if ($user->hasRole('admin')) return $query;
if ($user->hasRole('team_lead')) {
return $query->whereHas('responsible', fn($q) =>
$q->where('team_id', $user->team_id)
);
}
return $query->where('responsible_id', $user->id);
}
}
Что входит в разработку кастомной CRM
В стоимость проекта включены:
- Техническое задание и интерактивный прототип интерфейса
- Разработка бэкенда (Laravel + PostgreSQL + Redis)
- Разработка фронтенда (React 18 + TypeScript)
- Интеграция с телефонией (Asterisk, Miko), email (SMTP/API), мессенджерами
- Документация API и пользовательская инструкция
- Обучение сотрудников (2-3 часа)
- Гарантийная поддержка 3 месяца после запуска
Дополнительно можем подключить мобильную версию (PWA или React Native) и настроить BI-аналитику.
Сроки и стоимость реализации
MVP с воронкой, карточками контактов/сделок, задачами и базовой аналитикой занимает 4–6 недель. Добавление интеграций (телефония, email), расширенных отчётов и ролей — ещё 3–4 недели. Мобильная версия — дополнительно 3–4 недели.
Стоимость рассчитывается индивидуально после анализа ваших бизнес-процессов. Свяжитесь с нами, чтобы обсудить проект и получить предварительную оценку. Закажите демо нашей CRM-архитектуры на ваших данных — это займёт не больше часа.