Updated to using managed types instead of

hard coded ones.

app/dashboard/page.tsx

@@ -14,6 +14,26 @@ export default function DashboardPage() {
   const [loading, setLoading] = useState(false)
   const router = useRouter()
 
+  const refreshUser = async (currentUser: User) => {
+    try {
+      const response = await fetch("/api/user", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ nationalId: currentUser.national_id }),
+      })
+
+      const data = await response.json()
+      if (response.ok && data.user) {
+        setUser(data.user)
+        setSelectedStatus(data.user.in_shelter)
+        setLastUpdated(data.user.last_updated)
+        localStorage.setItem("user", JSON.stringify(data.user))
+      }
+    } catch (err) {
+      console.error("Error refreshing user:", err)
+    }
+  }
+
   useEffect(() => {
     const userData = localStorage.getItem("user")
     if (!userData) {
@@ -25,6 +45,17 @@ export default function DashboardPage() {
     setUser(parsedUser)
     setSelectedStatus(parsedUser.in_shelter)
     setLastUpdated(parsedUser.last_updated)
+
+    refreshUser(parsedUser)
+
+    const handleVisibility = () => {
+      if (document.visibilityState === "visible" && parsedUser) {
+        refreshUser(parsedUser)
+      }
+    }
+
+    window.addEventListener("visibilitychange", handleVisibility)
+    return () => window.removeEventListener("visibilitychange", handleVisibility)
   }, [router])
 
   const handleStatusUpdate = async (status: string) => {