From 68b688673ca75653d0686f271dc7139d15b61274 Mon Sep 17 00:00:00 2001
From: Jan <jan.weber@avatic.de>
Date: Sun, 26 Oct 2025 17:22:32 +0100
Subject: [PATCH] Added `AppGroupItem` Vue component for displaying group
 information with selection functionality

---
 .../src/components/UI/AppGroupItem.vue        | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 src/frontend/src/components/UI/AppGroupItem.vue

diff --git a/src/frontend/src/components/UI/AppGroupItem.vue b/src/frontend/src/components/UI/AppGroupItem.vue
new file mode 100644
index 0000000..4c00016
--- /dev/null
+++ b/src/frontend/src/components/UI/AppGroupItem.vue
@@ -0,0 +1,60 @@
+<template>
+<div class="app-group-item">
+  <checkbox :checked="selected" @checkbox-changed="checkboxChanged"></checkbox>
+  <div>
+    <div class="app-group-item-name">{{ groupObj.group_name }}</div>
+    <div class="app-group-item-descr">{{ groupObj.group_description }}</div>
+  </div>
+</div>
+</template>
+
+<script>
+
+import Checkbox from "@/components/UI/Checkbox.vue";
+
+export default {
+  name: "AppGroupItem",
+  components: {Checkbox},
+  props: {
+    groupObj: {
+      type: Object,
+      required: true
+    },
+    selected: {
+      type: Boolean,
+      required: true
+    }
+  },
+  methods: {
+    checkboxChanged(checked) {
+      this.$emit('checkbox-changed', checked, this.groupObj.group_name);
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.app-group-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.8rem;
+  padding: 1.6rem;
+}
+
+.app-group-item-name {
+  font-weight: 500;
+  font-size: 1.4rem;
+}
+
+.app-group-item-descr {
+  font-weight: 400;
+  font-size: 1.4rem;
+  color: #6b7280;
+}
+
+
+
+</style>
\ No newline at end of file