Make scheduling and dates timezone-safe

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)}