Admin Toolkit: Shared Admin UI Framework

Why every mypresta.rocks module feels the same

Open any two of our modules. The admin panels work identically, same filtering, same column management, same keyboard shortcuts, same inline editing, same toast notifications. That's not a style guide. It's shared code.

The Admin Toolkit is our most fundamental package. Our module admin panels are built on it, 83,902 lines of runtime PHP, JavaScript and SCSS that provide a complete admin UI framework for PrestaShop modules.

Base controllers

Instead of extending PrestaShop's raw ModuleAdminController, our modules extend MPRAdminController and MPRListController. These provide:

• AJAX image upload: drag-and-drop image fields with preview, crop, and resize
• Inline editing: fields configured for it can be edited straight from the list, with automatic save
• Field modals: complex fields open in modals without leaving the list view
• Bulk actions: select multiple rows and apply operations in one click
• Tabbed interfaces: settings panels with organized tabs and automatic state persistence

Advanced list filtering

Every list view gets database-backed filtering, with the filter matching how the column behaves:

• Text: partial match, exact match, starts with, or regex
• Numeric range: min/max with automatic type detection
• Date range: calendar picker with a from and a to bound
• Select: dropdown with options pulled from the database
• Multiselect: match any of several values, with AND/OR available across filter groups
• Boolean: yes/no toggle

Filters persist per employee. Close the browser, come back, and your filters are still there.

Column management

Users choose which columns to display, drag to reorder them, and save presets. Column visibility and order persist per employee in the database, and behave the same way in every list built on the toolkit.

48 JavaScript components

The toolkit bundles a complete set of admin UI components:

• Datepickers: range pickers with presets and localization
• Modals: confirm dialogs, form modals, preview modals
• Toast notifications: success/error/info messages with auto-dismiss
• Inline editors: text, number, select, toggle, color picker
• AJAX tables: server-side pagination, sorting, filtering without page reload
• Drag-and-drop: sortable lists and grid layouts
• Clipboard: one-click copy for codes, URLs, references
• Tabs: persistent tab state with URL hash support

68 SCSS component styles

Every visual component is styled through shared SCSS with proper variables, mixins, and responsive breakpoints, using the shared admin tokens so components look at home next to each other.

Dashboard renderer

Modules that need a dashboard landing page use the DashboardRenderer: a flexible card-based layout system with stat widgets, quick action buttons, tables, alerts, charts, calendars and status indicators. The module supplies the sections and the data; the renderer lays them out.

The numbers

• 83,902 lines of runtime PHP, JS and SCSS
• 159 modules built on this foundation
• 48 JavaScript components in one bundle
• 68 styled SCSS components for consistent visuals
• The PrestaShop versions the module using it supports
• One admin pattern to learn, across every module built on it

← Back to Our Technology Stack