Added AppGroupItem Vue component for displaying group information with selection functionality

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>