type: vertical-stack
title: 🛡️ AdGuard Control Hub
cards:
  # Status Overview
  - type: glance
    title: Protection Status
    columns: 4
    entities:
      - entity: switch.adguard_protection
        name: Protection
        tap_action:
          action: toggle
      - entity: sensor.adguard_blocked_percentage
        name: Block Rate
        icon: mdi:percent
      - entity: sensor.adguard_queries_today
        name: Queries Today
        icon: mdi:dns
      - entity: sensor.adguard_blocked_today
        name: Blocked Today
        icon: mdi:block-helper

  # Quick Statistics
  - type: statistics-graph
    title: DNS Activity (24h)
    chart_type: line
    period: hour
    stat_types:
      - sum
    entities:
      - sensor.adguard_queries_today
      - sensor.adguard_blocked_today

  # Device Controls
  - type: entities
    title: Network Devices
    show_header_toggle: false
    entities:
      - type: section
        label: "Family Devices"
      - entity: switch.adguard_client_kids_ipad
        name: "Kids iPad"
        icon: mdi:tablet
        secondary_info: last-updated
      - entity: switch.adguard_client_kids_laptop
        name: "Kids Laptop"
        icon: mdi:laptop
        secondary_info: last-updated

      - type: section
        label: "Work Devices"
      - entity: switch.adguard_client_work_laptop
        name: "Work Laptop"
        icon: mdi:briefcase
        secondary_info: last-updated

      - type: section
        label: "Smart Home"
      - entity: switch.adguard_client_living_room_tv
        name: "Living Room TV"
        icon: mdi:television
        secondary_info: last-updated

  # Emergency Controls
  - type: horizontal-stack
    cards:
      - type: button
        name: "🚨 Emergency Unblock"
        icon: mdi:shield-off-outline
        tap_action:
          action: call-service
          service: adguard_hub.emergency_unblock
          service_data:
            duration: 600
            clients: ["all"]
        hold_action:
          action: more-info

👨‍👩‍👧‍👦 Family Control Dashboard

Specialized dashboard for managing kids' internet access.

Kids Internet Control

