From a9616911f5d57c5a4fb3f1c185be3f04d248b4d2 Mon Sep 17 00:00:00 2001
From: tonya <tonya@tokia.dev>
Date: Tue, 22 Oct 2024 23:58:43 +0000
Subject: [PATCH 1/2] feat: improve languages support

---
 frontend/components/Item/CreateModal.vue      |   6 +-
 frontend/components/Item/View/Table.vue       |  33 +++--
 frontend/components/Label/CreateModal.vue     |   4 +-
 frontend/components/Location/CreateModal.vue  |   4 +-
 frontend/components/Location/Selector.vue     |   2 +-
 .../global/DetailsSection/DetailsSection.vue  |   2 +-
 frontend/layouts/default.vue                  |  27 ++--
 frontend/locales/en.json                      | 100 ++++++++++++--
 frontend/pages/home/index.vue                 |   8 +-
 frontend/pages/home/statistics.ts             |  11 +-
 frontend/pages/item/[id]/index.vue            |  62 ++++-----
 frontend/pages/item/[id]/index/edit.vue       | 130 +++++++++---------
 frontend/pages/label/[id].vue                 |   8 +-
 frontend/pages/location/[id].vue              |  16 +--
 frontend/pages/locations.vue                  |   2 +-
 frontend/pages/profile.vue                    |  14 +-
 frontend/plugins/i18n.ts                      |   2 +-
 17 files changed, 263 insertions(+), 168 deletions(-)

diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue
index bcf5de540..7708ba7a7 100644
--- a/frontend/components/Item/CreateModal.vue
+++ b/frontend/components/Item/CreateModal.vue
@@ -8,12 +8,12 @@
         v-model="form.name"
         :trigger-focus="focused"
         :autofocus="true"
-        label="Item Name"
+        :label="$t('components.item.create_modal.item_name')"
         :max-length="255"
         :min-length="1"
       />
-      <FormTextArea v-model="form.description" label="Item Description" :max-length="1000" />
-      <FormMultiselect v-model="form.labels" label="Labels" :items="labels ?? []" />
+      <FormTextArea v-model="form.description" :label="$t('components.item.create_modal.item_description')" :max-length="1000" />
+      <FormMultiselect v-model="form.labels" :label="$t('global.labels')" :items="labels ?? []" />
 
       <div class="modal-action mb-6">
         <div>
diff --git a/frontend/components/Item/View/Table.vue b/frontend/components/Item/View/Table.vue
index 99ac0eeb4..a8d594f53 100644
--- a/frontend/components/Item/View/Table.vue
+++ b/frontend/components/Item/View/Table.vue
@@ -18,7 +18,7 @@
               }"
             >
               <template v-if="typeof h === 'string'">{{ h }}</template>
-              <template v-else>{{ h.text }}</template>
+              <template v-else>{{ $t(h.text) }}</template>
               <div
                 v-if="sortByProperty === h.value"
                 :class="`inline-flex ${sortByProperty === h.value ? '' : 'opacity-0'}`"
@@ -109,11 +109,11 @@
               :checked="h.enabled"
               @change="toggleHeader(h.value)"
             />
-            <label class="label-text" :for="h.value"> {{ h.text }} </label>
+            <label class="label-text" :for="h.value"> {{ $t(h.text) }} </label>
           </li>
         </ul>
       </div>
-      <div class="hidden md:block">Rows per page</div>
+      <div class="hidden md:block">{{ $t("components.item.view.table.rows_per_page") }}</div>
       <select v-model.number="pagination.rowsPerPage" class="select select-primary select-sm">
         <option :value="10">10</option>
         <option :value="25">25</option>
@@ -122,7 +122,7 @@
       </select>
       <div class="btn-group">
         <button :disabled="!hasPrev" class="btn btn-sm" @click="prev()">«</button>
-        <button class="btn btn-sm">Page {{ pagination.page }}</button>
+        <button class="btn btn-sm">{{ $t("components.item.view.table.page") }} {{ pagination.page }}</button>
         <button :disabled="!hasNext" class="btn btn-sm" @click="next()">»</button>
       </div>
     </div>
@@ -149,20 +149,29 @@
   const preferences = useViewPreferences();
 
   const defaultHeaders = [
-    { text: "Name", value: "name", enabled: true, type: "name" },
-    { text: "Quantity", value: "quantity", align: "center", enabled: true },
-    { text: "Insured", value: "insured", align: "center", enabled: true, type: "boolean" },
-    { text: "Price", value: "purchasePrice", align: "center", enabled: true, type: "price" },
-    { text: "Location", value: "location", align: "center", enabled: false, type: "location" },
-    { text: "Archived", value: "archived", align: "center", enabled: false, type: "boolean" },
-    { text: "Created At", value: "createdAt", align: "center", enabled: false, type: "date" },
-    { text: "Updated At", value: "updatedAt", align: "center", enabled: false, type: "date" },
+    {
+      text: "items.name", value: "name", enabled: true, type: "name"
+    },
+    { text: "items.quantity", value: "quantity", align: "center", enabled: true },
+    { text: "items.insured", value: "insured", align: "center", enabled: true, type: "boolean" },
+    { text: "items.purchase_price", value: "purchasePrice", align: "center", enabled: true, type: "price" },
+    { text: "items.location", value: "location", align: "center", enabled: false, type: "location" },
+    { text: "items.archived", value: "archived", align: "center", enabled: false, type: "boolean" },
+    { text: "items.created_at", value: "createdAt", align: "center", enabled: false, type: "date" },
+    { text: "items.updated_at", value: "updatedAt", align: "center", enabled: false, type: "date" },
   ] satisfies TableHeader[];
 
   const headers = ref<TableHeader[]>(
     (preferences.value.tableHeaders ?? []).concat(
       defaultHeaders.filter(h => !preferences.value.tableHeaders?.find(h2 => h2.value === h.value))
     )
+    // this is a hack to make sure that any changes to the defaultHeaders are reflected in the preferences
+      .map(h => (
+        {
+          ...defaultHeaders.find(h2 => h2.value === h.value) as TableHeader,
+          enabled: h.enabled
+        }
+      ))
   );
 
   console.log(headers.value);
diff --git a/frontend/components/Label/CreateModal.vue b/frontend/components/Label/CreateModal.vue
index 4278fadc2..cabfd7686 100644
--- a/frontend/components/Label/CreateModal.vue
+++ b/frontend/components/Label/CreateModal.vue
@@ -7,11 +7,11 @@
         v-model="form.name"
         :trigger-focus="focused"
         :autofocus="true"
-        label="Label Name"
+        :label="$t('components.label.create_modal.label_name')"
         :max-length="255"
         :min-length="1"
       />
