From 887c263599588544b672fb43ccdc56d83b919145 Mon Sep 17 00:00:00 2001
From: Vishal-770 <vishalpeace07@gmail.com>
Date: Fri, 7 Aug 2026 12:21:10 +0530
Subject: [PATCH 1/3] refactor: simplify mobile data fetching with
 useOfflineData hook

---
 src/hooks/use-offline-data.ts                 | 125 ++++++++++++++
 .../dashboard/academic-calendar.tsx           | 115 ++++---------
 src/pages-mobile/dashboard/attendance.tsx     |  58 ++-----
 .../dashboard/attendance/[classId].tsx        |  62 ++-----
 src/pages-mobile/dashboard/contact.tsx        |  54 ++----
 src/pages-mobile/dashboard/courses.tsx        |  58 ++-----
 .../dashboard/curriculum/[categoryId].tsx     |  76 ++-------
 .../dashboard/curriculum/index.tsx            |  53 ++----
 src/pages-mobile/dashboard/exams.tsx          |  92 +++-------
 src/pages-mobile/dashboard/grades.tsx         | 121 ++++---------
 src/pages-mobile/dashboard/hod-dean.tsx       |  54 ++----
 src/pages-mobile/dashboard/index.tsx          | 160 +++++++-----------
 src/pages-mobile/dashboard/marks.tsx          |  62 ++-----
 .../dashboard/payment-receipts.tsx            |  59 ++-----
 src/pages-mobile/dashboard/profile.tsx        |  49 +-----
 src/pages-mobile/dashboard/timetable.tsx      | 107 +++++-------
 16 files changed, 444 insertions(+), 861 deletions(-)
 create mode 100644 src/hooks/use-offline-data.ts