type: vertical-stack
title: 👪 Family Internet Control
cards:
  # Family Status Overview
  - type: glance
    title: Family Devices Status
    columns: 3
    entities:
      - entity: switch.adguard_client_kids_ipad
        name: "iPad"
        tap_action:
          action: toggle
      - entity: switch.adguard_client_kids_laptop
        name: "Laptop"
        tap_action:
          action: toggle
      - entity: switch.adguard_client_kids_phone
        name: "Phone"
        tap_action:
          action: toggle

  # Parental Control Features
  - type: entities
    title: Parental Controls
    show_header_toggle: false
    entities:
      - entity: switch.adguard_client_kids_ipad_parental
        name: "Parental Control - iPad"
        icon: mdi:account-child
      - entity: switch.adguard_client_kids_ipad_safesearch
        name: "Safe Search - iPad"
        icon: mdi:search-web
      - entity: switch.adguard_client_kids_ipad_safebrowsing
        name: "Safe Browsing - iPad"
        icon: mdi:shield-check

  # Service Blocking Controls
  - type: entities
    title: Content Blocking - Kids iPad
    show_header_toggle: false
    entities:
      - type: section
        label: "Entertainment"
      - entity: switch.adguard_client_kids_ipad_service_youtube
        name: "Block YouTube"
        icon: mdi:youtube
      - entity: switch.adguard_client_kids_ipad_service_netflix
        name: "Block Netflix"
        icon: mdi:netflix
      - entity: switch.adguard_client_kids_ipad_service_disney_plus
        name: "Block Disney+"
        icon: mdi:disney

      - type: section
        label: "Social Media"
      - entity: switch.adguard_client_kids_ipad_service_tiktok
        name: "Block TikTok"
        icon: mdi:music-note
      - entity: switch.adguard_client_kids_ipad_service_instagram
        name: "Block Instagram"
        icon: mdi:instagram
      - entity: switch.adguard_client_kids_ipad_service_snapchat
        name: "Block Snapchat"
        icon: mdi:snapchat

      - type: section
        label: "Gaming"
      - entity: switch.adguard_client_kids_ipad_service_roblox
        name: "Block Roblox"
        icon: mdi:gamepad-variant
      - entity: switch.adguard_client_kids_ipad_service_gaming
        name: "Block Gaming Services"
        icon: mdi:controller-classic

  # Quick Action Buttons
  - type: grid
    title: Quick Actions
    square: false
    columns: 2
    cards:
      - type: button
        name: "📚 Study Mode"
        icon: mdi:book-open-variant
        tap_action:
          action: call-service
          service: adguard_hub.block_services
          service_data:
            client_name: "Kids iPad"
            services: ["social", "entertainment", "gaming"]
        card_mod:
          style: |
            ha-card {
              background: linear-gradient(45deg, #2196F3, #21CBF3);
              color: white;
            }

      - type: button
        name: "🎮 Free Time"
        icon: mdi:play-circle
        tap_action:
          action: call-service
          service: adguard_hub.unblock_services
          service_data:
            client_name: "Kids iPad"
            services: ["entertainment"]
        card_mod:
          style: |
            ha-card {
              background: linear-gradient(45deg, #4CAF50, #8BC34A);
              color: white;
            }

      - type: button
        name: "😴 Bedtime"
        icon: mdi:sleep
        tap_action:
          action: call-service
          service: adguard_hub.block_services
          service_data:
            client_name: "Kids iPad"
            services: ["social", "entertainment", "gaming"]
        card_mod:
          style: |
            ha-card {
              background: linear-gradient(45deg, #9C27B0, #673AB7);
              color: white;
            }

      - type: button
        name: "✅ Allow All"
        icon: mdi:check-circle
        tap_action:
          action: call-service
          service: adguard_hub.unblock_services
          service_data:
            client_name: "Kids iPad"
            services: ["social", "entertainment", "gaming"]
        card_mod:
          style: |
            ha-card {
              background: linear-gradient(45deg, #FF9800, #FF5722);
              color: white;
            }

💼 Work Productivity Dashboard

Control work devices and eliminate distractions during work hours.

Work Focus Dashboard

type: vertical-stack
title: 💼 Work Productivity Control
cards:
  # Work Status
  - type: entities
    title: Work Environment
    show_header_toggle: false
    entities:
      - entity: switch.adguard_client_work_laptop
        name: "Work Laptop Protection"
        icon: mdi:laptop
      - entity: binary_sensor.adguard_client_work_laptop_online
        name: "Work Laptop Online"
        icon: mdi:lan-connect
      - entity: sensor.adguard_client_work_laptop_queries
        name: "DNS Queries Today"
        icon: mdi:dns

  # Distraction Controls
  - type: entities
    title: Distraction Blocking
    show_header_toggle: false
    entities:
      - entity: switch.adguard_client_work_laptop_service_facebook
        name: "Block Facebook"
        icon: mdi:facebook
      - entity: switch.adguard_client_work_laptop_service_twitter
        name: "Block Twitter"
        icon: mdi:twitter
      - entity: switch.adguard_client_work_laptop_service_youtube
        name: "Block YouTube"
        icon: mdi:youtube
      - entity: switch.adguard_client_work_laptop_service_reddit
        name: "Block Reddit"
        icon: mdi:reddit
      - entity: switch.adguard_client_work_laptop_service_netflix
        name: "Block Netflix"
        icon: mdi:netflix

  # Focus Mode Controls
  - type: grid
    title: Focus Modes
    square: false
    columns: 3
    cards:
      - type: button
        name: "🧠 Deep Focus"
        icon: mdi:brain
        tap_action:
          action: call-service
          service: adguard_hub.block_services
          service_data:
            client_name: "Work Laptop"
            services: ["social", "entertainment", "gaming"]

      - type: button
        name: "☕ Break Time"
        icon: mdi:coffee
        tap_action:
          action: call-service
          service: adguard_hub.emergency_unblock
          service_data:
            duration: 900  # 15 minutes
            clients: ["Work Laptop"]

      - type: button
        name: "👔 Normal Mode"
        icon: mdi:account-tie
        tap_action:
          action: call-service
          service: adguard_hub.unblock_services
          service_data:
            client_name: "Work Laptop"
            services: ["social"]

🏠 Guest Network Dashboard

Manage guest access and apply appropriate restrictions.

Guest Control Panel

type: vertical-stack
title: 🌐 Guest Network Management
cards:
  # Guest Status
  - type: entities
    title: Guest Network
    show_header_toggle: false
    entities:
      - entity: switch.adguard_client_guest_network
        name: "Guest Protection"
        icon: mdi:wifi-strength-4
      - entity: binary_sensor.adguard_client_guest_network_active
        name: "Guest Network Active"
        icon: mdi:account-group

  # Guest Restrictions
  - type: entities
    title: Guest Access Controls
    show_header_toggle: false
    entities:
      - entity: switch.adguard_client_guest_network_service_adult
        name: "Block Adult Content"
        icon: mdi:shield-account
      - entity: switch.adguard_client_guest_network_service_gambling
        name: "Block Gambling"
        icon: mdi:cards-playing-outline
      - entity: switch.adguard_client_guest_network_service_torrents
        name: "Block Torrents"
        icon: mdi:download-network

  # Quick Guest Modes
  - type: horizontal-stack
    cards:
      - type: button
        name: "🔓 Open Access"
        icon: mdi:wifi-check
        tap_action:
          action: call-service
          service: adguard_hub.update_client
          service_data:
            name: "Guest Network"
            blocked_services: []

      - type: button
        name: "🛡️ Safe Mode"
        icon: mdi:shield-check
        tap_action:
          action: call-service
          service: adguard_hub.update_client
          service_data:
            name: "Guest Network"
            blocked_services: ["adult", "gambling", "torrents"]
            parental_enabled: true
            safebrowsing_enabled: true

📊 Statistics Dashboard

Monitor your network activity and blocking effectiveness.

Network Analytics

type: vertical-stack
title: 📊 Network Analytics
cards:
  # Key Metrics
  - type: glance
    title: Today's Statistics
    columns: 4
    entities:
      - entity: sensor.adguard_queries_today
        name: "Total Queries"
        icon: mdi:dns
      - entity: sensor.adguard_blocked_today
        name: "Blocked"
        icon: mdi:block-helper
      - entity: sensor.adguard_blocked_percentage
        name: "Block Rate"
        icon: mdi:percent
      - entity: binary_sensor.adguard_filtering_enabled
        name: "Filtering"
        icon: mdi:filter

  # Query History
  - type: history-graph
    title: DNS Queries (24 Hours)
    hours_to_show: 24
    refresh_interval: 60
    entities:
      - sensor.adguard_queries_today
      - sensor.adguard_blocked_today

  # Client Activity
  - type: entities
    title: Most Active Clients
    show_header_toggle: false
    entities:
      - entity: sensor.adguard_client_kids_ipad_queries
        name: "Kids iPad"
        icon: mdi:tablet
        secondary_info: entity-id
      - entity: sensor.adguard_client_work_laptop_queries
        name: "Work Laptop"
        icon: mdi:laptop
        secondary_info: entity-id
      - entity: sensor.adguard_client_living_room_tv_queries
        name: "Living Room TV"
        icon: mdi:television
        secondary_info: entity-id

  # System Health
  - type: entities
    title: System Status
    show_header_toggle: false
    entities:
      - entity: binary_sensor.adguard_filtering_enabled
        name: "DNS Filtering"
        icon: mdi:dns
      - entity: switch.adguard_protection
        name: "Protection Status"
        icon: mdi:shield
      - type: attribute
        entity: switch.adguard_protection
        attribute: sw_version
        name: "AdGuard Version"
        icon: mdi:information

📱 Mobile-Optimized Dashboard

Simplified controls perfect for mobile devices.

Mobile Quick Controls

type: vertical-stack
title: 🛡️ AdGuard Mobile
cards:
  # Emergency Button
  - type: button
    name: "🚨 EMERGENCY UNBLOCK"
    icon: mdi:shield-off
    tap_action:
      action: call-service
      service: adguard_hub.emergency_unblock
      service_data:
        duration: 600
        clients: ["all"]
    hold_action:
      action: call-service
      service: adguard_hub.emergency_unblock
      service_data:
        duration: 300  # 5 minutes on hold
        clients: ["all"]
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, #f44336, #e91e63);
          color: white;
          font-weight: bold;
          font-size: 18px;
          height: 80px;
        }

  # Device Quick Toggle
  - type: glance
    title: Family Devices
    columns: 2
    show_name: true
    show_state: false
    entities:
      - entity: switch.adguard_client_kids_ipad
        name: "Kids iPad"
        tap_action:
          action: toggle
      - entity: switch.adguard_client_kids_laptop
        name: "Kids Laptop"
        tap_action:
          action: toggle
      - entity: switch.adguard_client_work_laptop
        name: "Work"
        tap_action:
          action: toggle
      - entity: switch.adguard_client_guest_network
        name: "Guests"
        tap_action:
          action: toggle

  # Quick Actions
  - type: grid
    columns: 2
    square: false
    cards:
      - type: button
        name: "Block Gaming"
        icon: mdi:gamepad-variant-outline
        tap_action:
          action: call-service
          service: adguard_hub.block_services
          service_data:
            client_name: "Kids iPad"
            services: ["gaming", "roblox"]

      - type: button
        name: "Block Social"
        icon: mdi:account-group-outline
        tap_action:
          action: call-service
          service: adguard_hub.block_services
          service_data:
            client_name: "Kids iPad"
            services: ["social", "tiktok", "instagram"]

🎨 Custom Styling with card-mod

Enhance your dashboards with custom CSS styling.

Styled Emergency Button

type: button
name: "🚨 EMERGENCY ACCESS"
icon: mdi:shield-off-outline
tap_action:
  action: call-service
  service: adguard_hub.emergency_unblock
  service_data:
    duration: 600
    clients: ["all"]
card_mod:
  style: |
    ha-card {
      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
      border: 2px solid #c44569;
      color: white;
      font-weight: bold;
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 1px;
      box-shadow: 0 8px 16px rgba(238, 90, 36, 0.3);
      transition: all 0.3s ease;
    }
    ha-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 24px rgba(238, 90, 36, 0.4);
    }
    ha-card:active {
      transform: translateY(0);
    }

Protection Status with Color

type: entity
entity: switch.adguard_protection
card_mod:
  style: |
    ha-card {
      background: {% if is_state('switch.adguard_protection', 'on') %}
        linear-gradient(45deg, #4CAF50, #8BC34A)
      {% else %}
        linear-gradient(45deg, #f44336, #ff5722)
      {% endif %};
      color: white;
      font-weight: bold;
    }

📐 Layout Tips

Responsive Design

Use different dashboard layouts for different screen sizes:

Desktop: Vertical stacks with multiple columns
Tablet: Mixed horizontal and vertical stacks
Mobile: Single column with large touch targets

Organization Best Practices

Group related controls together
Use sections to separate different areas
Add icons for visual clarity
Use consistent colors for similar functions
Provide visual feedback for actions

Next: Set up Automation Examples to make your network truly smart!