UI Framework Decision - AlKareem ERP

UI Framework Overview

Desktop-like experience in the browser

AlKareem ERP uses WinBox.js to create a desktop-style application experience directly in the browser. This approach enables users to work with multiple windows simultaneously, improving productivity and multitasking capabilities within the ERP system.

7kb

Gzipped Size

0

Dependencies

ES6+

Modern JavaScript

Why WinBox.js?

Rationale for choosing this UI framework

Desktop Experience

Users familiar with Windows OS will instantly understand how to navigate and use multiple windows, reducing training time and improving adoption.

Multitasking

Open Sales, Inventory, and Accounting modules side-by-side. Compare data across modules without losing context or switching tabs.

Lightweight

Only 7kb gzipped with zero dependencies. Minimal impact on page load times while providing rich functionality.

Fully Customizable

Custom themes, colors, icons, and behaviors. Matches our dark-mode ERP design perfectly with custom CSS styling.

Key Features

Built-in window management capabilities

Draggable

Resizable

Maximizable

Minimizable

Fullscreen

Stackable

Modal Support

iframe Support

Live Examples

Try WinBox.js in action

1. Simple Window

new WinBox("Simple Window", {
    width: "400px",
    height: "300px",
    x: "center",
    y: "center"
});

2. Window with HTML Content

new WinBox("ERP Help", {
    width: "500px",
    height: "400px",
    html: "<div class='p-4'><h2>Help Section</h2>...</div>"
});

3. Multiple Windows

new WinBox("Sales Module", { 
    x: "50px", y: "100px", width: "350px", height: "280px",
    background: "#0ea5e9"
});
new WinBox("Inventory Module", { 
    x: "420px", y: "150px", width: "350px", height: "280px",
    background: "#a855f7"
});

4. Modal Window

new WinBox("Confirm Action", {
    modal: true,
    width: "400px",
    height: "200px",
    x: "center",
    y: "center",
    background: "#dc2626"
});

Integration with Livewire

Loading Livewire components in WinBox windows

WinBox windows can load Livewire components via URL, enabling dynamic ERP module loading:

// Load Livewire component in WinBox
new WinBox("Accounts Ledger", {
    url: "/accounts/ledger",
    width: "80%",
    height: "70%",
    x: "center",
    y: "center",
    class: ["no-full", "no-resize"],
    onclose: function() {
        // Cleanup or refresh parent when window closes
        Livewire.dispatch('refreshDashboard');
    }
});

Best Practices

Guidelines for WinBox implementation

Do's

Set minimum width/height to prevent content clipping
Use meaningful window titles for easy identification
Implement onclose handlers to clean up resources
Use modal windows for confirmations and critical actions

Don'ts

Don't open too many windows simultaneously (limit to 5-6)
Avoid loading heavy iframes without lazy loading
Don't disable all controls (keep at least close button)
Avoid fixed positioning for window content