From f5b0f40b233ce596d337eba4e84814623dd4b9d0 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 6 May 2025 13:44:18 +0200
Subject: [PATCH] add formating options to organization settings

---
 .../Partials/UpdateProfileInformationForm.vue |  19 --
 .../Partials/OrganizationFormatSettings.vue   | 175 ++++++++++++++++++
 resources/js/Pages/Teams/Show.vue             |   6 +
 3 files changed, 181 insertions(+), 19 deletions(-)
 create mode 100644 resources/js/Pages/Teams/Partials/OrganizationFormatSettings.vue

diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
index 2440a31c..92f133da 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -241,25 +241,6 @@ const page = usePage<{
                 </select>
                 <InputError :message="form.errors.week_start" class="mt-2" />
             </div>
-            <div class="col-span-6 sm:col-span-4">
-                <InputLabel for="week_start" value="Start of the week" />
-                <select
-                    id="week_start"
-                    v-model="form.week_start"
-                    name="week_start"
-                    required
-                    class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
-                    <option value="" disabled>Select a week day</option>
-                    <option
-                        v-for="(weekdayTranslated, weekdayKey) in $page.props
-                            .weekdays"
-                        :key="weekdayKey"
-                        :value="weekdayKey">
-                        {{ weekdayTranslated }}
-                    </option>
-                </select>
-                <InputError :message="form.errors.week_start" class="mt-2" />
-            </div>
         </template>
 
         <template #actions>
diff --git a/resources/js/Pages/Teams/Partials/OrganizationFormatSettings.vue b/resources/js/Pages/Teams/Partials/OrganizationFormatSettings.vue
new file mode 100644
index 00000000..805901ba
--- /dev/null
+++ b/resources/js/Pages/Teams/Partials/OrganizationFormatSettings.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import FormSection from '@/Components/FormSection.vue';
+import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
+import { onMounted, ref } from 'vue';
+import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
+import type { UpdateOrganizationBody } from '@/packages/api/src';
+import { useOrganizationStore } from '@/utils/useOrganization';
+import { storeToRefs } from 'pinia';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/Components/ui/select';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+
+type NumberFormat = 'point-comma' | 'comma-point' | 'space-comma' | 'space-point' | 'apostrophe-point';
+type CurrencyFormat = 'iso-code-before-with-space' | 'iso-code-after-with-space' | 'symbol-before' | 'symbol-after' | 'symbol-before-with-space' | 'symbol-after-with-space';
+type DateFormat = 'point-seperated-d-m-yyyy' | 'slash-seperated-mm-dd-yyyy' | 'slash-seperated-dd-mm-yyyy' | 'hyphen-seperated-dd-mm-yyyy' | 'hyphen-seperated-mm-dd-yyyy' | 'hyphen-seperated-yyyy-mm-dd';
+type TimeFormat = '12-hours' | '24-hours';
+type IntervalFormat = 'decimal' | 'hours-minutes' | 'hours-minutes-colon-seperated' | 'hours-minutes-seconds-colon-seperated';
+
+interface FormValues {
+    number_format: NumberFormat | undefined;
+    currency_format: CurrencyFormat | undefined;
+    date_format: DateFormat | undefined;
+    time_format: TimeFormat | undefined;
+    interval_format: IntervalFormat | undefined;
+}
+
+const store = useOrganizationStore();
+const { fetchOrganization, updateOrganization } = store;
+const { organization } = storeToRefs(store);
+const queryClient = useQueryClient();
+
+const form = ref<FormValues>({
+    number_format: undefined,
+    currency_format: undefined,
+    date_format: undefined,
+    time_format: undefined,
+    interval_format: undefined,
+});
+
+const mutation = useMutation({
+    mutationFn: (values: FormValues) => updateOrganization(values as UpdateOrganizationBody),
+    onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: ['organization'] });
+    },
+});
+
+onMounted(async () => {
+    await fetchOrganization();
+    if (organization.value) {
+        form.value = {
+            number_format: organization.value.number_format as NumberFormat,
+            currency_format: organization.value.currency_format as CurrencyFormat,
+            date_format: organization.value.date_format as DateFormat,
+            time_format: organization.value.time_format as TimeFormat,
+            interval_format: organization.value.interval_format as IntervalFormat,
+        };
+    }
+});
+
+async function submit() {
+    mutation.mutate(form.value);
+}
+</script>
+
+<template>
+    <FormSection>
+        <template #title>Format Settings</template>
+
+        <template #description>
+            Configure the default format settings for the organization.
+        </template>
+
+        <template #form>
+            <!-- Number Format -->
+            <div class="col-span-6">
+                <div class="col-span-6 sm:col-span-4">
+                    <InputLabel for="numberFormat" class="mb-2" value="Number Format" />
+                    <Select v-model="form.number_format">
+                        <SelectTrigger id="numberFormat">
+                            <SelectValue placeholder="Select number format" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="point-comma">1.111,11</SelectItem>
+                            <SelectItem value="comma-point">1,111.11</SelectItem>
+                            <SelectItem value="space-comma">1 111,11</SelectItem>
+                            <SelectItem value="space-point">1 111.11</SelectItem>
+                            <SelectItem value="apostrophe-point">1'111.11</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+            </div>
+
+            <!-- Currency Format -->
+            <div class="col-span-6">
+                <div class="col-span-6 sm:col-span-4">
+                    <InputLabel for="currencyFormat" class="mb-2" value="Currency Format" />
+                    <Select v-model="form.currency_format">
+                        <SelectTrigger id="currencyFormat">
+                            <SelectValue placeholder="Select currency format" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="iso-code-before-with-space">EUR 111</SelectItem>
+                            <SelectItem value="iso-code-after-with-space">111 EUR</SelectItem>
+                            <SelectItem value="symbol-before">€111</SelectItem>
+                            <SelectItem value="symbol-after">111€</SelectItem>
+                            <SelectItem value="symbol-before-with-space">€ 111</SelectItem>
+                            <SelectItem value="symbol-after-with-space">111 €</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+            </div>
+
+            <!-- Date Format -->
+            <div class="col-span-6">
+                <div class="col-span-6 sm:col-span-4">
+                    <InputLabel for="dateFormat" class="mb-2" value="Date Format" />
+                    <Select v-model="form.date_format">
+                        <SelectTrigger id="dateFormat">
+                            <SelectValue placeholder="Select date format" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="point-seperated-d-m-yyyy">D.M.YYYY</SelectItem>
+                            <SelectItem value="slash-seperated-mm-dd-yyyy">MM/DD/YYYY</SelectItem>
+                            <SelectItem value="slash-seperated-dd-mm-yyyy">DD/MM/YYYY</SelectItem>
+                            <SelectItem value="hyphen-seperated-dd-mm-yyyy">DD-MM-YYYY</SelectItem>
+                            <SelectItem value="hyphen-seperated-mm-dd-yyyy">MM-DD-YYYY</SelectItem>
+                            <SelectItem value="hyphen-seperated-yyyy-mm-dd">YYYY-MM-DD</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+            </div>
+
+            <!-- Time Format -->
+            <div class="col-span-6">
+                <div class="col-span-6 sm:col-span-4">
+                    <InputLabel for="timeFormat" class="mb-2" value="Time Format" />
+                    <Select v-model="form.time_format">
+                        <SelectTrigger id="timeFormat">
+                            <SelectValue placeholder="Select time format" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="12-hours">12-hour clock</SelectItem>
+                            <SelectItem value="24-hours">24-hour clock</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+            </div>
+
+            <!-- Interval Format -->
+            <div class="col-span-6">
+                <div class="col-span-6 sm:col-span-4">
+                    <InputLabel for="intervalFormat" class="mb-2" value="Time Duration Format" />
+                    <Select v-model="form.interval_format">
+                        <SelectTrigger id="intervalFormat">
+                            <SelectValue placeholder="Select interval format" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="decimal">Decimal</SelectItem>
+                            <SelectItem value="hours-minutes">12h 3m</SelectItem>
+                            <SelectItem value="hours-minutes-colon-seperated">12:03</SelectItem>
+                            <SelectItem value="hours-minutes-seconds-colon-seperated">12:03:45</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+            </div>
+        </template>
+
+        <template #actions>
+            <PrimaryButton 
+                :disabled="mutation.isPending.value" 
+                @click="submit">
+                {{ mutation.isPending.value ? 'Saving...' : 'Save' }}
+            </PrimaryButton>
+        </template>
+    </FormSection>
+</template> 
\ No newline at end of file
diff --git a/resources/js/Pages/Teams/Show.vue b/resources/js/Pages/Teams/Show.vue
index b8efdb3b..539bc39e 100644
--- a/resources/js/Pages/Teams/Show.vue
+++ b/resources/js/Pages/Teams/Show.vue
@@ -7,6 +7,7 @@ import type { Organization } from '@/types/models';
 import type { Permissions, Role } from '@/types/jetstream';
 import { canUpdateOrganization } from '@/utils/permissions';
 import OrganizationBillableRate from '@/Pages/Teams/Partials/OrganizationBillableRate.vue';
+import OrganizationFormatSettings from '@/Pages/Teams/Partials/OrganizationFormatSettings.vue';
 
 defineProps<{
     team: Organization;
@@ -33,6 +34,11 @@ defineProps<{
                     :team="team" />
                 <SectionBorder />
 
+                <OrganizationFormatSettings
+                    v-if="canUpdateOrganization()"
+                    :team="team" />
+                <SectionBorder />
+
                 <template
                     v-if="permissions.canDeleteTeam && !team.personal_team">
                     <DeleteTeamForm class="mt-10 sm:mt-0" :team="team" />