fix: date formatting

package.json

@@ -52,7 +52,7 @@
     "@svelte-put/qr": "^2.1.1",
     "@sveltejs/adapter-node": "^5.5.4",
     "@sveltejs/enhanced-img": "^0.10.3",
-    "@sveltejs/kit": "^2.53.3",
+    "@sveltejs/kit": "^2.53.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.2.1",
@@ -72,7 +72,7 @@
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.5.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
-    "svelte": "^5.53.5",
+    "svelte": "^5.53.6",
     "svelte-check": "^4.4.4",
     "svelte-render-scan": "^1.1.0",
     "svelte-sonner": "^1.0.7",

src/routes/(components)/cta.svelte

@@ -1,14 +1,15 @@
 <script module lang="ts">
   interface CtaProps {
     user?: App.Locals["user"];
+    loading: boolean;
   }
 </script>
 
 <script lang="ts">
   import { Button } from "$/components/ui/button";
   import { SplitReveal, ScrollReveal } from "$lib/motion-core";
 
-  let { user = null }: CtaProps = $props();
+  let { user, loading }: CtaProps = $props();
 </script>
 
 <section class="relative z-10 py-32">
@@ -44,6 +45,7 @@
             <div class="mt-10 flex flex-col justify-center gap-4 sm:flex-row">
               {#if user}
                 <Button
+                  disabled={loading}
                   data-sveltekit-reload
                   size="lg"
                   class="shadow-lg shadow-primary/25 transition-all duration-300 hover:shadow-xl hover:shadow-primary/40"
@@ -53,15 +55,20 @@
                 </Button>
               {:else}
                 <Button
+                  disabled={loading}
                   data-sveltekit-reload
                   size="lg"
                   class="shadow-lg shadow-primary/25 transition-all duration-300 hover:shadow-xl hover:shadow-primary/40"
                   href="/auth?act=register"
                 >
                   Get Started Free
                 </Button>
-                <Button data-sveltekit-reload size="lg" variant="outline" href="/auth?act=login"
-                  >Sign In</Button
+                <Button
+                  disabled={loading}
+                  data-sveltekit-reload
+                  size="lg"
+                  variant="outline"
+                  href="/auth?act=login">Sign In</Button
                 >
               {/if}
             </div>

src/routes/(components)/hero.svelte

@@ -2,6 +2,7 @@
   interface HeroProps {
     user: App.Locals["user"];
     session: App.Locals["session"];
+    loading: boolean;
   }
   type HeroState = {
     texts: ("Billing" | "Payments" | "Usage" | "Expenses")[];
@@ -16,7 +17,7 @@
   import { TextLoop, Magnetic, ScrollReveal, ScrollStagger } from "$lib/motion-core";
   import { fade } from "svelte/transition";
 
-  let { user, session }: HeroProps = $props();
+  let { user, session, loading }: HeroProps = $props();
 
   let { texts, currentIndex } = $state<HeroState>({
     texts: ["Billing", "Payments", "Usage", "Expenses"],
@@ -92,6 +93,7 @@
       <div class="flex flex-col justify-center gap-4 sm:flex-row">
         {#if fullyAuthenticated}
           <Button
+            disabled={loading}
             data-sveltekit-reload
             size="lg"
             class="shadow-lg shadow-primary/25 transition-all duration-300 hover:shadow-xl hover:shadow-primary/40"
@@ -101,6 +103,7 @@
           </Button>
         {:else if needs2FA}
           <Button
+            disabled={loading}
             data-sveltekit-reload
             size="lg"
             class="shadow-lg shadow-primary/25 transition-all duration-300 hover:shadow-xl hover:shadow-primary/40"
@@ -110,15 +113,20 @@
           </Button>
         {:else}
           <Button
+            disabled={loading}
             data-sveltekit-reload
             size="lg"
             class="shadow-lg shadow-primary/25 transition-all duration-300 hover:shadow-xl hover:shadow-primary/40"
             href="/auth?act=register"
           >
             Get Started Free
           </Button>
-          <Button data-sveltekit-reload size="lg" variant="outline" href="/auth?act=login"
-            >Sign In</Button
+          <Button
+            disabled={loading}
+            data-sveltekit-reload
+            size="lg"
+            variant="outline"
+            href="/auth?act=login">Sign In</Button
           >
         {/if}
       </div>

src/routes/(components)/landing-footer.svelte

@@ -1,6 +1,7 @@
 <script module lang="ts">
   interface LandingFooterProps {
     user: App.Locals["user"];
+    loading: boolean;
   }
 </script>
 
@@ -11,7 +12,7 @@
   import { ChartLine, Users, Shield, Download, InvoiceIcon } from "$lib/assets/icons";
   import { LANDING_NAV_ITEMS, handleLandingNavClick } from ".";
 
-  let { user }: LandingFooterProps = $props();
+  let { user, loading }: LandingFooterProps = $props();
 
   // ─── Canvas grid drawing ───────────────────────────────────────────────────
   function initCanvas(canvas: HTMLCanvasElement) {
@@ -189,6 +190,7 @@
       <div class="flex items-center gap-6">
         {#if user}
           <a
+            aria-disabled={loading}
             data-sveltekit-reload
             href="/dashboard"
             class="text-xs text-muted-foreground transition-colors hover:text-foreground"
@@ -197,13 +199,15 @@
           </a>
         {:else}
           <a
+            aria-disabled={loading}
             data-sveltekit-reload
             href="/auth?act=login"
             class="text-xs text-muted-foreground transition-colors hover:text-foreground"
           >
             Sign In
           </a>
           <a
+            aria-disabled={loading}
             data-sveltekit-reload
             href="/auth?act=register"
             class="text-xs text-muted-foreground transition-colors hover:text-foreground"

src/routes/(components)/landing-nav.svelte

@@ -2,6 +2,7 @@
   interface LandingNavProps {
     user: App.Locals["user"];
     session: App.Locals["session"];
+    loading: boolean;
   }
 </script>
 
@@ -10,7 +11,7 @@
   import { Button } from "$/components/ui/button";
   import { LANDING_NAV_ITEMS, handleLandingNavClick } from ".";
 
-  let { user, session }: LandingNavProps = $props();
+  let { user, session, loading }: LandingNavProps = $props();
 
   let scrollY = $state(0);
   const isFloating = $derived(scrollY > 50);
@@ -72,11 +73,15 @@
 
       <div class="flex gap-2">
         {#if fullyAuthenticated}
-          <Button data-sveltekit-reload href="/dashboard" class="hidden sm:inline-flex"
-            >Go to Dashboard</Button
+          <Button
+            disabled={loading}
+            data-sveltekit-reload
+            href="/dashboard"
+            class="hidden sm:inline-flex">Go to Dashboard</Button
           >
         {:else if needs2FA}
           <Button
+            disabled={loading}
             data-sveltekit-reload
             href="/auth?act=2fa-checkpoint"
             class="hidden sm:inline-flex"
@@ -85,13 +90,17 @@
           </Button>
         {:else}
           <Button
+            disabled={loading}
             data-sveltekit-reload
             variant="outline"
             href="/auth?act=login"
             class="hidden sm:inline-flex">Sign In</Button
           >
-          <Button data-sveltekit-reload href="/auth?act=register" class="hidden sm:inline-flex"
-            >Get Started</Button
+          <Button
+            disabled={loading}
+            data-sveltekit-reload
+            href="/auth?act=register"
+            class="hidden sm:inline-flex">Get Started</Button
           >
         {/if}
       </div>

src/routes/+page.svelte

@@ -14,26 +14,33 @@
   import { getAuthUser } from "$/api/auth.remote";
   import { onMount } from "svelte";
 
-  let { user, session } = $state<App.Locals>({
+  let { user, session, loading } = $state<
+    App.Locals & {
+      loading: boolean;
+    }
+  >({
     user: null,
     session: null,
+    loading: true,
   });
 
   onMount(() => {
     try {
-      getAuthUser().then((data) => ([user, session] = [data.user, data.session]));
+      getAuthUser()
+        .then((data) => ([user, session] = [data.user, data.session]))
+        .finally(() => (loading = false));
     } catch (e) {
       console.warn("Failed to fetch user data:", e);
     }
   });
 </script>
 
 <div class="relative min-h-screen overflow-hidden bg-background">
-  <LandingNav {user} {session} />
+  <LandingNav {loading} {user} {session} />
 
   <!-- Hero Section with scroll indicator -->
   <div class="relative">
-    <Hero {user} {session} />
+    <Hero {loading} {user} {session} />
   </div>
 
   <!-- Benefits Marquee - Visual break with movement -->
@@ -62,12 +69,12 @@
   <!-- CTA Section - With dramatic separators and parallax -->
   <div class="relative">
     <ScrollParallax speed={0.05} fade opacityFrom={0.8} opacityTo={1}>
-      <Cta {user} />
+      <Cta {loading} {user} />
     </ScrollParallax>
   </div>
 
   <!-- Footer -->
   <div class="relative">
-    <LandingFooter {user} />
+    <LandingFooter {loading} {user} />
   </div>
 </div>

src/routes/history/(components)/history-data-table-row-actions.svelte

@@ -57,7 +57,7 @@
     },
     {
       label: "Date",
-      value: row.original.date,
+      value: row.original.dateFormatted,
       class: "font-mono",
     },
     {
@@ -167,7 +167,7 @@
         </Dialog.Title>
         <Dialog.Description class="mt-2 text-lg text-muted-foreground">
           Comprehensive billing information for
-          <span class="font-mono text-primary">{row.original.date}</span>
+          <span class="font-mono text-primary">{row.original.dateFormatted}</span>
         </Dialog.Description>
       </Dialog.Header>
       <ScrollArea class="max-h-[60vh] pr-2.5">
@@ -257,7 +257,7 @@
   <Sheet.Portal>
     <Sheet.Content class="w-full gap-1 md:min-w-[60%]" side="left">
       <Sheet.Header class="border-b">
-        <Sheet.Title>Edit billing info of {row.original.date}</Sheet.Title>
+        <Sheet.Title>Edit billing info of {row.original.dateFormatted}</Sheet.Title>
         <Sheet.Description>
           Update the billing info details for billing info with id
           <span class="font-mono text-primary">

src/routes/history/(components)/index.ts

@@ -5,7 +5,7 @@ import type { ExtendedBillingInfoTableView } from "$/types/billing-info";
 import type { ColumnDef, Table } from "@tanstack/table-core";
 import { createRawSnippet } from "svelte";
 import { HistoryDataTableRowActions, SubPaymentsButton } from ".";
-import { formatNumber } from "$/utils/format";
+import { formatDate, formatNumber } from "$/utils/format";
 
 export function historyTableColumns() {
   return [
@@ -30,7 +30,7 @@ export function historyTableColumns() {
       enableHiding: false,
     },
     {
-      accessorKey: "dateFormatted",
+      accessorKey: "date",
       header: ({ column }) =>
         renderComponent(DataTableColumnHeader<ExtendedBillingInfoTableView, unknown>, {
           column,
@@ -45,7 +45,7 @@ export function historyTableColumns() {
           }),
         }),
       filterFn: (row, id, value) => {
-        const dateStr = row.getValue(id) as string;
+        const dateStr = formatDate(row.getValue(id)) as string;
         return dateStr === value || dateStr.toLowerCase().includes(value.toLowerCase());
       },
     },

src/routes/history/(components)/sub-payments-dialog.svelte

@@ -20,7 +20,7 @@
 <Dialog {open} {onOpenChange}>
   <DialogContent>
     <DialogHeader>
-      <DialogTitle>Sub Payments for [{billingInfo.date}]</DialogTitle>
+      <DialogTitle>Sub Payments for [{billingInfo.dateFormatted}]</DialogTitle>
     </DialogHeader>
     <ScrollArea class="max-h-96 pr-2.5">
       {#each billingInfo.subMeters as subMeter, index}