From 49362109bc34b540c27dee5d4ff05c0475b75b21 Mon Sep 17 00:00:00 2001
From: lamvh <27491634+lamvh@users.noreply.github.com>
Date: Mon, 7 Oct 2024 19:19:42 +0700
Subject: [PATCH] fix(mobile): fix monthly period on Budget view (#381)

---
 apps/mobile/components/budget/period-control.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/mobile/components/budget/period-control.tsx b/apps/mobile/components/budget/period-control.tsx
index 896373ac..9564b36a 100644
--- a/apps/mobile/components/budget/period-control.tsx
+++ b/apps/mobile/components/budget/period-control.tsx
@@ -1,4 +1,5 @@
 import { formatDateRange } from '@/lib/date'
+import { dayjsExtended } from '@6pm/utilities'
 import type { BudgetPeriodConfig } from '@6pm/validation'
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react-native'
 import { View } from 'react-native'
@@ -18,6 +19,7 @@ export function PeriodControl({
 }: PeriodControlProps) {
   const couldGoBack = index > 0
   const couldGoForward = index < periodConfigs.length - 1
+  const timezoneOffset = new Date().getTimezoneOffset()
 
   return (
     <View className="z-50 h-12 w-full flex-row items-center justify-between gap-2 bg-muted px-4">
@@ -31,8 +33,12 @@ export function PeriodControl({
       </Button>
       <Text className="font-medium">
         {formatDateRange(
-          periodConfigs[index].startDate!,
-          periodConfigs[index].endDate!,
+          dayjsExtended(periodConfigs[index].startDate!)
+            .add(timezoneOffset, 'm')
+            .toDate(),
+          dayjsExtended(periodConfigs[index].endDate!)
+            .add(timezoneOffset, 'm')
+            .toDate(),
         )}
       </Text>
       <Button