add frontend format support for currencies, add currencies endpoint

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(),
-        currency_format: z.string(),
-        date_format: z.string(),
-        interval_format: z.string(),
-        time_format: z.string(),
+        number_format: NumberFormat,
+        currency_format: CurrencyFormat,
+        currency_symbol: z.string(),
+        date_format: DateFormat,
+        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 {
-    formatCents,
-    getOrganizationCurrencySymbol,
-} from '@/packages/ui/src/utils/money';
-import { ref, watch } from 'vue';
+import { formatCents } from '@/packages/ui/src/utils/money';
+import { ref, watch, inject, type ComputedRef } 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) {
-    return new Intl.NumberFormat('de-DE', {
-        style: 'currency',
-        currency: currency,
-    }).format(amount);
+import { formatNumber, type NumberFormat } from './number';
+
+export type CurrencyFormat =
+    | 'iso-code-before-with-space'
+    | '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) {
-    return formatMoney(amount / 100, currency);
+export function formatCents(
+    amount: number,
+    currency?: string,
+    format?: CurrencyFormat,
+    currencySymbol?: string,
+    numberFormat?: NumberFormat
+) {
+    return formatMoney(
+        amount / 100,
+        currency,
+        format,
+        currencySymbol,
+        numberFormat
+    );
 }
 
 export function getOrganizationCurrencySymbol(currency: string) {