Розробка адміністративної панелі на AdminJS

Розробка административної панелі на AdminJS

AdminJS — open-source фреймворк для Node.js, який автоматично генерує admin-інтерфейс на основі моделей даних. Підтримує TypeORM, Prisma, Mongoose, Sequelize. Написан на React, добре кастомізується.

Установка та базова настройка

npm install adminjs @adminjs/express express express-session
npm install @adminjs/typeorm  # або @adminjs/prisma, @adminjs/mongoose

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
});

Кастомні компоненти

AdminJS дозволяє замінювати стандартні компоненти на кастомні React-компоненти:

// components/OrderStatusCell.tsx
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;

// У конфігурації ресурсу
properties: {
    status: {
        components: { list: AdminJS.bundle('./components/OrderStatusCell') }
    }
}

Кастомні екшени

actions: {
    sendNotification: {
        actionType: 'record',
        icon: 'Bell',
        label: 'Сповістити клієнта',
        handler: async (request, response, context) => {
            const { record } = context;
            await NotificationService.send(record.params.customerId, 'order_ready');
            return {
                record: record.toJSON(),
                notice: { message: 'Сповіщення відправлено', type: 'success' }
            };
        }
    }
}

Загрузка файлів через @adminjs/upload

npm install @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}`
        })
    ]
}

Ролі та дозволи

const canModifyOrders = ({ currentAdmin }: { currentAdmin: Admin }) =>
    ['superadmin', 'manager'].includes(currentAdmin?.role);

{
    resource: getModelByName('Order'),
    options: {
        actions: {
            edit:   { isAccessible: canModifyOrders },
            delete: { isAccessible: ({ currentAdmin }) => currentAdmin?.role === 'superadmin' }
        }
    }
}

Обмеження AdminJS

• Складні custom workflows вимагають багато коду — теряється перевага над кастомною панеллю
• Продуктивність на великих обсягах (100k+ записів) вимагає ручної оптимізації запитів
• Обмежені можливості для мобільного відображення

Срок розробки: 2–3 тижні для панелі з кастомними компонентами, загруженням файлів та настроєними правами.