Advanced medication reminder

Blueprints Exchange
208

I’ve created a custom card that displays medication details, including when it was last taken, how many tablets remain, and a color-coded bar indicating the count. It also shows a percentage badge so you can quickly see how much supply is left. Here’s the complete YAML configuration for the card:

image
image1001×402 23.6 KB

Cards you will need:

  1. GitHub - ofekashery/vertical-stack-in-card: 📐 Home Assistant Card: Group multiple cards into a single sleek card.
  2. GitHub - usernein/tailwindcss-template-card: Custom card for Home Assistant that renders html code with TailwindCSS styles into the dashboard
  3. GitHub - custom-cards/bar-card: Customizable Animated Bar card for Home Assistant Lovelace
type: custom:vertical-stack-in-card
cards:
  - type: custom:tailwindcss-template-card
    card_mod:
      style: |
        ha-card {
          border-bottom-left-radius: 0 !important;
          border-bottom-right-radius: 0 !important;
        }
    entity: input_datetime.aspirin_adherence
    content: |
      <div class="p-4">
        <!-- Title + Right-Aligned Schedule -->
        <div class="flex items-center justify-between mb-2">
          <div class="text-lg font-bold">Aspirin</div>
          <div class="text-sm text-gray-500">Daily at 8:00 AM</div>
        </div>

        <!-- Last taken row -->
        <div class="flex items-center space-x-1 text-sm text-gray-600 mb-4">
          <ha-icon icon="mdi:clock-time-four-outline"></ha-icon>
          <span>Last taken: {{ states('input_datetime.aspirin_adherence') }} </span>
        </div>

        <!-- Remaining Tablets row + percentage bubble -->
        <div class="flex items-center justify-between">
          <span class="text-gray-800 font-medium">Remaining Tablets</span>
          <span class="text-gray-800">
            {{ states('counter.aspirin') }}/{{ state_attr('counter.aspirin', 'initial') }}
          </span>
        </div>
        
       
        <div class="mt-1">
          <!-- Percentage bubble -->
          <span class="inline-block text-xs font-bold text-blue-600 bg-blue-100 px-2 py-1 rounded-full">
            {{
              (
                ( states('counter.aspirin')|float
                  / state_attr('counter.aspirin', 'initial')|float
                ) * 100
              )|round(0)
            }}%
          </span>
        </div>
      </div>
  - type: custom:bar-card
    card_mod:
      style: |
        ha-card {
          margin-top: -10px !important; 
        }
    entities:
      - entity: counter.aspirin
        icon: mdi:pill
        positions:
          icon: "off"
          indicator: "off"
          minmax: "off"
          name: "off"
          value: "off"
        min: 0
        max: 90
        height: 12
    severity:
      - from: 0
        to: 4
        color: "#ff0000"
      - from: 5
        to: 29
        color: "#ffa500"
      - from: 30
        to: 59
        color: "#ffff00"
      - from: 60
        to: 90
        color: "#00ff00"
4 Likes