Add Information Dialog for Rules Explanation

[joshdimanteto]

Description

Implement an information dialog that explains how the rules work and provides clear examples.
The dialog should follow a similar style and layout to the images information dialog for consistency in the UI.

Requirements

• Match the visual design and behavior of the images info dialog.
• Include a short, plain-language explanation of what rules are and how they affect system/usage status changes.
• Provide at least 2–3 concrete examples, ideally mirroring real-world rule configurations from our data.
• Ensure responsive design and accessibility (keyboard navigation, ARIA labels).

Example Content Outline

1. What are rules?
   Brief explanation of the purpose of rules.

2. How they work:
   Step-by-step explanation of the logic.

3. Examples:

   • Example 1: Storage → Operational → "In Use"
   • Example 2: Operational → Scrapped → "Scrapped"

Acceptance Criteria

• Dialog is accessible from the rules page (e.g., via an info icon button).
• Content is clear, concise, and easy to understand.
• Matches style and format of images info dialog.