# M1 ERP - UI/UX Audit Examples & Code Snippets

**Companion Document to:** UI_UX_AUDIT_REPORT.md  
**Purpose:** Provide concrete examples and code snippets for implementing recommendations

---

## 1. Navigation Pattern Examples

### 1.1 Standard Nav Tabs Pattern (RECOMMENDED)

**Use Case:** Module with multiple related views

**Example:** `views/projects/index.php`

```html
<!-- Navigation Tabs -->
<ul class="nav nav-tabs mb-3">
    <li class="nav-item">
        <a class="nav-link" href="<?= base_url('projects/dashboard') ?>">
            <i class="bi bi-speedometer2"></i> Dashboard
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="<?= base_url('projects/my-tasks') ?>">
            <i class="bi bi-check2-square"></i> My Tasks
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" href="<?= base_url('projects') ?>">
            <i class="bi bi-list-ul"></i> All Projects
        </a>
    </li>
</ul>
```

**When to Use:**
- ✅ Multiple views of same data (All, My, Archived)
- ✅ Different perspectives on same module (Dashboard, List, Board)
- ✅ Related functionality (Contacts, Activities, Opportunities)

**When NOT to Use:**
- ❌ Unrelated pages
- ❌ Different modules
- ❌ Form sections (use tabs inside form instead)

### 1.2 Breadcrumbs Pattern (RECOMMENDED)

**Use Case:** Hierarchical navigation, edit/show pages

**Example:** `views/settings/user_groups/edit.php`

```html
<div class="d-flex align-items-center mb-3">
    <div class="flex-grow-1">
        <h1 class="page-header mb-0">Edit User Group</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="<?= base_url('settings/user-groups') ?>">User Groups</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="<?= base_url('settings/user-groups/' . $group['id']) ?>">
                        <?= e($group['name']) ?>
                    </a>
                </li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
        </nav>
    </div>
</div>
```

**When to Use:**
- ✅ Edit pages (List → Show → Edit)
- ✅ Nested settings (Settings → Category → Item)
- ✅ Multi-level modules (HR → Recruitment → Positions → Edit)

### 1.3 Form Tabs Pattern (RECOMMENDED)

**Use Case:** Complex forms with 15+ fields

**Example:** `views/employees/edit.php` (GOLD STANDARD)

```html
<!-- Nav Tabs -->
<ul class="nav nav-tabs mb-4" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="overview-tab" 
                data-bs-toggle="tab" data-bs-target="#overview" 
                type="button" role="tab">
            <i class="bi bi-person-badge me-1"></i> Overview
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="contact-tab" 
                data-bs-toggle="tab" data-bs-target="#contact" 
                type="button" role="tab">
            <i class="bi bi-geo-alt me-1"></i> Contact & Address
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="documents-tab" 
                data-bs-toggle="tab" data-bs-target="#documents" 
                type="button" role="tab">
            <i class="bi bi-file-earmark-text me-1"></i> Documents
            <span class="badge bg-secondary ms-1"><?= count($documents) ?></span>
        </button>
    </li>
</ul>

<!-- Tab Content -->
<div class="tab-content">
    <div class="tab-pane fade show active" id="overview" role="tabpanel">
        <!-- Overview fields -->
    </div>
    <div class="tab-pane fade" id="contact" role="tabpanel">
        <!-- Contact fields -->
    </div>
    <div class="tab-pane fade" id="documents" role="tabpanel">
        <!-- Documents section -->
    </div>
</div>
```

---

## 2. Form Pattern Examples

### 2.1 Simple Modal (≤5 fields) - RECOMMENDED

**Use Case:** Quick add, simple edits

**Example:** `views/partials/quick_add_company_modal.php`

```html
<!-- Modal Trigger -->
<button type="button" class="btn btn-outline-theme" 
        data-bs-toggle="modal" data-bs-target="#quickAddModal">
    <i class="bi bi-plus-circle me-1"></i> Quick Add
</button>

<!-- Modal -->
<div class="modal fade" id="quickAddModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Quick Add Company</h5>
                <button type="button" class="btn-close" 
                        data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="quickAddForm">
                    <?= csrf_field() ?>
                    
                    <div class="mb-3">
                        <label class="form-label">Company Name</label>
                        <input type="text" name="company_name" 
                               class="form-control" required>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-6">
                            <label class="form-label">First Name <span class="text-danger">*</span></label>
                            <input type="text" name="first_name" 
                                   class="form-control" required>
                        </div>
                        <div class="col-6">
                            <label class="form-label">Last Name <span class="text-danger">*</span></label>
                            <input type="text" name="last_name" 
                                   class="form-control" required>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Email <span class="text-danger">*</span></label>
                        <input type="email" name="email" 
                               class="form-control" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" 
                        data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-outline-theme" 
                        onclick="saveQuickAdd()">Add Company</button>
            </div>
        </div>
    </div>
</div>
```

