Set default settings

apps/dashboard/src/app/[locale]/(app)/(sidebar)/inbox/page.tsx

@@ -1,7 +1,7 @@
 import { Inbox } from "@/components/inbox";
 import { InboxViewSkeleton } from "@/components/inbox-skeleton";
 import { Cookies } from "@/utils/constants";
-import { uniqueCurrencies } from "@midday/location/src/currencies";
+import { uniqueCurrencies } from "@midday/location/currencies";
 import type { Metadata } from "next";
 import { cookies } from "next/headers";
 import { Suspense } from "react";

apps/dashboard/src/app/[locale]/(app)/(sidebar)/layout.tsx

@@ -4,7 +4,7 @@ import { GlobalSheets } from "@/components/sheets/global-sheets";
 import { Sidebar } from "@/components/sidebar";
 import { setupAnalytics } from "@midday/events/server";
 import { getCountryCode } from "@midday/location";
-import { currencies, uniqueCurrencies } from "@midday/location/src/currencies";
+import { currencies, uniqueCurrencies } from "@midday/location/currencies";
 import { getUser } from "@midday/supabase/cached-queries";
 import { nanoid } from "nanoid";
 import dynamic from "next/dynamic";

apps/dashboard/src/app/api/auth/callback/route.ts

@@ -1,8 +1,10 @@
 import { Cookies } from "@/utils/constants";
+import { setupUser } from "@/utils/setup-user";
 import { LogEvents } from "@midday/events/events";
 import { setupAnalytics } from "@midday/events/server";
 import { getSession } from "@midday/supabase/cached-queries";
 import { createClient } from "@midday/supabase/server";
+import { waitUntil } from "@vercel/functions";
 import { addYears } from "date-fns";
 import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
@@ -50,6 +52,9 @@ export async function GET(req: NextRequest) {
         channel: LogEvents.SignIn.channel,
       });
 
+      // Set default user timezone and locale
+      waitUntil(setupUser(userId));
+
       // If user have no teams, redirect to team creation
       const { count } = await supabase
         .from("users_on_team")

apps/dashboard/src/components/base-currency/select-currency.tsx

@@ -2,7 +2,7 @@
 
 import { updateCurrencyAction } from "@/actions/transactions/update-currency-action";
 import { SelectCurrency as SelectCurrencyBase } from "@/components/select-currency";
-import { uniqueCurrencies } from "@midday/location/src/currencies";
+import { uniqueCurrencies } from "@midday/location/currencies";
 import { Button } from "@midday/ui/button";
 import { useToast } from "@midday/ui/use-toast";
 import { useEventDetails } from "@trigger.dev/react";

apps/dashboard/src/components/change-timezone.tsx

@@ -10,23 +10,29 @@ import {
   CardTitle,
 } from "@midday/ui/card";
 import { ComboboxDropdown } from "@midday/ui/combobox-dropdown";
-import { useAction } from "next-safe-action/hooks";
+import { useOptimisticAction } from "next-safe-action/hooks";
 
