Make scheduling and dates timezone-safe

apps/mobile/components/InvoiceReminderSync.tsx

@@ -1,12 +1,18 @@
 import * as Notifications from "expo-notifications";
+import Constants from "expo-constants";
 import { router } from "expo-router";
-import { useEffect, useRef } from "react";
-import { AppState, type AppStateStatus } from "react-native";
+import { useEffect, useRef, useState } from "react";
+import { AppState, Platform, type AppStateStatus } from "react-native";
 
-import { syncInvoiceSendReminders } from "@/lib/invoice-send-reminders";
+import {
+  ensureNotificationPermissions,
+  syncInvoiceSendReminders,
+} from "@/lib/invoice-send-reminders";
 import { api } from "@/lib/trpc";
 
-function openInvoiceFromNotification(data: Record<string, unknown> | undefined) {
+function openInvoiceFromNotification(
+  data: Record<string, unknown> | undefined,
+) {
   if (data?.type !== "invoice-send-reminder") return;
   const invoiceId = data.invoiceId;
   if (typeof invoiceId !== "string" || !invoiceId) return;
@@ -21,35 +27,58 @@ export function InvoiceReminderSync() {
     { staleTime: 60_000 },
   );
   const wasBackgrounded = useRef(false);
+  const [remotePushReady, setRemotePushReady] = useState(false);
+  const registerPushToken = api.notifications.registerPushToken.useMutation();
+
+  useEffect(() => {
+    if (Platform.OS !== "ios" && Platform.OS !== "android") return;
+    void (async () => {
+      if (!(await ensureNotificationPermissions())) return;
+      const projectId =
+        Constants.easConfig?.projectId ??
+        (Constants.expoConfig?.extra?.eas as { projectId?: string } | undefined)
+          ?.projectId;
+      if (!projectId) return;
+      const { data: token } = await Notifications.getExpoPushTokenAsync({
+        projectId,
+      });
+      await registerPushToken.mutateAsync({ token, platform: Platform.OS });
+      setRemotePushReady(true);
+    })().catch(() => {
+      // Local reminders remain available when remote push registration is unavailable.
+    });
+  }, [registerPushToken]);
 
   useEffect(() => {
     if (!invoicesQuery.data) return;
-    void syncInvoiceSendReminders(invoicesQuery.data);
-  }, [invoicesQuery.data]);
+    void syncInvoiceSendReminders(remotePushReady ? [] : invoicesQuery.data);
+  }, [invoicesQuery.data, remotePushReady]);
 
   useEffect(() => {
-    const subscription = AppState.addEventListener("change", (nextState: AppStateStatus) => {
-      if (nextState === "background" || nextState === "inactive") {
-        wasBackgrounded.current = true;
-        return;
-      }
+    const subscription = AppState.addEventListener(
+      "change",
+      (nextState: AppStateStatus) => {
+        if (nextState === "background" || nextState === "inactive") {
+          wasBackgrounded.current = true;
+          return;
+        }
 
-      if (nextState !== "active" || !wasBackgrounded.current) return;
-      wasBackgrounded.current = false;
-      void utils.invoices.getAll.invalidate({ status: "draft" });
-    });
+        if (nextState !== "active" || !wasBackgrounded.current) return;
+        wasBackgrounded.current = false;
+        void utils.invoices.getAll.invalidate({ status: "draft" });
+      },
+    );
 
     return () => subscription.remove();
   }, [utils.invoices.getAll]);
 
   useEffect(() => {
-    const responseSubscription = Notifications.addNotificationResponseReceivedListener(
-      (response) => {
+    const responseSubscription =
+      Notifications.addNotificationResponseReceivedListener((response) => {
         openInvoiceFromNotification(
           response.notification.request.content.data as Record<string, unknown>,
         );
-      },
-    );
+      });
 
     void Notifications.getLastNotificationResponseAsync().then((response) => {
       if (!response) return;

apps/mobile/components/expenses/ExpenseFormFields.tsx

@@ -6,6 +6,7 @@ import { SelectField, type SelectOption } from "@/components/ui/SelectField";
 import { fonts, spacing } from "@/constants/theme";
 import { useAppTheme } from "@/contexts/ThemeContext";
 import { EXPENSE_CATEGORIES } from "@/lib/expense-categories";
+import { calendarDateFromLocalDate } from "@beenvoice/domain/time-zone";
 
 const NONE = "__none__";
 
@@ -37,7 +38,7 @@ export function defaultExpenseFormState(
   return {
     description: "",
     amountText: "",
-    date: new Date(),
+    date: calendarDateFromLocalDate(new Date()),
     category: "",
     businessId: defaultBusinessId,
     clientId: "",

apps/mobile/components/invoices/InvoiceSetupForm.tsx

@@ -6,6 +6,7 @@ import { SelectField } from "@/components/ui/SelectField";
 import { fonts, spacing } from "@/constants/theme";
 import { useAppTheme } from "@/contexts/ThemeContext";
 import { defaultDueDate } from "@/lib/invoice-number";
+import { formatCalendarDate } from "@beenvoice/domain/time-zone";
 
 type SelectOption = { label: string; value: string };
 
@@ -120,7 +121,9 @@ export function InvoiceSetupForm({
 
       {invoiceNumberReadOnly ? (
         <View style={styles.readOnlyField}>
-          <Text style={[styles.readOnlyLabel, { color: colors.mutedForeground }]}>
+          <Text
+            style={[styles.readOnlyLabel, { color: colors.mutedForeground }]}
+          >
             Invoice number
           </Text>
           <Text style={[styles.readOnlyValue, { color: colors.foreground }]}>
@@ -141,11 +144,13 @@ export function InvoiceSetupForm({
 
       {issueDateReadOnly ? (
         <View style={styles.readOnlyField}>
-          <Text style={[styles.readOnlyLabel, { color: colors.mutedForeground }]}>
+          <Text
+            style={[styles.readOnlyLabel, { color: colors.mutedForeground }]}
+          >
             Issue date
           </Text>
           <Text style={[styles.readOnlyValue, { color: colors.foreground }]}>
-            {issueDate.toLocaleDateString()}
+            {formatCalendarDate(issueDate)}
           </Text>
         </View>
       ) : (
@@ -160,11 +165,18 @@ export function InvoiceSetupForm({
         />
       )}
 
-      <DateTimeField label="Due date" mode="date" value={dueDate} onChange={onDueDateChange} />
+      <DateTimeField
+        label="Due date"
+        mode="date"
+        value={dueDate}
+        onChange={onDueDateChange}
+      />
 
       {taxRateReadOnly ? (
         <View style={styles.readOnlyField}>
-          <Text style={[styles.readOnlyLabel, { color: colors.mutedForeground }]}>
+          <Text
+            style={[styles.readOnlyLabel, { color: colors.mutedForeground }]}
+          >
             Tax rate
           </Text>
           <Text style={[styles.readOnlyValue, { color: colors.foreground }]}>
@@ -186,7 +198,7 @@ export function InvoiceSetupForm({
         <>
           <DateTimeField
             label="Remind me to send"
-            mode="date"
+            mode="datetime"
             value={sendReminderAt ?? dueDate}
             minimumDate={new Date()}
             maximumDate={new Date(2100, 0, 1)}

apps/mobile/components/ui/DateTimeField.tsx

@@ -3,11 +3,22 @@ import DateTimePicker, {
   type DateTimePickerEvent,
 } from "@react-native-community/datetimepicker";
 import { useState } from "react";
-import { Modal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import {
+  Modal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
 
 import { fonts, radii, spacing } from "@/constants/theme";
 import { useAppTheme } from "@/contexts/ThemeContext";
 import { formatDate, formatDateTime } from "@/lib/format";
+import {
+  calendarDateFromLocalDate,
+  calendarDateToLocalDate,
+} from "@beenvoice/domain/time-zone";
 
 type DateTimeFieldProps = {
   label: string;
@@ -31,17 +42,18 @@ export function DateTimeField({
   const [draft, setDraft] = useState(value);
 
   function openPicker() {
-    setDraft(value);
+    setDraft(mode === "date" ? calendarDateToLocalDate(value) : value);
     setOpen(true);
   }
 
   function applyDate(next: Date) {
+    const normalized = mode === "date" ? calendarDateFromLocalDate(next) : next;
     const clamped =
-      next.getTime() > maximumDate.getTime()
+      normalized.getTime() > maximumDate.getTime()
         ? maximumDate
-        : minimumDate && next.getTime() < minimumDate.getTime()
+        : minimumDate && normalized.getTime() < minimumDate.getTime()
           ? minimumDate
-          : next;
+          : normalized;
     onChange(clamped);
   }
 
@@ -60,7 +72,9 @@ export function DateTimeField({
 
   return (
     <View style={styles.wrapper}>
-      <Text style={[styles.label, { color: colors.mutedForeground }]}>{label}</Text>
+      <Text style={[styles.label, { color: colors.mutedForeground }]}>
+        {label}
+      </Text>
       <Pressable
         accessible
         accessibilityLabel={`${label}, ${
@@ -81,28 +95,53 @@ export function DateTimeField({
         <Text style={[styles.value, { color: colors.foreground }]}>
           {mode === "date" ? formatDate(value) : formatDateTime(value)}
         </Text>
-        <Ionicons name="calendar-outline" size={18} color={colors.mutedForeground} />
+        <Ionicons
+          name="calendar-outline"
+          size={18}
+          color={colors.mutedForeground}
+        />
       </Pressable>
 
       {Platform.OS === "ios" ? (
-        <Modal visible={open} transparent animationType="slide" onRequestClose={() => setOpen(false)}>
+        <Modal
+          visible={open}
+          transparent
+          animationType="slide"
+          onRequestClose={() => setOpen(false)}
+        >
           <Pressable style={styles.backdrop} onPress={() => setOpen(false)}>
             <Pressable
               style={[styles.sheet, { backgroundColor: colors.card }]}
               onPress={(event) => event.stopPropagation()}
             >
-              <View style={[styles.sheetHeader, { borderBottomColor: colors.border }]}>
+              <View
+                style={[
+                  styles.sheetHeader,
+                  { borderBottomColor: colors.border },
+                ]}
+              >
                 <Pressable onPress={() => setOpen(false)}>
-                  <Text style={[styles.sheetAction, { color: colors.mutedForeground }]}>Cancel</Text>
+                  <Text
+                    style={[
+                      styles.sheetAction,
+                      { color: colors.mutedForeground },
+                    ]}
+                  >
+                    Cancel
+                  </Text>
                 </Pressable>
-                <Text style={[styles.sheetTitle, { color: colors.foreground }]}>{label}</Text>
+                <Text style={[styles.sheetTitle, { color: colors.foreground }]}>
+                  {label}
+                </Text>
                 <Pressable
                   onPress={() => {
                     applyDate(draft);
                     setOpen(false);
                   }}
                 >
-                  <Text style={[styles.sheetAction, { color: colors.primary }]}>Done</Text>
+                  <Text style={[styles.sheetAction, { color: colors.primary }]}>
+                    Done
+                  </Text>
                 </Pressable>
               </View>
               <DateTimePicker