add frontend format support for currencies, add currencies endpoint

app/Http/Controllers/Api/V1/CurrencyController.php

@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers\Api\V1;
+
+use App\Http\Controllers\Controller;
+use App\Service\CurrencyService;
+use Brick\Money\ISOCurrencyProvider;
+use Illuminate\Http\JsonResponse;
+
+class CurrencyController extends Controller
+{
+    /**
+     * Get all currencies
+     *
+     * @response array{code: string, name: string, symbol: string}[]
+     * @operationId getCurrencies
+     */
+    public function index(): JsonResponse
+    {
+        $currencyService = app(CurrencyService::class);
+
+        $currencies = array_values(array_map(
+            fn ($currency) => [
+                'code' => $currency->getCurrencyCode(),
+                'name' => $currency->getName(),
+                'symbol' => $currencyService->getCurrencySymbol($currency->getCurrencyCode()),
+                ],
+            ISOCurrencyProvider::getInstance()->getAvailableCurrencies()
+        ));
+
+        return response()->json($currencies);
+    }
+}

app/Http/Resources/V1/Organization/OrganizationResource.php

@@ -4,8 +4,14 @@ declare(strict_types=1);
 
 namespace App\Http\Resources\V1\Organization;
 
+use App\Enums\CurrencyFormat;
+use App\Enums\DateFormat;
+use App\Enums\IntervalFormat;
+use App\Enums\NumberFormat;
+use App\Enums\TimeFormat;
 use App\Http\Resources\V1\BaseResource;
 use App\Models\Organization;
+use App\Service\CurrencyService;
 use Illuminate\Http\Request;
 
 /**
@@ -34,7 +40,9 @@ class OrganizationResource extends BaseResource
      */
     public function toArray(Request $request): array
     {
-        return [
+            $currencyService = app(CurrencyService::class);
+
+            return [
             /** @var string $id ID */
             'id' => $this->resource->id,
             /** @var string $name Name */
@@ -47,15 +55,17 @@ class OrganizationResource extends BaseResource
             'employees_can_see_billable_rates' => $this->resource->employees_can_see_billable_rates,
             /** @var string $currency Currency code (ISO 4217) */
             'currency' => $this->resource->currency,
-            /** @var string $number_format Number format */
+            /** @var string $currency_symbol Currency symbol */
+            'currency_symbol' => $currencyService->getCurrencySymbol($this->resource->currency),
+            /** @var NumberFormat $number_format Number format */
             'number_format' => $this->resource->number_format->value,
-            /** @var string $currency_format Currency format */
+            /** @var CurrencyFormat $currency_format Currency format */
             'currency_format' => $this->resource->currency_format->value,
-            /** @var string $date_format Date format */
+            /** @var DateFormat $date_format Date format */
             'date_format' => $this->resource->date_format->value,
-            /** @var string $interval_format Interval format */
+            /** @var IntervalFormat $interval_format Interval format */
             'interval_format' => $this->resource->interval_format->value,
-            /** @var string $time_format Time format */
+            /** @var TimeFormat $time_format Time format */
             'time_format' => $this->resource->time_format->value,
         ];
     }

app/Http/Resources/V1/Report/DetailedWithDataReportResource.php

@@ -4,8 +4,14 @@ declare(strict_types=1);
 
 namespace App\Http\Resources\V1\Report;
 
+use App\Enums\CurrencyFormat;
+use App\Enums\DateFormat;
+use App\Enums\IntervalFormat;
+use App\Enums\NumberFormat;
+use App\Enums\TimeFormat;
 use App\Http\Resources\V1\BaseResource;
 use App\Models\Report;
+use App\Service\CurrencyService;
 use Illuminate\Http\Request;
 
 /**
@@ -64,6 +70,8 @@ class DetailedWithDataReportResource extends BaseResource
      */
     public function toArray(Request $request): array
     {
+        $currencyService = app(CurrencyService::class);
+
         return [
             /** @var string $name Name */
             'name' => $this->resource->name,
@@ -73,16 +81,18 @@ class DetailedWithDataReportResource extends BaseResource
             'public_until' => $this->formatDateTime($this->resource->public_until),
             /** @var string $currency Currency code (ISO 4217) */
             'currency' => $this->resource->organization->currency,
-            /** @var string $number_format Number format */
+            /** @var NumberFormat $number_format Number format */
-            'number_format' => $this->resource->organization->number_format,
+            'number_format' => $this->resource->organization->number_format->value,
-            /** @var string $currency_format Currency format */
+            /** @var CurrencyFormat $currency_format Currency format */
-            'currency_format' => $this->resource->organization->currency_format,
+            'currency_format' => $this->resource->organization->currency_format->value,
-            /** @var string $date_format Date format */
+            /** @var string $currency_symbol Currency symbol */
-            'date_format' => $this->resource->organization->date_format,
+            'currency_symbol' => $currencyService->getCurrencySymbol($this->resource->organization->currency),
-            /** @var string $interval_format Interval format */
+            /** @var DateFormat $date_format Date format */
-            'interval_format' => $this->resource->organization->interval_format,
+            'date_format' => $this->resource->organization->date_format->value,
-            /** @var string $time_format Time format */
+            /** @var IntervalFormat $interval_format Interval format */
-            'time_format' => $this->resource->organization->time_format,
+            'interval_format' => $this->resource->organization->interval_format->value,
+            /** @var TimeFormat $time_format Time format */
+            'time_format' => $this->resource->organization->time_format->value,
             'properties' => [
                 /** @var string $group Type of first grouping */
                 'group' => $this->resource->properties->group->value,

e2e/project-members.spec.ts

@@ -1,7 +1,8 @@
 import { expect, Page } from '@playwright/test';
 import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
 import { test } from '../playwright/fixtures';
-import { formatCents } from '../resources/js/packages/ui/src/utils/money';
+import { formatCents, getOrganizationCurrencySymbol } from '../resources/js/packages/ui/src/utils/money';
+import type { CurrencyFormat } from '../resources/js/packages/ui/src/utils/money';
 
 async function goToProjectsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/projects');
@@ -61,6 +62,12 @@ test('test that updating project member billable rate works for existing time en
         page
             .getByRole('row')
             .first()
-            .getByText(formatCents(newBillableRate * 100, 'EUR'))
+            .getByText(formatCents(
+                newBillableRate * 100,
+                'EUR',
+                'symbol-before' as CurrencyFormat,
+                '€',
+                'space-point'
+            ))
     ).toBeVisible();
 });

e2e/projects.spec.ts

@@ -1,7 +1,8 @@
 import { expect, Page } from '@playwright/test';
 import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
 import { test } from '../playwright/fixtures';
-import { formatCents } from '../resources/js/packages/ui/src/utils/money';
+import { formatCents, getOrganizationCurrencySymbol } from '../resources/js/packages/ui/src/utils/money';
+import type { CurrencyFormat } from '../resources/js/packages/ui/src/utils/money';
 
 async function goToProjectsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/projects');
@@ -131,7 +132,13 @@ test('test that updating billable rate works with existing time entries', async
         page
             .getByRole('row')
             .first()
-            .getByText(formatCents(newBillableRate * 100, 'EUR'))
+            .getByText(formatCents(
+                newBillableRate * 100,
+                'EUR',
+                'symbol-before' as CurrencyFormat,
+                '€',
+                'space-point'
+            ))
     ).toBeVisible();
 });
 

