Some missing frontend components.

application/YoshiKan/Infrastructure/CLI/CreateApiDocumentation.php

@@ -15,7 +15,7 @@ class CreateApiDocumentation extends Command
     // Constructor
     // ——————————————————————————————————————————————————————————————————————————
 
-    public function __construct(private ApiDocGenerator $apiDocGenerator)
+    public function __construct(/*private ApiDocGenerator $apiDocGenerator*/)
     {
         parent::__construct('openapi:gen');
     }
@@ -26,13 +26,13 @@ public function __construct(private ApiDocGenerator $apiDocGenerator)
 
     protected function execute(InputInterface $input, OutputInterface $output): int
     {
-        $output->writeln('Start generating OpenAPI documentation');
-        $documentation = $this->apiDocGenerator->generate();
-        $json = json_encode($documentation, \JSON_PRETTY_PRINT);
-        $jsonPath = './frontends/member_module/src/api/client/schema.json';
-        file_put_contents($jsonPath, $json);
-        $output->writeln('Done generating OpenAPI documentation');
-
-        return Command::SUCCESS;
+//        $output->writeln('Start generating OpenAPI documentation');
+//        $documentation = $this->apiDocGenerator->generate();
+//        $json = json_encode($documentation, \JSON_PRETTY_PRINT);
+//        $jsonPath = './frontends/member_module/src/api/client/schema.json';
+//        file_put_contents($jsonPath, $json);
+//        $output->writeln('Done generating OpenAPI documentation');
+//
+//        return Command::SUCCESS;
     }
 }

frontends/member_module/src/components/subscription/common/subscriptionBadge.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="px-2 rounded-full text-xs font-bold text-center text-gray-900" :class="statusColor">
+        YKS-{{ subscription.id }}
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {Subscription} from "@/api/query/model";
+import {computed} from "vue";
+import {SubscriptionStatusEnum} from "@/api/query/enum";
+
+const props = defineProps<{
+    subscription: Subscription,
+}>();
+
+const statusColor = computed((): string => {
+    let _color = 'bg-yellow-300';
+    switch (props.subscription.status) {
+        case SubscriptionStatusEnum.AWAITING_PAYMENT:
+            _color = 'bg-orange-300';
+            break;
+        case SubscriptionStatusEnum.PAYED:
+            _color = 'bg-green-200';
+            break;
+        case SubscriptionStatusEnum.COMPLETE:
+            _color = 'bg-green-400';
+            break;
+        case SubscriptionStatusEnum.CANCELED:
+            _color = 'bg-red-300 text-white';
+            break;
+        default:
+            _color = 'bg-yellow-300';
+            break;
+    }
+    return _color;
+});
+
+</script>
+
+<style scoped>
+
+</style>

frontends/member_module/src/components/subscription/common/subscriptionType.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="flex gap-2">
+        <div class="px-2 rounded-full text-xs text-center bg-gray-300 h-4 text-gray-900"
+             v-if="subscription.memberSubscriptionIsPartSubscription">
+            Lid
+        </div>
+        <div class="text-xs"
+             v-if="subscription.memberSubscriptionIsPartSubscription && subscription.licenseIsPartSubscription"> + </div>
+        <div class="px-2 rounded-full text-xs text-center bg-gray-300 h-4 text-gray-900"
+             v-if="subscription.licenseIsPartSubscription">
+            Vergunning
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {Subscription} from "@/api/query/model";
+
+const props = defineProps<{
+    subscription: Subscription,
+}>();
+
+</script>
+
+<style scoped>
+
+</style>