# Button Standardization Guide

## Overview
This guide explains the standard button layout and styling for forms across the ERP system.

## Button Standards

### 1. Submit Buttons
**Styling**: `btn-primary` (or `btn-outline-theme` for theme consistency)
**Position**: Right side of form
**Purpose**: Primary action (save, create, update, submit)

### 2. Cancel Buttons
**Styling**: `btn-outline-secondary`
**Position**: Left of submit button
**Purpose**: Secondary action (cancel, return without saving)

### 3. Danger/Delete Buttons
**Styling**: `btn-outline-danger`
**Purpose**: Destructive actions (delete, remove, permanently destroy)

### 4. Back Buttons
**Styling**: `btn-outline-theme`
**Position**: Top right of page (in header, separate from form buttons)
**Icon**: `<i class="bi bi-arrow-left me-1"></i>`

## Layout Pattern

### Form Buttons (Bottom of Form)
```php
<div class="d-flex gap-2 justify-content-end mt-3">
    <a href="<?= base_url('previous-page') ?>" class="btn btn-outline-secondary">Cancel</a>
    <button type="submit" class="btn btn-primary">Submit</button>
</div>
```

### Single Submit Button (No Cancel Needed)
```php
<div class="d-flex justify-content-end mt-3">
    <button type="submit" class="btn btn-primary">
        <i class="fas fa-save me-1"></i> Save
    </button>
</div>
```

### With Danger Action
```php
<div class="d-flex gap-2 justify-content-between mt-3">
    <button type="button" class="btn btn-outline-danger" onclick="confirmDelete()">
        <i class="fas fa-trash me-1"></i> Delete
    </button>
    <div class="d-flex gap-2">
        <a href="<?= base_url('list') ?>" class="btn btn-outline-secondary">Cancel</a>
        <button type="submit" class="btn btn-primary">Save Changes</button>
    </div>
</div>
```

## Automated Standardization

### Using the Script

A PHP script is provided to automatically standardize button layouts across all views:

```bash
# Preview changes (dry run)
php scripts/standardize_form_buttons.php --dry-run

# Preview with custom submit class
php scripts/standardize_form_buttons.php --dry-run --submit-class=btn-outline-theme

# Apply changes with btn-primary
php scripts/standardize_form_buttons.php

# Apply changes with btn-outline-theme
php scripts/standardize_form_buttons.php --submit-class=btn-outline-theme
```

### What the Script Does

1. **Aligns submit buttons to the right** - Adds `d-flex justify-content-end` to button containers
2. **Standardizes submit button classes** - Changes all submit buttons to use consistent class
3. **Standardizes cancel button classes** - Changes cancel buttons to `btn-outline-secondary`
4. **Preserves icons and other classes** - Keeps icon classes and other attributes intact

### What the Script Does NOT Do

- Does not handle complex multi-button layouts (these need manual review)
- Does not reorder buttons that are in wrong order (manual fix required)
- Does not touch back buttons in page headers
- Does not modify Action Menu components

### Limitations

The script handles common patterns but cannot catch all variations. After running, you should:

1. **Review the changes** - Use git diff to see what was changed
2. **Test critical forms** - Ensure forms still work correctly
3. **Manual review complex forms** - Some forms may need manual adjustment
4. **Check responsive behavior** - Test on mobile/tablet views

## Manual Standardization

For forms requiring manual adjustment:

### Step 1: Identify Button Section
Look for the button area at the bottom of forms, usually marked with `mt-3` or similar.

### Step 2: Apply Standard Layout
Replace existing button code with standard pattern shown above.

### Step 3: Preserve Functionality
Ensure all onclick handlers, form actions, and URLs are preserved.

### Step 4: Test
- Click each button to ensure it works
- Test keyboard navigation (Tab key)
- Verify on different screen sizes

## UX Best Practices

### Visual Hierarchy
- Primary action should be visually prominent (solid color)
- Secondary/cancel actions should be less prominent (outline)
- Danger actions should be clearly marked (red)

### Button Order (Left to Right)
1. Danger actions (if present, far left)
2. Cancel/secondary (left of primary)
3. Primary/submit (far right)

### Spacing
- Use `gap-2` or `gap-3` for spacing between buttons
- Use `mt-3` for spacing above button row

### Alignment
- Form buttons: Right-aligned (`justify-content-end`)
- Mixed danger + actions: `justify-content-between`

### Mobile Considerations
For mobile, buttons may stack vertically. Consider:
```php
<div class="d-flex flex-column flex-md-row gap-2 justify-content-md-end mt-3">
    <a href="..." class="btn btn-outline-secondary">Cancel</a>
    <button type="submit" class="btn btn-primary">Submit</button>
</div>
```

## Common Patterns by Module

### Create Forms
```php
<div class="d-flex gap-2 justify-content-end mt-3">
    <a href="<?= base_url('module') ?>" class="btn btn-outline-secondary">Cancel</a>
    <button type="submit" class="btn btn-primary">
        <i class="fas fa-plus me-1"></i> Create
    </button>
</div>
```

### Edit Forms
```php
<div class="d-flex gap-2 justify-content-end mt-3">
    <a href="<?= base_url('module/view/' . $id) ?>" class="btn btn-outline-secondary">Cancel</a>
    <button type="submit" class="btn btn-primary">
        <i class="fas fa-save me-1"></i> Save Changes
    </button>
</div>
```

### Filter/Search Forms
```php
<div class="d-flex justify-content-end mt-3">
    <button type="submit" class="btn btn-primary">
        <i class="fas fa-search me-1"></i> Search
    </button>
</div>
```

### Delete Confirmation
```php
<div class="d-flex gap-2 justify-content-end mt-3">
    <a href="<?= base_url('module') ?>" class="btn btn-outline-secondary">Cancel</a>
    <button type="submit" class="btn btn-danger">
        <i class="fas fa-trash me-1"></i> Confirm Delete
    </button>
</div>
```

## Exceptions

### Action Menu Pages
Pages using the Action Menu component should continue using that system. The Action Menu handles button organization differently.

### Modal Forms
Modal forms may have different button placement (often in modal footer). Follow Bootstrap modal conventions.

### Inline Forms
Small inline forms (like quick add) may use different layouts based on space constraints.

## Migration Checklist

When standardizing a view file:

- [ ] Buttons are right-aligned
- [ ] Submit button uses consistent class
- [ ] Cancel button is `btn-outline-secondary`
- [ ] Cancel is left of submit
- [ ] Icons are preserved
- [ ] Links/actions still work
- [ ] Form validation still works
- [ ] Tested on desktop
- [ ] Tested on mobile
- [ ] Git diff reviewed

## Questions?

If you're unsure about button styling for a specific case:
1. Check existing standardized pages for reference
2. Follow the general pattern: less prominent left, more prominent right
3. When in doubt, use the standard create/edit form pattern