UI Layout & Theming
Relevant source files
The following files were used as context for generating this wiki page:
The IT Management System utilizes a responsive, "GitHub Copilot-inspired" light/dark theme designed for technical asset management. The UI is built using vanilla JavaScript and CSS, adhering to a "Zero Dependency" philosophy that avoids external NPM packages or complex build steps. The layout provides a company-scoped multi-tenant experience, ensuring that UI preferences and data visibility are isolated per tenant.
The system's visual identity is centered around consistency and accessibility, employing CSS variables for theme management and standardized components across all modules, such as consistent headers, sidebars, and data tables.
Sources: wiki/Home.md, README.md, js/AGENT_NOTES.md
Core UI Components & Architecture
The application layout is structured around a persistent header and a modular sidebar, both of which are managed through a combination of server-side PHP templates and client-side JavaScript.
Header and Navigation
The includes/header.php file serves as the primary entry point for the UI, injecting global configurations, CSRF tokens, and base library dependencies. It renders the top navigation bar, which includes company branding, theme toggling, and logout functionality.
The header also handles "Flash Messages" (success/error notifications) stored in the PHP session, ensuring users receive immediate feedback after CRUD operations.
Sources: includes/header.php:12-42, README.md
Global Layout Management
The layout is enhanced by several specialized JavaScript utilities that provide interactive functionality without external dependencies:
| File | Purpose |
|---|---|
js/ui-layout.js | Manages general layout interactions. |
js/theme.js | Handles dark/light mode variable switching. |
js/itm-user-errors.js | Provides themed in-page alerts (itmNotifyError, itmNotifySuccess). |
js/bulk-delete-selection.js | Manages the selection interface for bulk actions. |
js/table-tools.js | Handles list view interactivity, including Excel imports and exports. |
Sources: js/AGENT_NOTES.md, includes/header.php:47-64
Theming System
The system implements a dual-theme architecture (Light and Dark) powered by CSS variables. This approach allows for instant theme switching without page reloads.
CSS Variables & Styling
The theming logic is split between styles.css (global layout) and theme.css (variable definitions). Key variables such as --accent, --bg-primary, and --border are redefined based on the active theme.
The "GitHub Copilot-inspired" aesthetic focuses on high-contrast text and subtle borders to maintain readability across dense data modules like IDF racks and equipment lists.
Sources: css/AGENT_NOTES.md, wiki/Home.md, README.md
UI Configuration & Customization
The system allows for extensive UI customization via the Settings module. These configurations are stored in the database and applied globally to the tenant.
Configuration Persistence
User preferences and system-wide UI settings are tracked through specific database tables:
- ui_configuration: Stores positioning for UI elements, pagination settings, and button alignment (back/save).
- user_sidebar_preferences: Manages the visibility and order of sidebar items for individual users.
Changes to UI positioning or pagination require the collectAndSetHiddenFields() function to ensure that state is preserved across form submissions.
Sources: modules/settings/AGENT_NOTES.md:4-14
Automatic UI Enhancements
To improve the user experience across the legacy codebase without manual edits to every module, the system uses "Intent Rules" in includes/header.php. This logic automatically adds emoji-prefixed tooltips to links and buttons based on their text or class names.
| Match Keyword | Emoji | Label |
|---|---|---|
| delete / remove | 🗑️ | Delete item |
| edit / update | ✏️ | Edit item |
| view / open | 👀 | View details |
| search / find | 🔎 | Search |
| export / download | 📤 | Export data |
Sources: includes/header.php:114-135
Interactive Visual Components
Beyond standard CRUD tables, the system features specialized visual layouts for infrastructure management:
- IDF Rack View: A visual layout showing positions, port grids, and linked devices.
- Rack Planner: A drag-and-drop interface for rack elevation and component placement.
- Floor Designer: An interactive tool using coordinates (
x,y) for placing network points on floor plan backgrounds. - Org Chart: A visual, interactive diagram with drag-and-drop reporting lines.
Sources: README.md, wiki/Home.md, modules/floor_designer/AGENT_NOTES.md
Summary
The UI Layout & Theming system in the IT Management System provides a modern, responsive interface for legacy PHP modules. By utilizing CSS variables and vanilla JavaScript, it achieves a high degree of customization and responsiveness while maintaining a "Zero Dependency" footprint. Centralized management through the header.php template and the Settings module ensures that multi-tenant isolation and user preferences are consistently applied across the entire application.