-      <FormTextArea v-model="form.description" label="Label Description" :max-length="255" />
+      <FormTextArea v-model="form.description" :label="$t('components.label.create_modal.label_description')" :max-length="255" />
       <div class="modal-action">
         <div class="flex justify-center">
           <BaseButton class="rounded-r-none" :loading="loading" type="submit"> {{ $t("global.create") }} </BaseButton>
diff --git a/frontend/components/Location/CreateModal.vue b/frontend/components/Location/CreateModal.vue
index 8963874ca..0c5c4a942 100644
--- a/frontend/components/Location/CreateModal.vue
+++ b/frontend/components/Location/CreateModal.vue
@@ -8,11 +8,11 @@
         :trigger-focus="focused"
         :autofocus="true"
         :required="true"
-        label="Location Name"
+        :label="$t('components.location.create_modal.location_name')"
         :max-length="255"
         :min-length="1"
       />
-      <FormTextArea v-model="form.description" label="Location Description" :max-length="1000" />
+      <FormTextArea v-model="form.description" :label="$t('components.location.create_modal.location_description')" :max-length="1000" />
       <LocationSelector v-model="form.parent" />
       <div class="modal-action">
         <div class="flex justify-center">
diff --git a/frontend/components/Location/Selector.vue b/frontend/components/Location/Selector.vue
index 69742e212..65a82b83e 100644
--- a/frontend/components/Location/Selector.vue
+++ b/frontend/components/Location/Selector.vue
@@ -1,5 +1,5 @@
 <template>
-  <FormAutocomplete2 v-if="locations" v-model="value" :items="locations" display="name" label="Parent Location">
+  <FormAutocomplete2 v-if="locations" v-model="value" :items="locations" display="name" :label="$t('components.location.selector.parent_location')">
     <template #display="{ item, selected, active }">
       <div>
         <div class="flex w-full">
diff --git a/frontend/components/global/DetailsSection/DetailsSection.vue b/frontend/components/global/DetailsSection/DetailsSection.vue
index 366440772..5944a3603 100644
--- a/frontend/components/global/DetailsSection/DetailsSection.vue
+++ b/frontend/components/global/DetailsSection/DetailsSection.vue
@@ -3,7 +3,7 @@
     <dl class="sm:divide-y sm:divide-gray-300">
       <div v-for="(detail, i) in details" :key="i" class="group py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
         <dt class="text-sm font-medium text-base-content">
-          {{ detail.name }}
+          {{ $t(detail.name) }}
         </dt>
         <dd class="text-start text-sm text-base-content sm:col-span-2">
           <slot :name="detail.slot || detail.name" v-bind="{ detail }">
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 4e7abe658..9ece67c00 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -62,9 +62,9 @@
                     {{ $t("global.create") }}
                   </label>
                   <ul tabindex="0" class="dropdown-content menu rounded-box bg-base-100 w-full p-2 shadow">
-                    <li v-for="btn in dropdown" :key="btn.name">
+                    <li v-for="btn in dropdown" :key="btn.id">
                       <button @click="btn.action">
-                        {{ btn.name }}
+                        {{ btn.name.value }}
                       </button>
                     </li>
                   </ul>
@@ -81,7 +81,7 @@
                     }"
                   >
                     <component :is="n.icon" class="mr-4 size-6" />
-                    {{ n.name }}
+                    {{ n.name.value }}
                   </NuxtLink>
                 </li>
               </ul>
@@ -135,19 +135,22 @@
 
   const dropdown = [
     {
-      name: "Item / Asset",
+      id: 0,
+      name: computed(() => t("menu.create_item")),
       action: () => {
         modals.item = true;
       },
     },
     {
-      name: "Location",
+      id: 1,
+      name: computed(() => t("menu.create_location")),
       action: () => {
         modals.location = true;
       },
     },
     {
-      name: "Label",
+      id: 2,
+      name: computed(() => t("menu.create_label")),
       action: () => {
         modals.label = true;
       },
@@ -168,42 +171,42 @@
       icon: MdiHome,
       active: computed(() => route.path === "/home"),
       id: 0,
-      name: t("menu.home"),
+      name: computed(() => t("menu.home")),
       to: "/home",
     },
     {
       icon: MdiFileTree,
       id: 1,
       active: computed(() => route.path === "/locations"),
-      name: t("menu.locations"),
+      name: computed(() => t("menu.locations")),
       to: "/locations",
     },
     {
       icon: MdiMagnify,
       id: 2,
       active: computed(() => route.path === "/items"),
-      name: t("menu.search"),
+      name: computed(() => t("menu.search")),
       to: "/items",
     },
     {
       icon: MdiWrench,
       id: 3,
       active: computed(() => route.path === "/maintenance"),
-      name: t("menu.maintenance"),
+      name: computed(() => t("menu.maintenance")),
       to: "/maintenance",
     },
     {
       icon: MdiAccount,
       id: 4,
       active: computed(() => route.path === "/profile"),
-      name: t("menu.profile"),
+      name: computed(() => t("menu.profile")),
       to: "/profile",
     },
     {
       icon: MdiCog,
       id: 5,
       active: computed(() => route.path === "/tools"),
-      name: t("menu.tools"),
+      name: computed(() => t("menu.tools")),
       to: "/tools",
     },
   ];
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index a19ec1aef..45b7a4f4d 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -19,7 +19,9 @@
         "item": {
             "create_modal": {
                 "photo_button": "Photo 📷",
-                "title": "Create Item"
+                "title": "Create Item",
+                "item_name": "Item Name",
+                "item_description": "Item Description"
             },
             "view": {
                 "selectable": {
@@ -27,20 +29,31 @@
                     "items": "Items",
                     "no_items": "No Items to Display",
                     "table": "Table"
+                },
+                "table": {
+                    "rows_per_page": "Rows per page",
+                    "page": "Page"
                 }
             }
         },
         "label": {
             "create_modal": {
-                "title": "Create Label"
+                "title": "Create Label",
+                "label_name": "Label Name",
+                "label_description": "Label Description"
             }
         },
         "location": {
             "create_modal": {
-                "title": "Create Location"
+                "title": "Create Location",
+                "location_name": "Location Name",
+                "location_description": "Location Description"
             },
             "tree": {
                 "no_locations": "No locations available. Add new locations through the\n `<`span class=\"link-primary\"`>`Create`<`/span`>` button on the navigation bar."
+            },
+            "selector": {
+                "parent_location": "Parent Location"
             }
         }
     },
@@ -64,7 +77,16 @@
         "sign_out": "Sign Out",
         "submit": "Submit",
         "version": "Version: { version }",
-        "welcome": "Welcome, { username }"
+        "welcome": "Welcome, { username }",
+        "edit": "Edit",
+        "delete": "Delete",
+        "update": "Update",
+        "maintenance": "Maintenance",
+        "details": "Details",
+        "duplicate": "Duplicate",
+        "save": "Save",
+        "value": "Value",
+        "add": "Add"
     },
     "index": {
         "disabled_registration": "Registration Disabled",
@@ -78,6 +100,16 @@
         "set_password": "Set your password",
         "tagline": "Track, Organize, and Manage your Things."
     },