resources/js/Components/Common/Member/MemberBillableRateModal.vue

@@ -2,10 +2,14 @@
 import { getOrganizationCurrencyString } from '@/utils/money';
 import BillableRateModal from '@/packages/ui/src/BillableRateModal.vue';
 import { formatCents } from '@/packages/ui/src/utils/money';
+import { inject, type ComputedRef } from 'vue';
+import type { Organization } from '@/packages/api/src';
 
 const show = defineModel('show', { default: false });
 const saving = defineModel('saving', { default: false });
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 defineProps<{
     newBillableRate?: number | null;
     memberName: string;
@@ -28,7 +32,10 @@ defineEmits<{
                 newBillableRate
                     ? formatCents(
                           newBillableRate,
-                          getOrganizationCurrencyString()
+                          getOrganizationCurrencyString(),
+                          organization?.currency_format,
+                          organization?.currency_symbol,
+                          organization?.number_format
                       )
                     : ' the default rate of the organization'
             }}</strong

resources/js/Components/Common/Member/MemberTableRow.vue

@@ -1,26 +1,27 @@
 <script setup lang="ts">
-import type { Member } from '@/packages/api/src';
+import type { Member, Organization } from '@/packages/api/src';
+import { api } from '@/packages/api/src';
 import { CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/20/solid';
 import MemberMoreOptionsDropdown from '@/Components/Common/Member/MemberMoreOptionsDropdown.vue';
 import TableRow from '@/Components/TableRow.vue';
-import { capitalizeFirstLetter } from '../../../utils/format';
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
-import { api } from '@/packages/api/src';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useNotificationsStore } from '@/utils/notification';
 import { canInvitePlaceholderMembers } from '@/utils/permissions';
 import { useMembersStore } from '@/utils/useMembers';
