# Browse Product List

<!-- User story defining a specific requirement within a business flow.
The name of the story should start with the actor followed by `--` and the story name.
 -->

<!-- This section should contain the following subsections in order: -->
<!-- 1. ## User Story (required) -->
<!-- 2. ## Story Diagram (required) -->
<!-- 3. ## Scenario Patterns (required) -->
<!-- 4. ## Test Cases (required) -->
<!-- 5. ## Screens (required) -->
<!-- 6. ## Resolvers (required) -->

## User Story

<!-- Define the user story in the format:
As a [role], I want [goal], so that [benefit].
 -->

As a product manager, I want to browse a paginated list of products filtered by status, so that I can find and manage the products I need to work on.

## Story Diagram

<!-- Mermaid flowchart showing user interactions with screens.
Focus on actors, UI screens, and business outcomes.
Avoid technical details (APIs, databases, endpoints).
 -->

<!-- Code block requirements: -->
<!-- Minimum 1 mermaid code blocks required -->

```mermaid
flowchart TD
    A([Product Manager]) --> B[Product List Screen]
    B --> C{Apply Filter?}
    C -- Filter by Status --> D[Filtered Product List]
    C -- No Filter --> E[All Products List]
    D --> F{Navigate Pages?}
    E --> F
    F -- Next/Prev Page --> B
    F -- Select Product --> G[Product Detail Screen]
```

## Scenario Patterns

<!-- List requirements: -->
<!-- Minimum 1 unordered lists required -->
<!-- Minimum 1 items per list -->

- Product manager opens the product list and sees a paginated list of all products.
- Product manager filters the list by status (DRAFT, ACTIVE, or ARCHIVED) and sees only matching products.
- Product manager navigates between pages of results.
- Product manager selects a product from the list to view its detail.

## Test Cases

<!-- List requirements: -->
<!-- Minimum 1 items per list -->

- Given products exist, when the list screen is opened, then products are displayed in a paginated view.
- Given a status filter is applied, when the list is rendered, then only products with that status are shown.
- Given multiple pages of results, when the next page is requested, then the next set of products is displayed.

## Screens

<!-- Link to screen docs that implement this story's UI.
 -->

<!-- List requirements: -->
<!-- Minimum 1 unordered lists required -->
<!-- Minimum 1 items per list -->

- [product-list](../../../screen/product-list.md)

## Resolvers

<!-- Link to resolver docs that implement this story's backend operations.
Write "None" if this story does not require any resolvers.
 -->

<!-- List requirements: -->
<!-- Minimum 1 items per list -->

- None