-type Timezone = {
-  tzCode: string;
-  name: string;
+type Props = {
+  timezone: string;
+  timezones: { tzCode: string; name: string }[];
 };
 
-export function ChangeTimezone({
-  timezone,
-  timezones,
-}: { timezone: string; timezones: Timezone[] }) {
-  const action = useAction(updateUserAction);
+export function ChangeTimezone({ timezone, timezones }: Props) {
   const t = useI18n();
 
-  const timezoneItems = timezones.map((tz) => ({
-    id: tz.tzCode,
+  const { execute, optimisticState } = useOptimisticAction(updateUserAction, {
+    currentState: { timezone },
+    updateFn: (state, newTimezone) => {
+      return {
+        timezone: newTimezone.timezone ?? state.timezone,
+      };
+    },
+  });
+
+  const timezoneItems = timezones.map((tz, id) => ({
+    id: id.toString(),
     label: tz.name,
+    value: tz.tzCode,
   }));
 
   return (
@@ -40,12 +46,14 @@ export function ChangeTimezone({
         <div className="w-[250px]">
           <ComboboxDropdown
             placeholder={t("timezone.placeholder")}
-            selectedItem={timezoneItems.find((item) => item.id === timezone)}
+            selectedItem={timezoneItems.find(
+              (item) => item.value === optimisticState.timezone,
+            )}
             searchPlaceholder={t("timezone.searchPlaceholder")}
             items={timezoneItems}
             className="text-xs py-1"
             onSelect={(item) => {
-              action.execute({ timezone: item.id });
+              execute({ timezone: item.value });
             }}
           />
         </div>

apps/dashboard/src/components/country-selector.tsx

@@ -1,4 +1,4 @@
-import countries from "@midday/location/src/country-flag";
+import countries from "@midday/location/country-flags";
 import { Button } from "@midday/ui/button";
 import { cn } from "@midday/ui/cn";
 import {

apps/dashboard/src/components/date-format-settings.tsx

@@ -27,25 +27,28 @@ export function DateFormatSettings({ dateFormat }: Props) {
   return (
     <Card className="flex justify-between items-center">
       <CardHeader>
-        <CardTitle>Date format</CardTitle>
+        <CardTitle>Date Display Format</CardTitle>
         <CardDescription>
-          This will change how all date related data in your app looks.
+          Select the format used to display dates throughout the app.
         </CardDescription>
       </CardHeader>
 
       <CardContent>
         <Select
           defaultValue={dateFormat}
           onValueChange={(value) => {
-            action.execute({ date_format: value });
+            action.execute({
+              date_format: value as "dd/MM/yyyy" | "MM/dd/yyyy" | "yyyy-MM-dd",
+            });
           }}
         >
           <SelectTrigger className="w-[180px]">
             <SelectValue placeholder="Date format" />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="DD/MM/YYYY">DD/MM/YYYY</SelectItem>
-            <SelectItem value="MM/DD/YYYY">MM/DD/YYYY</SelectItem>
+            <SelectItem value="dd/MM/yyyy">dd/MM/yyyy</SelectItem>
+            <SelectItem value="MM/dd/yyyy">MM/dd/yyyy</SelectItem>
+            <SelectItem value="yyyy-MM-dd">yyyy-MM-dd</SelectItem>
           </SelectContent>
         </Select>
       </CardContent>

apps/dashboard/src/components/forms/create-transaction-form.tsx

@@ -7,7 +7,7 @@ import { SelectAccount } from "@/components/select-account";
 import { SelectCategory } from "@/components/select-category";
 import { SelectCurrency } from "@/components/select-currency";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { uniqueCurrencies } from "@midday/location/src/currencies";
+import { uniqueCurrencies } from "@midday/location/currencies";
 import {
   Accordion,
   AccordionContent,

apps/dashboard/src/components/forms/tracker-project-form.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { Customer } from "@/components/invoice/customer-details";
-import { uniqueCurrencies } from "@midday/location/src/currencies";
+import { uniqueCurrencies } from "@midday/location/currencies";
 import { Button } from "@midday/ui/button";
 import { Collapsible, CollapsibleContent } from "@midday/ui/collapsible";
 import { CurrencyInput } from "@midday/ui/currency-input";

apps/dashboard/src/components/invoice/settings-menu.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { updateInvoiceTemplateAction } from "@/actions/invoice/update-invoice-template-action";
-import { uniqueCurrencies } from "@midday/location/src/currencies";
+import { uniqueCurrencies } from "@midday/location/currencies";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,

apps/dashboard/src/components/locale-settings.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { updateUserAction } from "@/actions/update-user-action";
+import { useI18n } from "@/locales/client";
 import { countries } from "@midday/location/countries-intl";
 import {
   Card,
@@ -10,14 +11,23 @@ import {
   CardTitle,
 } from "@midday/ui/card";
 import { ComboboxDropdown } from "@midday/ui/combobox-dropdown";
-import { useAction } from "next-safe-action/hooks";
+import { useOptimisticAction } from "next-safe-action/hooks";
 
 type Props = {
   locale: string;
 };
 
 export function LocaleSettings({ locale }: Props) {
-  const action = useAction(updateUserAction);
+  const t = useI18n();
+
+  const { execute, optimisticState } = useOptimisticAction(updateUserAction, {
+    currentState: { locale },
+    updateFn: (state, newLocale) => {
+      return {
+        locale: newLocale.locale ?? state.locale,
+      };
+    },
+  });
 
   const localeItems = Object.values(countries).map((c, index) => ({
     id: index.toString(),
@@ -28,23 +38,22 @@ export function LocaleSettings({ locale }: Props) {
   return (
     <Card className="flex justify-between items-center">
       <CardHeader>
-        <CardTitle>Locale & Formatting</CardTitle>
-        <CardDescription>
-          This will change how currency and other locale-specific data is
-          formatted throughout the app.
-        </CardDescription>
+        <CardTitle>{t("locale.title")}</CardTitle>
+        <CardDescription>{t("locale.description")}</CardDescription>
       </CardHeader>
 
       <CardContent>
         <div className="w-[250px]">
           <ComboboxDropdown
-            placeholder="Select locale"
-            selectedItem={localeItems.find((item) => item.value === locale)}
-            searchPlaceholder="Search locales"
+            placeholder={t("locale.placeholder")}
+            selectedItem={localeItems.find(
+              (item) => item.value === optimisticState.locale,
+            )}
+            searchPlaceholder={t("locale.searchPlaceholder")}
             items={localeItems}
             className="text-xs py-1"
             onSelect={(item) => {
-              action.execute({ locale: item.value });
+              execute({ locale: item.value });
             }}
           />
         </div>

apps/dashboard/src/components/time-format-settings.tsx

@@ -27,9 +27,9 @@ export function TimeFormatSettings({ timeFormat }: Props) {
   return (
     <Card className="flex justify-between items-center">
       <CardHeader>
-        <CardTitle>Time format</CardTitle>
+        <CardTitle>Time Display Format</CardTitle>
         <CardDescription>
-          This will change how all time related data in your app looks.
+          Choose between 12-hour or 24-hour clock format for displaying time.
         </CardDescription>
       </CardHeader>
 

apps/dashboard/src/components/tracker-calendar.tsx

@@ -29,7 +29,6 @@ import { useCallback, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { TrackerEvents } from "./tracker-events";
 import { TrackerMonthSelect } from "./tracker-month-select";
-import { TrackerSettings } from "./tracker-settings";
 
 type Props = {
   weekStartsOnMonday?: boolean;
@@ -309,10 +308,6 @@ function CalendarHeader({
       </div>
       <div className="flex space-x-2">
         <TrackerMonthSelect dateFormat="MMMM" />
-        <TrackerSettings
-          timeFormat={timeFormat}
-          weekStartsOnMonday={weekStartsOnMonday}
-        />
       </div>
     </div>
   );

apps/dashboard/src/components/week-settings.tsx

@@ -21,9 +21,9 @@ export function WeekSettings({ weekStartsOnMonday }: Props) {
   return (
     <Card className="flex justify-between items-center">
       <CardHeader>
-        <CardTitle>Start week on Monday</CardTitle>
+        <CardTitle>Start Week on Monday</CardTitle>
         <CardDescription>
-          This will change how all calendars in your app look.
+          Set the first day of the week in calendar views.
         </CardDescription>
       </CardHeader>
 

apps/dashboard/src/locales/en.ts

@@ -16,13 +16,22 @@ export default {
     description: "Change the language used in the user interface.",
     placeholder: "Select language",
   },
+  locale: {
+    title: "Locale",
+    searchPlaceholder: "Search locale",
+    description:
+      "Sets the region and language preferences for currency, dates, and other locale-specific formats.",
+    placeholder: "Select locale",
+  },
   languages: {
     en: "English",
     sv: "Swedish",
   },
   timezone: {
     title: "Time Zone",
-    description: "Current time zone setting.",
+    searchPlaceholder: "Search timezone",
+    description:
+      "Defines the default time zone used for displaying times in the app.",
     placeholder: "Select timezone",
   },
   spending_period: {