-import {computed, ref} from 'vue';
+import { computed, type ComputedRef, inject, ref } from 'vue';
 import MemberEditModal from '@/Components/Common/Member/MemberEditModal.vue';
-import { getOrganizationCurrencyString } from '@/utils/money';
+import MemberMergeModal from '@/Components/Common/Member/MemberMergeModal.vue';
-import { formatCents } from '@/packages/ui/src/utils/money';
+import MemberMakePlaceholderModal from '@/Components/Common/Member/MemberMakePlaceholderModal.vue';
-import MemberMergeModal from "@/Components/Common/Member/MemberMergeModal.vue";
+import { capitalizeFirstLetter } from '../../../utils/format';
-import MemberMakePlaceholderModal from "@/Components/Common/Member/MemberMakePlaceholderModal.vue";
+import { formatCents } from '../../../packages/ui/src/utils/money';
 
 const props = defineProps<{
     member: Member;
 }>();
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 const showEditMemberModal = ref(false);
 const showMergeMemberModal = ref(false);
 const showMakeMemberPlaceholderModal = ref(false);
@@ -35,15 +36,12 @@ async function invitePlaceholder(id: string) {
     if (organizationId) {
         await handleApiRequestNotifications(
             () =>
-                api.invitePlaceholder(
+                api.invitePlaceholder(undefined, {
-                    undefined,
+                    params: {
-                    {
+                        organization: organizationId,
-                        params: {
+                        member: id,
-                            organization: organizationId,
+                    },
-                            member: id,
+                }),
-                        },
-                    }
-                ),
             'Member invited successfully',
             'Error inviting member'
         );
@@ -52,8 +50,7 @@ async function invitePlaceholder(id: string) {
 
 const userHasValidMailAddress = computed(() => {
     return !props.member.email.endsWith('@solidtime-import.test');
-})
+});
-
 </script>
 
 <template>
@@ -75,7 +72,10 @@ const userHasValidMailAddress = computed(() => {
                 member.billable_rate
                     ? formatCents(
                           member.billable_rate,
-                          getOrganizationCurrencyString()
+                          organization?.currency,
+                          organization?.currency_format,
+                          organization?.currency_symbol,
+                          organization?.number_format
                       )
                     : '--'
             }}
@@ -101,21 +101,26 @@ const userHasValidMailAddress = computed(() => {
                 "
                 size="small"
                 @click="invitePlaceholder(member.id)"
-                >Invite</SecondaryButton
+                >Invite
-            >
+            </SecondaryButton>
             <MemberMoreOptionsDropdown
                 :member="member"
                 @edit="showEditMemberModal = true"
                 @delete="removeMember"
                 @merge="showMergeMemberModal = true"
-                @make-placeholder="showMakeMemberPlaceholderModal = true"
+                @make-placeholder="
-            ></MemberMoreOptionsDropdown>
+                    showMakeMemberPlaceholderModal = true
+                "></MemberMoreOptionsDropdown>
         </div>
         <MemberEditModal
             v-model:show="showEditMemberModal"
             :member="member"></MemberEditModal>
-        <MemberMergeModal v-model:show="showMergeMemberModal" :member="member"></MemberMergeModal>
+        <MemberMergeModal
-        <MemberMakePlaceholderModal v-model:show="showMakeMemberPlaceholderModal" :member="member"></MemberMakePlaceholderModal>
+            v-model:show="showMergeMemberModal"
+            :member="member"></MemberMergeModal>
+        <MemberMakePlaceholderModal
+            v-model:show="showMakeMemberPlaceholderModal"
+            :member="member"></MemberMakePlaceholderModal>
     </TableRow>
 </template>
 

resources/js/Components/Common/Organization/OrganizationBillableRateModal.vue

@@ -2,10 +2,14 @@
 import { getOrganizationCurrencyString } from '@/utils/money';
 import BillableRateModal from '@/packages/ui/src/BillableRateModal.vue';
 import { formatCents } from '@/packages/ui/src/utils/money';
+import { inject, type ComputedRef } from 'vue';
+import type { Organization } from '@/packages/api/src';
 
 const show = defineModel('show', { default: false });
 const saving = defineModel('saving', { default: false });
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 defineProps<{
     newBillableRate?: number | null;
 }>();
@@ -27,7 +31,10 @@ defineEmits<{
                 newBillableRate
                     ? formatCents(
                           newBillableRate,
-                          getOrganizationCurrencyString()
+                          getOrganizationCurrencyString(),
+                          organization?.currency_format,
+                          organization?.currency_symbol,
+                          organization?.number_format
                       )
                     : ' none.'
             }}</strong

resources/js/Components/Common/Project/ProjectTableRow.vue

@@ -47,12 +47,17 @@ function archiveProject() {
     });
 }
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 const billableRateInfo = computed(() => {
     if (props.project.is_billable) {
         if (props.project.billable_rate) {
             return formatCents(
                 props.project.billable_rate,
-                getOrganizationCurrencyString()
+                getOrganizationCurrencyString(),
+                organization?.value?.currency_format,
+                organization?.value?.currency_symbol,
+                organization?.value?.number_format
             );
         } else {
             return 'Default Rate';
@@ -63,7 +68,6 @@ const billableRateInfo = computed(() => {
 
 const showEditProjectModal = ref(false);
 
-const organization = inject<ComputedRef<Organization>>('organization');
 </script>
 
 <template>

resources/js/Components/Common/ProjectMember/ProjectMemberBillableRateModal.vue

@@ -2,10 +2,14 @@
 import { getOrganizationCurrencyString } from '@/utils/money';
 import BillableRateModal from '@/packages/ui/src/BillableRateModal.vue';
 import { formatCents } from '@/packages/ui/src/utils/money';
+import { inject, type ComputedRef } from 'vue';
+import type { Organization } from '@/packages/api/src';
 
 const show = defineModel('show', { default: false });
 const saving = defineModel('saving', { default: false });
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 defineProps<{
     newBillableRate?: number | null;
     memberName?: string;
@@ -28,7 +32,10 @@ defineEmits<{
                 newBillableRate
                     ? formatCents(
                           newBillableRate,
-                          getOrganizationCurrencyString()
+                          getOrganizationCurrencyString(),
+                          organization?.currency_format,
+                          organization?.currency_symbol,
+                          organization?.number_format
                       )
                     : ' the default rate of the project'
             }}</strong

resources/js/Components/Common/ProjectMember/ProjectMemberTableRow.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ProjectMember } from '@/packages/api/src';
-import { computed, ref } from 'vue';
+import { computed, ref, inject, type ComputedRef } from 'vue';
 import { storeToRefs } from 'pinia';
 import TableRow from '@/Components/TableRow.vue';
 import { useMembersStore } from '@/utils/useMembers';
@@ -10,10 +10,14 @@ import { formatCents } from '@/packages/ui/src/utils/money';
 import { capitalizeFirstLetter } from '@/utils/format';
 import ProjectMemberEditModal from '@/Components/Common/ProjectMember/ProjectMemberEditModal.vue';
 import { getOrganizationCurrencyString } from '@/utils/money';
+import type { Organization } from '@/packages/api/src';
 
 const props = defineProps<{
     projectMember: ProjectMember;
 }>();
+
+const organization = inject<ComputedRef<Organization>>('organization');
+
 function deleteProjectMember() {
     useProjectMembersStore().deleteProjectMember(
         props.projectMember.project_id,
@@ -51,7 +55,10 @@ const showEditModal = ref(false);
                 projectMember.billable_rate
                     ? formatCents(
                           projectMember.billable_rate,
-                          getOrganizationCurrencyString()
+                          getOrganizationCurrencyString(),
+                          organization?.currency_format,
+                          organization?.currency_symbol,
+                          organization?.number_format
                       )
                     : '--'
             }}

resources/js/Components/Common/Reporting/ReportingOverview.vue

@@ -8,7 +8,11 @@ import {
 import { FolderIcon } from '@heroicons/vue/16/solid';
 import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
 import { getOrganizationCurrencyString } from '@/utils/money';
-import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
+import {
+    formatHumanReadableDuration,
+    getDayJsInstance,
+    getLocalizedDayJs,
+} from '@/packages/ui/src/utils/time';
 import { formatCents } from '@/packages/ui/src/utils/money';
 import ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
 import ReportingExportButton from '@/Components/Common/Reporting/ReportingExportButton.vue';
@@ -29,17 +33,13 @@ import ReportSaveButton from '@/Components/Common/Report/ReportSaveButton.vue';
 import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
 import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
 
-import { computed, onMounted, ref, inject, type ComputedRef } from 'vue';
+import { computed, type ComputedRef, inject, onMounted, ref } from 'vue';
-import {
-    getDayJsInstance,
-    getLocalizedDayJs,
-} from '@/packages/ui/src/utils/time';
 import { type GroupingOption, useReportingStore } from '@/utils/useReporting';
 import { storeToRefs } from 'pinia';
 import {
     type AggregatedTimeEntriesQueryParams,
-    type CreateReportBodyProperties,
     api,
+    type CreateReportBodyProperties,
     type Organization,
 } from '@/packages/api/src';
 import {
@@ -52,6 +52,7 @@ import { useSessionStorage, useStorage } from '@vueuse/core';
 import { useNotificationsStore } from '@/utils/notification';
 import type { ExportFormat } from '@/types/reporting';
 import { getRandomColorWithSeed } from '@/packages/ui/src/utils/color';
+import { useProjectsStore } from '@/utils/useProjects';
 
 const { handleApiRequestNotifications } = useNotificationsStore();
 
@@ -213,7 +214,6 @@ async function downloadExport(format: ExportFormat) {
 }
 
 const { getNameForReportingRowEntry, emptyPlaceholder } = useReportingStore();
-import { useProjectsStore } from '@/utils/useProjects';
 
 const projectsStore = useProjectsStore();
 const { projects } = storeToRefs(projectsStore);
@@ -450,10 +450,8 @@ const tableData = computed(() => {
                             v-for="entry in tableData"
                             :key="entry.description ?? 'none'"
                             :currency="getOrganizationCurrencyString()"
-                            :entry="entry"
+                            :type="aggregatedTableTimeEntries.grouped_type"
-                            :type="
+                            :entry="entry"></ReportingRow>
-                                aggregatedTableTimeEntries.grouped_type
-                            "></ReportingRow>
                         <div
                             class="contents [&>*]:transition text-text-tertiary [&>*]:h-[50px]">
                             <div class="flex items-center pl-6 font-medium">
@@ -475,7 +473,10 @@ const tableData = computed(() => {
                                     aggregatedTableTimeEntries.cost
                                         ? formatCents(
                                               aggregatedTableTimeEntries.cost,
-                                              getOrganizationCurrencyString()
+                                              getOrganizationCurrencyString(),
+                                              organization?.currency_format,
+                                              organization?.currency_symbol,
+                                              organization?.number_format
                                           )
                                         : '--'
                                 }}

resources/js/Components/Common/Reporting/ReportingRow.vue

@@ -57,7 +57,13 @@ const organization = inject<ComputedRef<Organization>>('organization');
             }}
         </div>
         <div class="justify-end pr-6 flex items-center">
-            {{ entry.cost ? formatCents(entry.cost, props.currency) : '--' }}
+            {{ entry.cost ? formatCents(
+                entry.cost,
+                props.currency,
+                organization?.currency_format,
+                organization?.currency_symbol,
+                organization?.number_format
+            ) : '--' }}
         </div>
     </div>
     <div

resources/js/Components/Common/StatCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineProps<{
     title: string;
-    value: string;
+    value?: string;
 }>();
 </script>
 
@@ -10,7 +10,7 @@ defineProps<{
         class="rounded-lg bg-card-background border-card-border shadow-card border px-3.5 py-2.5">
         <dt class="font-semibold text-sm text-text-secondary">{{ title }}</dt>
         <dd class="text-2xl text-text-primary pt-1 font-semibold">
-            {{ value }}
+            {{ value ?? '--' }}
         </dd>
     </div>
 </template>

resources/js/Components/Dashboard/ThisWeekOverview.vue

@@ -283,7 +283,10 @@ const option = computed(() => {
                     totalWeeklyBillableAmount
                         ? formatCents(
                               totalWeeklyBillableAmount.value,
-                              getOrganizationCurrencyString()
+                              getOrganizationCurrencyString(),
+                              organization?.currency_format,
+                              organization?.currency_symbol,
+                              organization?.number_format
                           )
                         : '--'
                 " />

resources/js/Pages/ProjectShow.vue

@@ -3,7 +3,7 @@ import MainContainer from '@/packages/ui/src/MainContainer.vue';
 import AppLayout from '@/Layouts/AppLayout.vue';
 import { FolderIcon, PlusIcon } from '@heroicons/vue/16/solid';
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, inject, type ComputedRef } from 'vue';
 import { useProjectsStore } from '@/utils/useProjects';
 import { storeToRefs } from 'pinia';
 import {
@@ -33,9 +33,12 @@ import ProjectEditModal from '@/Components/Common/Project/ProjectEditModal.vue';
 import { Badge } from '@/packages/ui/src';
 import { formatCents } from '../packages/ui/src/utils/money';
 import { getOrganizationCurrencyString } from '../utils/money';
+import type { Organization } from '@/packages/api/src';
 
 const { projects } = storeToRefs(useProjectsStore());
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 const project = computed(() => {
     return (
         projects.value.find(
@@ -112,7 +115,10 @@ const shownTasks = computed(() => {
                         {{
                             formatCents(
                                 project?.billable_rate ?? 0,
-                                getOrganizationCurrencyString()
+                                getOrganizationCurrencyString(),
+                                organization?.currency_format,
+                                organization?.currency_symbol,
+                                organization?.number_format
                             )
                         }}
                         / h
@@ -145,15 +151,11 @@ const shownTasks = computed(() => {
                             <div
                                 class="w-full items-center flex justify-between">
                                 <div class="pl-6">
-                                    <TabBar
+                                    <TabBar v-model="activeTab">
-                                    v-model="activeTab"
+                                        <TabBarItem value="active"
-                                    >
-                                        <TabBarItem
-                                            value="active"
                                             >Active
                                         </TabBarItem>
-                                        <TabBarItem
+                                        <TabBarItem value="done"
-                                            value="done"
                                             >Done
                                         </TabBarItem>
                                     </TabBar>
@@ -185,11 +187,11 @@ const shownTasks = computed(() => {
                                 Add Member
                             </SecondaryButton>
                             <ProjectMemberCreateModal
-                                v-model:show="
+                                v-model:show="createProjectMember"
-                                    createProjectMember
-                                "
                                 :project-id="projectId"
-                                :existing-members="projectMembers"></ProjectMemberCreateModal>
+                                :existing-members="
+                                    projectMembers
+                                "></ProjectMemberCreateModal>
                         </template>
                     </CardTitle>
                     <Card>

resources/js/Pages/SharedReport.vue

@@ -7,6 +7,7 @@ import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
 import ReportingRow from '@/Components/Common/Reporting/ReportingRow.vue';
 import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
 import { formatCents } from '@/packages/ui/src/utils/money';
+import type { CurrencyFormat } from '@/packages/ui/src/utils/money';
 import { computed, onMounted, provide, ref } from 'vue';
 import { useQuery } from '@tanstack/vue-query';
 import { api } from '@/packages/api/src';
@@ -55,11 +56,21 @@ const reportNumberFormat = computed(() => {
     return sharedReportResponseData.value?.number_format;
 });
 
+const reportCurrencyFormat = computed(() => {
+    return (sharedReportResponseData.value?.currency_format ?? 'symbol-before') as CurrencyFormat;
+});
+
+const reportCurrencySymbol = computed(() => {
+    return sharedReportResponseData.value?.currency_symbol;
+});
+
 provide(
     'organization',
     computed(() => ({
         'number_format': reportNumberFormat.value,
         'interval_format': reportIntervalFormat.value,
+        'currency_format': reportCurrencyFormat.value,
+        'currency_symbol': reportCurrencySymbol.value,
     }))
 );
 
@@ -217,10 +228,8 @@ onMounted(async () => {
                                 v-for="entry in tableData"
                                 :key="entry.description ?? 'none'"
                                 :currency="reportCurrency"
-                                :entry="entry"
+                                :currency-format="reportCurrencyFormat"
-                                :type="
+                                :entry="entry"></ReportingRow>
-                                    aggregatedTableTimeEntries.grouped_type
-                                "></ReportingRow>
                             <div
                                 class="contents [&>*]:transition text-text-tertiary [&>*]:h-[50px]">
                                 <div class="flex items-center pl-6 font-medium">
@@ -241,7 +250,9 @@ onMounted(async () => {
                                     {{
                                         formatCents(
                                             aggregatedTableTimeEntries.cost,
-                                            reportCurrency
+                                            reportCurrency,
+                                            reportCurrencyFormat,
+                                            reportCurrencySymbol,
                                         )
                                     }}
                                 </div>

resources/js/Pages/Teams/Partials/OrganizationFormatSettings.vue

@@ -15,11 +15,11 @@ import {
 } from '@/Components/ui/select';
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import type {
-    CurrencyFormat,
     DateFormat,
     TimeFormat,
     IntervalFormat,
 } from '@/packages/ui/src/utils/time';
+import type { CurrencyFormat } from '@/packages/ui/src/utils/money';
 import type { NumberFormat } from '@/packages/ui/src/utils/number';
 
 interface FormValues {

resources/js/packages/api/src/index.ts

@@ -167,7 +167,10 @@ export type ApiTokenIndexResponse = ZodiosResponseByAlias<
     'getApiTokens'
 >;
 
-export type CreateApiTokenBody = ZodiosBodyByAlias<SolidTimeApi, 'createApiToken'>;
+export type CreateApiTokenBody = ZodiosBodyByAlias<
+    SolidTimeApi,
+    'createApiToken'
+>;
 export type ApiToken = ApiTokenIndexResponse['data'][0];
 
 export type DetailedInvoiceResponse = ZodiosResponseByAlias<
@@ -175,6 +178,21 @@ export type DetailedInvoiceResponse = ZodiosResponseByAlias<
     'getInvoice'
 >;
 
+export type UpdateInvoiceSettings = ZodiosBodyByAlias<
+    SolidTimeApi,
+    'updateInvoiceSettings'
+>;
+
+export type CreateInvoiceBody = ZodiosBodyByAlias<
+    SolidTimeApi,
+    'createInvoice'
+>;
+
+export type UpdateInvoiceBody = ZodiosBodyByAlias<
+    SolidTimeApi,
+    'updateInvoice'
+>;
+
 const api = createApiClient('/api', { validate: 'none' });
 
 export { createApiClient, api };

resources/js/packages/api/src/openapi.json.client.ts

@@ -130,7 +130,7 @@ const InvoiceEntryResource = z
         name: z.string(),
         description: z.union([z.string(), z.null()]),
         unit_price: z.number().int(),
-        quantity: z.string(),
+        quantity: z.number(),
         order_index: z.number().int(),
         created_at: z.union([z.string(), z.null()]),
         updated_at: z.union([z.string(), z.null()]),
@@ -293,21 +293,6 @@ const MemberMergeIntoRequest = z
     .object({ member_id: z.string() })
     .partial()
     .passthrough();
-const OrganizationResource = z
-    .object({
-        id: z.string(),
-        name: z.string(),
-        is_personal: z.boolean(),
-        billable_rate: z.union([z.number(), z.null()]),
-        employees_can_see_billable_rates: z.boolean(),
-        currency: z.string(),
-        number_format: z.string(),
-        currency_format: z.string(),
-        date_format: z.string(),
-        interval_format: z.string(),
-        time_format: z.string(),
-    })
-    .passthrough();
 const NumberFormat = z.enum([
     'point-comma',
     'comma-point',
@@ -338,6 +323,22 @@ const IntervalFormat = z.enum([
     'hours-minutes-seconds-colon-separated',
 ]);
 const TimeFormat = z.enum(['12-hours', '24-hours']);
+const OrganizationResource = z
+    .object({
+        id: z.string(),
+        name: z.string(),
+        is_personal: z.boolean(),
+        billable_rate: z.union([z.number(), z.null()]),
+        employees_can_see_billable_rates: z.boolean(),
+        currency: z.string(),
+        currency_symbol: z.string(),
+        number_format: NumberFormat,
+        currency_format: CurrencyFormat,
+        date_format: DateFormat,
+        interval_format: IntervalFormat,
+        time_format: TimeFormat,
+    })
+    .passthrough();
 const OrganizationUpdateRequest = z
     .object({
         name: z.string().max(255),
@@ -524,11 +525,12 @@ const DetailedWithDataReportResource = z
         description: z.union([z.string(), z.null()]),
         public_until: z.union([z.string(), z.null()]),
         currency: z.string(),
-        number_format: z.string(),
+        number_format: NumberFormat,
-        currency_format: z.string(),
+        currency_format: CurrencyFormat,
-        date_format: z.string(),
+        currency_symbol: z.string(),
-        interval_format: z.string(),
+        date_format: DateFormat,
-        time_format: z.string(),
+        interval_format: IntervalFormat,
+        time_format: TimeFormat,
         properties: z
             .object({
                 group: z.string(),
@@ -774,12 +776,12 @@ export const schemas = {
     Role,
     MemberUpdateRequest,
     MemberMergeIntoRequest,
-    OrganizationResource,
     NumberFormat,
     CurrencyFormat,
     DateFormat,
     IntervalFormat,
     TimeFormat,
+    OrganizationResource,
     OrganizationUpdateRequest,
     ProjectResource,
     ProjectStoreRequest,
@@ -817,7 +819,9 @@ const endpoints = makeApi([
         path: '/v1/countries',
         alias: 'getCountries',
         requestFormat: 'json',
-        response: z.string(),
+        response: z.array(
+            z.object({ code: z.string(), name: z.string() }).passthrough()
+        ),
         errors: [
             {
                 status: 401,
@@ -826,6 +830,21 @@ const endpoints = makeApi([
             },
         ],
     },
+    {
+        method: 'get',
+        path: '/v1/currencies',
+        alias: 'getCurrencies',
+        requestFormat: 'json',
+        response: z.array(
+            z
+                .object({
+                    code: z.string(),
+                    name: z.string(),
+                    symbol: z.string(),
+                })
+                .passthrough()
+        ),
+    },
     {
         method: 'get',
         path: '/v1/organizations/:organization',

resources/js/packages/ui/src/Input/BillableRateInput.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import TextInput from '@/packages/ui/src/Input/TextInput.vue';
-import {
+import { formatCents } from '@/packages/ui/src/utils/money';
-    formatCents,
+import { ref, watch, inject, type ComputedRef } from 'vue';
-    getOrganizationCurrencySymbol,
-} from '@/packages/ui/src/utils/money';
-import { ref, watch } from 'vue';
 import { useFocus } from '@vueuse/core';
+import type { Organization } from '@/packages/api/src';
 
 const props = defineProps<{
     name: string;
@@ -13,6 +11,8 @@ const props = defineProps<{
     currency: string;
 }>();
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 const model = defineModel<number | null>({
     default: null,
 });
@@ -58,9 +58,15 @@ function updateRate(value: string) {
 }
 
 function formatValue(modelValue: number | null) {
-    const formattedValue = formatCents(modelValue ?? 0, props.currency);
+    const formattedValue = formatCents(
+        modelValue ?? 0,
+        props.currency,
+        organization?.value?.currency_format,
+        organization?.value?.currency_symbol,
+        organization?.value?.number_format
+    );
     return formattedValue
-        .replace(getOrganizationCurrencySymbol(props.currency), '')
+        ?.replace(organization?.value?.currency_symbol ?? '', '')
         .trim();
 }
 

resources/js/packages/ui/src/Project/ProjectBillableRateModal.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import { formatCents } from '@/packages/ui/src/utils/money';
 import BillableRateModal from '@/packages/ui/src/BillableRateModal.vue';
+import { inject, type ComputedRef } from 'vue';
+import type { Organization } from '@/packages/api/src';
 
 const show = defineModel('show', { default: false });
 const saving = defineModel('saving', { default: false });
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 defineProps<{
     newBillableRate?: number | null;
     projectName: string;
@@ -26,7 +30,13 @@ defineEmits<{
             The billable rate of {{ projectName }} will be updated to
             <strong>{{
                 newBillableRate
-                    ? formatCents(newBillableRate, currency)
+                    ? formatCents(
+                          newBillableRate,
+                          currency,
+                          organization?.currency_format,
+                          organization?.currency_symbol,
+                          organization?.number_format
+                      )
                     : ' the default rate of the organization member'
             }}</strong
             >.

resources/js/packages/ui/src/utils/money.ts

@@ -1,12 +1,52 @@
-function formatMoney(amount: number, currency: string) {
+import { formatNumber, type NumberFormat } from './number';
-    return new Intl.NumberFormat('de-DE', {
+
-        style: 'currency',
+export type CurrencyFormat =
-        currency: currency,
+    | 'iso-code-before-with-space'
-    }).format(amount);
+    | 'iso-code-after-with-space'
+    | 'symbol-before'
+    | 'symbol-after'
+    | 'symbol-before-with-space'
+    | 'symbol-after-with-space';
+
+function formatMoney(
+    amount: number,
+    currency?: string,
+    format?: CurrencyFormat,
+    currencySymbol?: string,
+    numberFormat?: NumberFormat
+) {
+    const formattedAmount = formatNumber(amount, numberFormat);
+
+    switch (format) {
+        case 'iso-code-before-with-space':
+            return `${currency} ${formattedAmount}`;
+        case 'iso-code-after-with-space':
+            return `${formattedAmount} ${currency}`;
+        case 'symbol-before':
+            return `${currencySymbol}${formattedAmount}`;
+        case 'symbol-after':
+            return `${formattedAmount}${currencySymbol}`;
+        case 'symbol-before-with-space':
+            return `${currencySymbol} ${formattedAmount}`;
+        case 'symbol-after-with-space':
+            return `${formattedAmount} ${currencySymbol}`;
+    }
 }
 
-export function formatCents(amount: number, currency: string) {
+export function formatCents(
-    return formatMoney(amount / 100, currency);
+    amount: number,
+    currency?: string,
+    format?: CurrencyFormat,
+    currencySymbol?: string,
+    numberFormat?: NumberFormat
+) {
+    return formatMoney(
+        amount / 100,
+        currency,
+        format,
+        currencySymbol,
+        numberFormat
+    );
 }
 
 export function getOrganizationCurrencySymbol(currency: string) {

routes/api.php

@@ -173,6 +173,8 @@ Route::prefix('v1')->name('v1.')->group(static function (): void {
         });
     });
 
+    Route::get('/currencies', [\App\Http\Controllers\Api\V1\CurrencyController::class, 'index'])->name('currencies.index');
+
     // Public routes
     Route::name('public.')->prefix('/public')->group(static function (): void {
         Route::get('/reports', [PublicReportController::class, 'show'])->name('reports.show');