diff --git a/src/hooks/use-offline-data.ts b/src/hooks/use-offline-data.ts
new file mode 100644
index 0000000..b498bd4
--- /dev/null
+++ b/src/hooks/use-offline-data.ts
@@ -0,0 +1,125 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { fetchWithTimeout } from "@/lib/utils";
+
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  [key: string]: unknown;
+}
+
+export interface UseOfflineDataOptions<T> {
+  /** localStorage key to read/write cache */
+  cacheKey: string;
+  /** Async function that returns an ApiResponse-shaped object */
+  fetcher: () => Promise<ApiResponse<T>>;
+  /** Only fetch when true — e.g. isLoggedIn && !authLoading */
+  enabled?: boolean;
+  /** Timeout in ms (default: 15000) */
+  timeout?: number;
+  /** Optional: filter or transform raw data before storing */
+  transform?: (raw: T) => T;
+  /** Optional: check if cached value is non-empty (default: truthy check) */
+  isEmpty?: (value: T) => boolean;
+}
+
+export interface UseOfflineDataResult<T> {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+  /** True when showing cached data but last fetch failed */
+  isStale: boolean;
+  /** Manually trigger a re-fetch */
+  retry: () => void;
+}
+
+function readCache<T>(cacheKey: string): T | null {
+  try {
+    const raw = localStorage.getItem(cacheKey);
+    if (raw) return JSON.parse(raw) as T;
+  } catch {}
+  return null;
+}
+
+function writeCache<T>(cacheKey: string, value: T): void {
+  try {
+    localStorage.setItem(cacheKey, JSON.stringify(value));
+  } catch {}
+}
+
+export function useOfflineData<T>({
+  cacheKey,
+  fetcher,
+  enabled = true,
+  timeout = 15000,
+  transform,
+  isEmpty,
+}: UseOfflineDataOptions<T>): UseOfflineDataResult<T> {
+  const hasData = (value: T | null): boolean => {
+    if (value === null || value === undefined) return false;
+    if (isEmpty) return !isEmpty(value);
+    if (Array.isArray(value)) return value.length > 0;
+    if (typeof value === "object") return Object.keys(value as object).length > 0;
+    return !!value;
+  };
+
+  const [data, setData] = useState<T | null>(() => readCache<T>(cacheKey));
+  const [loading, setLoading] = useState<boolean>(() => !hasData(readCache<T>(cacheKey)));
+  const [error, setError] = useState<string | null>(null);
+  const [isStale, setIsStale] = useState(false);
+
+  // Use ref to avoid stale closure issues in fetch
+  const dataRef = useRef(data);
+  dataRef.current = data;
+
+  const fetchData = useCallback(async () => {
+    if (!enabled) return;
+
+    const currentData = dataRef.current;
+    const hasCache = hasData(currentData);
+
+    setError(null);
+    setLoading(!hasCache);
+
+    try {
+      const res = await fetchWithTimeout(fetcher(), timeout);
+
+      if (res?.success && res.data !== undefined && res.data !== null) {
+        const processed = transform ? transform(res.data) : res.data;
+        setData(processed);
+        writeCache(cacheKey, processed);
+        setIsStale(false);
+        setError(null);
+      } else {
+        const errMsg = res?.error ?? "Failed to fetch data.";
+        if (!hasCache) {
+          setError(errMsg);
+        } else {
+          // silently mark stale — still showing cached data
+          setIsStale(true);
+        }
+      }
+    } catch (e) {
+      const errMsg = e instanceof Error ? e.message : String(e);
+      if (!hasCache) {
+        setError(errMsg);
+      } else {
+        setIsStale(true);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [enabled, cacheKey, timeout]);
+
+  useEffect(() => {
+    if (enabled) {
+      fetchData();
+    }
+  }, [enabled]);
+
+  const retry = useCallback(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { data, loading, error, isStale, retry };
+}
diff --git a/src/pages-mobile/dashboard/academic-calendar.tsx b/src/pages-mobile/dashboard/academic-calendar.tsx
index f5f8b27..6ee4666 100644
--- a/src/pages-mobile/dashboard/academic-calendar.tsx
+++ b/src/pages-mobile/dashboard/academic-calendar.tsx
@@ -11,7 +11,8 @@ import { ErrorDisplay } from "@/components/error-display";
 import { DrawerSelect } from "@/components/ui/drawer-select";
 import { useOnlineStatus } from "@/hooks/use-online-status";
 import { OfflineDisplay } from "@/components/offline-display";
-import { isNetworkError, fetchWithTimeout } from "@/lib/utils";
+import { isNetworkError } from "@/lib/utils";
+import { useOfflineData } from "@/hooks/use-offline-data";
 import { Info } from "lucide-react";
 import { Drawer, DrawerContent } from "@/components/ui/drawer";
 import calendarImg from "@/assets/calender.png";
@@ -92,6 +93,18 @@ type CalendarCell = {
 export default function AcademicCalendarPage() {
   const { loading: authLoading } = useAuth();
   const isOnline = useOnlineStatus();
+  const {
+    data: optionsData,
+    loading: optionsLoading,
+    error: optionsError,
+    retry: fetchOptions,
+  } = useOfflineData<CalendarMonthOption[]>({
+    cacheKey: "deskly::cache::calendar_options",
+    fetcher: getAcademicCalendarOptions,
+  });
+
+  const options = optionsData || null;
+
   const initialOptions = useMemo(() => {
     try {
       const cachedOptions = localStorage.getItem("deskly::cache::calendar_options");
@@ -103,93 +116,29 @@ export default function AcademicCalendarPage() {
     return null;
   }, []);
 
-  const [options, setOptions] = useState<CalendarMonthOption[] | null>(initialOptions);
   const [selectedOption, setSelectedOption] = useState<CalendarMonthOption | null>(initialOptions?.[0] ?? null);
-  const [schedule, setSchedule] = useState<MonthlySchedule | null>(null);
-  const [loading, setLoading] = useState(!initialOptions);
-  const [error, setError] = useState<string | null>(null);
   const [selectedCell, setSelectedCell] = useState<CalendarCell | null>(null);
 
-  // Load monthly view from cache first when selectedOption changes
-  useEffect(() => {
-    if (selectedOption) {
-      const cachedView = localStorage.getItem(`deskly::cache::calendar_view_${selectedOption.dateValue}`);
-      if (cachedView) {
-        try {
-          const parsed = JSON.parse(cachedView);
-          if (parsed && parsed.days && parsed.days.length > 0) {
-            setSchedule(parsed);
-            setLoading(false);
-            return;
-          }
-        } catch (e) {
-          console.error("Failed to parse cached calendar view", e);
-        }
-      }
-      setSchedule(null);
-      setLoading(true);
-    }
-  }, [selectedOption]);
-
-  const fetchOptions = async () => {
-    const hasCache = !!(options && options.length > 0);
-    setLoading(!hasCache);
-    setError(null);
-    try {
-      const res = await fetchWithTimeout(getAcademicCalendarOptions(), 15000);
-      if (res.success && res.data && res.data.length > 0) {
-        setOptions(res.data);
-        localStorage.setItem("deskly::cache::calendar_options", JSON.stringify(res.data));
-        if (!selectedOption) {
-          setSelectedOption(res.data[0]);
-        }
-      } else {
-        if (!hasCache) {
-          setError(res.error ?? "No academic calendar semesters found.");
-        }
-        setLoading(false);
-      }
-    } catch (e) {
-      if (!hasCache) {
-        setError(e instanceof Error ? e.message : String(e));
-      }
-      setLoading(false);
-    }
-  };
-
-  const fetchView = async (dateVal: string) => {
-    const hasCache = !!(schedule && schedule.days && schedule.days.length > 0);
-    setLoading(!hasCache);
-    setError(null);
-    try {
-      const res = await fetchWithTimeout(getAcademicCalendarView(dateVal), 15000);
-      if (res.success && res.data) {
-        setSchedule(res.data);
-        localStorage.setItem(`deskly::cache::calendar_view_${dateVal}`, JSON.stringify(res.data));
-        setSelectedCell(null);
-      } else {
-        if (!hasCache) {
-          setError(res.error ?? "Failed to load academic calendar view.");
-        }
-      }
-    } catch (e) {
-      if (!hasCache) {
-        setError(e instanceof Error ? e.message : String(e));
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchOptions();
-  }, []);
-
+  // Sync selectedOption with options if it is null
   useEffect(() => {
-    if (selectedOption) {
-      fetchView(selectedOption.dateValue);
+    if (!selectedOption && options && options.length > 0) {
+      setSelectedOption(options[0]);
     }
-  }, [selectedOption]);
+  }, [options, selectedOption]);
+
+  const {
+    data: viewData,
+    loading: viewLoading,
+    error: viewError,
+  } = useOfflineData<MonthlySchedule>({
+    cacheKey: selectedOption ? `deskly::cache::calendar_view_${selectedOption.dateValue}` : "",
+    fetcher: () => getAcademicCalendarView(selectedOption!.dateValue),
+    enabled: !!selectedOption,
+  });
+
+  const schedule = viewData || null;
+  const loading = optionsLoading || viewLoading;
+  const error = optionsError || viewError;
 
   // Calendar Math
   const calendarCells = useMemo(() => {
diff --git a/src/pages-mobile/dashboard/attendance.tsx b/src/pages-mobile/dashboard/attendance.tsx
index 2fb2f7e..3c23902 100644
--- a/src/pages-mobile/dashboard/attendance.tsx
+++ b/src/pages-mobile/dashboard/attendance.tsx
@@ -1,7 +1,8 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { getCurrentAttendance, AttendanceRecord } from "@/lib/attendance";
-import { isNetworkError, fetchWithTimeout } from "@/lib/utils";
+import { isNetworkError } from "@/lib/utils";
+import { useOfflineData } from "@/hooks/use-offline-data";
 import { ErrorDisplay } from "@/components/error-display";
 import { useOnlineStatus } from "@/hooks/use-online-status";
 import { OfflineDisplay } from "@/components/offline-display";
@@ -381,51 +382,16 @@ export default function AttendancePage() {
   const isDetailRoute = useMatch("/dashboard/attendance/:classId");
   const isOnline = useOnlineStatus();
 
-  const [attendance, setAttendance] = useState<AttendanceRecord[]>(() => {
-    try {
-      const cached = localStorage.getItem("deskly::cache::attendance");
-      if (cached) {
-        const parsed = JSON.parse(cached) as AttendanceRecord[];
-        if (Array.isArray(parsed) && parsed.length > 0) return parsed;
-      }
-    } catch {}
-    return [];
+  const { data: rawData, loading, error, retry: load } = useOfflineData<AttendanceRecord[]>({
+    cacheKey: "deskly::cache::attendance",
+    fetcher: getCurrentAttendance,
+    enabled: isLoggedIn && !authLoading,
   });
-  const [loading, setLoading] = useState(attendance.length === 0);
-  const [error, setError] = useState<string | null>(null);
+  const attendance = rawData || [];
+
   const [selected, setSelected] = useState<AttendanceRecord | null>(null);
   const [filterType, setFilterType] = useState("all");
 
-  async function load() {
-    if (authLoading || !isLoggedIn) return;
-    setError(null);
-    const hasCache = attendance.length > 0;
-    setLoading(!hasCache);
-    try {
-      const res = await fetchWithTimeout(getCurrentAttendance(), 15000);
-      if (res.success && res.data) {
-        setAttendance(res.data);
-        const sem = res.semesterId ?? "";
-        localStorage.setItem("deskly::cache::attendance", JSON.stringify(res.data));
-        localStorage.setItem("deskly::cache::attendance_semester", sem);
-      } else {
-        if (!hasCache) {
-          setError(res.error ?? "Failed to fetch attendance.");
-        }
-      }
-    } catch (e) {
-      if (!hasCache) {
-        setError(e instanceof Error ? e.message : String(e));
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    if (isLoggedIn) load();
-  }, [isLoggedIn, authLoading]);
-
   const stats = useMemo(() => {
     let totalAttended = 0;
     let totalClasses = 0;
@@ -458,17 +424,17 @@ export default function AttendancePage() {
     return <Outlet />;
   }
 
-  const showOffline = attendance.length === 0 && (isOnline === false || isNetworkError(error, isOnline));
+  const showOffline = !rawData && !loading && (isOnline === false || isNetworkError(error, isOnline));
 
   if (showOffline) {
     return <OfflineDisplay onRetry={load} />;
   }
 
-  if (authLoading || (loading && attendance.length === 0)) {
+  if (authLoading || (loading && !rawData)) {
     return <AttendanceSkeleton />;
   }
 
-  if (error && attendance.length === 0) {
+  if (error && !rawData) {
     return (
       <div className="flex h-full items-center justify-center font-saira">
         <ErrorDisplay message={error} onRetry={load} />
diff --git a/src/pages-mobile/dashboard/attendance/[classId].tsx b/src/pages-mobile/dashboard/attendance/[classId].tsx
index b70cbc9..cf46faa 100644
--- a/src/pages-mobile/dashboard/attendance/[classId].tsx
+++ b/src/pages-mobile/dashboard/attendance/[classId].tsx
@@ -2,7 +2,8 @@ import { useState, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { useParams, useNavigate } from "@/router";
 import { getAttendanceDetail, AttendanceDetailRecord, AttendanceRecord } from "@/lib/attendance";
-import { fetchWithTimeout, isNetworkError } from "@/lib/utils";
+import { isNetworkError } from "@/lib/utils";
+import { useOfflineData } from "@/hooks/use-offline-data";
 import { Separator } from "@/components/ui/separator";
 import { Calendar, WifiOff, CheckCircle2, XCircle, Award, Clock } from "lucide-react";
 import { OfflineDisplay } from "@/components/offline-display";
@@ -115,21 +116,6 @@ export default function AttendanceDetailPage() {
 
   const isOnline = useOnlineStatus();
   const [record, setRecord] = useState<AttendanceRecord | undefined>(location.state?.record);
-  const [details, setDetails] = useState<AttendanceDetailRecord[]>(() => {
-    if (!classId) return [];
-    try {
-      const cacheKey = `deskly::cache::attendance_detail_${classId}`;
-      const cached = localStorage.getItem(cacheKey);
-      if (cached) {
-        const parsed = JSON.parse(cached);
-        if (Array.isArray(parsed) && parsed.length > 0) return parsed;
-      }
-    } catch {}
-    return [];
-  });
-  const [loading, setLoading] = useState(details.length === 0);
-  const [isRetrying, setIsRetrying] = useState(false);
-  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     if (!record && classId) {
@@ -148,37 +134,19 @@ export default function AttendanceDetailPage() {
     }
   }, [classId, record]);
 
-  async function load(isManualRetry = false) {
-    if (!classId || !record) return;
-    if (isManualRetry && !isOnline) return;
-
-    const hasCache = details.length > 0;
-    if (isManualRetry) {
-      setIsRetrying(true);
-    } else {
-      setLoading(!hasCache);
-    }
-
-    try {
-      const cacheKey = `deskly::cache::attendance_detail_${classId}`;
-      const res = await fetchWithTimeout(getAttendanceDetail(classId!, record!.slot), 15000);
-      if (res.success && res.data) {
-        setDetails(res.data);
-        localStorage.setItem(cacheKey, JSON.stringify(res.data));
-      } else {
-        if (!hasCache) setError(res.error ?? "Failed to load attendance details.");
-      }
-    } catch (e) {
-      if (!hasCache) setError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setLoading(false);
-      setIsRetrying(false);
-    }
-  }
+  const {
+    data: detailsData,
+    loading,
+    error,
+    retry: load,
+  } = useOfflineData<AttendanceDetailRecord[]>({
+    cacheKey: `deskly::cache::attendance_detail_${classId}`,
+    fetcher: () => getAttendanceDetail(classId!, record!.slot),
+    enabled: !!classId && !!record,
+  });
 
-  useEffect(() => {
-    load();
-  }, [classId, record]);
+  const details = detailsData || [];
+  const isRetrying = loading;
 
   if (loading && !record) {
     return <DetailSkeleton />;
@@ -299,7 +267,7 @@ export default function AttendanceDetailPage() {
               <p className="text-sm font-bold text-foreground leading-none">Session logs unavailable offline</p>
               <p className="text-xs text-muted-foreground">Connect to the internet to load detailed session logs for this class.</p>
               <button
-                onClick={() => load(true)}
+                onClick={() => load()}
                 disabled={isRetrying || loading || !isOnline}
                 className="mt-1 min-w-[144px] h-9 px-4 py-2 rounded-lg bg-primary/10 hover:bg-primary/15 text-primary text-xs font-bold transition-all border border-primary/20 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed font-saira inline-flex items-center justify-center text-center shrink-0"
               >
diff --git a/src/pages-mobile/dashboard/contact.tsx b/src/pages-mobile/dashboard/contact.tsx
index fa0f1a1..195af0f 100644
--- a/src/pages-mobile/dashboard/contact.tsx
+++ b/src/pages-mobile/dashboard/contact.tsx
@@ -1,8 +1,9 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { getContactInfo, ContactDetail } from "@/lib/features";
 import { openUrl } from "@tauri-apps/plugin-opener";
-import { isNetworkError, fetchWithTimeout } from "@/lib/utils";
+import { isNetworkError } from "@/lib/utils";
+import { useOfflineData } from "@/hooks/use-offline-data";
 import { ErrorDisplay } from "@/components/error-display";
 import { useOnlineStatus } from "@/hooks/use-online-status";
 import { OfflineDisplay } from "@/components/offline-display";
@@ -106,44 +107,13 @@ function ContactCard({ contact }: { contact: ContactDetail }) {
 export default function ContactPage() {
   const { loading: authLoading } = useAuth();
   const isOnline = useOnlineStatus();
-  const [contacts, setContacts] = useState<ContactDetail[] | null>(() => {
-    try {
-      const cached = localStorage.getItem("deskly::cache::contact");
-      if (cached) {
-        const parsed = JSON.parse(cached);
-        if (Array.isArray(parsed) && parsed.length > 0) return parsed;
-      }
-    } catch {}
-    return null;
+  const { data: rawData, loading, error, retry: fetchContacts } = useOfflineData<ContactDetail[]>({
+    cacheKey: "deskly::cache::contact",
+    fetcher: getContactInfo,
   });
-  const [loading, setLoading] = useState(!contacts);
-  const [error, setError] = useState<string | null>(null);
-  const [query, setQuery] = useState("");
+  const contacts = rawData || null;
 
-  const fetchContacts = async () => {
-    const hasCache = !!(contacts && contacts.length > 0);
-    setLoading(!hasCache);
-    setError(null);
-    try {
-      const res = await fetchWithTimeout(getContactInfo(), 15000);
-      if (res.success && res.data) {
-        setContacts(res.data);
-        localStorage.setItem("deskly::cache::contact", JSON.stringify(res.data));
-      } else {
-        if (!hasCache) {
-          setError(res.error ?? "Failed to load contact information.");
-        }
-      }
-    } catch (e) {
-      if (!hasCache) {
-        setError(e instanceof Error ? e.message : String(e));
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => { fetchContacts(); }, []);
+  const [query, setQuery] = useState("");
 
   const filtered = useMemo(() => {
     if (!contacts) return [];
@@ -158,11 +128,11 @@ export default function ContactPage() {
   }, [contacts, query]);
 
   const shell = (children: React.ReactNode) => <>{children}</>;
-  const showOffline = !contacts && (isOnline === false || isNetworkError(error, isOnline));
+  const showOffline = !rawData && !loading && (isOnline === false || isNetworkError(error, isOnline));
 
-  if (showOffline && !loading) return shell(<OfflineDisplay onRetry={fetchContacts} />);
-  if (authLoading || (loading && !contacts)) return shell(<ContactSkeleton />);
-  if (error && !contacts) {
+  if (showOffline) return shell(<OfflineDisplay onRetry={fetchContacts} />);
+  if (authLoading || (loading && !rawData)) return shell(<ContactSkeleton />);
+  if (error && !rawData) {
     return shell(
       <div className="flex h-full items-center justify-center font-saira">
         <ErrorDisplay title="Contacts Unavailable" message={error} onRetry={fetchContacts} />
diff --git a/src/pages-mobile/dashboard/courses.tsx b/src/pages-mobile/dashboard/courses.tsx
index f2e4822..f9f1d46 100644
--- a/src/pages-mobile/dashboard/courses.tsx
+++ b/src/pages-mobile/dashboard/courses.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { getTimetableCourses, TimetableCourse } from "@/lib/features";
 import { Separator } from "@/components/ui/separator";
@@ -8,7 +8,8 @@ import { ErrorDisplay } from "@/components/error-display";
 import { DrawerSelect } from "@/components/ui/drawer-select";
 import { useOnlineStatus } from "@/hooks/use-online-status";
 import { OfflineDisplay } from "@/components/offline-display";
-import { isNetworkError, fetchWithTimeout } from "@/lib/utils";
+import { isNetworkError } from "@/lib/utils";
+import { useOfflineData } from "@/hooks/use-offline-data";
 import courseImg from "@/assets/course.png";
 import {
   Layers,
@@ -264,18 +265,12 @@ export default function CoursesPage() {
   const { isLoggedIn, loading: authLoading } = useAuth();
   const isOnline = useOnlineStatus();
 
-  const [courses, setCourses] = useState<TimetableCourse[]>(() => {
-    try {
-      const cached = localStorage.getItem("deskly::cache::courses");
-      if (cached) {
-        const parsed = JSON.parse(cached) as TimetableCourse[];
-        if (Array.isArray(parsed) && parsed.length > 0) return parsed;
-      }
-    } catch {}
-    return [];
+  const { data: rawData, loading, error, retry: load } = useOfflineData<TimetableCourse[]>({
+    cacheKey: "deskly::cache::courses",
+    fetcher: getTimetableCourses,
+    enabled: isLoggedIn && !authLoading,
   });
-  const [loading, setLoading] = useState(courses.length === 0);
-  const [error, setError] = useState<string | null>(null);
+  const courses = rawData || [];
 
   const [selectedCourse, setSelectedCourse] = useState<TimetableCourse | null>(null);
   const [drawerOpen, setDrawerOpen] = useState(false);
@@ -283,35 +278,6 @@ export default function CoursesPage() {
   const [selectedTypeFilter, setSelectedTypeFilter] = useState("ALL");
   const [selectedCategoryFilter, setSelectedCategoryFilter] = useState("ALL");
 
-  async function load() {
-    try {
-      if (!isLoggedIn && !authLoading) return;
-      setError(null);
-      if (authLoading) return;
-      const hasCache = courses.length > 0;
-      setLoading(!hasCache);
-      const res = await fetchWithTimeout(getTimetableCourses(), 15000);
-      if (res.success && res.data) {
-        setCourses(res.data);
-        localStorage.setItem("deskly::cache::courses", JSON.stringify(res.data));
-      } else {
-        if (!hasCache) {
-          setError(res.error ?? "Failed to fetch registered courses.");
-        }
-      }
-    } catch (e) {
-      if (courses.length === 0) {
-        setError(e instanceof Error ? e.message : String(e));
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    if (isLoggedIn) load();
-  }, [isLoggedIn, authLoading]);
-
   const filterOptions = useMemo(() => {
     const types = new Set<string>();
     const categories = new Set<string>();
@@ -354,15 +320,15 @@ export default function CoursesPage() {
 
   const shell = (children: React.ReactNode) => <>{children}</>;
 
-  const showOffline = courses.length === 0 && (isOnline === false || isNetworkError(error, isOnline));
+  const showOffline = !rawData && !loading && (isOnline === false || isNetworkError(error, isOnline));
 
-  if (showOffline && !loading) {
+  if (showOffline) {
     return shell(<OfflineDisplay onRetry={load} />);
   }
 
-  if (authLoading || (loading && courses.length === 0)) return shell(<CoursesSkeleton />);
+  if (authLoading || (loading && !rawData)) return shell(<CoursesSkeleton />);
 
-  if (error && courses.length === 0) {
+  if (error && !rawData) {
     return shell(
       <div className="flex h-full items-center justify-center font-saira">
         <ErrorDisplay message={error} onRetry={load} />
diff --git a/src/pages-mobile/dashboard/curriculum/[categoryId].tsx b/src/pages-mobile/dashboard/curriculum/[categoryId].tsx
index 941dd35..6b000c9 100644
--- a/src/pages-mobile/dashboard/curriculum/[categoryId].tsx
+++ b/src/pages-mobile/dashboard/curriculum/[categoryId].tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { useParams } from "@/router";
 import { useAuth } from "@/hooks/useAuth";
 import { save } from "@tauri-apps/plugin-dialog";
@@ -15,6 +15,7 @@ import { Button } from "@/components/ui/button";
 import { useOnlineStatus } from "@/hooks/use-online-status";
 import { OfflineDisplay } from "@/components/offline-display";
 import { isNetworkError, fetchWithTimeout } from "@/lib/utils";
+import { useOfflineData } from "@/hooks/use-offline-data";
 import {
   BookOpen,
   Download,
@@ -64,75 +65,26 @@ function CoursesDetailSkeleton() {
 export default function CategoryCoursesPage() {
   const { isLoggedIn, loading: authLoading } = useAuth();
   const { categoryId } = useParams("/dashboard/curriculum/:categoryId");
-  const cacheKey = categoryId ? `deskly::cache::curriculum_courses_${categoryId}` : "";
 
-  const [courses, setCourses] = useState<CurriculumCourse[]>(() => {
-    if (!cacheKey) return [];
-    const cached = localStorage.getItem(cacheKey);
-    if (cached) {
-      try {
-        const parsed = JSON.parse(cached);
-        if (Array.isArray(parsed) && parsed.length > 0) return parsed;
-      } catch (e) {
-        console.error("Failed to parse cached curriculum courses", e);
-      }
-    }
-    return [];
+  const {
+    data: coursesData,
+    loading,
+    error,
+    retry: load,
+  } = useOfflineData<CurriculumCourse[]>({
+    cacheKey: categoryId ? `deskly::cache::curriculum_courses_${categoryId}` : "",
+    fetcher: () => getCurriculumCategoryCourses(categoryId!),
+    enabled: isLoggedIn && !authLoading && !!categoryId,
   });
-  const [loading, setLoading] = useState(courses.length === 0);
-  const [error, setError] = useState<string | null>(null);
-  const [query, setQuery] = useState("");
 
+  const courses = coursesData || [];
+
+  const [query, setQuery] = useState("");
   const [downloading, setDownloading] = useState<Record<string, boolean>>({});
   const [downloadResult, setDownloadResult] = useState<Record<string, { success: boolean; message: string } | null>>({});
 
   const isAnyDownloading = useMemo(() => Object.values(downloading).some(Boolean), [downloading]);
 
-  async function load() {
-    if (!categoryId) return;
-    try {
-      if (!isLoggedIn && !authLoading) return;
-      setError(null);
-      if (authLoading) return;
-      const hasCache = courses.length > 0;
-      setLoading(!hasCache);
-      const res = await fetchWithTimeout(getCurriculumCategoryCourses(categoryId), 15000);
-      if (res.success && res.data) {
-        setCourses(res.data);
-        if (cacheKey) {
-          localStorage.setItem(cacheKey, JSON.stringify(res.data));
-        }
-      } else {
-        if (!hasCache) {
-          setError(res.error ?? "Failed to fetch courses for this category.");
-        }
-      }
-    } catch (e) {
-      if (courses.length === 0) {
-        setError(e instanceof Error ? e.message : String(e));
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    if (cacheKey) {
-      const cached = localStorage.getItem(cacheKey);
-      if (cached) {
-        try {
-          const parsed = JSON.parse(cached);
-          if (Array.isArray(parsed) && parsed.length > 0) {
-            setCourses(parsed);
-          }
-        } catch (e) {
-          console.error("Failed to parse cached curriculum courses", e);
-        }
-      }
-    }
-    if (isLoggedIn && categoryId) load();
-  }, [isLoggedIn, authLoading, categoryId]);
-
   const filtered = useMemo(() => {
     if (!query.trim()) return courses;
     const q = query.toLowerCase();
diff --git a/src/pages-mobile/dashboard/curriculum/index.tsx b/src/pages-mobile/dashboard/curriculum/index.tsx
index 0ba27ba..c78f0c0 100644
--- a/src/pages-mobile/dashboard/curriculum/index.tsx
+++ b/src/pages-mobile/dashboard/curriculum/index.tsx
@@ -1,4 +1,3 @@
-import { useState, useEffect } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { useNavigate } from "@/router";
 import { getCurriculumCategories, CurriculumCategory } from "@/lib/features";
@@ -8,7 +7,8 @@ import { ScrollText, ChevronRight } from "lucide-react";
 import curriculumImg from "@/assets/curriculum.png";
 import { useOnlineStatus } from "@/hooks/use-online-status";
 import { OfflineDisplay } from "@/components/offline-display";
-import { isNetworkError, fetchWithTimeout } from "@/lib/utils";
+import { isNetworkError } from "@/lib/utils";
+import { useOfflineData } from "@/hooks/use-offline-data";
 
 // ─── Skeleton ─────────────────────────────────────────────────────────────────
 
@@ -45,47 +45,18 @@ export default function CurriculumIndexPage() {
   const { isLoggedIn, loading: authLoading } = useAuth();
   const navigate = useNavigate();
 
-  const [categories, setCategories] = useState<CurriculumCategory[]>(() => {
-    try {
-      const cached = localStorage.getItem("deskly::cache::curriculum::categories");
-      if (cached) {
-        const parsed = JSON.parse(cached) as CurriculumCategory[];
-        if (Array.isArray(parsed) && parsed.length > 0) return parsed;
-      }
-    } catch {}
-    return [];
+  const {
+    data,
+    loading,
+    error,
+    retry: load,
+  } = useOfflineData<CurriculumCategory[]>({
+    cacheKey: "deskly::cache::curriculum::categories",
+    fetcher: getCurriculumCategories,
+    enabled: isLoggedIn && !authLoading,
   });
-  const [loading, setLoading] = useState(categories.length === 0);
-  const [error, setError] = useState<string | null>(null);
 
-  async function load() {
-    try {
-      if (!isLoggedIn && !authLoading) return;
-      setError(null);
-      if (authLoading) return;
-      const hasCache = categories.length > 0;
-      setLoading(!hasCache);
-      const res = await fetchWithTimeout(getCurriculumCategories(), 15000);
-      if (res.success && res.data) {
-        setCategories(res.data);
-        localStorage.setItem("deskly::cache::curriculum::categories", JSON.stringify(res.data));
-      } else {
-        if (!hasCache) {
-          setError(res.error ?? "Failed to fetch curriculum categories.");
-        }
-      }
-    } catch (e) {
-      if (categories.length === 0) {
-        setError(e instanceof Error ? e.message : String(e));
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    if (isLoggedIn) load();
-  }, [isLoggedIn, authLoading]);
+  const categories = data || [];
 
   const isOnline = useOnlineStatus();
   const shell = (children: React.ReactNode) => <>{children}</>;
diff --git a/src/pages-mobile/dashboard/exams.tsx b/src/pages-mobile/dashboard/exams.tsx
index c3f8a91..962df86 100644
--- a/src/pages-mobile/dashboard/exams.tsx
+++ b/src/pages-mobile/dashboard/exams.tsx
@@ -1,11 +1,12 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { invoke } from "@tauri-apps/api/core";
 
 import { ErrorDisplay } from "@/components/error-display";
 import { useOnlineStatus } from "@/hooks/use-online-status";
 import { OfflineDisplay } from "@/components/offline-display";
-import { isNetworkError, fetchWithTimeout } from "@/lib/utils";
+import { isNetworkError } from "@/lib/utils";
+import { useOfflineData } from "@/hooks/use-offline-data";
 import { Separator } from "@/components/ui/separator";
 import {
   Clock,
@@ -49,6 +50,7 @@ interface ExamScheduleResponse {
   success: boolean;
   data?: ExamScheduleGroup[];
   error?: string;
+  [key: string]: unknown;
 }
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -144,75 +146,31 @@ export default function ExamSchedulePage() {
   const { isLoggedIn, loading: authLoading } = useAuth();
   const isOnline = useOnlineStatus();
 
-  const initialExams = useMemo(() => {
-    try {
-      const cached = localStorage.getItem("deskly::cache::exams");
-      if (cached) {
-        const parsed = JSON.parse(cached) as ExamScheduleGroup[];
-        if (Array.isArray(parsed) && parsed.length > 0) return parsed;
-      }
-    } catch {}
-    return [];
-  }, []);
-
-  const [groups, setGroups] = useState<ExamScheduleGroup[]>(initialExams);
-  const [selectedTab, setSelectedTab] = useState<string>(initialExams[0]?.examType ?? "");
-  const [loading, setLoading] = useState(initialExams.length === 0);
-  const [error, setError] = useState<string | null>(null);
+  const {
+    data: groupsData,
+    loading,
+    error,
+    retry: load,
+  } = useOfflineData<ExamScheduleGroup[]>({
+    cacheKey: "deskly::cache::exams",
+    fetcher: () => invoke<ExamScheduleResponse>("exam_schedule_get", { semesterSubId: null }),
+    enabled: isLoggedIn && !authLoading,
+    transform: (data) => data,
+  });
+
+  const groups = groupsData || [];
+  const [selectedTab, setSelectedTab] = useState<string>(groups[0]?.examType ?? "");
   const [selectedExam, setSelectedExam] = useState<ExamScheduleEntry | null>(null);
 
-  // Load fresh from backend
-  async function load() {
-    try {
-      if (!isLoggedIn && !authLoading) return;
-      setError(null);
-      if (authLoading) return;
-
-      const hasCache = groups.length > 0;
-      setLoading(!hasCache);
-
-      const res = await fetchWithTimeout(invoke<ExamScheduleResponse>("exam_schedule_get", { semesterSubId: null }), 15000);
-      if (res.success && res.data) {
-        setGroups(res.data);
-        localStorage.setItem("deskly::cache::exams", JSON.stringify(res.data));
-        if (res.data.length > 0) {
-          const tabNames = res.data.map(g => g.examType);
-          if (!selectedTab || !tabNames.includes(selectedTab)) {
-            setSelectedTab(res.data[0].examType);
-          }
-        } else {
-          setGroups([]);
-          localStorage.removeItem("deskly::cache::exams");
-        }
-      } else {
-        const errMsg = res.error ?? "Failed to fetch exam schedule.";
-        if (errMsg.includes("Could not find exam schedule table")) {
-          setGroups([]);
-          localStorage.removeItem("deskly::cache::exams");
-          setError("Could not find exam schedule table");
-        } else {
-          if (!hasCache) setError(errMsg);
-        }
-      }
-    } catch (e) {
-      const errMsg = e instanceof Error ? e.message : String(e);
-      if (errMsg.includes("Could not find exam schedule table")) {
-        setGroups([]);
-        localStorage.removeItem("deskly::cache::exams");
-        setError("Could not find exam schedule table");
-      } else {
-        if (groups.length === 0) setError(errMsg);
+  // Update selected tab if groups change and current tab is not in new groups
+  useMemo(() => {
+    if (groups.length > 0) {
+      const tabNames = groups.map(g => g.examType);
+      if (!selectedTab || !tabNames.includes(selectedTab)) {
+        setSelectedTab(groups[0].examType);
       }
-    } finally {
-      setLoading(false);
     }
-  }
-
-  useEffect(() => {
-    if (isLoggedIn) {
-      load();
-    }
-  }, [isLoggedIn, authLoading]);
+  }, [groups, selectedTab]);
 
   // Select active schedules matching the current tab selection
   const activeSchedules = useMemo(() => {
diff --git a/src/pages-mobile/dashboard/grades.tsx b/src/pages-mobile/dashboard/grades.tsx
index 4f5f20f..a97170e 100644
--- a/src/pages-mobile/dashboard/grades.tsx
+++ b/src/pages-mobile/dashboard/grades.tsx
@@ -12,7 +12,8 @@ import { Separator } from "@/components/ui/separator";
 import { Input } from "@/components/ui/input";
 import { useOnlineStatus } from "@/hooks/use-online-status";
 import { OfflineDisplay } from "@/components/offline-display";
-import { isNetworkError, fetchWithTimeout } from "@/lib/utils";
+import { isNetworkError } from "@/lib/utils";
+import { useOfflineData } from "@/hooks/use-offline-data";
 import { DrawerSelect } from "@/components/ui/drawer-select";
 import { Drawer, DrawerContent } from "@/components/ui/drawer";
 import gradeHistoryImg from "@/assets/grade-history.png";
@@ -249,100 +250,52 @@ export default function GradesPage() {
   const [activeTab, setActiveTab] = useState<"semester" | "history">("semester");
 
   // Semesters list state
-  const [semesters, setSemesters] = useState<SemesterOption[]>([]);
   const [selectedSemId, setSelectedSemId] = useState<string>("");
 
   // Semester Grade View State
-  const initialSemGrade = useMemo(() => {
-    try {
-      const cached = localStorage.getItem("deskly::cache::sem_grades");
-      return cached ? JSON.parse(cached) : null;
-    } catch { return null; }
-  }, []);
-
-  const [semGradeData, setSemGradeData] = useState<SemesterGradeViewData | null>(initialSemGrade);
-  const [semLoading, setSemLoading] = useState(!initialSemGrade);
-  const [semError, setSemError] = useState<string | null>(null);
+  const {
+    data: semGradeData,
+    loading: semLoading,
+    error: semErrorRaw,
+    retry: loadSemesterGrade
+  } = useOfflineData<SemesterGradeViewData>({
+    cacheKey: "deskly::cache::sem_grades",
+    fetcher: () => getStudentGradeView(selectedSemId || undefined),
+    enabled: isLoggedIn && !authLoading,
+  });
+
   const [selectedSemGrade, setSelectedSemGrade] = useState<SemesterGradeEntry | null>(null);
 
+  // Semesters list state
+  const [semesters, setSemesters] = useState<SemesterOption[]>([]);
+  useEffect(() => {
+    if (semGradeData?.semesters && semGradeData.semesters.length > 0) {
+      setSemesters(semGradeData.semesters);
+    }
+    if (semGradeData?.semesterSubId && !selectedSemId) {
+      setSelectedSemId(semGradeData.semesterSubId);
+    }
+  }, [semGradeData, selectedSemId]);
+
+  const semError = semErrorRaw;
+
   // Grade History State
-  const initialHistory = useMemo(() => {
-    try {
-      const cached = localStorage.getItem("deskly::cache::grade_history");
-      return cached ? JSON.parse(cached) : null;
-    } catch { return null; }
-  }, []);
-
-  const [historyData, setHistoryData] = useState<StudentHistoryData | null>(initialHistory);
-  const [historyLoading, setHistoryLoading] = useState(!initialHistory);
-  const [historyError, setHistoryError] = useState<string | null>(null);
+  const {
+    data: historyData,
+    loading: historyLoading,
+    error: historyError,
+    retry: loadHistory
+  } = useOfflineData<StudentHistoryData>({
+    cacheKey: "deskly::cache::grade_history",
+    fetcher: () => getGradesHistory(),
+    enabled: isLoggedIn && !authLoading,
+  });
+
   const [selectedHistoryGrade, setSelectedHistoryGrade] = useState<StudentHistoryData["grades"][number] | null>(null);
 
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedGradeFilter, setSelectedGradeFilter] = useState("ALL");
 
-  // Load Semester Grade View
-  async function loadSemesterGrade(semId?: string) {
-    const hasCache = !!(semGradeData && semGradeData.grades && semGradeData.grades.length > 0);
-    setSemLoading(!hasCache);
-    setSemError(null);
-    try {
-      const targetSem = semId !== undefined ? semId : selectedSemId;
-      const res = await fetchWithTimeout(getStudentGradeView(targetSem || undefined), 15000);
-      if (res.success && res.data) {
-        setSemGradeData(res.data);
-        localStorage.setItem("deskly::cache::sem_grades", JSON.stringify(res.data));
-        if (res.data.semesters && res.data.semesters.length > 0) {
-          setSemesters(res.data.semesters);
-        }
-        if (res.data.semesterSubId) {
-          setSelectedSemId(res.data.semesterSubId);
-        }
-      } else {
-        if (!hasCache) {
-          setSemError(res.error ?? "Failed to fetch semester grades.");
-        }
-      }
-    } catch (e) {
-      if (!hasCache) {
-        setSemError(e instanceof Error ? e.message : String(e));
-      }
-    } finally {
-      setSemLoading(false);
-    }
-  }
-
-  // Load Grade History
-  async function loadHistory() {
-    const hasCache = !!(historyData && historyData.grades && historyData.grades.length > 0);
-    setHistoryLoading(!hasCache);
-    setHistoryError(null);
-    try {
-      const res = await fetchWithTimeout(getGradesHistory(), 15000);
-      if (res.success && res.data) {
-        setHistoryData(res.data);
-        localStorage.setItem("deskly::cache::grade_history", JSON.stringify(res.data));
-      } else {
-        if (!hasCache) {
-          setHistoryError(res.error ?? "Failed to fetch grade history.");
-        }
-      }
-    } catch (e) {
-      if (!hasCache) {
-        setHistoryError(e instanceof Error ? e.message : String(e));
-      }
-    } finally {
-      setHistoryLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    if (isLoggedIn) {
-      loadSemesterGrade();
-      loadHistory();
-    }
-  }, [isLoggedIn]);
-
   // Grade History Metrics
   const totalSubjects = useMemo(() => historyData?.grades?.length ?? 0, [historyData]);
   const totalCredits = useMemo(() => historyData?.cgpa?.creditsEarned ?? 0, [historyData]);
diff --git a/src/pages-mobile/dashboard/hod-dean.tsx b/src/pages-mobile/dashboard/hod-dean.tsx
index c658ad6..5462ef2 100644
--- a/src/pages-mobile/dashboard/hod-dean.tsx
+++ b/src/pages-mobile/dashboard/hod-dean.tsx
@@ -1,7 +1,8 @@
-import { useState, useEffect } from "react";
+import React from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { getHodDeanDetails, HodDeanDetail } from "@/lib/features";
-import { isNetworkError, fetchWithTimeout } from "@/lib/utils";
+import { isNetworkError } from "@/lib/utils";
+import { useOfflineData } from "@/hooks/use-offline-data";
 import { ErrorDisplay } from "@/components/error-display";
 import { useOnlineStatus } from "@/hooks/use-online-status";
 import { OfflineDisplay } from "@/components/offline-display";
@@ -67,51 +68,18 @@ function ProfileRow({
 export default function HodDeanDetailsPage() {
   const { loading: authLoading } = useAuth();
   const isOnline = useOnlineStatus();
-  const [details, setDetails] = useState<HodDeanDetail[] | null>(() => {
-    try {
-      const cached = localStorage.getItem("deskly::cache::hod_dean");
-      if (cached) {
-        const parsed = JSON.parse(cached);
-        if (Array.isArray(parsed) && parsed.length > 0) return parsed;
-      }
-    } catch {}
-    return null;
+  const { data: rawData, loading, error, retry: fetchDetails } = useOfflineData<HodDeanDetail[]>({
+    cacheKey: "deskly::cache::hod_dean",
+    fetcher: getHodDeanDetails,
   });
-  const [loading, setLoading] = useState(!details);
-  const [error, setError] = useState<string | null>(null);
-
-  async function fetchDetails() {
-    try {
-      const hasCache = !!(details && details.length > 0);
-      setLoading(!hasCache);
-      const res = await fetchWithTimeout(getHodDeanDetails(), 15000);
-      if (res.success && res.data) {
-        setDetails(res.data);
-        localStorage.setItem("deskly::cache::hod_dean", JSON.stringify(res.data));
-      } else {
-        if (!hasCache) {
-          setError(res.error ?? "Failed to fetch HOD and Dean details.");
-        }
-      }
-    } catch (err) {
-      if (!details || details.length === 0) {
-        setError(err instanceof Error ? err.message : String(err));
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    fetchDetails();
-  }, []);
+  const details = rawData || null;
 
   const shell = (children: React.ReactNode) => <>{children}</>;
-  const showOffline = !details && (isOnline === false || isNetworkError(error, isOnline));
+  const showOffline = !rawData && !loading && (isOnline === false || isNetworkError(error, isOnline));
 
-  if (showOffline && !loading) return shell(<OfflineDisplay onRetry={fetchDetails} />);
-  if (authLoading || (loading && !details)) return shell(<HodDeanSkeleton />);
-  if (error && !details) {
+  if (showOffline) return shell(<OfflineDisplay onRetry={fetchDetails} />);
+  if (authLoading || (loading && !rawData)) return shell(<HodDeanSkeleton />);
+  if (error && !rawData) {
     return shell(
       <div className="flex h-full items-center justify-center">
         <ErrorDisplay message={error} onRetry={fetchDetails} />
diff --git a/src/pages-mobile/dashboard/index.tsx b/src/pages-mobile/dashboard/index.tsx
index 656a3da..672baf2 100644
--- a/src/pages-mobile/dashboard/index.tsx
+++ b/src/pages-mobile/dashboard/index.tsx
@@ -13,7 +13,8 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { useOnlineStatus } from "@/hooks/use-online-status";
 import { OfflineDisplay } from "@/components/offline-display";
-import { isNetworkError, fetchWithTimeout } from "@/lib/utils";
+import { isNetworkError } from "@/lib/utils";
+import { useOfflineData } from "@/hooks/use-offline-data";
 import dashboardImg from "@/assets/dashboard.png";
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -317,114 +318,79 @@ export default function MobileDashboardHome() {
   const { isLoggedIn, loading: authLoading } = useAuth();
   const isOnline = useOnlineStatus();
 
-  const cachedDashboard = useMemo(() => {
-    try {
-      const cached = localStorage.getItem("deskly::cache::dashboard");
-      return cached ? JSON.parse(cached) : null;
-    } catch {
-      return null;
-    }
-  }, []);
-
-  const [profile, setProfile] = useState<ProfileData | null>(cachedDashboard?.profile ?? null);
-  const [cgpaData, setCgpaData] = useState<CgpaData | null>(cachedDashboard?.cgpaData ?? null);
-  const [feedbackData, setFeedbackData] = useState<FeedbackStatus[] | null>(cachedDashboard?.feedbackData ?? null);
-  const [gpaTrend, setGpaTrend] = useState<GpaTrendPoint[]>(cachedDashboard?.gpaTrend ?? []);
-  const [loading, setLoading] = useState(!cachedDashboard?.cgpaData && !cachedDashboard?.feedbackData);
-  const [error, setError] = useState<string | null>(null);
-
-  async function loadData() {
-    if (authLoading || !isLoggedIn) return;
-    setError(null);
-
-    const hasCache = !!(cgpaData || feedbackData || profile);
+  type DashboardData = {
+    cgpaData: CgpaData | null;
+    feedbackData: FeedbackStatus[] | null;
+    profile: ProfileData | null;
+    gpaTrend: GpaTrendPoint[];
+  };
 
+  const fetchDashboardData = async (): Promise<{ success: boolean; data?: DashboardData; error?: string }> => {
     try {
-      const [cgpaRes, feedbackRes, profileRes] = await Promise.all([
-        fetchWithTimeout(getCgpaPage(), 15000),
-        fetchWithTimeout(getFeedbackStatus(), 15000),
-        fetchWithTimeout(getStudentProfile().catch(() => null), 15000),
+      const [cgpaRes, feedbackRes, profileRes, gradeRes] = await Promise.all([
+        getCgpaPage(),
+        getFeedbackStatus(),
+        getStudentProfile().catch(() => null),
+        getStudentGradeView().catch(() => null),
       ]);
 
-      let updatedCgpa = cgpaData;
-      let updatedFeedback = feedbackData;
-      let updatedProfile = profile;
-      let updatedGpaTrend = gpaTrend;
-
-      if (cgpaRes.success && cgpaRes.cgpaData) {
-        setCgpaData(cgpaRes.cgpaData);
-        updatedCgpa = cgpaRes.cgpaData;
-      } else if (cgpaRes.error && !hasCache) {
-        setError(cgpaRes.error);
-      }
-
-      if (feedbackRes.success && feedbackRes.data) {
-        setFeedbackData(feedbackRes.data);
-        updatedFeedback = feedbackRes.data;
-      } else if (feedbackRes.error && !hasCache) {
-        setError(feedbackRes.error);
+      let gpaTrend: GpaTrendPoint[] = [];
+      if (gradeRes?.success && gradeRes.data) {
+        const semesters = gradeRes.data.semesters || [];
+        if (semesters.length > 0) {
+          const semResults = await Promise.all(
+            semesters.map(async (sem) => {
+              if (sem.id === gradeRes.data?.semesterSubId) {
+                return { id: sem.id, name: sem.name, gpa: gradeRes.data.gpa ?? null };
+              }
+              const res = await getStudentGradeView(sem.id).catch(() => null);
+              return {
+                id: sem.id,
+                name: sem.name,
+                gpa: res?.success && res.data?.gpa !== undefined ? res.data.gpa : null,
+              };
+            })
+          );
+          gpaTrend = semResults
+            .filter((r): r is { id: string; name: string; gpa: number } => r.gpa !== null && r.gpa !== undefined)
+            .reverse();
+        }
       }
 
-      if (profileRes?.success && profileRes.data) {
-        setProfile(profileRes.data);
-        updatedProfile = profileRes.data;
+      // Check if critical fetches failed
+      if (!cgpaRes.success && !feedbackRes.success) {
+        return { success: false, error: cgpaRes.error || feedbackRes.error };
       }
 
-      // Fetch GPA trend in parallel for all semesters
-      try {
-        const initialGradeRes = await fetchWithTimeout(getStudentGradeView().catch(() => null), 15000);
-        if (initialGradeRes?.success && initialGradeRes.data) {
-          const semesters = initialGradeRes.data.semesters || [];
-          if (semesters.length > 0) {
-            const semResults = await Promise.all(
-              semesters.map(async (sem) => {
-                if (sem.id === initialGradeRes.data?.semesterSubId) {
-                  return { id: sem.id, name: sem.name, gpa: initialGradeRes.data.gpa ?? null };
-                }
-                const res = await fetchWithTimeout(getStudentGradeView(sem.id).catch(() => null), 15000);
-                return {
-                  id: sem.id,
-                  name: sem.name,
-                  gpa: res?.success && res.data?.gpa !== undefined ? res.data.gpa : null,
-                };
-              })
-            );
-
-            const validPoints = semResults
-              .filter((r): r is { id: string; name: string; gpa: number } => r.gpa !== null && r.gpa !== undefined)
-              .reverse();
-
-            if (validPoints.length > 0) {
-              setGpaTrend(validPoints);
-              updatedGpaTrend = validPoints;
-            }
-          }
+      return {
+        success: true,
+        data: {
+          cgpaData: cgpaRes.success ? cgpaRes.cgpaData || null : null,
+          feedbackData: feedbackRes.success ? feedbackRes.data || null : null,
+          profile: profileRes?.success ? profileRes.data || null : null,
+          gpaTrend,
         }
-      } catch (e) {
-        console.error("Failed to fetch GPA trend points", e);
-      }
-
-      localStorage.setItem(
-        "deskly::cache::dashboard",
-        JSON.stringify({
-          cgpaData: updatedCgpa,
-          feedbackData: updatedFeedback,
-          profile: updatedProfile,
-          gpaTrend: updatedGpaTrend,
-        })
-      );
+      };
     } catch (e) {
-      if (!hasCache) {
-        setError(e instanceof Error ? e.message : String(e));
-      }
-    } finally {
-      setLoading(false);
+      return { success: false, error: String(e) };
     }
-  }
+  };
+
+  const {
+    data,
+    loading,
+    error,
+    retry: loadData,
+  } = useOfflineData<DashboardData>({
+    cacheKey: "deskly::cache::dashboard",
+    fetcher: fetchDashboardData,
+    enabled: isLoggedIn && !authLoading,
+  });
 
-  useEffect(() => {
-    if (isLoggedIn) loadData();
-  }, [isLoggedIn, authLoading]);
+  const profile = data?.profile ?? null;
+  const cgpaData = data?.cgpaData ?? null;
+  const feedbackData = data?.feedbackData ?? null;
+  const gpaTrend = data?.gpaTrend ?? [];
 
   const studentName = formatStudentName(profile?.student?.name);
 
diff --git a/src/pages-mobile/dashboard/marks.tsx b/src/pages-mobile/dashboard/marks.tsx
index 15b505c..e32957b 100644
--- a/src/pages-mobile/dashboard/marks.tsx
+++ b/src/pages-mobile/dashboard/marks.tsx
@@ -7,7 +7,8 @@ import { Target, BookOpen } from "lucide-react";
 import { useOnlineStatus } from "@/hooks/use-online-status";
 import { OfflineDisplay } from "@/components/offline-display";
 import { ErrorDisplay } from "@/components/error-display";
-import { isNetworkError, fetchWithTimeout } from "@/lib/utils";
+import { isNetworkError } from "@/lib/utils";
+import { useOfflineData } from "@/hooks/use-offline-data";
 
 function Sk({ className = "" }: { className?: string }) {
   return <div className={`animate-pulse rounded-lg bg-muted/65 ${className}`} />;
@@ -51,18 +52,13 @@ export default function MarksPage() {
   const isOnline = useOnlineStatus();
   const location = useLocation();
 
-  const [data, setData] = useState<StudentMarkEntry[]>(() => {
-    try {
-      const cached = localStorage.getItem("deskly::cache::marks");
-      if (cached) {
-        const parsed = JSON.parse(cached);
-        if (Array.isArray(parsed) && parsed.length > 0) return parsed;
-      }
-    } catch {}
-    return [];
+  const { data: rawData, loading, error, retry: load } = useOfflineData<StudentMarkEntry[]>({
+    cacheKey: "deskly::cache::marks",
+    fetcher: getMarks,
+    enabled: isLoggedIn && !authLoading,
   });
-  const [loading, setLoading] = useState(data.length === 0);
-  const [error, setError] = useState<string | null>(null);
+  const data = rawData || [];
+  
   const [selectedCourseCode, setSelectedCourseCode] = useState<string>(() => data[0]?.courseCode ?? "");
   const [toggledAssessments, setToggledAssessments] = useState<Record<string, boolean>>({});
 
@@ -74,38 +70,10 @@ export default function MarksPage() {
       if (match) {
         setSelectedCourseCode(match.courseCode);
       }
+    } else if (data.length > 0 && !selectedCourseCode) {
+      setSelectedCourseCode(data[0].courseCode);
     }
-  }, [data, location.state]);
-
-  async function load() {
-    try {
-      if (!isLoggedIn && !authLoading) return;
-      setError(null);
-      if (authLoading) return;
-      const hasCache = data.length > 0;
-      setLoading(!hasCache);
-      const res = await fetchWithTimeout(getMarks(), 15000);
-      if (res.success && res.data) {
-        setData(res.data);
-        localStorage.setItem("deskly::cache::marks", JSON.stringify(res.data));
-        if (res.data.length > 0) setSelectedCourseCode(res.data[0].courseCode);
-      } else {
-        if (!hasCache) {
-          setError(res.error ?? "Failed to fetch marks view.");
-        }
-      }
-    } catch (e) {
-      if (data.length === 0) {
-        setError(e instanceof Error ? e.message : String(e));
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    if (isLoggedIn) load();
-  }, [isLoggedIn, authLoading]);
+  }, [data, location.state, selectedCourseCode]);
 
   const filteredCourses = useMemo(() => data, [data]);
 
@@ -117,15 +85,15 @@ export default function MarksPage() {
 
   const shell = (children: React.ReactNode) => <>{children}</>;
 
-  const showOffline = data.length === 0 && (isOnline === false || isNetworkError(error, isOnline));
+  const showOffline = !rawData && !loading && (isOnline === false || isNetworkError(error, isOnline));
 
-  if (showOffline && !loading) {
+  if (showOffline) {
     return shell(<OfflineDisplay onRetry={load} />);
   }
 
-  if (authLoading || (loading && data.length === 0)) return shell(<MarksSkeleton />);
+  if (authLoading || (loading && !rawData)) return shell(<MarksSkeleton />);
 
-  if (error && data.length === 0) {
+  if (error && !rawData) {
     return shell(
       <div className="flex h-full items-center justify-center font-saira">
         <ErrorDisplay message={error} onRetry={load} />
diff --git a/src/pages-mobile/dashboard/payment-receipts.tsx b/src/pages-mobile/dashboard/payment-receipts.tsx
index 16148c6..2a7787b 100644
--- a/src/pages-mobile/dashboard/payment-receipts.tsx
+++ b/src/pages-mobile/dashboard/payment-receipts.tsx
@@ -1,10 +1,11 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { getPaymentReceipts, Receipt } from "@/lib/features";
 import { ErrorDisplay } from "@/components/error-display";
 import { useOnlineStatus } from "@/hooks/use-online-status";
 import { OfflineDisplay } from "@/components/offline-display";
-import { isNetworkError, fetchWithTimeout } from "@/lib/utils";
+import { isNetworkError } from "@/lib/utils";
+import { useOfflineData } from "@/hooks/use-offline-data";
 import paymentImg from "@/assets/payment.png";
 import { Drawer, DrawerContent } from "@/components/ui/drawer";
 import { Separator } from "@/components/ui/separator";
@@ -168,48 +169,14 @@ function ReceiptDrawer({
 export default function PaymentReceiptsPage() {
   const { loading: authLoading } = useAuth();
   const isOnline = useOnlineStatus();
-  const [receipts, setReceipts] = useState<Receipt[]>(() => {
-    try {
-      const cached = localStorage.getItem("deskly::cache::payment_receipts");
-      if (cached) {
-        const parsed = JSON.parse(cached);
-        if (Array.isArray(parsed) && parsed.length > 0) return parsed;
-      }
-    } catch {}
-    return [];
+  const { data: rawData, loading, error, retry: load } = useOfflineData<Receipt[]>({
+    cacheKey: "deskly::cache::payment_receipts",
+    fetcher: getPaymentReceipts,
+    transform: (data) => data.filter((r) => r.receiptNumber.trim().toUpperCase() !== "RECEIPT NUMBER"),
   });
-  const [loading, setLoading] = useState(receipts.length === 0);
-  const [error, setError] = useState<string | null>(null);
-  const [selectedReceipt, setSelectedReceipt] = useState<Receipt | null>(null);
+  const receipts = rawData || [];
 
-  async function load() {
-    try {
-      const hasCache = receipts.length > 0;
-      setLoading(!hasCache);
-      const res = await fetchWithTimeout(getPaymentReceipts(), 15000);
-      if (res.success && res.data) {
-        const cleanList = res.data.filter(
-          (r) => r.receiptNumber.trim().toUpperCase() !== "RECEIPT NUMBER"
-        );
-        setReceipts(cleanList);
-        localStorage.setItem("deskly::cache::payment_receipts", JSON.stringify(cleanList));
-      } else {
-        if (!hasCache) {
-          setError(res.error ?? "Failed to fetch payment receipts.");
-        }
-      }
-    } catch (err) {
-      if (receipts.length === 0) {
-        setError(err instanceof Error ? err.message : String(err));
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    load();
-  }, []);
+  const [selectedReceipt, setSelectedReceipt] = useState<Receipt | null>(null);
 
   const filteredReceipts = useMemo(() => receipts, [receipts]);
 
@@ -244,17 +211,17 @@ export default function PaymentReceiptsPage() {
   }, [receipts]);
 
   const shell = (children: React.ReactNode) => <>{children}</>;
-  const showOffline = receipts.length === 0 && (isOnline === false || isNetworkError(error, isOnline));
+  const showOffline = !rawData && !loading && (isOnline === false || isNetworkError(error, isOnline));
 
-  if (showOffline && !loading) {
+  if (showOffline) {
     return shell(<OfflineDisplay onRetry={load} />);
   }
 
-  if (authLoading || (loading && receipts.length === 0)) {
+  if (authLoading || (loading && !rawData)) {
     return shell(<PaymentReceiptsSkeleton />);
   }
 
-  if (error && receipts.length === 0) {
+  if (error && !rawData) {
     return shell(
       <div className="flex h-full items-center justify-center font-saira">
         <ErrorDisplay message={error} onRetry={load} />
diff --git a/src/pages-mobile/dashboard/profile.tsx b/src/pages-mobile/dashboard/profile.tsx
index 8a6d7fb..8516e46 100644
--- a/src/pages-mobile/dashboard/profile.tsx
+++ b/src/pages-mobile/dashboard/profile.tsx
@@ -1,9 +1,10 @@
-import { useState, useEffect } from "react";
+import React from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { getStudentProfile, ProfileData } from "@/lib/features";
 import { useOnlineStatus } from "@/hooks/use-online-status";
 import { OfflineDisplay } from "@/components/offline-display";
-import { isNetworkError, fetchWithTimeout } from "@/lib/utils";
+import { isNetworkError } from "@/lib/utils";
+import { useOfflineData } from "@/hooks/use-offline-data";
 import { ErrorDisplay } from "@/components/error-display";
 import profileImg from "@/assets/profile.png";
 import {
@@ -77,46 +78,12 @@ function ProfileRow({
 export default function StudentProfilePage() {
   const { loading: authLoading } = useAuth();
   const isOnline = useOnlineStatus();
-  const [profile, setProfile] = useState<ProfileData | null>(() => {
-    const cached = localStorage.getItem("deskly::cache::profile");
-    if (cached) {
-      try {
-        const parsed = JSON.parse(cached);
-        if (parsed && parsed.student && parsed.student.name) return parsed;
-      } catch (e) {
-        console.error("Failed to parse cached profile", e);
-      }
-    }
-    return null;
+  const { data: profile, loading, error, retry: fetchProfile } = useOfflineData<ProfileData>({
+    cacheKey: "deskly::cache::profile",
+    fetcher: getStudentProfile,
+    enabled: isOnline,
+    isEmpty: (val) => !val || !val.student || !val.student.name,
   });
-  const [loading, setLoading] = useState(!profile);
-  const [error, setError] = useState<string | null>(null);
-
-  async function fetchProfile() {
-    const hasCache = !!profile;
-    setLoading(!hasCache);
-    try {
-      const res = await fetchWithTimeout(getStudentProfile(), 15000);
-      if (res.success && res.data) {
-        setProfile(res.data);
-        localStorage.setItem("deskly::cache::profile", JSON.stringify(res.data));
-      } else {
-        if (!hasCache) {
-          setError(res.error ?? "Failed to fetch student profile.");
-        }
-      }
-    } catch (err) {
-      if (!hasCache) {
-        setError(err instanceof Error ? err.message : String(err));
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    if (isOnline) fetchProfile();
-  }, [isOnline]);
 
   const shell = (children: React.ReactNode) => <>{children}</>;
   const showOffline = !profile && (isOnline === false || isNetworkError(error, isOnline));
diff --git a/src/pages-mobile/dashboard/timetable.tsx b/src/pages-mobile/dashboard/timetable.tsx
index cebd9de..a07a8c4 100644
--- a/src/pages-mobile/dashboard/timetable.tsx
+++ b/src/pages-mobile/dashboard/timetable.tsx
@@ -5,7 +5,8 @@ import { invoke } from "@tauri-apps/api/core";
 import { useOnlineStatus } from "@/hooks/use-online-status";
 import { OfflineDisplay } from "@/components/offline-display";
 import { ErrorDisplay } from "@/components/error-display";
-import { isNetworkError, fetchWithTimeout } from "@/lib/utils";
+import { isNetworkError } from "@/lib/utils";
+import { useOfflineData } from "@/hooks/use-offline-data";
 import SingleCourseExportModal from "@/components/single-course-export-modal";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Separator } from "@/components/ui/separator";
@@ -50,6 +51,7 @@ interface ApiResult<T> {
   success: boolean;
   data?: T;
   error?: string;
+  [key: string]: unknown;
 }
 
 interface AttendanceFaculty {
@@ -80,6 +82,7 @@ interface AttendanceResponse {
   data?: AttendanceRecord[];
   semesterId?: string;
   error?: string;
+  [key: string]: unknown;
 }
 
 const EMPTY: WeeklySchedule = {
@@ -386,79 +389,45 @@ export default function TimetablePage() {
     mon.setHours(0, 0, 0, 0);
     return mon;
   });
-  const initialTt = useMemo(() => {
-    try {
-      const cachedTt = localStorage.getItem("deskly::cache::timetable");
-      if (cachedTt) {
-        const parsedTt = JSON.parse(cachedTt);
-        if (parsedTt && Object.values(parsedTt).some((arr: any) => arr.length > 0)) return parsedTt;
-      }
-    } catch {}
-    return EMPTY;
-  }, []);
-
-  const initialAtt = useMemo(() => {
-    try {
-      const cachedAtt = localStorage.getItem("deskly::cache::timetable_attendance");
-      if (cachedAtt) {
-        const parsedAtt = JSON.parse(cachedAtt);
-        if (Array.isArray(parsedAtt) && parsedAtt.length > 0) return parsedAtt;
-      }
-    } catch {}
-    return [];
-  }, []);
-
-  const [schedule, setSchedule] = useState<WeeklySchedule>(initialTt);
-  const [attendance, setAttendance] = useState<AttendanceRecord[]>(initialAtt);
-  const [loading, setLoading] = useState(Object.values(initialTt).every((arr) => (arr as ScheduleEntry[]).length === 0));
-  const [error, setError] = useState<string | null>(null);
+
+  const {
+    data: scheduleData,
+    loading: scheduleLoading,
+    error: scheduleError,
+    retry: loadSchedule
+  } = useOfflineData<WeeklySchedule>({
+    cacheKey: "deskly::cache::timetable",
+    fetcher: () => invoke<ApiResult<WeeklySchedule>>("timetable_get_weekly", { semesterSubId: null }),
+    enabled: isLoggedIn && !authLoading,
+  });
+
+  const {
+    data: attendanceData,
+    loading: attendanceLoading,
+    error: attendanceError,
+    retry: loadAttendance
+  } = useOfflineData<AttendanceRecord[]>({
+    cacheKey: "deskly::cache::timetable_attendance",
+    fetcher: () => invoke<AttendanceResponse>("attendance_get_current").catch(() => ({ success: false } as AttendanceResponse)),
+    enabled: isLoggedIn && !authLoading,
+  });
+
+  const schedule = scheduleData || EMPTY;
+  const attendance = attendanceData || [];
+  const loading = scheduleLoading || attendanceLoading;
+  const error = scheduleError || attendanceError;
   const [selected, setSelected] = useState<ScheduleEntry | null>(null);
 
+  const load = () => {
+    loadSchedule();
+    loadAttendance();
+  };
+
   useEffect(() => {
     if (!authLoading && !isLoggedIn) navigate("/");
-  }, [isLoggedIn, authLoading]);
-
-  async function load() {
-    try {
-      setError(null);
-      const isScheduleEmpty = Object.values(schedule).every((arr) => arr.length === 0);
-      setLoading(isScheduleEmpty);
-
-      const [tt, att] = await Promise.all([
-        fetchWithTimeout(invoke<ApiResult<WeeklySchedule>>("timetable_get_weekly", { semesterSubId: null }), 15000),
-        fetchWithTimeout(invoke<AttendanceResponse>("attendance_get_current").catch(() => ({ success: false } as AttendanceResponse)), 15000),
-      ]);
-
-      let updatedTt = schedule;
-      let updatedAtt = attendance;
-
-      if (tt.success && tt.data) {
-        setSchedule(tt.data);
-        updatedTt = tt.data;
-      } else if (tt.error && isScheduleEmpty) {
-        setError(tt.error);
-      }
-
-      if (att.success && att.data) {
-        setAttendance(att.data);
-        updatedAtt = att.data;
-      }
-
-      localStorage.setItem("deskly::cache::timetable", JSON.stringify(updatedTt));
-      localStorage.setItem("deskly::cache::timetable_attendance", JSON.stringify(updatedAtt));
-    } catch (e) {
-      const isScheduleEmpty = Object.values(schedule).every((arr) => arr.length === 0);
-      if (isScheduleEmpty) {
-        setError(e instanceof Error ? e.message : String(e));
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
+  }, [isLoggedIn, authLoading, navigate]);
+
 
-  useEffect(() => {
-    if (isLoggedIn) load();
-  }, [isLoggedIn]);
 
   const DAY_KEYS: (keyof WeeklySchedule)[] = [
     "monday",

From a33bf38a5961596265518895da4e8d08fb88e295 Mon Sep 17 00:00:00 2001
From: Vishal-770 <vishalpeace07@gmail.com>
Date: Fri, 7 Aug 2026 12:31:07 +0530
Subject: [PATCH 2/3] refactor: remove unit tests from features parser & fix
 dynamic cache key bug in useOfflineData hook

---
 src-tauri/src/features/parser.rs | 160 -------------------------------
 src/hooks/use-offline-data.ts    |  32 +++++--
 2 files changed, 25 insertions(+), 167 deletions(-)

diff --git a/src-tauri/src/features/parser.rs b/src-tauri/src/features/parser.rs
index d5524c6..b165adf 100644
--- a/src-tauri/src/features/parser.rs
+++ b/src-tauri/src/features/parser.rs
@@ -372,167 +372,7 @@ pub fn parse_exam_schedule(html: &str) -> Result<Vec<ExamScheduleEntry>, String>
     Ok(entries)
 }
 
-#[cfg(test)]
-mod tests {
-    use super::*;
-
-    #[test]
-    fn test_parse_exam_schedule() {
-        let html = r#"
-            <table class="customTable">
-                <tr class="tableHeader">
-                    <td>S.No.</td><td>Course Code</td><td>Course Title</td><td>Course Type</td>
-                    <td>Class ID</td><td>Slot</td><td>Exam Date</td><td>Exam Session</td>
-                    <td>Reporting Time</td><td>Exam Time</td><td>Venue</td><td>Seat Location</td><td>Seat No.</td>
-                </tr>
-                <tr class="tableContent">
-                    <td class="panelHead-secondary" colspan="13" align="center">FAT</td>
-                </tr>
-                <tr class="tableContent">
-                    <td>1</td>
-                    <td>BCSE302L</td>
-                    <td>Database Systems</td>
-                    <td>TH</td>
-                    <td>CH2025260501233</td>
-                    <td>A1+TA1</td>
-                    <td>20-Apr-2026</td>
-                    <td>FN1</td>
-                    <td>09:45 AM</td>
-                    <td>10:00 AM - 01:00 PM</td>
-                    <td><span>AB3-607</span></td>
-                    <td><span><span>-</span></span></td>
-                    <td><span>27</span></td>
-                </tr>
-                <tr class="tableContent">
-                    <td class="panelHead-secondary" colspan="13" align="center">CAT2</td>
-                </tr>
-                <tr class="tableContent">
-                    <td>1</td>
-                    <td>BCSE302L</td>
-                    <td>Database Systems</td>
-                    <td>TH</td>
-                    <td>CH2025260501233</td>
-                    <td>A1+TA1</td>
-                    <td>14-Mar-2026</td>
-                    <td>FN2</td>
-                    <td>11:45 AM</td>
-                    <td>12:00 PM - 01:30 PM</td>
-                    <td><span>AB3-106</span></td>
-                    <td><span><span>R5C3</span></span></td>
-                    <td><span>27</span></td>
-                </tr>
-            </table>
-        "#;
-
-        let entries = parse_exam_schedule(html).unwrap();
-        assert_eq!(entries.len(), 2);
-        
-        assert_eq!(entries[0].exam_type, "FAT");
-        assert_eq!(entries[0].course_code, "BCSE302L");
-        assert_eq!(entries[0].course_title, "Database Systems");
-        assert_eq!(entries[0].venue, "AB3-607");
-        assert_eq!(entries[0].seat_location, "-");
-        assert_eq!(entries[0].seat_no, "27");
-
-        assert_eq!(entries[1].exam_type, "CAT2");
-        assert_eq!(entries[1].venue, "AB3-106");
-        assert_eq!(entries[1].seat_location, "R5C3");
-        assert_eq!(entries[1].seat_no, "27");
-    }
-
-    #[test]
-    fn test_parse_hod_dean_details() {
-        let html = r#"
-            <div class="box">
-                <div class="box-header with-border text-center">
-                    <h3 class="box-title"><b>DEAN</b></h3>
-                </div>
-                <table class="table">
-                    <tr>
-                        <td><b>Name of the Faculty </b></td>
-                        <td>Dr. VISWANATHAN V</td>
-                        <td rowspan="5"><img src="data:jpg;base64,12345" /></td>
-                    </tr>
-                    <tr>
-                        <td><b>School </b></td>
-                        <td>SCOPE</td>
-                    </tr>
-                    <tr>
-                        <td><b>Cabin No </b></td>
-                        <td>AB3-329</td>
-                    </tr>
-                    <tr>
-                        <td><b>Email ID </b></td>
-                        <td>dean.scope@vit.ac.in</td>
-                    </tr>
-                    <tr>
-                        <td><b>Intercom </b></td>
-                        <td>1234</td>
-                    </tr>
-                </table>
-            </div>
-        "#;
-
-        let details = parse_hod_dean_details(html).unwrap();
-        assert_eq!(details.len(), 1);
-        assert_eq!(details[0].role, "DEAN");
-        assert_eq!(details[0].name, "Dr. VISWANATHAN V");
-        assert_eq!(details[0].school, "SCOPE");
-        assert_eq!(details[0].cabin, "AB3-329");
-        assert_eq!(details[0].email, "dean.scope@vit.ac.in");
-        assert_eq!(details[0].intercom, "1234");
-        assert_eq!(details[0].photo, "data:jpg;base64,12345");
-    }
 
-    #[test]
-    fn test_parse_hod_dean_details_multiple_in_single_box() {
-        let html = r#"
-            <div class="box">
-                <div class="table-responsive">
-                    <div class="box-header with-border text-center">
-                        <h3 class="box-title"><b>DEAN</b></h3>
-                    </div>
-                    <table class="table">
-                        <tr>
-                            <td><b>Name of the Faculty </b></td>
-                            <td>Dr. VISWANATHAN V</td>
-                            <td rowspan="5"><img src="data:jpg;base64,123" /></td>
-                        </tr>
-                        <tr>
-                            <td><b>School </b></td>
-                            <td>SCOPE</td>
-                        </tr>
-                    </table>
-                </div>
-                <div class="table-responsive">
-                    <div class="box-header with-border text-center">
-                        <h3 class="box-title"><b>HOD</b></h3>
-                    </div>
-                    <table class="table">
-                        <tr>
-                            <td><b>Name of the Faculty </b></td>
-                            <td>Dr. HOD NAME</td>
-                            <td rowspan="5"><img src="data:jpg;base64,456" /></td>
-                        </tr>
-                        <tr>
-                            <td><b>School </b></td>
-                            <td>SCOPE</td>
-                        </tr>
-                    </table>
-                </div>
-            </div>
-        "#;
-
-        let details = parse_hod_dean_details(html).unwrap();
-        assert_eq!(details.len(), 2);
-        assert_eq!(details[0].role, "DEAN");
-        assert_eq!(details[0].name, "Dr. VISWANATHAN V");
-        assert_eq!(details[0].photo, "data:jpg;base64,123");
-        assert_eq!(details[1].role, "HOD");
-        assert_eq!(details[1].name, "Dr. HOD NAME");
-        assert_eq!(details[1].photo, "data:jpg;base64,456");
-    }
-}
 
 fn parse_single_table(
     table: &ElementRef<'_>,
diff --git a/src/hooks/use-offline-data.ts b/src/hooks/use-offline-data.ts
index b498bd4..110588d 100644
--- a/src/hooks/use-offline-data.ts
+++ b/src/hooks/use-offline-data.ts
@@ -55,19 +55,37 @@ export function useOfflineData<T>({
   transform,
   isEmpty,
 }: UseOfflineDataOptions<T>): UseOfflineDataResult<T> {
-  const hasData = (value: T | null): boolean => {
+  const fetcherRef = useRef(fetcher);
+  fetcherRef.current = fetcher;
+
+  const transformRef = useRef(transform);
+  transformRef.current = transform;
+
+  const isEmptyRef = useRef(isEmpty);
+  isEmptyRef.current = isEmpty;
+
+  const hasData = useCallback((value: T | null): boolean => {
     if (value === null || value === undefined) return false;
-    if (isEmpty) return !isEmpty(value);
+    if (isEmptyRef.current) return !isEmptyRef.current(value);
     if (Array.isArray(value)) return value.length > 0;
     if (typeof value === "object") return Object.keys(value as object).length > 0;
     return !!value;
-  };
+  }, []);
 
   const [data, setData] = useState<T | null>(() => readCache<T>(cacheKey));
   const [loading, setLoading] = useState<boolean>(() => !hasData(readCache<T>(cacheKey)));
   const [error, setError] = useState<string | null>(null);
   const [isStale, setIsStale] = useState(false);
 
+  // Sync cache state when cacheKey changes
+  useEffect(() => {
+    const cached = readCache<T>(cacheKey);
+    setData(cached);
+    setLoading(!hasData(cached));
+    setError(null);
+    setIsStale(false);
+  }, [cacheKey, hasData]);
+
   // Use ref to avoid stale closure issues in fetch
   const dataRef = useRef(data);
   dataRef.current = data;
@@ -82,10 +100,10 @@ export function useOfflineData<T>({
     setLoading(!hasCache);
 
     try {
-      const res = await fetchWithTimeout(fetcher(), timeout);
+      const res = await fetchWithTimeout(fetcherRef.current(), timeout);
 
       if (res?.success && res.data !== undefined && res.data !== null) {
-        const processed = transform ? transform(res.data) : res.data;
+        const processed = transformRef.current ? transformRef.current(res.data) : res.data;
         setData(processed);
         writeCache(cacheKey, processed);
         setIsStale(false);
@@ -109,13 +127,13 @@ export function useOfflineData<T>({
     } finally {
       setLoading(false);
     }
-  }, [enabled, cacheKey, timeout]);
+  }, [enabled, cacheKey, timeout, hasData]);
 
   useEffect(() => {
     if (enabled) {
       fetchData();
     }
-  }, [enabled]);
+  }, [enabled, fetchData]);
 
   const retry = useCallback(() => {
     fetchData();

From 78cb33799e6cf33f30390938f1285b4e24966329 Mon Sep 17 00:00:00 2001
From: Vishal-770 <vishalpeace07@gmail.com>
Date: Fri, 7 Aug 2026 12:37:43 +0530
Subject: [PATCH 3/3] fix(mobile): resolve exams render warning and fix empty
 timetable skeleton trigger

---
 src/pages-mobile/dashboard/exams.tsx     | 4 ++--
 src/pages-mobile/dashboard/timetable.tsx | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages-mobile/dashboard/exams.tsx b/src/pages-mobile/dashboard/exams.tsx
index 962df86..bb1b50a 100644
--- a/src/pages-mobile/dashboard/exams.tsx
+++ b/src/pages-mobile/dashboard/exams.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { invoke } from "@tauri-apps/api/core";
 
@@ -163,7 +163,7 @@ export default function ExamSchedulePage() {
   const [selectedExam, setSelectedExam] = useState<ExamScheduleEntry | null>(null);
 
   // Update selected tab if groups change and current tab is not in new groups
-  useMemo(() => {
+  useEffect(() => {
     if (groups.length > 0) {
       const tabNames = groups.map(g => g.examType);
       if (!selectedTab || !tabNames.includes(selectedTab)) {
diff --git a/src/pages-mobile/dashboard/timetable.tsx b/src/pages-mobile/dashboard/timetable.tsx
index a07a8c4..c0747f4 100644
--- a/src/pages-mobile/dashboard/timetable.tsx
+++ b/src/pages-mobile/dashboard/timetable.tsx
@@ -399,6 +399,7 @@ export default function TimetablePage() {
     cacheKey: "deskly::cache::timetable",
     fetcher: () => invoke<ApiResult<WeeklySchedule>>("timetable_get_weekly", { semesterSubId: null }),
     enabled: isLoggedIn && !authLoading,
+    isEmpty: (val) => Object.values(val).every((arr) => Array.isArray(arr) && arr.length === 0),
   });
 
   const {