From 5a9ca7e95957cb6473aec44528be3340803c2a83 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sun, 4 Feb 2024 15:38:48 +0100
Subject: [PATCH 1/4] Begin Work

---
 locales/en-US/index.json          |  3 +++
 pages/dashboard.vue               | 13 ++++++++++++-
 pages/dashboard/organizations.vue |  2 ++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 2459075245..d1647998c0 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -263,6 +263,9 @@
   "dashboard.collections.long-title": {
     "message": "Your collections"
   },
+  "dashboard.organization.title": {
+    "message": "Organizations"
+  },
   "frog": {
     "message": "You've been frogged! 🐸"
   },
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 8732c6707f..4b65b8127c 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -21,7 +21,11 @@
           <NavStackItem v-if="true" link="/dashboard/projects" label="Projects">
             <ListIcon />
           </NavStackItem>
-          <NavStackItem v-if="true" link="/dashboard/organizations" label="Organizations">
+          <NavStackItem 
+            v-if="true" 
+            link="/dashboard/organizations" 
+            :label="formatMessage(messages.organizationTitle)"
+          >
             <OrganizationIcon />
           </NavStackItem>
           <NavStackItem
@@ -55,6 +59,13 @@ import OrganizationIcon from '~/assets/images/utils/organization.svg'
 
 const { formatMessage } = useVIntl()
 
+const messages = defineMessages({
+  organizationTitle: {
+    id: 'dashboard.organization.title',
+    defaultMessage: 'Organizations',
+  },
+})
+
 definePageMeta({
   middleware: 'auth',
 })
diff --git a/pages/dashboard/organizations.vue b/pages/dashboard/organizations.vue
index 575962883e..680c658b71 100644
--- a/pages/dashboard/organizations.vue
+++ b/pages/dashboard/organizations.vue
@@ -54,6 +54,8 @@ import { PlusIcon, Avatar, UsersIcon } from 'omorphia'
 import { useAuth } from '~/composables/auth.js'
 import OrganizationCreateModal from '~/components/ui/OrganizationCreateModal.vue'
 
+const { formatMessage } = useVIntl()
+
 const createOrgModal = ref(null)
 
 const auth = await useAuth()

From 105659f45ade40033a4f0c6c6df7c46399445920 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sun, 4 Feb 2024 15:45:38 +0100
Subject: [PATCH 2/4] Add more keys

---
 locales/en-US/index.json          |  6 ++++++
 pages/dashboard/organizations.vue | 23 ++++++++++++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index d1647998c0..9efefa9b75 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -263,6 +263,12 @@
   "dashboard.collections.long-title": {
     "message": "Your collections"
   },
+  "dashboard.organization.action.create-organization": {
+    "message": "Create organization"
+  },
+  "dashboard.organization.make-organization": {
+    "message": "Make an organization!"
+  },
   "dashboard.organization.title": {
     "message": "Organizations"
   },
diff --git a/pages/dashboard/organizations.vue b/pages/dashboard/organizations.vue
index 680c658b71..4373d98f79 100644
--- a/pages/dashboard/organizations.vue
+++ b/pages/dashboard/organizations.vue
@@ -3,11 +3,11 @@
     <OrganizationCreateModal ref="createOrgModal" />
     <section class="universal-card">
       <div class="header__row">
-        <h2 class="header__title">Organizations</h2>
+        <h2 class="header__title">{{ formatMessage(messages.title) }}</h2>
         <div class="input-group">
           <button class="iconified-button brand-button" @click="openCreateOrgModal">
             <PlusIcon />
-            Create organization
+            {{ formatMessage(messages.createOrganization) }}
           </button>
         </div>
       </div>
@@ -43,7 +43,9 @@
           </nuxt-link>
         </div>
       </template>
-      <template v-else> Make an organization! </template>
+      <template v-else>
+        {{ formatMessage(messages.makeOrganizationLabel) }}
+      </template>
     </section>
   </div>
 </template>
@@ -56,6 +58,21 @@ import OrganizationCreateModal from '~/components/ui/OrganizationCreateModal.vue
 
 const { formatMessage } = useVIntl()
 
+const messages = defineMessages({
+  createOrganization: {
+    id: 'dashboard.organization.action.create-organization',
+    defaultMessage: 'Create organization',
+  },
+  makeOrganizationLabel: {
+    id: 'dashboard.organization.make-organization',
+    defaultMessage: 'Make an organization!',
+  },
+  title: {
+    id: 'dashboard.organization.title',
+    defaultMessage: 'Organizations',
+  },
+})
+
 const createOrgModal = ref(null)
 
 const auth = await useAuth()

