Add stale data handling in Programs component

- Enhanced the getPrograms function to return a stale flag indicating if cached data is being used.
- Implemented a warning message in the Programs component to inform users when stale data is displayed.
- Updated styles for the warning message to improve visibility.

app/(tabs)/programs.tsx

@@ -27,12 +27,14 @@ export default function Programs() {
   const [activities, setActivities] = useState<ProgramActivities>({});
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [isStale, setIsStale] = useState(false);
 
   useEffect(() => {
     const fetchPrograms = async () => {
       try {
-        const data = await getPrograms();
+        const { activities: data, isStale } = await getPrograms();
         setActivities(data);
+        setIsStale(isStale);
         if (Object.keys(data).length > 0) {
           const today = new Date();
           const day = String(today.getDate()).padStart(2, '0');
@@ -80,6 +82,12 @@ export default function Programs() {
         <Text style={[styles.title, { color: Colors[colorScheme].text }]}>Umrah Pilgrimage</Text>
       </View>
 
+      {isStale && (
+        <View style={styles.warningContainer}>
+          <Text style={styles.warningText}>Failed to fetch latest data. Showing cached activities.</Text>
+        </View>
+      )}
+
       <View>
         <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.daysScroll}>
           {dayKeys.map((day) => (
@@ -136,6 +144,15 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     paddingHorizontal: 20,
   },
+  warningContainer: {
+    backgroundColor: 'orange',
+    padding: 10,
+    alignItems: 'center',
+  },
+  warningText: {
+    color: 'white',
+    textAlign: 'center',
+  },
   title: {
     fontSize: 24,
     fontWeight: 'bold',