Design a modern, responsive user interface for an energy consumption data query and comparison tool. The layout should be modular, visually clean, and intuitive. Use standard UI components such as dropdowns, radio buttons, calendars, charts, and tables with clearly defined user flows and conditional visibility.

---

Header Section: Title: "Energy Consumption Data Viewer"

---

Step 1 – Select Time Period Type: Display a horizontal radio button group titled "Time Period" with the following options:

• Daily
• Monthly (default)
• Yearly

---

Step 2 – Date Input Based on Time Period:

• If "Daily" is selected:

  • Show a calendar input to select a single date (default: yesterday)

• If "Monthly" is selected:

  • Show a searchable dropdown labeled "Select Month" including the last 24 months (up to 2 years back, default: previous month)

• If "Yearly" is selected:

  • Show a dropdown labeled "Select Year" with up to the last 5 years (no additional comparison options)

---

Step 3 – Analysis Options (only for Daily and Monthly): Show a vertical radio button group titled "Analysis Options":

• No Analysis (Single Period)
• Compare with Past Periods (10 days for Daily, 6 months for Monthly)
• Compare with Average Consumption
• Compare with Similar Consumer Profile

Only one option can be selected at a time.

---

Step 4 – Action Button:

• Display a disabled “Query” button initially.
• Once a valid time period + date + analysis option is selected, enable the button.

---

Step 5 – Results Area (After Query Button is Clicked):

• Show a default Bar Chart of results

• Right above the chart, include a dropdown toggle to switch between:

  • Chart View (default)
  • Table View

• If comparison is active:

  • Display results in colored bars (each day/month/year in a unique color)
  • Include a legend below the chart showing what each color represents

• If “Compare with Average” or “Similar Consumer” is selected:

  • Add additional bars to each unit (e.g., personal vs. city avg vs. district avg)

---

Step 6 – Time Resolution Options (Below Chart/Table):

• Show a horizontal radio button group titled "Time Resolution":

  • Single Tariff (default)
  • Multi-Tariff (Day / Peak / Night)

• When Multi-Tariff is selected:

  • Each bar should be split into 3 segments (stacked bar for Day, Peak, Night)
  • This mode disables past-period comparisons

---

Additional UI Elements:

• "Clear All" Button:

  • Displayed at the bottom-right of the configuration area or top of results section
  • On click: reset all filters and return user to Step 1

• Export Options (visible after results load):

  • Two buttons: Export as Excel (.xlsx) and Export as PDF (.pdf)
  • Exported file should reflect the current view and all selected breakdowns (daily/monthly, tariffs, comparison type)

---

Error & No Data Handling (Modal or Inline Messages):

• If no hourly data:
  “Hourly data is not available for your selected meter.”

• If average data missing:
  “Your distribution company has not provided average consumption data.”

• If generation meter selected:
  “Average comparison is not applicable for generation meters.”

---

Design Guidelines:

• Apply modern UI principles (rounded components, subtle shadows, clear visual hierarchy)
• Ensure mobile/tablet responsiveness with adaptive layouts
• Use collapsible panels or stepper UI for query configuration
• Maintain high accessibility and clarity for all components

Design a responsive and modern energy consumption data query interface for residential users. The interface should support period-based querying (daily, monthly, yearly) with optional analysis and comparison layers. Apply clean UX/UI practices: clear input hierarchy, dynamic state changes, and minimal cognitive load.

---

🧭 Section 1 – Time Selection Panel

1. Add a horizontal radio button group labeled “Time Period Type” with 3 options:

   • Daily
   • Monthly (default selected)
   • Yearly

2. Based on selection, dynamically show:

   • If Monthly is selected:

     • Show a dropdown labeled “Select Month”, containing the last 24 months (from current month, descending).
     • Default: Previous month (T-1).
     • Allow selection of only one month.

   • If Daily is selected:

     • Show a calendar input with single-day selection.
     • Default: Previous day (T-1).

   • If Yearly is selected:

     • Show a dropdown labeled “Select Year” (current year to last 5 years).
     • Once selected, system shows all 12 months of that year as output.
     • No analysis options are available for this mode.

---

📊 Section 2 – Analysis Options (Daily & Monthly Only)

Below the date selection, display a vertical radio button group titled “Analysis Type”. Only one option may be selected:

• No Analysis (Single Value)

• Compare with Past 6 Periods

  • For monthly: shows 6 months; for daily: last 10 days
  • Use distinct colors for each bar
  • Highlight the selected period (e.g., current month) in a different color

• Compare with Average Consumption

  • Shows one comparison value for same period (e.g., April 2025)

• Compare with Similar Consumers

  • Show grouped bars for:
    • User
    • City Average
    • District Average
  • Grouped bars should appear side-by-side for each period
  • Colors must distinguish each group clearly

---

🔍 Section 3 – Query Trigger and Control

• Add a “Query” button, initially disabled.

• Enable the button once:

  • A time period is selected
  • A date/month/year is selected
  • An analysis option is selected

• Include a “Clear All” button (bottom-right or near top)

  • Resets interface to default state

---

📈 Section 4 – Results Display Panel

• Display results in bar chart view by default.

  • Show a dropdown toggle (top-right of result panel) to switch:
    • Chart View
    • Table View

• If "Compare with Past 6 Periods" is selected:

  • Show multiple bars with different colors
  • Highlight the selected period’s bar

• If "Average" or "Similar Consumer" selected:

  • For the selected period, show multiple adjacent bars:
    • User / Avg / City / District
  • Tooltip or hover interaction should explain values
  • Optionally allow clicking legend to show/hide groups

---

⏱️ Section 5 – Time Resolution Controls

• For daily and monthly:

  • Below the result, add a radio button group:
    • Single Tariff (default)
    • Multi-Tariff (Day / Peak / Night)

• If multi-tariff is selected:

  • Split bars into 3 segments (stacked or grouped)
  • Disable comparison mode (only current period shown)
  • Label each tariff band clearly
  • Do not display multi-tariff for yearly

---

📤 Section 6 – Export Options

• Below the result section, add:

  • Export as Excel (.xlsx)
  • Export as PDF

• The exported data should reflect:

  • Time resolution (daily/monthly)
  • Analysis type
  • Tariff breakdown (if enabled)
  • Allow system to offer all breakdowns if user requests

---

⚠️ Section 7 – Error & Data Unavailability Handling

Trigger popups or banners when:

• No hourly data:
  “Hourly data is not available for your selected meter.”

• No average data:
  “Your distribution company has not provided average consumption data.”

• Generation meter used:
  “Average comparisons are not applicable for generation meters.”

---

🎨 Visual & UX Rules

• Use distinctive colors to represent:

  • Selected period
  • Other past periods
  • Group categories (user / avg / similar users)

• Use responsive card layout with clear sections:

  • Inputs (top)
  • Analysis options (middle)
  • Output view (bottom)
  • Controls (right-aligned bottom)

• Tooltips on hover, clear axis titles, and legends

• Chart libraries must support stacked/grouped/colored bar charts

• Default to tabular format if no comparison selected

• Yearly view: only monthly bars of selected year, no comparison allowed

---

🧩 Use component tags in V0 such as:

• RadioGroup, Dropdown, DatePicker, BarChart, Table, Button, Card, ExportButtons, Tooltip, Modal, Legend, SegmentedControl, Grid, Label, Tabs