Разработка административной панели на AdminJS под ключ

import AdminJS from 'adminjs';
import AdminJSExpress from '@adminjs/express';
import { Database, Resource, getModelByName } from '@adminjs/typeorm';

AdminJS.registerAdapter({ Database, Resource });

const adminJs = new AdminJS({
  resources: [
    {
      resource: getModelByName('User'),
      options: {
        properties: {
          password: {
            isVisible: {
              list: false,
              edit: false,
              filter: false,
              show: false
            }
          },
          createdAt: {
            isVisible: {
              edit: false
            }
          }
        },
        actions: {
          delete: {
            isAccessible: ({ currentAdmin }) => currentAdmin?.role === 'superadmin'
          }
        }
      }
    },
    {
      resource: getModelByName('Order'),
      options: {
        listProperties: ['id', 'customer', 'status', 'total', 'createdAt'],
        filterProperties: ['status', 'createdAt'],
        sort: {
          sortBy: 'createdAt',
          direction: 'desc'
        }
      }
    }
  ],
  dashboard: {
    component: AdminJS.bundle('./components/Dashboard')
  },
  branding: {
    companyName: 'Мой Магазин',
    logo: '/admin-logo.svg'
  }
});

const router = AdminJSExpress.buildAuthenticatedRouter(adminJs, {
  authenticate: async (email, password) => {
    const admin = await Admin.findOne({ email });
    if (admin && await bcrypt.compare(password, admin.passwordHash)) {
      return admin;
    }
    return null;
  },
  cookiePassword: process.env.COOKIE_SECRET
});

Кастомный компонент для отображения статуса заказа цветом:

import { BasePropertyProps } from 'adminjs';

const OrderStatusCell: React.FC<BasePropertyProps> = ({ record }) => {
  const status = record.params.status;
  const colors = {
    pending: 'orange',
    completed: 'green',
    cancelled: 'red'
  };

  return <span style={{ color: colors[status] }}>{status}</span>;
};

export default OrderStatusCell;

Загрузка изображений товаров в S3 через @adminjs/upload:

import uploadFeature from '@adminjs/upload';
import { s3Client } from './s3-client';

{
  resource: getModelByName('Product'),
  features: [
    uploadFeature({
      provider: {
        aws: {
          bucket: 'my-bucket',
          s3Client
        }
      },
      properties: {
        file: 'imageFile',
        filePath: 'imageUrl',
        filename: 'imageName',
        mimeType: 'imageMimeType'
      },
      uploadPath: (record, filename) => `products/${record.id()}/${filename}`
    })
  ]
}

Почему AdminJS экономит до 60% времени и бюджета?

Написание админ-панели с нуля на React и Express занимает около 3–4 недель для типового CRUD. AdminJS сокращает этот срок до 1–2 недель, что в 2-3 раза быстрее. Для проектов с 10+ сущностями экономия времени достигает 60%, а следовательно и бюджета. При добавлении кастомных компонентов экономия сохраняется на уровне 30–40%.

Согласно официальной документации AdminJS, фреймворк поддерживает все популярные ORM и ускоряет разработку за счёт генерации интерфейса из моделей. Но важно понимать: коробочная версия даёт базовый функционал, а реальная экономия получается при правильной настройке и кастомизации.

Что делать, если производительность AdminJS не устраивает?

Для таблиц с 100k+ записей стандартные механизмы могут тормозить. Мы применяем несколько подходов. Первый — серверная фильтрация: все фильтры выполняются на стороне БД, а не во фронтенде. Второй — индексация часто запрашиваемых полей. Третий — отказ от find с загрузкой всех связанных сущностей; используем QueryBuilder с select only. В крайнем случае подключаем Elasticsearch для полнотекстового поиска.

Пример оптимизации: в одном проекте таблица заказов (200k записей) открывалась 5 секунд. После добавления композитного индекса по (status, createdAt) и фильтрации по статусу время загрузки упало до 200 мс.

Как мы разрабатываем админ-панель?

1. Аналитика — изучаем структуру данных, бизнес-процессы, права доступа. Оцениваем объём за 1 день.
2. Проектирование — определяем ресурсы, экшены, компоненты, схему прав.
3. Реализация — настройка AdminJS, написание кастомных компонентов и экшенов, интеграция с внешними сервисами.
4. Тестирование — проверка сценариев, нагрузочное тестирование (до 10 000 запросов).
5. Деплой и документация — развёртывание на вашем сервере, описание инструкций для администраторов.

Что входит в результат работы

• Полностью готовая админ-панель на AdminJS с аутентификацией.
• Кастомные компоненты и экшены по вашему ТЗ.
• Интеграция с загрузкой файлов (S3, MinIO).
• Разграничение прав доступа (роли, действия).
• Исходный код, документация, инструкция по развёртыванию.
• Гарантия 6 месяцев на выявленные ошибки.

Для простых проектов AdminJS сокращает время разработки админки на 60% по сравнению с написанием с нуля. Свяжитесь с нами, чтобы обсудить ваш проект — получите консультацию и предварительную оценку за 1 день. Закажите разработку админ-панели на AdminJS.