**Best Practices:**
- ✅ Always include `aria-label="Close"` on close button
- ✅ Use `<label>` for all inputs (not just placeholder)
- ✅ Mark required fields with `<span class="text-danger">*</span>`
- ✅ Keep form simple (max 5 fields)
- ✅ Provide clear success/error feedback

### 2.2 Medium Form (6-15 fields) - Dedicated Page

**Use Case:** Standard CRUD operations

**Template:**

```html
<div class="d-flex align-items-center mb-3">
    <div class="flex-grow-1">
        <h1 class="page-header mb-0">Create Product</h1>
    </div>
    <div>
        <a href="<?= base_url('products') ?>" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i> Back
        </a>
    </div>
</div>

<form method="POST" action="<?= base_url('products/store') ?>">
    <?= csrf_field() ?>
    
    <div class="card border-0 mb-3">
        <div class="card-body">
            <h5 class="card-title mb-3">Basic Information</h5>
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Product Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label">SKU <span class="text-danger">*</span></label>
                    <input type="text" name="sku" class="form-control" required>
                </div>
            </div>
            
            <!-- More fields... -->
        </div>
    </div>
    
    <div class="d-flex justify-content-end gap-2">
        <a href="<?= base_url('products') ?>" class="btn btn-outline-secondary">
            Cancel
        </a>
        <button type="submit" class="btn btn-outline-theme">
            <i class="bi bi-save me-1"></i> Save Product
        </button>
    </div>
</form>
```

### 2.3 Complex Form (16+ fields) - Dedicated Page with Tabs

**Use Case:** Employee, Client, Complex configurations

**See:** `views/employees/edit.php` for complete example

**Key Points:**
- Use tabs to group related fields
- Keep each tab focused (5-10 fields max)
- Show badge counts on tabs (e.g., Documents count)
- Provide preview/summary on first tab

---

## 3. Accessibility Fixes

### 3.1 Close Button Fix

**BEFORE (❌ Bad):**
```html
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
```

**AFTER (✅ Good):**
```html
<button type="button" class="btn-close" data-bs-dismiss="modal" 
        aria-label="Close"></button>
```

### 3.2 Form Label Fix

**BEFORE (❌ Bad):**
```html
<input type="text" name="email" class="form-control" 
       placeholder="Enter email">
```

**AFTER (✅ Good):**
```html
<label for="email" class="form-label">Email <span class="text-danger">*</span></label>
<input type="email" id="email" name="email" class="form-control" 
       placeholder="Enter email" required>
```

### 3.3 Dynamic Fields Fix

**BEFORE (❌ Bad):**
```html
<input type="text" name="items[0][description]" class="form-control">
```

**AFTER (✅ Good):**
```html
<label for="item-desc-0" class="form-label">Description</label>
<input type="text" id="item-desc-0" name="items[0][description]" 
       class="form-control" aria-label="Item description">
```

---

## 4. Responsive Table Fix

### 4.1 Simple Table Wrapper

**BEFORE (❌ Bad):**
```html
<table class="table table-striped">
    <!-- table content -->
</table>
```

**AFTER (✅ Good):**
```html
<div class="table-responsive">
    <table class="table table-striped">
        <!-- table content -->
    </table>
</div>
```

### 4.2 DataTables Implementation (RECOMMENDED for >20 records)

```html
<div class="table-responsive">
    <table id="productsTable" class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Product Name</th>
                <th>SKU</th>
                <th>Category</th>
                <th>Price</th>
                <th>Stock</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($products as $product): ?>
            <tr>
                <td><?= e($product['name']) ?></td>
                <td><?= e($product['sku']) ?></td>
                <td><?= e($product['category']) ?></td>
                <td>$<?= number_format($product['price'], 2) ?></td>
                <td><?= $product['stock'] ?></td>
                <td>
                    <a href="<?= base_url('products/' . $product['id']) ?>" 
                       class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-eye"></i>
                    </a>
                </td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

<script>
$(document).ready(function() {
    $('#productsTable').DataTable({
        responsive: true,
        pageLength: 25,
        order: [[0, 'asc']],
        language: {
            search: "Search products:",
            lengthMenu: "Show _MENU_ products per page"
        }
    });
});
</script>
```

