From 5c44f2590a0b7becd406be8ca78dbd7751a6dfbd Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 21 May 2024 21:01:31 +0200
Subject: [PATCH] fix cent formatting and reporting pie chart labels

---
 resources/js/Components/Common/BillableRateInput.vue  | 11 ++++-------
 .../Components/Common/Reporting/ReportingPieChart.vue |  3 +--
 .../js/Components/Common/Reporting/ReportingRow.vue   |  4 ++--
 resources/js/Pages/Reporting.vue                      |  4 ++--
 resources/js/utils/money.ts                           |  2 +-
 5 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/resources/js/Components/Common/BillableRateInput.vue b/resources/js/Components/Common/BillableRateInput.vue
index f43277da..d297abcf 100644
--- a/resources/js/Components/Common/BillableRateInput.vue
+++ b/resources/js/Components/Common/BillableRateInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import TextInput from '@/Components/TextInput.vue';
 import {
-    formatMoney,
+    formatCents,
     getOrganizationCurrencyString,
     getOrganizationCurrencySymbol,
 } from '../../utils/money';
@@ -43,11 +43,8 @@ function updateRate(value: string) {
         model.value = parseInt(cleanUpDecimalValue(value)) * 100;
     }
 }
-function formatCents(modelValue: number) {
-    const formattedValue = formatMoney(
-        modelValue / 100,
-        getOrganizationCurrencyString()
-    );
+function formatValue(modelValue: number) {
+    const formattedValue = formatCents(modelValue);
     return formattedValue.replace(getOrganizationCurrencySymbol(), '').trim();
 }
 </script>
@@ -57,7 +54,7 @@ function formatCents(modelValue: number) {
         <TextInput
             :id="name"
             ref="projectMemberRateInput"
-            :modelValue="formatCents(model)"
+            :modelValue="formatValue(model)"
             @blur="updateRate($event.target.value)"
             type="text"
             :name="name"
diff --git a/resources/js/Components/Common/Reporting/ReportingPieChart.vue b/resources/js/Components/Common/Reporting/ReportingPieChart.vue
index e3d490b8..0cdd6ef7 100644
--- a/resources/js/Components/Common/Reporting/ReportingPieChart.vue
+++ b/resources/js/Components/Common/Reporting/ReportingPieChart.vue
@@ -100,8 +100,7 @@ const option = ref({
         trigger: 'item',
     },
     legend: {
-        orient: 'vertical',
-        bottom: 'bottom',
+        top: 'bottom',
     },
     backgroundColor: 'transparent',
     series: [
diff --git a/resources/js/Components/Common/Reporting/ReportingRow.vue b/resources/js/Components/Common/Reporting/ReportingRow.vue
index 38accff0..7a6c0252 100644
--- a/resources/js/Components/Common/Reporting/ReportingRow.vue
+++ b/resources/js/Components/Common/Reporting/ReportingRow.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { formatHumanReadableDuration } from '@/utils/time';
-import { formatMoney } from '@/utils/money';
+import { formatCents } from '@/utils/money';
 import GroupedItemsCountButton from '@/Components/Common/GroupedItemsCountButton.vue';
 import { ref } from 'vue';
 import { twMerge } from 'tailwind-merge';
@@ -54,7 +54,7 @@ const expanded = ref(false);
             {{ formatHumanReadableDuration(entry.seconds) }}
         </div>
         <div class="justify-end pr-6 flex items-center">
-            {{ formatMoney(entry.cost) }}
+            {{ formatCents(entry.cost) }}
         </div>
     </div>
     <div
diff --git a/resources/js/Pages/Reporting.vue b/resources/js/Pages/Reporting.vue
index be3f2747..68df08fc 100644
--- a/resources/js/Pages/Reporting.vue
+++ b/resources/js/Pages/Reporting.vue
@@ -25,7 +25,7 @@ import TaskMultiselectDropdown from '@/Components/Common/Task/TaskMultiselectDro
 import SelectDropdown from '@/Components/Common/SelectDropdown.vue';
 import ReportingGroupBySelect from '@/Components/Common/Reporting/ReportingGroupBySelect.vue';
 import ReportingRow from '@/Components/Common/Reporting/ReportingRow.vue';
-import { formatMoney } from '@/utils/money';
+import { formatCents } from '@/utils/money';
 import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
 
 const startDate = ref<string | null>(
@@ -284,7 +284,7 @@ onMounted(() => {
                                 <div
                                     class="justify-end pr-6 flex items-center font-medium">
                                     {{
-                                        formatMoney(
+                                        formatCents(
                                             aggregatedTableTimeEntries.cost
                                         )
                                     }}
diff --git a/resources/js/utils/money.ts b/resources/js/utils/money.ts
index 730bea02..a3bc0e7c 100644
--- a/resources/js/utils/money.ts
+++ b/resources/js/utils/money.ts
@@ -10,7 +10,7 @@ const page = usePage<{
     };
 }>();
 
-export function formatMoney(
+function formatMoney(
     amount: number,
     currency: string = getOrganizationCurrencyString()
 ) {