fix cent formatting and reporting pie chart labels

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"

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: [

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

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
                                         )
                                     }}

resources/js/utils/money.ts

@@ -10,7 +10,7 @@ const page = usePage<{
     };
 }>();
 
-export function formatMoney(
+function formatMoney(
     amount: number,
     currency: string = getOrganizationCurrencyString()
 ) {