From b4ef1807c6be9ded9219d7c60c86b588947beb67 Mon Sep 17 00:00:00 2001
From: Ashley <admin@ashleybailey.me>
Date: Sat, 16 Sep 2023 00:07:10 +0100
Subject: [PATCH] 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  | 22 ++++++++++++++++++++++
 frontend/src/widgets/InvitesTotal.vue | 24 ++++++++++++++++++++++++
 frontend/src/widgets/UsersTotal.vue   | 24 ++++++++++++++++++++++++
 3 files changed, 70 insertions(+)
 create mode 100644 frontend/src/widgets/ErrorWidget.vue
 create mode 100644 frontend/src/widgets/InvitesTotal.vue
 create mode 100644 frontend/src/widgets/UsersTotal.vue

diff --git a/frontend/src/widgets/ErrorWidget.vue b/frontend/src/widgets/ErrorWidget.vue
new file mode 100644
index 000000000..8bd47dfa5
--- /dev/null
+++ b/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>
diff --git a/frontend/src/widgets/InvitesTotal.vue b/frontend/src/widgets/InvitesTotal.vue
new file mode 100644
index 000000000..cb1f1e70f
--- /dev/null
+++ b/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>
diff --git a/frontend/src/widgets/UsersTotal.vue b/frontend/src/widgets/UsersTotal.vue
new file mode 100644
index 000000000..adfafc536
--- /dev/null
+++ b/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>