Enhancing Dashboard Interactivity: Clickable Stat Cards for Dynamic Filtering in PQRS

Project Context

The pqrs project focuses on managing various types of requests or cases, often called 'radicados'. Our goal was to improve the usability of the dashboard, making it easier for users to quickly filter and view radicados based on their status.

The Challenge

Previously, the pqrs dashboard presented a clear overview of radicados through various statistical cards (e.g., "pending", "completed", "overdue"). However, interacting with this data required users to manually select filters from dropdowns or input fields, a process that felt disconnected from the visual summary provided by the cards. Users wanted a more intuitive way to dive into the data directly from the dashboard's visual cues. Specifically, they needed to click a "pending" card and immediately see only pending radicados.

The Solution

We implemented a feature that transforms these static dashboard cards into interactive filter triggers. By adding simple JavaScript click handlers and data attributes, each card now acts as a shortcut to filter the underlying list of radicados by its corresponding status. This also included special handling for a computed "overdue" state (vencida), which required backend logic to define and apply the filter dynamically.

// app/Http/Controllers/RadicadoController.php
class RadicadoController extends Controller
{
    public function index(Request $request)
    {
        $query = Radicado::query();

        // Apply 'estado' filter if provided
        if ($request->has('estado')) {
            $query->where('estado', $request->input('estado'));
        }

        // Apply 'vencida' (overdue) filter if true
        if ($request->boolean('vencida')) {
            $query->where('fecha_limite', '<', now())
                  ->whereNotIn('estado', ['Completado', 'Cancelado']); // Example overdue logic
        }

        // Other filters...

        $radicados = $query->paginate(15);

        return view('radicados.index', compact('radicados'));
    }
}

Key Decisions

1. Frontend Interactivity: Each of the seven dashboard cards received cursor-pointer styling and data-estado attributes, allowing JavaScript to easily identify and process clicks.
2. Dynamic Overdue State: A specific data-vencida="true" attribute and a hidden input were introduced for the "overdue" card. This required a computed condition on the backend to accurately identify radicados past their deadline, considering their current status.
3. Backend Filter Integration: The controller and model were updated to gracefully handle both estado (status) and vencida (overdue) parameters, applying the appropriate database queries to filter the radicados list.
4. Comprehensive Filter Reset: The "Clear Filters" functionality was enhanced to ensure the vencida state was also reset, preventing persistent unintended filters.

Results

This enhancement significantly improved the user experience on the pqrs dashboard. Users can now intuitively navigate and filter radicados with a single click, reducing the steps required to access specific information. This direct interaction makes the dashboard more dynamic and responsive, leading to quicker insights and more efficient management of cases.

Lessons Learned

Integrating frontend visual components directly with backend filtering logic can drastically enhance user experience. It's crucial to consider not just the "happy path" for filtering but also edge cases like computed states (e.g., "overdue") and how filter resets affect all active parameters. Always strive to make dashboards not just informative, but also interactive and actionable.

Generated with Gitvlg.com