Які проблеми вирішує кастомний веб-інтерфейс CRM?
Уявіть: у вас 50 менеджерів з продажу, кожен веде клієнтів у Excel або у своїй голові. Угоди втрачаються, ліди не обробляються, звіти збираються тижнями. Веб-інтерфейс кастомної CRM вирішує це — але лише якщо він спроектований під ваші бізнес-процеси, а не під шаблон.
Наша команда за 6 років реалізувала понад 15 CRM-систем для B2B-компаній, тому ми знаємо типові помилки та як їх уникнути. Ми розробляємо веб-інтерфейси CRM на React та Laravel з нуля: від прототипу до продакшену. У статті розберемо типову архітектуру, ключові сутності та підводні камені.
Основне завдання — не накодити кнопок, а вибудувати логіку: хто бачить які угоди, як рухається воронка, які сповіщення критичні. Без цього навіть гарний інтерфейс марний. Проєкт починається з аудиту поточних процесів — за 2-3 дні ми збираємо вимоги та пропонуємо архітектуру.
Один із наших клієнтів — дистриб'ютор електроніки — втрачав до 15% лідів через те, що менеджери не бачили історію дзвінків. Рішення: інтерфейс з автоматичним логуванням усіх активностей. Через місяць після впровадження відсів знизився до 3%.
Чому кастомна CRM вигідніша за готові рішення?
Готові CRM (amoCRM, Bitrix24) пропонують стандартний набір функцій, але їх адаптація під специфіку бізнесу часто вимагає дорогих доопрацювань та обмежує гнучкість. Багато SaaS CRM обмежують функціонал, а кастомна розробка на 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 # зміна стадії
Приклад відповіді API
{
"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 тижні.
Вартість MVP CRM стартує від $15,000, повна версія з усіма інтеграціями — від $30,000. Ми розробляємо кастомну CRM під ключ, тому фінальна ціна розраховується індивідуально після аналізу ваших бізнес-процесів. Зв'яжіться з нами, щоб обговорити проєкт та отримати попередню оцінку. Замовте демо нашої CRM-архітектури на ваших даних — це займе не більше години. За 6 років ми впровадили понад 15 CRM-систем з 95% успішних кейсів.
Часті запитання
Скільки часу займає розробка MVP CRM? MVP з базовою воронкою, картками контактів та угод, завданнями та аналітикою — від 4 до 6 тижнів. Термін залежить від складності інтеграцій та кількості ролей.
Які технології використовуються? Для фронтенду — React 18 + TypeScript (це наш флагманський стек для React CRM), для бекенду — Laravel (PHP 8.3+) з PostgreSQL та Redis. Laravel backend забезпечує надійну роботу API.
Чи можна інтегрувати кастомну CRM з існуючою базою даних? Так, ми проєктуємо API, який може підключатися до будь-якої SQL-бази або зовнішніх сервісів через REST/SOAP. Інтеграція телефонії налаштовується на етапі впровадження.
Які функції входять до мінімального набору? До MVP входять: управління контактами та компаніями, воронка продажів (Kanban), система управління завданнями з дедлайнами, лог активностей та базова звітність.
Як забезпечується безпека даних? Використовуємо рольову модель доступу (Laravel Policies), шифрування через HTTPS, двофакторну автентифікацію та регулярне резервне копіювання.