From 9e25ef03f96983ec195c1d400d482322115082bc Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Thu, 2 Jul 2026 19:10:01 +0200
Subject: [PATCH 1/5] add consumer tab/cards

---
 .../source/src/components/ConsumerCard.vue    | 155 ++++++++++++
 .../src/components/ConsumerInformation.vue    |  44 ++++
 .../source/src/components/ConsumerMessage.vue |  43 ++++
 .../src/components/ConsumerModeButtons.vue    |  72 ++++++
 .../src/components/ConsumerSettings.vue       | 148 +++++++++++
 .../koala/source/src/pages/IndexPage.vue      |  17 +-
 .../source/src/stores/mqtt-store-model.ts     |  22 ++
 .../koala/source/src/stores/mqtt-store.ts     | 236 ++++++++++++++++++
 8 files changed, 736 insertions(+), 1 deletion(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/components/ConsumerInformation.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/components/ConsumerMessage.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/components/ConsumerModeButtons.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/components/ConsumerSettings.vue

diff --git a/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
new file mode 100644
index 0000000000..cb1884ed82
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
@@ -0,0 +1,155 @@
+<template>
+  <q-card
+    class="card-width"
+    :class="{ 'full-height': props.fullHeight }"
+  >
+    <q-card-section class="row no-wrap items-center justify-between">
+      <div class="row no-wrap items-center ellipsis">
+        <q-icon
+          name="circle"
+          :color="statusColor"
+          size="12px"
+          class="q-mr-sm"
+          :title="statusText"
+        />
+        <div class="text-h6 text-bold ellipsis" :title="name">
+          {{ name }}
+        </div>
+      </div>
+      <q-space />
+      <q-btn
+        icon="settings"
+        flat
+        round
+        dense
+        :title="`Einstellungen ${name ?? ''}`"
+        @click="settingsVisible = true"
+      />
+    </q-card-section>
+    <q-separator class="q-mt-sm" />
+
+    <q-card-section
+      class="row q-mt-sm text-subtitle2 justify-between full-width"
+    >
+      <div>Leistung:</div>
+      <div class="q-ml-sm">
+        {{ power }}
+      </div>
+    </q-card-section>
+
+    <q-card-section>
+      <ConsumerMessage :consumer-id="props.consumerId" />
+    </q-card-section>
+
+    <template v-if="isOnOffType">
+      <q-separator inset class="q-my-sm" />
+      <q-card-section
+        class="row items-center justify-between full-width text-subtitle2"
+      >
+        <div>Ein/Aus:</div>
+        <ToggleStandard
+          :value="onOff"
+          size="md"
+          @update:value="onOff = $event"
+        />
+      </q-card-section>
+    </template>
+
+    <ConsumerSettings
+      :consumer-id="props.consumerId"
+      v-model="settingsVisible"
+    />
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useMqttStore } from 'src/stores/mqtt-store';
+import ConsumerSettings from './ConsumerSettings.vue';
+import ConsumerMessage from './ConsumerMessage.vue';
+import ToggleStandard from './ToggleStandard.vue';
+
+const props = defineProps<{
+  consumerId: number;
+  fullHeight?: boolean;
+}>();
+
+const mqttStore = useMqttStore();
+
+const settingsVisible = ref(false);
+
+const name = computed(() => mqttStore.consumerName(props.consumerId));
+
+const power = computed(
+  () => mqttStore.consumerPower(props.consumerId, 'textValue') as string,
+);
+
+const powerValue = computed(
+  () => (mqttStore.consumerPower(props.consumerId, 'value') as number) || 0,
+);
+const isRunning = computed(() => powerValue.value > 0);
+
+const faultState = computed(() => mqttStore.consumerFaultState(props.consumerId));
+
+const statusText = computed(() => {
+  if (faultState.value > 0) {
+    return (
+      mqttStore.consumerFaultStr(props.consumerId) ??
+      mqttStore.consumerStateStr(props.consumerId)
+    );
+  }
+  return mqttStore.consumerStateStr(props.consumerId);
+});
+
+const statusColor = computed(() => {
+  if (faultState.value >= 2) {
+    return 'negative';
+  }
+  if (faultState.value === 1) {
+    return 'warning';
+  }
+  return isRunning.value ? 'positive' : 'grey-6';
+});
+
+const isOnOffType = computed(
+  () => mqttStore.consumerUsageType(props.consumerId) === 'suspendable_onoff',
+);
+
+const consumerMode = mqttStore.consumerMode(props.consumerId);
+
+// Toggle maps to Sofort (on) / Stop (off). Any non-stop mode reads as "on".
+const onOff = computed({
+  get: () => consumerMode.value !== undefined && consumerMode.value !== 'stop',
+  set: (value: boolean) => {
+    consumerMode.value = value ? 'instant_charging' : 'stop';
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.card-width {
+  width: 100%;
+}
+
+.q-card__section {
+  padding-left: $space-base;
+  padding-right: $space-base;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.q-card__section:first-of-type {
+  padding-top: $space-base;
+  padding-bottom: 0;
+}
+
+.q-card__section:last-of-type {
+  padding-top: 0;
+  padding-bottom: $space-base;
+}
+
+.q-card__section:not(:first-of-type):not(:last-of-type) {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ConsumerInformation.vue b/packages/modules/web_themes/koala/source/src/components/ConsumerInformation.vue
new file mode 100644
index 0000000000..951e4e31d6
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/ConsumerInformation.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="consumer-grid-wrapper">
+    <div class="consumer-grid">
+      <ConsumerCard
+        v-for="item in consumerIds"
+        :key="item"
+        :consumer-id="item"
+        full-height
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useMqttStore } from 'src/stores/mqtt-store';
+
+import ConsumerCard from 'src/components/ConsumerCard.vue';
+
+const mqttStore = useMqttStore();
+
+const consumerIds = computed(() => mqttStore.consumerIds);
+</script>
+
+<style scoped lang="scss">
+.consumer-grid-wrapper {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.consumer-grid {
+  display: grid;
+  gap: 0.5em;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(22em, calc(50% - 0.5em)), 22em)
+  );
+  justify-content: center;
+  align-content: start;
+  padding: 0.5em;
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ConsumerMessage.vue b/packages/modules/web_themes/koala/source/src/components/ConsumerMessage.vue
new file mode 100644
index 0000000000..38974ef37d
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/ConsumerMessage.vue
@@ -0,0 +1,43 @@
+<template>
+  <BaseMessage
+    :show-message="showMessage"
+    :message="message"
+    :type="messageType"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useMqttStore } from 'src/stores/mqtt-store';
+import BaseMessage from './BaseMessage.vue';
+
+const props = defineProps<{
+  consumerId: number;
+}>();
+
+const mqttStore = useMqttStore();
+
+const faultState = computed(() =>
+  mqttStore.consumerFaultState(props.consumerId),
+);
+
+const message = computed(() => {
+  const text =
+    faultState.value > 0
+      ? mqttStore.consumerFaultStr(props.consumerId)
+      : mqttStore.consumerStateStr(props.consumerId);
+  return text ?? '';
+});
+
+const showMessage = computed(() => message.value !== '');
+
+const messageType = computed<'info' | 'warning' | 'error'>(() => {
+  if (faultState.value >= 2) {
+    return 'error';
+  }
+  if (faultState.value === 1) {
+    return 'warning';
+  }
+  return 'info';
+});
+</script>
diff --git a/packages/modules/web_themes/koala/source/src/components/ConsumerModeButtons.vue b/packages/modules/web_themes/koala/source/src/components/ConsumerModeButtons.vue
new file mode 100644
index 0000000000..d36bca3106
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/ConsumerModeButtons.vue
@@ -0,0 +1,72 @@
+<template>
+  <div v-if="isMobile" class="row q-pt-md full-width">
+    <q-btn-dropdown
+      class="col"
+      transition-show="scale"
+      transition-hide="scale"
+      transition-duration="500"
+      color="primary"
+      :label="currentModeLabel"
+      size="md"
+      dropdown-icon="none"
+      cover
+      push
+    >
+      <q-list>
+        <template v-for="(mode, index) in chargeModes" :key="mode.value">
+          <q-item
+            clickable
+            v-close-popup
+            @click="consumerMode = mode.value"
+            :active="consumerMode === mode.value"
+            active-class="bg-primary text-white"
+          >
+            <q-item-section class="text-center text-weight-bold">
+              <q-item-label>{{ mode.label.toLocaleUpperCase() }}</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-separator v-if="index < chargeModes.length - 1" />
+        </template>
+      </q-list>
+    </q-btn-dropdown>
+  </div>
+  <q-btn-group v-else class="row col q-mt-sm" spread>
+    <q-btn
+      v-for="mode in chargeModes"
+      :key="mode.value"
+      :color="consumerMode === mode.value ? 'primary' : 'grey'"
+      :label="mode.label"
+      size="sm"
+      @click="consumerMode = mode.value"
+    />
+  </q-btn-group>
+</template>
+
+<script setup lang="ts">
+import { useMqttStore } from 'src/stores/mqtt-store';
+import { computed } from 'vue';
+import { Platform } from 'quasar';
+import { useChargeModes } from 'src/composables/useChargeModes';
+
+const props = defineProps<{
+  consumerId: number;
+}>();
+
+const isMobile = computed(() => Platform.is.mobile);
+const { chargeModes } = useChargeModes();
+const mqttStore = useMqttStore();
+
+const consumerMode = mqttStore.consumerMode(props.consumerId);
+
+const currentModeLabel = computed(
+  () => chargeModes.find((mode) => mode.value === consumerMode.value)?.label,
+);
+</script>
+
+<style scoped>
+:deep(.q-btn-dropdown__arrow-container) {
+  width: 0;
+  padding: 0;
+  margin: 0;
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ConsumerSettings.vue b/packages/modules/web_themes/koala/source/src/components/ConsumerSettings.vue
new file mode 100644
index 0000000000..b7907c11fd
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/ConsumerSettings.vue
@@ -0,0 +1,148 @@
+<template>
+  <q-dialog v-model="visible">
+    <q-card class="dialog-width">
+      <q-card-section class="row items-center no-wrap">
+        <div class="text-h6 ellipsis">Einstellungen {{ name }}</div>
+        <q-space />
+        <q-btn icon="close" flat round dense v-close-popup />
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-section>
+        <div class="text-subtitle2">Betriebsmodus</div>
+        <ConsumerModeButtons :consumer-id="props.consumerId" />
+      </q-card-section>
+
+      <q-separator inset />
+
+      <q-card-section>
+        <div class="text-subtitle2">Betriebsmodus umstellen</div>
+        <q-btn-group spread class="q-mt-sm">
+          <q-btn
+            v-for="trigger in resetTriggers"
+            :key="trigger.value"
+            size="sm"
+            :color="resetTrigger === trigger.value ? 'primary' : 'grey'"
+            :label="trigger.label"
+            @click="selectTrigger(trigger.value)"
+          />
+        </q-btn-group>
+
+        <div v-if="resetTrigger === 'time'" class="row q-col-gutter-sm q-mt-sm">
+          <q-input v-model="resetDate" type="date" label="Datum" class="col" />
+          <q-input
+            v-model="resetTimeOfDay"
+            type="time"
+            label="Uhrzeit"
+            class="col"
+          />
+        </div>
+
+        <template v-if="resetTrigger !== 'never'">
+          <div class="text-subtitle2 q-mt-md">Zielmodus</div>
+          <q-btn-group spread class="q-mt-sm">
+            <q-btn
+              v-for="mode in chargeModes"
+              :key="mode.value"
+              size="sm"
+              :color="resetTargetMode === mode.value ? 'primary' : 'grey'"
+              :label="mode.label"
+              @click="resetTargetMode = mode.value"
+            />
+          </q-btn-group>
+        </template>
+      </q-card-section>
+
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          flat
+          dense
+          no-caps
+          icon="tune"
+          label="Geräte-Einstellungen"
+          type="a"
+          href="/openWB/web/settings/#/ConsumerConfiguration"
+          :title="`Geräte-Einstellungen ${name ?? ''}`"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useMqttStore } from 'src/stores/mqtt-store';
+import { useChargeModes } from 'src/composables/useChargeModes';
+import type { ConsumerResetTrigger } from 'src/stores/mqtt-store-model';
+import ConsumerModeButtons from './ConsumerModeButtons.vue';
+
+const props = defineProps<{
+  consumerId: number;
+  modelValue: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+}>();
+
+const mqttStore = useMqttStore();
+const { chargeModes } = useChargeModes();
+
+const name = computed(() => mqttStore.consumerName(props.consumerId));
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
+
+const resetTriggers: { value: ConsumerResetTrigger; label: string }[] = [
+  { value: 'never', label: 'Nie' },
+  { value: 'midnight', label: 'Mitternacht' },
+  { value: 'time', label: 'Zeitpunkt' },
+];
+
+const resetTrigger = mqttStore.consumerResetTrigger(props.consumerId);
+const resetTargetMode = mqttStore.consumerResetTargetMode(props.consumerId);
+const resetTime = mqttStore.consumerResetTime(props.consumerId);
+
+const pad = (part: number) => String(part).padStart(2, '0');
+
+const writeResetTime = (dateStr: string, timeStr: string) => {
+  if (!dateStr || !timeStr) return;
+  const epoch = Math.floor(new Date(`${dateStr}T${timeStr}`).getTime() / 1000);
+  if (Number.isNaN(epoch)) return;
+  resetTime.value = epoch;
+};
+
+const resetDate = computed({
+  get: () => {
+    const date = resetTime.value ? new Date(resetTime.value * 1000) : new Date();
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+  },
+  set: (dateStr: string) => writeResetTime(dateStr, resetTimeOfDay.value),
+});
+
+const resetTimeOfDay = computed({
+  get: () => {
+    const date = resetTime.value ? new Date(resetTime.value * 1000) : new Date();
+    return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  },
+  set: (timeStr: string) => writeResetTime(resetDate.value, timeStr),
+});
+
+const selectTrigger = (value: ConsumerResetTrigger) => {
+  resetTrigger.value = value;
+  if (value === 'time' && resetTime.value == null) {
+    resetTime.value = Math.floor(Date.now() / 1000);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.dialog-width {
+  width: 24em;
+  max-width: 90vw;
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
index f41073f613..ccbff68701 100644
--- a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
+++ b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
@@ -17,6 +17,9 @@
         <q-tab v-if="accessBatteryAllowed" name="batteries" title="Speicher">
           <q-icon name="battery_full" size="md" />
         </q-tab>
+        <q-tab v-if="consumersAvailable" name="consumers" title="Verbraucher">
+          <q-icon name="power" size="md" color="primary" />
+        </q-tab>
         <!-- <q-tab name="smart-home" title="SmartHome">
           <q-icon name="home" size="md" />
         </q-tab> -->
@@ -39,6 +42,14 @@
         >
           <BatteryInformation />
         </q-tab-panel>
+        <!-- Consumers -->
+        <q-tab-panel
+          v-if="consumersAvailable"
+          name="consumers"
+          class="column"
+        >
+          <ConsumerInformation />
+        </q-tab-panel>
         <!-- Smart Home -->
         <!-- <q-tab-panel name="smart-home" class="">
           <SmartHomeInformation />
@@ -55,7 +66,7 @@ import ChartCarousel from 'src/components/ChartCarousel.vue';
 import ChargePointInformation from 'src/components/ChargePointInformation.vue';
 import BatteryInformation from 'src/components/BatteryInformation.vue';
 import VehicleInformation from 'src/components/VehicleInformation.vue';
-// import SmartHomeInformation from 'src/components/SmartHomeInformation.vue';
+import ConsumerInformation from 'src/components/ConsumerInformation.vue';
 
 defineOptions({
   name: 'IndexPage',
@@ -67,6 +78,10 @@ const mqttStore = useMqttStore();
 const accessBatteryAllowed = computed(() => {
   return mqttStore.batteryConfigured && mqttStore.batteryIds.length > 0;
 });
+
+const consumersAvailable = computed(() => {
+  return mqttStore.consumerIds.length > 0;
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
index 3810f16ccb..c99bc49712 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
@@ -127,6 +127,28 @@ export interface VehicleInfo {
   manufacturer: string;
   model: string;
 }
+
+export interface Consumer {
+  id: number;
+  name: string;
+}
+export interface ConsumerInfo {
+  manufacturer: string | null;
+  model: string | null;
+}
+export interface ConsumerModule {
+  name: string;
+  info: ConsumerInfo;
+  type: string;
+  id: number;
+  vendor: string;
+}
+export type ConsumerUsageType =
+  | 'meter_only'
+  | 'suspendable_tunable'
+  | 'suspendable_onoff'
+  | 'continuous';
+export type ConsumerResetTrigger = 'never' | 'midnight' | 'time';
 export interface ScheduledChargingPlan {
   id: number;
   name: string;
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index 6d1bd0cfb3..128d8b1099 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -16,6 +16,10 @@ import type {
   ChargePointConnectedVehicleInfo,
   Vehicle,
   VehicleInfo,
+  Consumer,
+  ConsumerModule,
+  ConsumerUsageType,
+  ConsumerResetTrigger,
   ScheduledChargingPlan,
   ChargePointConnectedVehicleSoc,
   GraphDataPoint,
@@ -3713,6 +3717,225 @@ export const useMqttStore = defineStore('mqtt', () => {
     });
   };
 
+  ////////////////////////////// consumer data ////////////////////////////////
+
+  /**
+   * Get a list of all consumers.
+   * @returns Consumer[]
+   */
+  const consumerList = computed<Consumer[]>(() => {
+    const modules = getWildcardValues.value('openWB/consumer/+/module');
+    return Object.keys(modules)
+      .map((key) => {
+        const id = parseInt(key.split('/')[2]);
+        const module = modules[key] as ConsumerModule | undefined;
+        return { id, name: module?.name ?? `Verbraucher ${id}` };
+      })
+      .sort((a, b) => a.id - b.id);
+  });
+
+  /**
+   * Get the consumer ids
+   * @returns number[]
+   */
+  const consumerIds = computed(() => {
+    return consumerList.value.map((consumer) => consumer.id);
+  });
+
+  /**
+   * Get the consumer name identified by the consumer id
+   * @param consumerId consumer id
+   * @returns string | undefined
+   */
+  const consumerName = computed(() => {
+    return (consumerId: number): string | undefined => {
+      return consumerList.value.find((consumer) => consumer.id === consumerId)
+        ?.name;
+    };
+  });
+
+  /**
+   * Get the current power of a consumer identified by the consumer id
+   * @param consumerId consumer id
+   * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
+   * @returns string | number | ValueObject
+   */
+  const consumerPower = computed(() => {
+    return (consumerId: number, returnType: string = 'textValue') => {
+      const power =
+        (getValue.value(
+          `openWB/consumer/${consumerId}/get/power`,
+          undefined,
+          0,
+        ) as number) || 0;
+      const valueObject = getValueObject.value(power);
+      if (Object.hasOwn(valueObject, returnType)) {
+        return valueObject[returnType as keyof ValueObject];
+      }
+      if (returnType == 'object') {
+        return valueObject;
+      }
+      console.error('returnType not found!', returnType, power);
+    };
+  });
+
+  /**
+   * Get the status text of a consumer identified by the consumer id
+   * @param consumerId consumer id
+   * @returns string | undefined
+   */
+  const consumerStateStr = computed(() => {
+    return (consumerId: number): string | undefined => {
+      return getValue.value(
+        `openWB/consumer/${consumerId}/get/state_str`,
+      ) as string | undefined;
+    };
+  });
+
+  /**
+   * Get the fault state (0 = ok, 1 = warning, 2 = error) of a consumer
+   * @param consumerId consumer id
+   * @returns number
+   */
+  const consumerFaultState = computed(() => {
+    return (consumerId: number): number => {
+      return (
+        (getValue.value(
+          `openWB/consumer/${consumerId}/get/fault_state`,
+          undefined,
+          0,
+        ) as number) || 0
+      );
+    };
+  });
+
+  /**
+   * Get the fault message of a consumer identified by the consumer id
+   * @param consumerId consumer id
+   * @returns string | undefined
+   */
+  const consumerFaultStr = computed(() => {
+    return (consumerId: number): string | undefined => {
+      return getValue.value(
+        `openWB/consumer/${consumerId}/get/fault_str`,
+      ) as string | undefined;
+    };
+  });
+
+  /**
+   * Get the usage type of a consumer identified by the consumer id.
+   * @param consumerId consumer id
+   * @returns ConsumerUsageType | undefined
+   */
+  const consumerUsageType = computed(() => {
+    return (consumerId: number): ConsumerUsageType | undefined => {
+      return getValue.value(
+        `openWB/consumer/${consumerId}/usage`,
+        'type',
+      ) as ConsumerUsageType | undefined;
+    };
+  });
+
+  /**
+   * Get or set the operating mode (Betriebsmodus) of a consumer.
+   * @param consumerId consumer id
+   * @returns writable computed of string | undefined
+   */
+  const consumerMode = (consumerId: number) => {
+    return computed({
+      get() {
+        return getValue.value(
+          `openWB/consumer/${consumerId}/usage`,
+          'chargemode',
+        ) as string | undefined;
+      },
+      set(newValue: string) {
+        console.debug('set consumer mode', newValue, consumerId);
+        return updateTopic(
+          `openWB/consumer/${consumerId}/usage`,
+          newValue,
+          'chargemode',
+          true,
+        );
+      },
+    });
+  };
+
+  /**
+   * Get or set the automatic mode-reset trigger of a consumer
+   * @param consumerId consumer id
+   * @returns writable computed of ConsumerResetTrigger
+   */
+  const consumerResetTrigger = (consumerId: number) => {
+    return computed({
+      get() {
+        return (getValue.value(
+          `openWB/consumer/${consumerId}/usage`,
+          'reset_chargemode.mode',
+          'never',
+        ) ?? 'never') as ConsumerResetTrigger;
+      },
+      set(newValue: ConsumerResetTrigger) {
+        return updateTopic(
+          `openWB/consumer/${consumerId}/usage`,
+          newValue,
+          'reset_chargemode.mode',
+          true,
+        );
+      },
+    });
+  };
+
+  /**
+   * Get or set the target mode the consumer is switched to on reset
+   * @param consumerId consumer id
+   * @returns writable computed of string | undefined
+   */
+  const consumerResetTargetMode = (consumerId: number) => {
+    return computed({
+      get() {
+        return getValue.value(
+          `openWB/consumer/${consumerId}/usage`,
+          'reset_chargemode.chargemode',
+        ) as string | undefined;
+      },
+      set(newValue: string) {
+        return updateTopic(
+          `openWB/consumer/${consumerId}/usage`,
+          newValue,
+          'reset_chargemode.chargemode',
+          true,
+        );
+      },
+    });
+  };
+
+  /**
+   * Get or set the absolute epoch (seconds) at which the consumer switches
+   * mode when reset_chargemode.mode === 'time'
+   * @param consumerId consumer id
+   * @returns writable computed of number | null
+   */
+  const consumerResetTime = (consumerId: number) => {
+    return computed({
+      get() {
+        return getValue.value(
+          `openWB/consumer/${consumerId}/usage`,
+          'reset_chargemode.time',
+          null,
+        ) as number | null;
+      },
+      set(newValue: number) {
+        return updateTopic(
+          `openWB/consumer/${consumerId}/usage`,
+          newValue,
+          'reset_chargemode.time',
+          true,
+        );
+      },
+    });
+  };
+
   /////////////////////////////// Grid Data /////////////////////////////////////
 
   /**
@@ -4279,6 +4502,19 @@ export const useMqttStore = defineStore('mqtt', () => {
     batteryChargePriorityRange,
     batteryMode,
     batteryColor,
+    // Consumer data
+    consumerList,
+    consumerIds,
+    consumerName,
+    consumerPower,
+    consumerStateStr,
+    consumerFaultState,
+    consumerFaultStr,
+    consumerUsageType,
+    consumerMode,
+    consumerResetTrigger,
+    consumerResetTargetMode,
+    consumerResetTime,
     // Grid data
     gridId,
     secondaryCounterIds,

From cfa6c08d5bc9ddf7668652f07ef68ea9eb64ed4a Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Sat, 4 Jul 2026 18:00:57 +0200
Subject: [PATCH 2/5] apply new design to consumer cards

---
 .../web_themes/koala/source/src/components/ConsumerCard.vue   | 4 ++++
 .../web_themes/koala/source/src/css/quasar.variables.scss     | 3 +++
 2 files changed, 7 insertions(+)

diff --git a/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
index cb1884ed82..818b39447b 100644
--- a/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
@@ -129,6 +129,10 @@ const onOff = computed({
 <style scoped lang="scss">
 .card-width {
   width: 100%;
+  width: 22em;
+  border: none;
+  border-left: 4px solid var(--q-consumer);
+  border-radius: 15px;
 }
 
 .q-card__section {
diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index d322c95a1d..5dc0689677 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -56,6 +56,7 @@ $vehicle-fill: #4f99af;
 $charge-plan-link-button: #6b757d;
 $diagram-icon: #717171;
 $table-hover: #f9f8f8;
+$consumer: #7D42F5;
 // Light theme (default)
 :root {
   --q-primary: #{$primary};
@@ -96,6 +97,7 @@ $table-hover: #f9f8f8;
   --q-diagram-icon: #{$diagram-icon};
   --q-table-hover: #{$table-hover};
   --q-tab-icon: #{$grey-7};
+  --q-consumer: #{$consumer};
 
   // Main background
   background-color: var(--q-background-1);
@@ -287,6 +289,7 @@ $dark-table-hover: #ffffff12;
   --q-diagram-icon: #{$white};
   --q-table-hover: #{$dark-table-hover};
   --q-tab-icon: #{$grey-7};
+  --q-consumer: #{$consumer};
 
   // Main background
   background-color: var(--q-background-1);

From 5d8fbefc547aa5d6cdfd6f47df5135f78427d677 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Sat, 4 Jul 2026 18:36:43 +0200
Subject: [PATCH 3/5] add consumer time on to consumer card

---
 .../source/src/components/ConsumerCard.vue    | 20 +++++++++++++++++++
 .../koala/source/src/stores/mqtt-store.ts     | 15 ++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
index 818b39447b..3f61c01b4e 100644
--- a/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
@@ -37,6 +37,15 @@
       </div>
     </q-card-section>
 
+    <q-card-section
+      class="row q-mt-sm text-subtitle2 justify-between full-width"
+    >
+      <div>Laufzeit:</div>
+      <div class="q-ml-sm">
+        {{ runTime }}
+      </div>
+    </q-card-section>
+
     <q-card-section>
       <ConsumerMessage :consumer-id="props.consumerId" />
     </q-card-section>
@@ -89,6 +98,17 @@ const powerValue = computed(
 );
 const isRunning = computed(() => powerValue.value > 0);
 
+const runTime = computed<string>(() => {
+  const seconds = mqttStore.consumerOnTime(props.consumerId);
+  if (seconds === undefined) {
+    return '--- h';
+  }
+  const totalMinutes = Math.floor(seconds / 60);
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  return `${hours}:${String(minutes).padStart(2, '0')} h`;
+});
+
 const faultState = computed(() => mqttStore.consumerFaultState(props.consumerId));
 
 const statusText = computed(() => {
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index 128d8b1099..3ae3500c44 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -3779,6 +3779,20 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
+  /**
+   * Get the running time (on_time, in seconds) of a consumer since it last
+   * started. Resets when the device stops drawing current.
+   * @param consumerId consumer id
+   * @returns number | undefined
+   */
+  const consumerOnTime = computed(() => {
+    return (consumerId: number): number | undefined => {
+      return getValue.value(
+        `openWB/consumer/${consumerId}/set/on_time`,
+      ) as number | undefined;
+    };
+  });
+
   /**
    * Get the status text of a consumer identified by the consumer id
    * @param consumerId consumer id
@@ -4507,6 +4521,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     consumerIds,
     consumerName,
     consumerPower,
+    consumerOnTime,
     consumerStateStr,
     consumerFaultState,
     consumerFaultStr,

From e631084df6bc8cbc3ecdc1b9ffbeebc66e2b7dae Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Sat, 4 Jul 2026 18:39:51 +0200
Subject: [PATCH 4/5] fix consumer card CSS

---
 .../web_themes/koala/source/src/components/ConsumerCard.vue      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
index 3f61c01b4e..5d0b9e50d7 100644
--- a/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
@@ -149,7 +149,6 @@ const onOff = computed({
 <style scoped lang="scss">
 .card-width {
   width: 100%;
-  width: 22em;
   border: none;
   border-left: 4px solid var(--q-consumer);
   border-radius: 15px;

From 13e92008035bca66f421e4bf0f61c8cdcbe1d54b Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 6 Jul 2026 11:03:38 +0200
Subject: [PATCH 5/5] remove redundant placeholders

---
 .../web_themes/koala/source/src/pages/IndexPage.vue        | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
index ccbff68701..640d812f61 100644
--- a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
+++ b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
@@ -20,9 +20,6 @@
         <q-tab v-if="consumersAvailable" name="consumers" title="Verbraucher">
           <q-icon name="power" size="md" color="primary" />
         </q-tab>
-        <!-- <q-tab name="smart-home" title="SmartHome">
-          <q-icon name="home" size="md" />
-        </q-tab> -->
       </q-tabs>
       <!-- Tab Panels -->
       <q-tab-panels v-model="tab" class="col column">
@@ -50,10 +47,6 @@
         >
           <ConsumerInformation />
         </q-tab-panel>
-        <!-- Smart Home -->
-        <!-- <q-tab-panel name="smart-home" class="">
-          <SmartHomeInformation />
-        </q-tab-panel> -->
       </q-tab-panels>
     </div>
   </q-page>