---

## 5. Component Standardization

### 5.1 Standard Page Header

```html
<div class="d-flex align-items-center mb-3">
    <div class="flex-grow-1">
        <h1 class="page-header mb-0">Page Title</h1>
    </div>
    <div class="d-flex gap-2">
        <a href="<?= base_url('module/create') ?>" class="btn btn-outline-theme">
            <i class="bi bi-plus-lg me-1"></i> Create New
        </a>
    </div>
</div>
```

### 5.2 Standard Filter Card

```html
<div class="card border-0 mb-3">
    <div class="card-body">
        <form method="GET" action="<?= base_url('module') ?>" class="row g-2">
            <div class="col-md-3">
                <input type="text" name="search" class="form-control" 
                       placeholder="Search..." value="<?= e($search) ?>">
            </div>
            <div class="col-md-3">
                <select name="status" class="form-select">
                    <option value="">All Status</option>
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-outline-theme w-100">
                    <i class="bi bi-filter me-1"></i> Filter
                </button>
            </div>
            <div class="col-md-4 text-end">
                <?php if (!empty($search) || $status): ?>
                    <a href="<?= base_url('module') ?>" 
                       class="btn btn-outline-secondary">
                        <i class="bi bi-x-circle me-1"></i> Clear
                    </a>
                <?php endif; ?>
            </div>
        </form>
    </div>
</div>
```

### 5.3 Standard Status Badge

```php
<?php
function getStatusBadge($status) {
    $badges = [
        'active' => 'badge-outline-success',
        'inactive' => 'badge-outline-secondary',
        'pending' => 'badge-outline-warning',
        'error' => 'badge-outline-danger',
        'draft' => 'badge-outline-info'
    ];
    
    $class = $badges[$status] ?? 'badge-outline-secondary';
    return "<span class=\"badge {$class}\">" . ucfirst($status) . "</span>";
}
?>
```

---

## 6. Icon Migration Examples

### 6.1 Common Icon Mappings (Font Awesome → Bootstrap Icons)

| Font Awesome | Bootstrap Icons | Usage |
|--------------|----------------|-------|
| `fa-plus` | `bi-plus-lg` | Add/Create |
| `fa-edit` | `bi-pencil` | Edit |
| `fa-trash` | `bi-trash` | Delete |
| `fa-eye` | `bi-eye` | View |
| `fa-download` | `bi-download` | Download |
| `fa-upload` | `bi-upload` | Upload |
| `fa-search` | `bi-search` | Search |
| `fa-filter` | `bi-filter` | Filter |
| `fa-user` | `bi-person` | User |
| `fa-users` | `bi-people` | Users |
| `fa-cog` | `bi-gear` | Settings |
| `fa-home` | `bi-house` | Home |
| `fa-check` | `bi-check-lg` | Confirm |
| `fa-times` | `bi-x-lg` | Close/Cancel |
| `fa-arrow-left` | `bi-arrow-left` | Back |

### 6.2 Migration Script Template

```bash
#!/bin/bash

# Replace Font Awesome icons with Bootstrap Icons
find views -name "*.php" -type f ! -path "*/bpmrq/*" -exec sed -i '' \
    -e 's/fa-plus/bi-plus-lg/g' \
    -e 's/fa-edit/bi-pencil/g' \
    -e 's/fa-trash/bi-trash/g' \
    -e 's/fa-eye/bi-eye/g' \
    {} \;
```

---

## 7. Quick Wins (Low Effort, High Impact)

### 7.1 Add aria-label to all close buttons (15 minutes)

```bash
find views -name "*.php" -type f ! -path "*/bpmrq/*" -exec sed -i '' \
    's/<button type="button" class="btn-close" data-bs-dismiss="modal">/<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">/g' \
    {} \;
```

### 7.2 Wrap tables in responsive divs (30 minutes)

Manually review and wrap 13 tables identified in audit.

### 7.3 Standardize button spacing (10 minutes)

Replace `me-2` with `gap-2` on button containers:

```bash
find views -name "*.php" -type f ! -path "*/bpmrq/*" -exec sed -i '' \
    's/<div class="d-flex">/<div class="d-flex gap-2">/g' \
    {} \;
```

---

**Document Version:** 1.0  
**Last Updated:** December 26, 2025  
**Related:** UI_UX_AUDIT_REPORT.md