feat: Add ErrorWidget, InvitesTotal, and UsersTotal components

- Add ErrorWidget component with basic layout and text content for displaying a 404 error.
- Add InvitesTotal component for displaying the total number of invites.
- Add UsersTotal component for displaying the total number of users.

frontend/src/widgets/ErrorWidget.vue

@@ -0,0 +1,22 @@
+<template>
+ <WidgetTemplate>
+ <div class="flex flex-row-reverse justify-between p-3">
+ <div class="text-left flex-grow text-xl leading-tight tracking-tight md:text-2xl">
+ <div class="text-gray-400 dark:text-gray-300 mb-0 font-bold">404 Error</div>
+ <div class="text-gray-300 dark:text-gray-200 text-lg font-normal">Could not find the widget.</div>
+ </div>
+ </div>
+ </WidgetTemplate>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import WidgetTemplate from "@/templates/WidgetTemplate.vue";
+
+export default defineComponent({
+ name: "ErrorWidget",
+ components: {
+ WidgetTemplate,
+ },
+});
+</script>

frontend/src/widgets/InvitesTotal.vue

@@ -0,0 +1,24 @@
+<template>
+ <WidgetTemplate :title="__('Total Invites')" :value="count" icon="fa-envelope" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useInvitationStore } from "@/stores/invitations";
+import { mapState } from "pinia";
+
+import WidgetTemplate from "@/templates/WidgetTemplate.vue";
+
+export default defineComponent({
+ name: "InvitesTotal",
+ components: {
+ WidgetTemplate,
+ },
+ computed: {
+ count() {
+ return String(this.invitations.length);
+ },
+ ...mapState(useInvitationStore, ["invitations"]),
+ },
+});
+</script>

frontend/src/widgets/UsersTotal.vue

@@ -0,0 +1,24 @@
+<template>
+ <WidgetTemplate :title="__('Total Users')" :value="count" icon="fa-user" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { mapState } from "pinia";
+import { useUsersStore } from "@/stores/users";
+
+import WidgetTemplate from "@/templates/WidgetTemplate.vue";
+
+export default defineComponent({
+ name: "UsersTotal",
+ components: {
+ WidgetTemplate,
+ },
+ computed: {
+ count() {
+ return String(this.users.length);
+ },
+ ...mapState(useUsersStore, ["users"]),
+ },
+});
+</script>