+    "home": {
+        "quick_statistics": "Quick Statistics",
+        "total_value": "Total Value",
+        "total_items": "Total Items",
+        "total_locations": "Total Locations",
+        "total_labels": "Total Labels",
+        "recently_added": "Recently Added",
+        "storage_locations": "Storage Locations",
+        "labels": "Labels"
+    },
     "items": {
         "add": "Add",
         "created_at": "Created At",
@@ -102,10 +134,48 @@
         "tip_3": "Field filters use the 'OR' operation. If more than one is selected only one will be required for a\n match.",
         "tips": "Tips",
         "tips_sub": "Search Tips",
-        "updated_at": "Updated At"
+        "updated_at": "Updated At",
+        "name": "Name",
+        "quantity": "Quantity",
+        "insured": "Insured",
+        "purchase_price": "Purchase Price",
+        "purchased_from": "Purchased From",
+        "purchase_date": "Purchase Date",
+        "sold_to": "Sold To",
+        "sold_price": "Sold Price",
+        "sold_at": "Sold At",
+        "location": "Location",
+        "archived": "Archived",
+        "serial_number": "Serial Number",
+        "model_number": "Model Number",
+        "manufacturer": "Manufacturer",
+        "notes": "Notes",
+        "details": "Details",
+        "photos": "Photos",
+        "attachments": "Attachments",
+        "purchase_details": "Purchase Details",
+        "warranty_details": "Warranty Details",
+        "sold_details": "Sold Details",
+        "warranty": "Warranty",
+        "lifetime_warranty": "Lifetime Warranty",
+        "warranty_expires": "Warranty Expires",
+        "manuals": "Manuals",
+        "receipts": "Receipts",
+        "show_advanced_view_options": "Show Advanced View Options",
+        "advanced": "Advanced",
+        "edit_details": "Edit Details",
+        "parent_item": "Parent Item",
+        "asset_id": "Asset ID",
+        "changes_persisted_immediately": "Changes to attachments will be saved immediately",
+        "drag_and_drop": "Drag and drop files here or click to select files",
+        "manual": "Manual",
+        "photo": "Photo",
+        "receipt": "Receipt",
+        "attachment": "Attachment"
     },
     "labels": {
-        "no_results": "No Labels Found"
+        "no_results": "No Labels Found",
+        "update_label": "Update Label"
     },
     "languages": {
         "ca": "Catalan",
@@ -125,10 +195,16 @@
         "zh-CN": "Chinese (Simplified)",
         "zh-HK": "Chinese (Hong Kong)",
         "zh-MO": "Chinese (Macau)",
-        "zh-TW": "Chinese (Traditional)"
+        "zh-TW": "Chinese (Traditional)",
+        "ja-JP": "Japanese",
+        "pt-PT": "Portuguese (Portugal)",
+        "uk-UA": "Ukrainian"
     },
     "locations": {
-        "no_results": "No Locations Found"
+        "no_results": "No Locations Found",
+        "collapse_tree": "Collapse Tree",
+        "child_locations": "Child Locations",
+        "update_location": "Update Location"
     },
     "maintenance": {
         "filter": {
@@ -171,12 +247,16 @@
         "maintenance": "Maintenance",
         "profile": "Profile",
         "search": "Search",
-        "tools": "Tools"
+        "tools": "Tools",
+        "create_item": "Item / Asset",
+        "create_location": "Location",
+        "create_label": "Label"
     },
     "profile": {
         "active": "Active",
         "change_password": "Change Password",
         "currency_format": "Currency Format",
+        "example": "Example",
         "current_password": "Current Password",
         "delete_account": "Delete Account",
         "delete_account_sub": "Delete your account and all its associated data. This can not be undone.",
@@ -239,4 +319,4 @@
         },
         "reports_sub": "Generate different reports for your inventory."
     }
-}
+}
\ No newline at end of file
diff --git a/frontend/pages/home/index.vue b/frontend/pages/home/index.vue
index 463d221bf..1678783d7 100644
--- a/frontend/pages/home/index.vue
+++ b/frontend/pages/home/index.vue
@@ -28,14 +28,14 @@
   <div>
     <BaseContainer class="flex flex-col gap-12 pb-16">
       <section>
-        <Subtitle> Quick Statistics </Subtitle>
+        <Subtitle> {{ $t("home.quick_statistics") }} </Subtitle>
         <div class="grid grid-cols-2 gap-2 md:grid-cols-4 md:gap-6">
           <StatCard v-for="(stat, i) in stats" :key="i" :title="stat.label" :value="stat.value" :type="stat.type" />
         </div>
       </section>
 
       <section>
-        <Subtitle>Recently Added</Subtitle>
+        <Subtitle> {{ $t("home.recently_added") }} </Subtitle>
 
         <p v-if="itemTable.items.length === 0" class="ml-2 text-sm">{{ $t("items.no_results") }}</p>
         <BaseCard v-else-if="breakpoints.lg">
@@ -47,7 +47,7 @@
       </section>
 
       <section>
-        <Subtitle> Storage Locations </Subtitle>
+        <Subtitle> {{ $t("home.storage_locations") }} </Subtitle>
         <p v-if="locations.length === 0" class="ml-2 text-sm">{{ $t("locations.no_results") }}</p>
         <div v-else class="card grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
           <LocationCard v-for="location in locations" :key="location.id" :location="location" />
@@ -55,7 +55,7 @@
       </section>
 
       <section>
-        <Subtitle> Labels </Subtitle>
+        <Subtitle> {{ $t("home.labels") }} </Subtitle>
         <p v-if="labels.length === 0" class="ml-2 text-sm">{{ $t("labels.no_results") }}</p>
         <div v-else class="flex flex-wrap gap-4">
           <LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" class="shadow-md" />