From 0bff2dfb680356f094a21283b4686e05a6f2b4e2 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Mon, 5 Feb 2024 09:39:57 +0100
Subject: [PATCH 3/4] Finish Work (almost)

---
 locales/en-US/index.json          | 15 ++++++++++++---
 pages/dashboard/organizations.vue | 26 ++++++++++++++++++--------
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 9efefa9b75..ae22392523 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -263,13 +263,22 @@
   "dashboard.collections.long-title": {
     "message": "Your collections"
   },
-  "dashboard.organization.action.create-organization": {
+  "dashboard.organization.title": {
+    "message": "Organizations"
+  },
+  "dashboard.organizations.action.create-organization": {
     "message": "Create organization"
   },
-  "dashboard.organization.make-organization": {
+  "dashboard.organizations.error.fetch-organization": {
+    "message": "Failed to fetch organizations"
+  },
+  "dashboard.organizations.make-organization": {
     "message": "Make an organization!"
   },
-  "dashboard.organization.title": {
+  "dashboard.organizations.members": {
+    "message": "{count, plural, one {{count} member} other {{count} members}}"
+  },
+  "dashboard.organizations.title": {
     "message": "Organizations"
   },
   "frog": {
diff --git a/pages/dashboard/organizations.vue b/pages/dashboard/organizations.vue
index 4373d98f79..bc6696a965 100644
--- a/pages/dashboard/organizations.vue
+++ b/pages/dashboard/organizations.vue
@@ -32,10 +32,11 @@
                 <div class="stats">
                   <UsersIcon />
                   <span>
-                    {{ onlyAcceptedMembers(org.members).length }} member<template
-                      v-if="onlyAcceptedMembers(org.members).length !== 1"
-                      >s</template
-                    >
+                    {{
+                      formatMessage(messages.membersLabel, {
+                        count: formatCompactNumber(onlyAcceptedMembers(org.members).length),
+                      })
+                    }}
                   </span>
                 </div>
               </span>
@@ -57,18 +58,27 @@ import { useAuth } from '~/composables/auth.js'
 import OrganizationCreateModal from '~/components/ui/OrganizationCreateModal.vue'
 
 const { formatMessage } = useVIntl()
+const formatCompactNumber = useCompactNumber()
 
 const messages = defineMessages({
   createOrganization: {
-    id: 'dashboard.organization.action.create-organization',
+    id: 'dashboard.organizations.action.create-organization',
     defaultMessage: 'Create organization',
   },
+  fetchOranizationError: {
+    id: 'dashboard.organizations.error.fetch-organization',
+    defaultMessage: 'Failed to fetch organizations',
+  },
   makeOrganizationLabel: {
-    id: 'dashboard.organization.make-organization',
+    id: 'dashboard.organizations.make-organization',
     defaultMessage: 'Make an organization!',
   },
+  membersLabel: {
+    id: 'dashboard.organizations.members',
+    defaultMessage: '{count, plural, one {{count} member} other {{count} members}}',
+  },
   title: {
-    id: 'dashboard.organization.title',
+    id: 'dashboard.organizations.title',
     defaultMessage: 'Organizations',
   },
 })
@@ -91,7 +101,7 @@ const onlyAcceptedMembers = (members) => members.filter((member) => member?.acce
 if (error.value) {
   createError({
     statusCode: 500,
-    message: 'Failed to fetch organizations',
+    message: formatMessage(message.fetchOranizationError),
   })
 }
 

From 6299f2df086d587791a26596361bb02e729b732b Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Mon, 5 Feb 2024 09:40:44 +0100
Subject: [PATCH 4/4] Fix lint error

---
 pages/dashboard.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 4b65b8127c..a8f8f74e3a 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -21,9 +21,9 @@
           <NavStackItem v-if="true" link="/dashboard/projects" label="Projects">
             <ListIcon />
           </NavStackItem>
-          <NavStackItem 
-            v-if="true" 
-            link="/dashboard/organizations" 
+          <NavStackItem
+            v-if="true"
+            link="/dashboard/organizations"
             :label="formatMessage(messages.organizationTitle)"
           >
             <OrganizationIcon />