chore: further changes

frontend/package.json

@@ -42,7 +42,6 @@
     "canvas-confetti": "^1.9.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "date-fns": "^3.6.0",
     "dayjs": "^1.11.10",
     "embla-carousel-react": "^8.0.2",
     "gradient-avatar": "^1.0.2",

frontend/src/components/ExpirySelect.tsx

@@ -1,4 +1,4 @@
-import { format } from "date-fns";
+import dayjs from "dayjs";
 import { CalendarIcon } from "lucide-react";
 import React from "react";
 import { Calendar } from "src/components/ui/calendar";
@@ -14,9 +14,9 @@ const daysFromNow = (date?: Date) => {
   if (!date) {
     return 0;
   }
-  return Math.ceil(
-    (new Date(date).getTime() - Date.now()) / (1000 * 60 * 60 * 24)
-  );
+  const now = dayjs();
+  const targetDate = dayjs(date);
+  return targetDate.diff(now, "day");
 };
 
 interface ExpiryProps {
@@ -66,7 +66,9 @@ const ExpirySelect: React.FC<ExpiryProps> = ({ value, onChange }) => {
             >
               <CalendarIcon className="mr-2 h-4 w-4" />
               <span className="truncate">
-                {customExpiry && value ? format(value, "PPP") : "Custom..."}
+                {customExpiry && value
+                  ? dayjs(value).format("DD MMMM YYYY")
+                  : "Custom..."}
               </span>
             </div>
           </PopoverTrigger>

frontend/src/components/Permissions.tsx

@@ -35,17 +35,26 @@ const Permissions: React.FC<PermissionsProps> = ({
 }) => {
   const [permissions, setPermissions] = React.useState(initialPermissions);
 
+  const [canEditBudgetAmount, setCanEditBudgetAmount] = React.useState(
+    isNewConnection ? Number.isNaN(permissions.maxAmount) : canEditPermissions
+  );
+  const [canEditExpiry, setCanEditExpiry] = React.useState(
+    isNewConnection ? !permissions.expiresAt : canEditPermissions
+  );
+
   // this is triggered when edit mode is cancelled in show app
   React.useEffect(() => {
     setPermissions(initialPermissions);
-  }, [initialPermissions]);
+    setCanEditBudgetAmount(
+      isNewConnection
+        ? Number.isNaN(initialPermissions.maxAmount)
+        : canEditPermissions
+    );
+    setCanEditExpiry(
+      isNewConnection ? !initialPermissions.expiresAt : canEditPermissions
+    );
+  }, [canEditPermissions, initialPermissions, isNewConnection]);
 
-  const canEditBudgetAmount = isNewConnection
-    ? Number.isNaN(permissions.maxAmount)
-    : canEditPermissions;
-  const canEditExpiry = isNewConnection
-    ? !permissions.expiresAt
-    : canEditPermissions;
   const [showBudgetOptions, setShowBudgetOptions] = React.useState(
     isNewConnection ? !!permissions.maxAmount : true
   );

frontend/yarn.lock

@@ -1845,11 +1845,6 @@ dargs@^8.0.0:
   resolved "https://registry.yarnpkg.com/dargs/-/dargs-8.1.0.tgz#a34859ea509cbce45485e5aa356fef70bfcc7272"
   integrity sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw==
 
-date-fns@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
-  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
-
 dayjs@^1.11.10:
   version "1.11.10"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"