diff --git a/frontend/pages/home/statistics.ts b/frontend/pages/home/statistics.ts
index 40ec1c2f3..209509bf5 100644
--- a/frontend/pages/home/statistics.ts
+++ b/frontend/pages/home/statistics.ts
@@ -1,3 +1,4 @@
+import { useI18n } from "vue-i18n";
 import type { UserClient } from "~~/lib/api/user";
 
 type StatCard = {
@@ -7,6 +8,8 @@ type StatCard = {
 };
 
 export function statCardData(api: UserClient) {
+  const { t } = useI18n();
+
   const { data: statistics } = useAsyncData(async () => {
     const { data } = await api.stats.group();
     return data;
@@ -15,22 +18,22 @@ export function statCardData(api: UserClient) {
   return computed(() => {
     return [
       {
-        label: "Total Value",
+        label: t("home.total_value"),
         value: statistics.value?.totalItemPrice || 0,
         type: "currency",
       },
       {
-        label: "Total Items",
+        label: t("home.total_items"),
         value: statistics.value?.totalItems || 0,
         type: "number",
       },
       {
-        label: "Total Locations",
+        label: t("home.total_locations"),
         value: statistics.value?.totalLocations || 0,
         type: "number",
       },
       {
-        label: "Total Labels",
+        label: t("home.total_labels"),
         value: statistics.value?.totalLabels || 0,
         type: "number",
       },
diff --git a/frontend/pages/item/[id]/index.vue b/frontend/pages/item/[id]/index.vue
index 4ec23dd76..002fd0dc6 100644
--- a/frontend/pages/item/[id]/index.vue
+++ b/frontend/pages/item/[id]/index.vue
@@ -153,35 +153,35 @@
 
     const ret: Details = [
       {
-        name: "Quantity",
+        name: "items.quantity",
         text: item.value?.quantity,
         slot: "quantity",
       },
       {
-        name: "Serial Number",
+        name: "items.serial_number",
         text: item.value?.serialNumber,
         copyable: true,
       },
       {
-        name: "Model Number",
+        name: "items.model_number",
         text: item.value?.modelNumber,
         copyable: true,
       },
       {
-        name: "Manufacturer",
+        name: "items.manufacturer",
         text: item.value?.manufacturer,
         copyable: true,
       },
       {
-        name: "Insured",
+        name: "items.insured",
         text: item.value?.insured ? "Yes" : "No",
       },
       {
-        name: "Archived",
+        name: "items.archived",
         text: item.value?.archived ? "Yes" : "No",
       },
       {
-        name: "Notes",
+        name: "items.notes",
         type: "markdown",
         text: item.value?.notes,
       },
@@ -230,28 +230,28 @@
   const attachmentDetails = computed(() => {
     const details: Detail[] = [];
 
-    const push = (name: string) => {
+    const push = (name: string, slot: string) => {
       details.push({
         name,
         text: "",
-        slot: name.toLowerCase(),
+        slot: slot,
       });
     };
 
     if (attachments.value.attachments.length > 0) {
-      push("Attachments");
+      push("items.attachments", "attachments");
     }
 
     if (attachments.value.warranty.length > 0) {
-      push("Warranty");
+      push("items.warranty", "warranty");
     }
 
     if (attachments.value.manuals.length > 0) {
-      push("Manuals");
+      push("items.manuals", "manuals");
     }
 
     if (attachments.value.receipts.length > 0) {
-      push("Receipts");
+      push("items.receipts", "receipts");
     }
 
     return details;
@@ -309,16 +309,16 @@
   const purchaseDetails = computed<Details>(() => {
     const v: Details = [
       {
-        name: "Purchased From",
+        name: "items.purchased_from",
         text: item.value?.purchaseFrom || "",
       },
       {
-        name: "Purchase Price",
-        text: item.value?.purchasePrice || "",
+        name: "items.purchase_price",
+        text: String(item.value?.purchasePrice) || "",
         type: "currency",
       },
       {
-        name: "Purchase Date",
+        name: "items.purchase_date",
         text: item.value?.purchaseTime || "",
         type: "date",
         date: true,
@@ -342,16 +342,16 @@
   const soldDetails = computed<Details>(() => {
     const v: Details = [
       {
-        name: "Sold To",
+        name: "items.sold_to",
         text: item.value?.soldTo || "",
       },
       {
-        name: "Sold Price",
-        text: item.value?.soldPrice || "",
+        name: "items.sold_price",
+        text: String(item.value?.soldPrice) || "",
         type: "currency",
       },
       {
-        name: "Sold At",
+        name: "items.sold_at",
         text: item.value?.soldTime || "",
         type: "date",
         date: true,
@@ -394,17 +394,17 @@
     return [
       {
         id: "details",
-        name: "Details",
+        name: "global.details",
         to: `/item/${itemId.value}`,
       },
       {
         id: "log",
-        name: "Maintenance",
+        name: "global.maintenance",
         to: `/item/${itemId.value}/maintenance`,
       },
       {
         id: "edit",
-        name: "Edit",
+        name: "global.edit",
         to: `/item/${itemId.value}/edit`,
       },
     ];
@@ -509,7 +509,7 @@
             class="btn btn-sm"
             :class="`${t.to === currentPath ? 'btn-active' : ''}`"
           >
-            {{ t.name }}
+            {{ $t(t.name) }}
           </NuxtLink>
         </div>
       </div>
@@ -518,7 +518,7 @@
     <section>
       <div class="space-y-6">
         <BaseCard v-if="!hasNested" collapsable>
-          <template #title> Details </template>
+          <template #title> {{ $t("items.details") }} </template>
           <template #title-actions>
             <div class="mt-2 flex flex-wrap items-center justify-between gap-4">
               <label class="label cursor-pointer">
@@ -548,7 +548,7 @@
         <NuxtPage :item="item" :page-key="itemId" />
         <template v-if="!hasNested">
           <BaseCard v-if="photos && photos.length > 0">
-            <template #title> Photos </template>
+            <template #title> {{ $t("items.photos") }} </template>
             <div
               class="scroll-bg container mx-auto flex max-h-[500px] flex-wrap gap-2 overflow-y-scroll border-t border-gray-300 p-4"
             >
@@ -559,7 +559,7 @@
           </BaseCard>
 
           <BaseCard v-if="showAttachments" collapsable>
-            <template #title> Attachments </template>
+            <template #title> {{ $t("items.attachments") }} </template>
             <DetailsSection v-if="attachmentDetails.length > 0" :details="attachmentDetails">
               <template #manuals>
                 <ItemAttachmentsList
@@ -596,17 +596,17 @@
           </BaseCard>
 
           <BaseCard v-if="showPurchase" collapsable>
-            <template #title> Purchase Details </template>
+            <template #title> {{ $t("items.purchase_details") }} </template>
             <DetailsSection :details="purchaseDetails" />
           </BaseCard>
 
           <BaseCard v-if="showWarranty" collapsable>
-            <template #title> Warranty Details </template>
+            <template #title> {{ $t("items.warranty_details") }} </template>
             <DetailsSection :details="warrantyDetails" />
           </BaseCard>
 
           <BaseCard v-if="showSold" collapsable>
-            <template #title> Sold Details </template>
+            <template #title> {{ $t("items.sold_details") }} </template>
             <DetailsSection :details="soldDetails" />
           </BaseCard>
         </template>
diff --git a/frontend/pages/item/[id]/index/edit.vue b/frontend/pages/item/[id]/index/edit.vue
index dfe4e08fe..664205c0c 100644
--- a/frontend/pages/item/[id]/index/edit.vue
+++ b/frontend/pages/item/[id]/index/edit.vue
@@ -182,59 +182,59 @@
   const mainFields: FormField[] = [
     {
       type: "text",
-      label: "Name",
+      label: "items.name",
       ref: "name",
       maxLength: 255,
       minLength: 1,
     },
     {
       type: "number",
-      label: "Quantity",
+      label: "items.quantity",
       ref: "quantity",
     },
     {
       type: "textarea",
-      label: "Description",
+      label: "items.description",
       ref: "description",
       maxLength: 1000,
     },
     {
       type: "text",
-      label: "Serial Number",
+      label: "items.serial_number",
       ref: "serialNumber",
       maxLength: 255,
     },
     {
       type: "text",
-      label: "Model Number",
+      label: "items.model_number",
       ref: "modelNumber",
       maxLength: 255,
     },
     {
       type: "text",
-      label: "Manufacturer",
+      label: "items.manufacturer",
       ref: "manufacturer",
       maxLength: 255,
     },
     {
       type: "textarea",
-      label: "Notes",
+      label: "items.notes",
       ref: "notes",
       maxLength: 1000,
     },
     {
       type: "checkbox",
-      label: "Insured",
+      label: "items.insured",
       ref: "insured",
     },
     {
       type: "checkbox",
-      label: "Archived",
+      label: "items.archived",
       ref: "archived",
     },
     {
       type: "text",
-      label: "Asset ID",
+      label: "items.asset_id",
       ref: "assetId",
     },
   ];
@@ -242,18 +242,18 @@
   const purchaseFields: FormField[] = [
     {
       type: "text",
-      label: "Purchased From",
+      label: "items.purchased_from",
       ref: "purchaseFrom",
       maxLength: 255,
     },
     {
       type: "number",
-      label: "Purchase Price",
+      label: "items.purchase_price",
       ref: "purchasePrice",
     },
     {
       type: "date",
-      label: "Purchase Date",
+      label: "items.purchase_date",
       // @ts-expect-error - we know this is a date
       ref: "purchaseTime",
     },
@@ -262,18 +262,18 @@
   const warrantyFields: FormField[] = [
     {
       type: "checkbox",
-      label: "Lifetime Warranty",
+      label: "items.lifetime_warranty",
       ref: "lifetimeWarranty",
     },
     {
       type: "date",
-      label: "Warranty Expires",
+      label: "items.warranty_expires",
       // @ts-expect-error - we know this is a date
       ref: "warrantyExpires",
     },
     {
       type: "textarea",
-      label: "Warranty Notes",
+      label: "items.warranty_details",
       ref: "warrantyDetails",
       maxLength: 1000,
     },
@@ -282,18 +282,18 @@
   const soldFields: FormField[] = [
     {
       type: "text",
-      label: "Sold To",
+      label: "items.sold_to",
       ref: "soldTo",
       maxLength: 255,
     },
     {
       type: "number",
-      label: "Sold Price",
+      label: "items.sold_price",
       ref: "soldPrice",
     },
     {
       type: "date",
-      label: "Sold At",
+      label: "items.sold_at",
       // @ts-expect-error - we know this is a date
       ref: "soldTime",
     },
@@ -503,45 +503,45 @@
 
     <section class="relative">
       <div class="sticky top-1 z-10 my-4 flex items-center justify-end gap-2">
-        <div class="tooltip tooltip-right mr-auto" data-tip="Show Advanced View Options">
+        <div class="tooltip tooltip-right mr-auto" :data-tip="$t('items.show_advanced_view_options')">
           <label class="label mr-auto cursor-pointer">
             <input v-model="preferences.editorAdvancedView" type="checkbox" class="toggle toggle-primary" />
-            <span class="label-text ml-4"> Advanced </span>
+            <span class="label-text ml-4"> {{ $t("items.advanced") }} </span>
           </label>
         </div>
         <BaseButton size="sm" class="btn" @click="duplicateItem">
           <template #icon>
             <MdiContentCopy />
           </template>
-          Duplicate
+          {{ $t("global.duplicate") }}
         </BaseButton>
         <BaseButton size="sm" @click="saveItem">
           <template #icon>
             <MdiContentSaveOutline />
           </template>
-          Save
+          {{ $t("global.save") }}
         </BaseButton>
         <BaseButton class="btn btn-error btn-sm" @click="deleteItem()">
           <MdiDelete class="mr-2" />
-          Delete
+          {{ $t("global.delete") }}
         </BaseButton>
       </div>
       <div v-if="!requestPending" class="space-y-6">
         <BaseCard class="overflow-visible">
-          <template #title> Edit Details </template>
+          <template #title> {{ $t("items.edit_details") }} </template>
           <template #title-actions>
             <div class="mt-2 flex flex-wrap items-center justify-between gap-4"></div>
           </template>
           <div class="mb-6 grid gap-4 border-t px-5 pt-2 md:grid-cols-2">
             <LocationSelector v-model="item.location" />
-            <FormMultiselect v-model="item.labels" label="Labels" :items="labels ?? []" />
+            <FormMultiselect v-model="item.labels" :label="$t('global.labels')" :items="labels ?? []" />
             <Autocomplete
               v-if="preferences.editorAdvancedView"
               v-model="parent"
               v-model:search="query"
               :items="results"
               item-text="name"
-              label="Parent Item"
+              :label="$t('items.parent_item')"
               no-results-text="Type to search..."
             />
           </div>
@@ -552,7 +552,7 @@
                 <FormTextArea
                   v-if="field.type === 'textarea'"
                   v-model="item[field.ref]"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                   :max-length="field.maxLength"
                   :min-length="field.minLength"
@@ -560,7 +560,7 @@
                 <FormTextField
                   v-else-if="field.type === 'text'"
                   v-model="item[field.ref]"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                   type="text"
                   :max-length="field.maxLength"
@@ -570,19 +570,19 @@
                   v-else-if="field.type === 'number'"
                   v-model.number="item[field.ref]"
                   type="number"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                 />
                 <FormDatePicker
                   v-else-if="field.type === 'date'"
                   v-model="item[field.ref]"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                 />
                 <FormCheckbox
                   v-else-if="field.type === 'checkbox'"
                   v-model="item[field.ref]"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                 />
               </div>
@@ -591,7 +591,7 @@
         </BaseCard>
 
         <BaseCard>
-          <template #title> Custom Fields </template>
+          <template #title> {{ $t("items.custom_fields") }} </template>
           <div class="space-y-4 divide-y divide-gray-300 border-t px-5">
             <div
               v-for="(field, idx) in item.fields"
@@ -599,10 +599,10 @@
               class="grid grid-cols-2 gap-2 md:grid-cols-4"
             >
               <!-- <FormSelect v-model:value="field.type" label="Field Type" :items="fieldTypes" value-key="value" /> -->
-              <FormTextField v-model="field.name" label="Name" />
+              <FormTextField v-model="field.name" :label="$t('global.name')" />
               <div class="col-span-3 flex items-end">
-                <FormTextField v-model="field.textValue" label="Value" :max-length="500" />
-                <div class="tooltip" data-tip="Delete">
+                <FormTextField v-model="field.textValue" :label="$t('global.value')" :max-length="500" />
+                <div class="tooltip" :data-tip="$t('global.delete')">
                   <button class="btn btn-square btn-sm mb-2 ml-2" @click="item.fields.splice(idx, 1)">
                     <MdiDelete />
                   </button>
@@ -611,7 +611,7 @@
             </div>
           </div>
           <div class="mt-4 flex justify-end px-5 pb-4">
-            <BaseButton size="sm" @click="addField"> Add </BaseButton>
+            <BaseButton size="sm" @click="addField"> {{$t("global.add")}} </BaseButton>
           </div>
         </BaseCard>
 
@@ -621,16 +621,16 @@
           class="card overflow-visible bg-base-100 shadow-xl sm:rounded-lg"
         >
           <div class="px-4 py-5 sm:px-6">
-            <h3 class="text-lg font-medium leading-6">Attachments</h3>
-            <p class="text-xs">Changes to attachments will be saved immediately</p>
+            <h3 class="text-lg font-medium leading-6"> {{ $t("items.attachments") }} </h3>
+            <p class="text-xs">{{ $t("items.changes_persisted_immediately") }}</p>
           </div>
           <div class="border-t border-gray-300 p-4">
             <div v-if="attDropZoneActive" class="grid grid-cols-4 gap-4">
-              <DropZone @drop="dropPhoto"> Photo </DropZone>
-              <DropZone @drop="dropWarranty"> Warranty </DropZone>
-              <DropZone @drop="dropManual"> Manual </DropZone>
-              <DropZone @drop="dropAttachment"> Attachment </DropZone>
-              <DropZone @drop="dropReceipt"> Receipt </DropZone>
+              <DropZone @drop="dropPhoto"> {{ $t("items.photos") }} </DropZone>
+              <DropZone @drop="dropWarranty"> {{ $t("items.warranty") }} </DropZone>
+              <DropZone @drop="dropManual"> {{ $t("items.manuals") }} </DropZone>
+              <DropZone @drop="dropAttachment"> {{ $t("items.attachments") }} </DropZone>
+              <DropZone @drop="dropReceipt"> {{ $t("items.receipts") }} </DropZone>
             </div>
             <button
               v-else
@@ -638,7 +638,7 @@
               @click="clickUpload"
             >
               <input ref="refAttachmentInput" hidden type="file" @change="uploadImage" />
-              <p>Drag and drop files here or click to select files</p>
+              <p>{{ $t("items.drag_and_drop") }}</p>
             </button>
           </div>
 
@@ -653,15 +653,15 @@
                   {{ attachment.document.title }}
                 </p>
                 <p class="my-auto">
-                  {{ capitalize(attachment.type) }}
+                  {{ $t(`items.${attachment.type}`) }}
                 </p>
                 <div class="flex justify-end gap-2">
-                  <div class="tooltip" data-tip="Delete">
+                  <div class="tooltip" :data-tip="$t('global.delete')">
                     <button class="btn btn-square btn-sm" @click="deleteAttachment(attachment.id)">
                       <MdiDelete />
                     </button>
                   </div>
-                  <div class="tooltip" data-tip="Edit">
+                  <div class="tooltip" :data-tip="$t('global.edit')">
                     <button class="btn btn-square btn-sm" @click="openAttachmentEditDialog(attachment)">
                       <MdiPencil />
                     </button>
@@ -674,7 +674,7 @@
 
         <div v-if="preferences.editorAdvancedView" class="card overflow-visible bg-base-100 shadow-xl sm:rounded-lg">
           <div class="px-4 py-5 sm:px-6">
-            <h3 class="text-lg font-medium leading-6">Purchase Details</h3>
+            <h3 class="text-lg font-medium leading-6">{{ $t("items.purchase_details") }}</h3>
           </div>
           <div class="border-t border-gray-300 sm:p-0">
             <div
@@ -686,7 +686,7 @@
                 <FormTextArea
                   v-if="field.type === 'textarea'"
                   v-model="item[field.ref]"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                   :max-length="field.maxLength"
                   :min-length="field.minLength"
@@ -694,7 +694,7 @@
                 <FormTextField
                   v-else-if="field.type === 'text'"
                   v-model="item[field.ref]"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                   :max-length="field.maxLength"
                   :min-length="field.minLength"
@@ -703,19 +703,19 @@
                   v-else-if="field.type === 'number'"
                   v-model.number="item[field.ref]"
                   type="number"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                 />
                 <FormDatePicker
                   v-else-if="field.type === 'date'"
                   v-model="item[field.ref]"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                 />
                 <FormCheckbox
                   v-else-if="field.type === 'checkbox'"
                   v-model="item[field.ref]"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                 />
               </div>
@@ -725,7 +725,7 @@
 
         <div v-if="preferences.editorAdvancedView" class="card overflow-visible bg-base-100 shadow-xl sm:rounded-lg">
           <div class="px-4 py-5 sm:px-6">
-            <h3 class="text-lg font-medium leading-6">Warranty Details</h3>
+            <h3 class="text-lg font-medium leading-6">{{ $t("items.warranty_details") }}</h3>
           </div>
           <div class="border-t border-gray-300 sm:p-0">
             <div
@@ -737,7 +737,7 @@
                 <FormTextArea
                   v-if="field.type === 'textarea'"
                   v-model="item[field.ref]"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                   :max-length="field.maxLength"
                   :min-length="field.minLength"
@@ -745,7 +745,7 @@
                 <FormTextField
                   v-else-if="field.type === 'text'"
                   v-model="item[field.ref]"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                   :max-length="field.maxLength"
                   :min-length="field.minLength"
@@ -754,19 +754,19 @@
                   v-else-if="field.type === 'number'"
                   v-model.number="item[field.ref]"
                   type="number"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                 />
                 <FormDatePicker
                   v-else-if="field.type === 'date'"
                   v-model="item[field.ref]"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                 />
                 <FormCheckbox
                   v-else-if="field.type === 'checkbox'"
                   v-model="item[field.ref]"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                 />
               </div>
@@ -784,7 +784,7 @@
                 <FormTextArea
                   v-if="field.type === 'textarea'"
                   v-model="item[field.ref]"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                   :max-length="field.maxLength"
                   :min-length="field.minLength"
@@ -792,7 +792,7 @@
                 <FormTextField
                   v-else-if="field.type === 'text'"
                   v-model="item[field.ref]"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                   :max-length="field.maxLength"
                   :min-length="field.minLength"
@@ -801,19 +801,19 @@
                   v-else-if="field.type === 'number'"
                   v-model.number="item[field.ref]"
                   type="number"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                 />
                 <FormDatePicker
                   v-else-if="field.type === 'date'"
                   v-model="item[field.ref]"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                 />
                 <FormCheckbox
                   v-else-if="field.type === 'checkbox'"
                   v-model="item[field.ref]"
-                  :label="field.label"
+                  :label="$t(field.label)"
                   inline
                 />
               </div>
diff --git a/frontend/pages/label/[id].vue b/frontend/pages/label/[id].vue
index 37812485b..90d8818b6 100644
--- a/frontend/pages/label/[id].vue
+++ b/frontend/pages/label/[id].vue
@@ -95,18 +95,18 @@
 <template>
   <BaseContainer>
     <BaseModal v-model="updateModal">
-      <template #title> Update Label </template>
+      <template #title> {{ $t("labels.update_label") }} </template>
       <form v-if="label" @submit.prevent="update">
         <FormTextField
           v-model="updateData.name"
           :autofocus="true"
-          label="Label Name"
+          :label="$t('components.label.create_modal.label_name')"
           :max-length="255"
           :min-length="1"
         />
-        <FormTextArea v-model="updateData.description" label="Label Description" :max-length="255" />
+        <FormTextArea v-model="updateData.description" :label="$t('components.label.create_modal.label_description')" :max-length="255" />
         <div class="modal-action">
-          <BaseButton type="submit" :loading="updating"> Update </BaseButton>
+          <BaseButton type="submit" :loading="updating"> {{$t("global.update")}} </BaseButton>
         </div>
       </form>
     </BaseModal>
diff --git a/frontend/pages/location/[id].vue b/frontend/pages/location/[id].vue
index d5a4263ac..73871a449 100644
--- a/frontend/pages/location/[id].vue
+++ b/frontend/pages/location/[id].vue
@@ -109,13 +109,13 @@
   <div>
     <!-- Update Dialog -->
     <BaseModal v-model="updateModal">
-      <template #title> Update Location </template>
+      <template #title> {{ $t("locations.update_location") }} </template>
       <form v-if="location" @submit.prevent="update">
-        <FormTextField v-model="updateData.name" :autofocus="true" label="Location Name" :max-length="255" :min-length="1" />
-        <FormTextArea v-model="updateData.description" label="Location Description" :max-length="1000" />
+        <FormTextField v-model="updateData.name" :autofocus="true" :label="$t('components.location.create_modal.location_name')" :max-length="255" :min-length="1" />
+        <FormTextArea v-model="updateData.description" :label="$t('components.location.create_modal.location_description')" :max-length="1000" />
         <LocationSelector v-model="parent" />
         <div class="modal-action">
-          <BaseButton type="submit" :loading="updating"> Update </BaseButton>
+          <BaseButton type="submit" :loading="updating"> {{ $t("global.update") }} </BaseButton>
         </div>
       </form>
     </BaseModal>
@@ -152,7 +152,7 @@
               </h1>
               <div class="flex flex-wrap gap-1 text-xs">
                 <div>
-                  Created
+                  {{ $t("global.created") }}
                   <DateTime :date="location?.createdAt" />
                 </div>
               </div>
@@ -162,12 +162,12 @@
                 <PageQRCode class="dropdown-left" />
                 <BaseButton size="sm" @click="openUpdate">
                   <MdiPencil class="mr-1" name="mdi-pencil" />
-                  Edit
+                  {{ $t("global.edit") }}
                 </BaseButton>
               </div>
               <BaseButton class="btn btn-sm" @click="confirmDelete()">
                 <MdiDelete name="mdi-delete" class="mr-2" />
-                Delete
+                {{ $t("global.delete") }}
               </BaseButton>
             </div>
           </div>
@@ -180,7 +180,7 @@
       </section>
 
       <section v-if="location && location.children.length > 0" class="mt-6">
-        <BaseSectionHeader class="mb-5"> Child Locations </BaseSectionHeader>
+        <BaseSectionHeader class="mb-5"> {{ t("locations.child_locations") }} </BaseSectionHeader>
         <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
           <LocationCard v-for="item in location.children" :key="item.id" :location="item" />
         </div>
diff --git a/frontend/pages/locations.vue b/frontend/pages/locations.vue
index fab4b497b..03b10a3b1 100644
--- a/frontend/pages/locations.vue
+++ b/frontend/pages/locations.vue
@@ -67,7 +67,7 @@
       <div class="p-4">
         <div class="mb-2 flex justify-end">
           <div class="btn-group">
-            <button class="btn tooltip tooltip-top btn-sm" data-tip="Collapse Tree" @click="closeAll">
+            <button class="btn tooltip tooltip-top btn-sm" :data-tip="$t('locations.collapse_tree')" @click="closeAll">
               <MdiCollapseAllOutline />
             </button>
           </div>
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index 0fe287394..6e0b42496 100644
--- a/frontend/pages/profile.vue
+++ b/frontend/pages/profile.vue
@@ -8,6 +8,7 @@
   import MdiFill from "~icons/mdi/fill";
   import MdiPencil from "~icons/mdi/pencil";
   import MdiAccountMultiple from "~icons/mdi/account-multiple";
+import { useI18n } from "vue-i18n";
 
   definePageMeta({
     middleware: ["auth"],
@@ -19,6 +20,7 @@
   const api = useUserApi();
   const confirm = useConfirm();
   const notify = useNotifier();
+  const { t } = useI18n();
 
   const currencies = computedAsync(async () => {
     const resp = await api.group.currencies();
@@ -105,11 +107,11 @@
     console.log(auth.user);
     return [
       {
-        name: "Name",
+        name: "global.name",
         text: auth.user?.name || "Unknown",
       },
       {
-        name: "Email",
+        name: "global.email",
         text: auth.user?.email || "Unknown",
       },
     ] as Detail[];
@@ -376,14 +378,12 @@
           <label class="label">
             <span class="label-text">{{ $t("profile.language") }}</span>
           </label>
-          <select v-model="$i18n.locale" class="select select-bordered">
+          <select v-model="$i18n.locale" @change="(event) => {setLanguage((event.target as HTMLSelectElement).value )}"
+            class="select select-bordered">
             <option v-for="lang in $i18n.availableLocales" :key="lang" :value="lang">
               {{ $t(`languages.${lang}`) }}
             </option>
           </select>
-          <div class="mt-4">
-            <BaseButton size="sm" @click="setLanguage($i18n.locale)"> {{ $t("profile.update_language") }} </BaseButton>
-          </div>
         </div>
       </BaseCard>
 
@@ -447,7 +447,7 @@
 
         <div v-if="group && currencies && currencies.length > 0" class="p-5 pt-0">
           <FormSelect v-model="currency" :label="$t('profile.currency_format')" :items="currencies" />
-          <p class="m-2 text-sm">Example: {{ currencyExample }}</p>
+          <p class="m-2 text-sm">{{$t("profile.example")}}: {{ currencyExample }}</p>
 
           <div class="mt-4">
             <BaseButton size="sm" @click="updateGroup"> {{ $t("profile.update_group") }} </BaseButton>
diff --git a/frontend/plugins/i18n.ts b/frontend/plugins/i18n.ts
index f0faae5ea..f6994dcb7 100644
--- a/frontend/plugins/i18n.ts
+++ b/frontend/plugins/i18n.ts
@@ -32,7 +32,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
   vueApp.use(i18n);
 });
 
-export const messages: Object = () => {
+export const messages = () => {
   const messages: Record<string, any> = {};
   const modules = import.meta.glob("~//locales/**.json", { eager: true });
   for (const path in modules) {

From 1d5b62fdf3f36fca9439c9a8b1fdefc0ede313ab Mon Sep 17 00:00:00 2001
From: tonya <tonya@tokia.dev>
Date: Wed, 23 Oct 2024 23:56:31 +0000
Subject: [PATCH 2/2] feat: add locale time ago formatting and the local name
 for the language in language dropdown

---
 frontend/composables/use-formatters.ts | 61 +++++++++++++++++++++++++-
 frontend/locales/en.json               | 27 +++++++++++-
 frontend/pages/profile.vue             |  2 +-
 3 files changed, 86 insertions(+), 4 deletions(-)

diff --git a/frontend/composables/use-formatters.ts b/frontend/composables/use-formatters.ts
index 32a2a732a..d21617c12 100644
--- a/frontend/composables/use-formatters.ts
+++ b/frontend/composables/use-formatters.ts
@@ -1,3 +1,6 @@
+import { useI18n } from "vue-i18n";
+import { type UseTimeAgoMessages, type UseTimeAgoUnitNamesDefault } from "@vueuse/core";
+
 const cache = {
   currency: "",
 };
@@ -37,7 +40,61 @@ function ordinalIndicator(num: number) {
   }
 }
 
-export function fmtDate(value: string | Date, fmt: DateTimeFormat = "human"): string {
+export function useLocaleTimeAgo(date: Date) {
+  const { t } = useI18n();
+
+  const I18N_MESSAGES: UseTimeAgoMessages<UseTimeAgoUnitNamesDefault> = {
+    justNow: t("components.global.date_time.just-now"),
+    past: (n) => (n.match(/\d/) ? t("components.global.date_time.ago", [n]) : n),
+    future: (n) => (n.match(/\d/) ? t("components.global.date_time.in", [n]) : n),
+    month: (n, past) =>
+      n === 1
+        ? past
+          ? t("components.global.date_time.last-month")
+          : t("components.global.date_time.next-month")
+        : `${n} ${t(`components.global.date_time.months`)}`,
+    year: (n, past) =>
+      n === 1
+        ? past
+          ? t("components.global.date_time.last-year")
+          : t("components.global.date_time.next-year")
+        : `${n} ${t(`components.global.date_time.years`)}`,
+    day: (n, past) =>
+      n === 1
+        ? past
+          ? t("components.global.date_time.yesterday")
+          : t("components.global.date_time.tomorrow")
+        : `${n} ${t(`components.global.date_time.days`)}`,
+    week: (n, past) =>
+      n === 1
+        ? past
+          ? t("components.global.date_time.last-week")
+          : t("components.global.date_time.next-week")
+        : `${n} ${t(`components.global.date_time.weeks`)}`,
+    hour: (n) => `${n} ${
+      n === 1 ? t("components.global.date_time.hour") : t("components.global.date_time.hours")
+      }`,
+    minute: (n) => `${n} ${
+      n === 1 ? t("components.global.date_time.minute") : t("components.global.date_time.minutes")
+      }`,
+    second: (n) => `${n} ${
+      n === 1
+        ? t("components.global.date_time.second")
+        : t("components.global.date_time.seconds")
+    }`,
+    invalid: "",
+  };
+
+  return useTimeAgo(date, {
+    fullDateFormatter: (date: Date) => date.toLocaleDateString(),
+    messages: I18N_MESSAGES,
+  });
+}
+
+export function fmtDate(
+  value: string | Date,
+  fmt: DateTimeFormat = "human"
+): string {
   const months = [
     "January",
     "February",
@@ -64,7 +121,7 @@ export function fmtDate(value: string | Date, fmt: DateTimeFormat = "human"): st
 
   switch (fmt) {
     case "relative":
-      return useTimeAgo(dt).value + useDateFormat(dt, " (YYYY-MM-DD)").value;
+      return useLocaleTimeAgo(dt).value + useDateFormat(dt, " (YYYY-MM-DD)").value;
     case "long":
       return useDateFormat(dt, "YYYY-MM-DD (dddd)").value;
     case "short":
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 45b7a4f4d..0b4181d79 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -14,6 +14,30 @@
             },
             "password_score": {
                 "password_strength": "Password Strength"
+            },
+            "date_time": {
+                "just-now": "just now",
+                "ago": "{0} ago",
+                "in": "in {0}",
+                "last-month": "last month",
+                "next-month": "next month",
+                "months": "months",
+                "last-year": "last year",
+                "next-year": "next year",
+                "years": "years",
+                "yesterday": "yesterday",
+                "tomorrow": "tomorrow",
+                "days": "days",
+                "last-week": "last week",
+                "next-week": "next week",
+                "week": "week",
+                "weeks": "weeks",
+                "hour": "hour",
+                "hours": "hours",
+                "minute": "minute",
+                "minutes": "minutes",
+                "second": "second",
+                "seconds": "seconds"
             }
         },
         "item": {
@@ -171,7 +195,8 @@
         "manual": "Manual",
         "photo": "Photo",
         "receipt": "Receipt",
-        "attachment": "Attachment"
+        "attachment": "Attachment",
+        "description": "Description"
     },
     "labels": {
         "no_results": "No Labels Found",
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index 6e0b42496..2e88a46a4 100644
--- a/frontend/pages/profile.vue
+++ b/frontend/pages/profile.vue
@@ -381,7 +381,7 @@ import { useI18n } from "vue-i18n";
           <select v-model="$i18n.locale" @change="(event) => {setLanguage((event.target as HTMLSelectElement).value )}"
             class="select select-bordered">
             <option v-for="lang in $i18n.availableLocales" :key="lang" :value="lang">
-              {{ $t(`languages.${lang}`) }}
+              {{ $t(`languages.${lang}`) }} ({{ $t(`languages.${lang}`, 1, { locale: lang }) }})
             </option>
           </select>
         </div>