Component Library
All available ERP theme components — Shadcn-inspired design
Badges / Status Labels
Default
Active
Pending
Rejected
In Progress
Review
Cards
Total Revenue
$1,245,890
Card Title
Card description
Card content goes here. This is a simple content card with header and body.
With Actions
View all
Card with header action button for navigation.
Cancel
Save
DataTable
ID
Name
Department
Status
Amount
Actions
Modals & Dialogs
Default Modal
Confirm Delete
Confirm Action
// Simple modal
var modal = erpModal({
title: 'Edit Record',
body: '<p>Modal body HTML</p>',
size: 'lg', // sm, md, lg, xl, full
footer: '<button class="...">Save</button>',
onClose: function() { /* cleanup */ }
});
modal.close(); // close programmatically
// Confirm dialog — returns Promise<boolean>
erpConfirm({
title: 'Delete Record?',
message: 'This action cannot be undone.',
confirmText: 'Delete',
type: 'destructive' // 'destructive' = red button
}).then(function(confirmed) {
if (confirmed) { /* proceed */ }
});
Toast Notifications
Success Toast
Error Toast
Warning Toast
Info Toast
erpToast({ title: 'Success', message: 'Record saved', type: 'success' });
erpToast({ title: 'Error', message: 'Something failed', type: 'error' });
erpToast({ title: 'Warning', message: 'Check input', type: 'warning' });
erpToast({ title: 'Info', message: 'Update available', type: 'info' });
erpToast({ title: 'Custom', message: 'Longer toast', type: 'info', duration: 8000 });
Tabs
Overview
Analytics
Settings
This is the Overview tab content. Tabs use the data-tabs-group container with data-tab-target triggers and data-tab-panel panels.
Analytics tab content. Each panel is shown/hidden based on the active trigger.
Settings tab content with configuration options.
Accordion
What is this ERP system?
A comprehensive, modular ERP system covering 46 business modules across 9 domains including finance, HR, supply chain, manufacturing, and more.
What technologies are used?
HTML5, Tailwind CSS (CDN), jQuery, jQuery DataTables, and Chart.js. No build step required — just open with VS Code Live Server.
How do I create a new module page?
Copy one of the sample pages (list, form, detail, or dashboard), update the data-module and data-breadcrumb attributes, and customize the content. Refer to theme-guide.md for patterns.
Empty States
No records found
There are no records matching your criteria.
No results
Try adjusting your search or filter criteria.
Clear Filters
Miscellaneous
Alerts
Information
This is an informational alert message.
Success
Operation completed successfully.
Warning
Please review before proceeding.
Error
Something went wrong. Please try again.
Command Palette
Press Ctrl+K or click the button below.
Advanced Components
Complex, ERP-grade components for data-heavy enterprise workflows
SweetAlert-style Alerts
Full-screen centered alerts with animated icons — a built-in alternative to SweetAlert2.
Success Alert
Error Alert
Warning Alert
Info Alert
With Cancel Button
// SweetAlert-style alerts
erpAlert({ type: 'success', title: 'Success!', message: 'Record saved.' });
erpAlert({ type: 'error', title: 'Error!', message: 'Something went wrong.' });
erpAlert({ type: 'warning', title: 'Warning!', message: 'This may affect records.' });
erpAlert({ type: 'info', title: 'Info', message: 'Update available.' });
// With cancel button — returns Promise
erpAlert({
type: 'warning',
title: 'Are you sure?',
message: 'This cannot be undone.',
showCancel: true,
confirmText: 'Yes, delete',
cancelText: 'Cancel'
}).then(function(confirmed) {
if (confirmed) { /* proceed */ }
});
Searchable Select (Select2-style)
Drop-in replacement for native select — with search, keyboard nav, single and multi-select.
// Single searchable select
erpSearchSelect('#mySelect', {
placeholder: 'Choose a customer...',
options: ['Acme Corp', 'Globex Industries', 'Initech LLC', 'Wayne Enterprises'],
onChange: function(val) { console.log('Selected:', val); }
});
// Multi-select with tags
erpSearchSelect('#myMultiSelect', {
placeholder: 'Select departments...',
multiple: true,
options: ['Engineering', 'Marketing', 'Sales', 'Finance', 'HR'],
onChange: function(vals) { console.log('Selected:', vals); }
});
// Programmatic API
var select = erpSearchSelect('#mySelect', { options: [...] });
select.getValue(); // returns current value
select.setValue('Finance'); // set value programmatically
Progress & Meters
Segmented Progress
Task Breakdown
Timeline
Order #ORD-2024-1892 fulfilled
Shipped via FedEx — Tracking #FX29381
Mar 19, 2026 • 2:45 PM
Invoice #INV-2024-0901 attached
Uploaded by Sarah Chen
invoice-0901.pdf
245 KB
Mar 18, 2026 • 4:12 PM
Payment overdue — 5 days past due
Auto-reminder sent to billing@acme.com
Mar 17, 2026 • 9:00 AM
Note added by David Kim
Mar 16, 2026 • 11:30 AM
"Customer requested Net 45 terms for this order. Approved by Finance Manager."
Record created
Created by Admin User
Mar 15, 2026 • 10:00 AM
Kanban Board
High
ERP-142
Fix GL reconciliation report mismatch
Medium
ERP-156
Add multi-currency support for AP module
High
ERP-138
Implement payroll batch processing
Low
ERP-161
Update user manual for Inventory module
Medium
ERP-134
Procurement workflow approval chain
procurement
workflow
Setup CI/CD pipeline for staging
// Kanban drag-and-drop
document.querySelectorAll('.kanban-card').forEach(function(card) {
card.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', '');
this.classList.add('opacity-50');
window._dragCard = this;
});
card.addEventListener('dragend', function() {
this.classList.remove('opacity-50');
window._dragCard = null;
document.querySelectorAll('.kanban-column').forEach(function(c) {
c.classList.remove('ring-2', 'ring-blue-400');
});
});
});
document.querySelectorAll('.kanban-column').forEach(function(col) {
var dropZone = col.querySelector('.space-y-2');
col.addEventListener('dragover', function(e) {
e.preventDefault();
col.classList.add('ring-2', 'ring-blue-400');
});
col.addEventListener('dragleave', function() {
col.classList.remove('ring-2', 'ring-blue-400');
});
col.addEventListener('drop', function(e) {
e.preventDefault();
col.classList.remove('ring-2', 'ring-blue-400');
if (window._dragCard && dropZone) {
var addBtn = dropZone.querySelector('.border-dashed');
if (addBtn) dropZone.insertBefore(window._dragCard, addBtn);
else dropZone.appendChild(window._dragCard);
}
});
});
Calendar View
March 2026
Today
Month
Week
Day
Date & Time Pickers (Flatpickr)
// Date picker
flatpickr('#myDate', { dateFormat: 'Y-m-d' });
// Date & time
flatpickr('#myDateTime', { enableTime: true, dateFormat: 'Y-m-d H:i' });
// Time only
flatpickr('#myTime', { enableTime: true, noCalendar: true, dateFormat: 'H:i', time_24hr: true });
// Date range
flatpickr('#myRange', { mode: 'range', dateFormat: 'Y-m-d' });
// Multiple dates
flatpickr('#myMulti', { mode: 'multiple', dateFormat: 'Y-m-d' });
// Inline calendar
flatpickr('#myInline', { inline: true });
jQuery Validation
Contact Form with jQuery Validate
Real-time validation using jQuery Validation plugin
// jQuery Validation plugin
$('#myForm').validate({
rules: {
name: { required: true, minlength: 3 },
email: { required: true, email: true },
amount: { required: true, min: 1, max: 999999 },
category: { required: true },
message: { required: true, minlength: 10 },
url: { url: true }
},
messages: {
name: { required: 'Name is required', minlength: 'At least 3 characters' },
email: { required: 'Email is required', email: 'Enter a valid email' },
},
errorClass: 'text-xs text-red-500 mt-1',
errorElement: 'p',
highlight: function(el) { $(el).addClass('border-red-300').removeClass('border-zinc-200'); },
unhighlight: function(el) { $(el).removeClass('border-red-300').addClass('border-zinc-200'); },
submitHandler: function(form) {
erpAlert({ type: 'success', title: 'Submitted!', message: 'Form is valid.' });
}
});
File Upload with Progress
Activity Feed
Recent Activity
All Activity
Comments
Changes
System
DK
David Kim commented on INV-2024-0901
"Please double-check the tax calculation on line 3."
15 minutes ago
System auto-generated invoice INV-2024-0902 from SO-2024-0445
1 hour ago
Load more activity
File Manager
Vendor Contracts
12 files
Service Agreements
8 files
Acme-Corp-MSA-2026.pdf
2.4 MB · Modified Mar 15, 2026
Signed
Service-Agreement-Template.docx
845 KB · Modified Mar 12, 2026
Draft
Pricing-Matrix-Q1-2026.xlsx
1.1 MB · Modified Mar 8, 2026
Final
Drawer / Slide-over
Side panels for quick view/edit without leaving the page.
Open Right Drawer
Open Wide Drawer
Stepper / Wizard Variants
Vertical Stepper
Order placed
Mar 15, 2026 at 10:00 AM
Payment confirmed
Mar 15, 2026 at 10:05 AM
Processing
Estimated: Mar 17, 2026
Description List
Vendor Details
Company Name Acme Corporation
Vendor Code VEN-00142
Tax ID 12-3456789
Payment Terms Net 30
Credit Limit $250,000.00
Status Active
Order Summary
Order Number ORD-2024-1892
Order Date Mar 19, 2026
Ship Method FedEx Express
Warehouse WH-East (NJ)
Priority High
Total $12,500.00
Notification Panel
Notifications
Mark all read
New approval request — PO-2024-0892 awaiting your review
2 minutes ago
Payment overdue — INV-2024-0898 is 5 days past due
1 hour ago
Payroll batch PAY-2026-03 processed successfully
3 hours ago
Sarah Chen was added to your team
Yesterday
View all notifications
Pricing Table
Starter
For small teams getting started
$49 /month
Get Started
Most Popular
Professional
For growing businesses
$149 /month
Get Started
Enterprise
For large organizations
Custom
Contact Sales
Transfer List
// Transfer list — move checked items between lists
$('#tl-move-right').on('click', function() {
$('#tl-source-list .tl-check:checked').each(function() {
var $item = $(this).closest('.tl-item');
$(this).prop('checked', false);
$('#tl-target-list').append($item);
});
updateCounts();
});
$('#tl-move-left').on('click', function() {
$('#tl-target-list .tl-check:checked').each(function() {
var $item = $(this).closest('.tl-item');
$(this).prop('checked', false);
$('#tl-source-list').append($item);
});
updateCounts();
});
$('#tl-move-all-right').on('click', function() {
$('#tl-source-list .tl-item').appendTo('#tl-target-list');
updateCounts();
});
$('#tl-move-all-left').on('click', function() {
$('#tl-target-list .tl-item').appendTo('#tl-source-list');
updateCounts();
});
function updateCounts() {
$('#tl-source-count').text('Available (' + $('#tl-source-list .tl-item').length + ')');
$('#tl-target-count').text('Selected (' + $('#tl-target-list .tl-item').length + ')');
}
Sortable List
Approval Chain Order
4
CFO
CFO
Required if amount > $50,000
Conditional
Comparison Table
Feature
Starter
Professional
Enterprise
Users
10
50
Unlimited
Modules
5
All 46
All 46 + Custom
API Access
Multi-Company
Support SLA
48h email
4h priority
1h dedicated
Data Cards
SC
Sarah Chen
Senior Financial Analyst
Active
Finance Dept
Industrial Widget A-200
SKU: WDG-A200-BLK
View Details
Reorder
In Progress
ERP Phase 2 Rollout
Manufacturing & Quality modules deployment
Comments / Discussion
Discussion (3 comments)
I've reviewed the numbers — the tax amount on line 3 seems off. Can someone double-check the rate applied?
Good catch — the rate should be 10% not 12%. I'll fix it and re-submit.
Updated and resubmitted. Ready for final approval.