# HTMX Pagination Solution for Stats Dashboard

## Problem

The stats dashboard loads content dynamically via HTMX, but pagination links
within the loaded content were causing full page reloads instead of updating
only the relevant div content.

## Solution Overview

We implemented a comprehensive solution that includes:

1. **Custom HTMX Pagination Template**: Created a specialized pagination view
   that uses HTMX attributes
2. **Enhanced StatsManager**: Updated the JavaScript class to properly process
   HTMX elements
3. **Loading Indicators**: Added visual feedback during pagination requests
4. **CSS Styling**: Proper styling for loading states

## Files Modified

### 1. Custom Pagination Template

**File**: `resources/views/vendor/pagination/htmx-bootstrap-5.blade.php`

- Custom Bootstrap 5 pagination template with HTMX attributes
- Uses `hx-get`, `hx-target`, `hx-swap`, and `hx-indicator` attributes
- Targets the closest element with `[data-loaded]` attribute (the stat content
  div)
- Includes loading indicators for better UX

### 2. Stats Components Updated

**Files**:

- `resources/views/pages/admin/dashboard/stats/components/models/outliers.blade.php`
- `resources/views/pages/admin/dashboard/stats/components/ddpAccuracy/ddpAccuracy.blade.php`

Changes:

- Updated `links()` calls to use the custom HTMX pagination template
- Removed manual HTMX attributes that were conflicting

### 3. Main Stats Dashboard Template

**File**: `resources/views/pages/admin/dashboard/stats/index.blade.php`

- Added HTMX loading indicators to each stat card
- Enhanced the stat card structure with proper positioning for overlays

### 4. JavaScript StatsManager

**File**: `resources/js/admin/dashboard/stats.ts`

- Enhanced HTMX interface definition to include `process` method
- Simplified pagination handling to rely on HTMX attributes
- Added proper HTMX processing after content loads

### 5. CSS Styling

**File**: `resources/css/dashboard.css`

- Added styles for HTMX loading indicators
- Proper positioning and visibility controls

## How It Works

1. **Initial Load**: StatsManager loads content into stat divs using HTMX
2. **Pagination Detection**: Custom pagination template automatically adds HTMX
   attributes to all pagination links
3. **Click Handling**: When a pagination link is clicked:
   - HTMX prevents the default page navigation
   - Shows loading indicator
   - Fetches the new page content
   - Swaps only the content of the target div
   - Processes any new HTMX elements in the loaded content

## Key HTMX Attributes Used

- `hx-get`: The URL to fetch
- `hx-target="closest [data-loaded]"`: Targets the closest parent with
  data-loaded attribute (the stat content div)
- `hx-swap="innerHTML"`: Replaces the inner content
- `hx-indicator="closest .stat-card .htmx-indicator"`: Shows loading indicator
  during request

## Benefits

1. **No Page Reloads**: Pagination updates only the relevant content div
2. **Better UX**: Loading indicators provide visual feedback
3. **Maintains State**: Other stats remain loaded and visible
4. **Automatic**: Works with any paginated content in stats components
5. **Reusable**: The pagination template can be used in other parts of the
   application

## Usage

To use this pagination in other stats components:

```php
{{ $yourPaginatedData->appends(request()->input())->links('vendor.pagination.htmx-bootstrap-5') }}
```

Make sure the paginated content is within a div that has the `data-loaded`
attribute, which is automatically provided by the stats dashboard structure.