Home-Assistant/dashboards/views/family-hub-dashboard.yaml

# Family Hub — wall panel
#
# Styled with the CubeCraft Creations display system; see
# dashboards/views/at-a-glance-dashboard.yaml for the motif notes and
# themes/cubecraft.yaml for the tokens. Everything brand-coloured here comes
# through --cc-* variables rather than a literal hex.
title: Family Hub
theme: cubecraft
views:
  - title: Family Hub
    path: family-hub
    icon: mdi:home-heart
    theme: cubecraft
    type: masonry
    cards:
      # ── Brand greeting bar ──
      # The production card's `.title` treatment, carrying the date and a
      # time-of-day greeting instead of a board name.
      - type: markdown
        content: |
          # {{ now().strftime("%A, %B %d") }}
          {% set h = now().hour %}
          ## {% if h < 12 %}Good morning{% elif h < 17 %}Good afternoon{% else %}Good evening{% endif %}, family!
        entity_id:
          - sensor.time
        card_mod:
          style: |
            ha-card {
              background: var(--cc-gradient);
              color: #fff;
              border: none;
              border-radius: var(--cc-radius-brand);
              box-shadow: var(--cc-shadow-brand);
              padding: 6px 12px;
              text-align: center;
            }
            ha-card h1 {
              margin: 0;
              font-size: 1rem;
              font-weight: 600;
              letter-spacing: 0.02em;
              opacity: 0.85;
              color: #fff;
            }
            ha-card h2 {
              margin: 2px 0 0 0;
              font-size: 1.75rem;
              font-weight: 800;
              letter-spacing: -0.01em;
              color: #fff;
            }

      # ── Clock ──
      # Left on the sunken surface rather than a card, so the gradient bar above
      # stays the only heavyweight element in the column.
      - type: clock
        clock_size: large
        clock_style: analog
        show_seconds: true
        no_background: true
        analog_options:
          border: false
          ticks: hour
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
              box-shadow: none;
              text-align: center;
            }

      # ── Weather ──
      - type: weather-forecast
        entity: weather.home
        name: Weather
        show_forecast: true
        forecast_type: daily
        secondary_info_attribute: extrema
        round_temperature: false

      # ── Family Calendar ──
      - type: calendar
        title: Upcoming Events
        initial_view: listWeek
        entities:
          - calendar.family_events
          - calendar.birthdays
          - calendar.holidays_in_united_states
          - calendar.gmail_calendar
        card_mod:
          style: |
            ha-card {
              --calendar-day-color: var(--cc-text, var(--primary-text-color));
              --calendar-day-weekday-color: var(--cc-text-muted, var(--secondary-text-color));
              --fc-today-bg-color: var(--cc-accent-soft);
              --fc-event-bg-color: var(--cc-accent);
              --fc-event-border-color: var(--cc-accent);
            }

      # ── Quick Glance ──
      - type: heading
        heading: Quick Status
        heading_style: title
        icon: mdi:home-lightning-bolt-outline
        badges:
          - type: entity
            entity: sensor.openweathermap_temperature
            name: Outside
          - type: entity
            entity: sensor.living_room_temperature
            name: Living Room
          - type: entity
            entity: sensor.office_temperature
            name: Office
        card_mod: &cc_section
          style: |
            ha-card {
              background: none;
              border: none;
              box-shadow: none;
              padding: 0;
              margin: 4px 0 -4px 0;
            }
            ha-card .heading,
            ha-card .content p,
            ha-card p {
              text-transform: uppercase;
              letter-spacing: 0.05em;
              font-weight: 700;
              font-size: 0.9375rem;
              color: var(--cc-text-muted, var(--secondary-text-color));
            }
            ha-card ha-icon,
            ha-card ha-svg-icon {
              color: var(--cc-accent, var(--primary-color));
            }

      - type: grid
        columns: 3
        square: false
        cards:
          # Temperatures are informational, so they all take the brand rule
          # rather than a colour each — see the colour note in at-a-glance.
          - type: tile
            entity: sensor.openweathermap_temperature
            name: Outside
            icon: mdi:thermometer
            show_entity_picture: false
            color: primary
            card_mod: &cc_tile
              style: |
                ha-card {
                  border-radius: var(--cc-radius-md);
                  border-left: 4px solid var(--cc-accent);
                  box-shadow: var(--cc-shadow-sm);
                }
          - type: tile
            entity: sensor.living_room_temperature
            name: Living Room
            icon: mdi:sofa
            show_entity_picture: false
            color: primary
            card_mod: *cc_tile
          - type: tile
            entity: sensor.office_temperature
            name: Office
            icon: mdi:desk
            show_entity_picture: false
            color: primary
            card_mod: *cc_tile
          - type: tile
            entity: sensor.bedroom_temperature
            name: Master Bedroom
            icon: mdi:bed
            show_entity_picture: false
            color: primary
            card_mod: *cc_tile
          - type: tile
            entity: sensor.upstairs_temperature
            name: Upstairs
            icon: mdi:stairs
            show_entity_picture: false
            color: primary
            card_mod: *cc_tile
          - type: tile
            entity: sensor.blink_family_room_temperature
            name: Family Room
            icon: mdi:television
            show_entity_picture: false
            color: primary
            card_mod: *cc_tile

      # ── Shopping List ──
      - type: heading
        heading: Shopping List
        heading_style: title
        icon: mdi:cart-outline
        card_mod: *cc_section

      - type: todo-list
        entity: todo.shopping_list
        hide_completed: true
        display_order: none

      # ── Chore Tracker Quick View ──
      - type: heading
        heading: Chores Today
        heading_style: title
        icon: mdi:check-circle-outline
        card_mod: *cc_section

      - type: entities
        show_header_toggle: false
        entities:
          - entity: binary_sensor.cat_medication_tracker_all_cats_medicated
            name: Cats medicated
          - entity: binary_sensor.cat_medication_tracker_penelope_medication_status
            name: Penelope meds
          - entity: binary_sensor.cat_medication_tracker_tess_medication_status
            name: Tess meds

      # ── Family Presence ──
      - type: heading
        heading: Presence
        heading_style: title
        icon: mdi:account-group
        badges:
          - type: entity
            entity: binary_sensor.bedroom_occupancy
            name: Bedroom
          - type: entity
            entity: binary_sensor.upstairs_occupancy
            name: Upstairs
        card_mod: *cc_section