react-native-elearn-ui 0.1.0 → 0.1.1

package/lib/module/screens/HomeScreen.js

@@ -1,24 +1,108 @@
 "use strict";
 
-import React from 'react';
+import React, { useState } from 'react';
 import { View, ScrollView, StyleSheet, TouchableOpacity, SafeAreaView, StatusBar, Image } from 'react-native';
-import { useElearnConfig } from "../context/ElearnConfigContext.js";
 import { useTheme } from "../context/ThemeContext.js";
-import { Typography, Card, CircularProgress, Icon } from "../components/index.js";
+import { Typography, Card, ProgressBar, Icon } from "../components/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const HomeScreen = () => {
-  const {
-    config,
-    callbacks,
-    getString
-  } = useElearnConfig();
+export const HomeScreen = ({
+  params,
+  onPressNotification,
+  onPressAvatar,
+  onPressTrackQbank,
+  onPressPearls,
+  onPressUpdates,
+  onPressQuickLink,
+  onPressGetStarted,
+  onPressContinueLearning,
+  onPressShareApp,
+  onPressMcqViewDetails
+}) => {
   const theme = useTheme();
-  const dailyQuiz = config.dailyQuiz;
-  const courses = config.courses || [];
-  const handleDailyQuizPress = () => {
-    if (dailyQuiz && callbacks.onStartQuiz) {
-      callbacks.onStartQuiz(dailyQuiz.id, dailyQuiz.questions, dailyQuiz.title);
-    }
+
+  // Selected state for the daily teaser MCQ
+  const [selectedTeaserOption, setSelectedTeaserOption] = useState(null);
+
+  // Fallbacks to default configs if params are not passed
+  const headerData = params?.header || {
+    appName: 'Residency',
+    subName: 'Pathology',
+    notificationCount: 2,
+    avatarUrl: 'https://images.unsplash.com/photo-1559839734-2b71ea197ec2?q=80&w=200&auto=format&fit=crop'
+  };
+  const bannerData = params?.banner || {
+    title: 'Test Your Knowledge – Daily',
+    subtitle: 'Smart Learning for Future Doctors',
+    imageUrl: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=400&auto=format&fit=crop'
+  };
+  const progressData = params?.progress || {
+    percentage: 25,
+    text: 'Modules Completed of 829',
+    totalModules: 829,
+    buttonText: 'Track Qbank'
+  };
+  const actionsData = params?.actions || {
+    pearlsLabel: 'Pearls',
+    updatesLabel: 'Updates'
+  };
+  const quickLinksData = params?.quickLinks || [{
+    id: 'bookmarks',
+    label: 'Bookmarks',
+    icon: 'bookmark',
+    color: '#3B82F6'
+  }, {
+    id: 'custom_module',
+    label: 'Custom Module',
+    icon: 'file-text',
+    color: '#10B981'
+  }, {
+    id: 'videos_saved',
+    label: 'Videos Saved',
+    icon: 'download',
+    color: '#EF4444'
+  }, {
+    id: 'qbank',
+    label: 'QBank',
+    icon: 'book-open',
+    color: '#8B5CF6'
+  }];
+  const dailyMcqData = params?.dailyMcq || {
+    id: 'teaser_1',
+    imageUrl: 'https://images.unsplash.com/photo-1576086213369-97a306d36557?q=80&w=500&auto=format&fit=crop',
+    question: 'Discuss the causes, radiological features, and management of a solitary pulmonary nodule.',
+    options: ['A. Used for Hepatitis B', 'B. Used for chickenpox prophylaxis', 'C. Obtained from random donors', 'D. They are hyperimmune human immunoglobulins'],
+    correctIndex: 0
+  };
+  const getStartedData = params?.getStarted || {
+    title: 'Anatomy',
+    subtitle: 'Dr. Dharma Shanker',
+    avatarUrl: 'https://images.unsplash.com/photo-1622253692010-333f2da6031d?q=80&w=200&auto=format&fit=crop'
+  };
+  const continueLearningData = params?.continueLearning || [{
+    id: 'subj_anatomy',
+    title: 'Anatomy',
+    progressPercentage: 20,
+    completedModules: 2,
+    totalModules: 63,
+    icon: 'atom'
+  }, {
+    id: 'subj_biochem',
+    title: 'Biochemistry',
+    progressPercentage: 60,
+    completedModules: 45,
+    totalModules: 53,
+    icon: 'dna'
+  }, {
+    id: 'subj_physio',
+    title: 'Physiology',
+    progressPercentage: 88,
+    completedModules: 59,
+    totalModules: 63,
+    icon: 'flask'
+  }];
+  const referralData = params?.referralBanner || {
+    text: 'Invite a friend to RXDX, learn together, grow together.',
+    buttonText: 'Share App'
   };
   return /*#__PURE__*/_jsxs(SafeAreaView, {
     style: [styles.safeArea, {
@@ -27,176 +111,428 @@ export const HomeScreen = () => {
     children: [/*#__PURE__*/_jsx(StatusBar, {
       barStyle: "dark-content"
     }), /*#__PURE__*/_jsxs(View, {
-      style: styles.header,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.headerLeft,
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.avatarContainer,
-          children: /*#__PURE__*/_jsx(View, {
-            style: [styles.avatarPlaceholder, {
-              backgroundColor: theme.secondary
-            }],
-            children: /*#__PURE__*/_jsx(Icon, {
-              name: "user",
-              size: 20,
-              color: theme.primary
-            })
+      style: [styles.header, {
+        borderBottomColor: theme.border
+      }],
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.headerDropdown,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.appLogo, {
+            backgroundColor: theme.primary
+          }],
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "label",
+            bold: true,
+            color: "#FFFFFF",
+            children: "R"
           })
         }), /*#__PURE__*/_jsxs(View, {
-          children: [/*#__PURE__*/_jsx(Typography, {
-            variant: "bodyLight",
-            color: theme.textSecondary,
-            children: getString('homeHeaderTitle')
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.appNameRow,
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "h2",
+              bold: true,
+              color: theme.textPrimary,
+              children: headerData.appName
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.chevronWrap,
+              children: /*#__PURE__*/_jsx(Icon, {
+                name: "chevron-left",
+                size: 12,
+                color: theme.textSecondary
+              })
+            })]
           }), /*#__PURE__*/_jsx(Typography, {
-            variant: "h2",
-            bold: true,
-            children: "Dr. Kimberly"
+            variant: "caption",
+            color: theme.textSecondary,
+            style: styles.appSubName,
+            children: headerData.subName
           })]
         })]
-      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.iconButton, {
-          borderColor: theme.border
-        }],
-        children: [/*#__PURE__*/_jsx(Icon, {
-          name: "bell",
-          size: 20,
-          color: theme.textPrimary
-        }), /*#__PURE__*/_jsx(View, {
-          style: [styles.badge, {
-            backgroundColor: theme.danger
-          }]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.headerRight,
+        children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+          onPress: onPressNotification,
+          style: [styles.iconBtn, {
+            borderColor: theme.border
+          }],
+          children: [/*#__PURE__*/_jsx(Icon, {
+            name: "bell",
+            size: 20,
+            color: theme.textPrimary
+          }), headerData.notificationCount && headerData.notificationCount > 0 ? /*#__PURE__*/_jsx(View, {
+            style: [styles.badge, {
+              backgroundColor: theme.danger
+            }],
+            children: /*#__PURE__*/_jsx(Typography, {
+              variant: "caption",
+              style: styles.badgeText,
+              color: "#FFFFFF",
+              children: headerData.notificationCount
+            })
+          }) : null]
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onPressAvatar,
+          style: styles.profileContainer,
+          children: /*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: headerData.avatarUrl
+            },
+            style: styles.profileAvatar
+          })
         })]
       })]
     }), /*#__PURE__*/_jsxs(ScrollView, {
       contentContainerStyle: styles.scrollContent,
       showsVerticalScrollIndicator: false,
-      children: [dailyQuiz && /*#__PURE__*/_jsx(TouchableOpacity, {
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
         activeOpacity: 0.9,
-        onPress: handleDailyQuizPress,
-        children: /*#__PURE__*/_jsx(Card, {
-          style: [styles.dailyQuizCard, {
-            backgroundColor: '#0284C7'
+        children: /*#__PURE__*/_jsxs(View, {
+          style: [styles.promoBanner, {
+            backgroundColor: '#15803D'
           }],
-          children: /*#__PURE__*/_jsxs(View, {
-            style: styles.dailyQuizRow,
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: styles.dailyQuizLeft,
-              children: [/*#__PURE__*/_jsx(Typography, {
-                variant: "h3",
-                color: "#FFFFFF",
-                bold: true,
-                children: getString('dailyQuizTitle')
-              }), /*#__PURE__*/_jsx(Typography, {
-                variant: "caption",
-                color: "#E0F2FE",
-                style: styles.dailyQuizDesc,
-                children: getString('dailyQuizSubtitle')
-              }), /*#__PURE__*/_jsx(View, {
-                style: styles.trackQuickBadge,
-                children: /*#__PURE__*/_jsx(Typography, {
-                  variant: "caption",
-                  color: "#0284C7",
-                  bold: true,
-                  children: getString('trackQuickLabel')
-                })
-              })]
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.dailyQuizRight,
-              children: /*#__PURE__*/_jsx(CircularProgress, {
-                progress: dailyQuiz.progressPercentage / 100,
-                size: 68,
-                strokeWidth: 6,
-                color: "#FFFFFF",
-                backgroundColor: "rgba(255, 255, 255, 0.25)",
-                textStyle: {
-                  color: '#FFFFFF',
-                  fontSize: 13
-                }
-              })
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.promoTextColumn,
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "h2",
+              bold: true,
+              color: "#FFFFFF",
+              style: styles.promoTitle,
+              children: bannerData.title
+            }), /*#__PURE__*/_jsx(Typography, {
+              variant: "caption",
+              color: "#D1FAE5",
+              style: styles.promoSubtitle,
+              children: bannerData.subtitle
             })]
-          })
+          }), /*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: bannerData.imageUrl
+            },
+            style: styles.promoBannerImage,
+            resizeMode: "cover"
+          })]
         })
+      }), /*#__PURE__*/_jsxs(Card, {
+        bordered: true,
+        style: styles.qbankProgressCard,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.qbankProgressRow,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.qbankProgressTextContainer,
+            children: [/*#__PURE__*/_jsxs(Typography, {
+              variant: "h1",
+              bold: true,
+              color: theme.textPrimary,
+              style: styles.percentageText,
+              children: [progressData.percentage, "%"]
+            }), /*#__PURE__*/_jsx(Typography, {
+              variant: "caption",
+              color: theme.textSecondary,
+              children: progressData.text
+            })]
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: onPressTrackQbank,
+            children: /*#__PURE__*/_jsx(Typography, {
+              variant: "h3",
+              bold: true,
+              color: theme.primary,
+              children: progressData.buttonText
+            })
+          })]
+        }), /*#__PURE__*/_jsx(ProgressBar, {
+          progress: progressData.percentage / 100,
+          color: "#F97316",
+          height: 8,
+          style: styles.qbankProgressBar
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.actionsContainer,
+        children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+          activeOpacity: 0.9,
+          onPress: onPressPearls,
+          style: [styles.actionPill, {
+            backgroundColor: '#5F85E5'
+          }],
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.actionPillIconContainer,
+            children: /*#__PURE__*/_jsx(Icon, {
+              name: "diamond",
+              size: 18,
+              color: "#5F85E5"
+            })
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "h3",
+            bold: true,
+            color: "#FFFFFF",
+            style: styles.actionPillText,
+            children: actionsData.pearlsLabel
+          })]
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          activeOpacity: 0.9,
+          onPress: onPressUpdates,
+          style: [styles.actionPill, {
+            backgroundColor: '#1A7B60'
+          }],
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.actionPillIconContainer,
+            children: /*#__PURE__*/_jsx(Icon, {
+              name: "megaphone",
+              size: 18,
+              color: "#1A7B60"
+            })
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "h3",
+            bold: true,
+            color: "#FFFFFF",
+            style: styles.actionPillText,
+            children: actionsData.updatesLabel
+          })]
+        })]
       }), /*#__PURE__*/_jsx(View, {
         style: styles.sectionHeader,
         children: /*#__PURE__*/_jsx(Typography, {
-          variant: "h2",
+          variant: "caption",
           bold: true,
-          children: getString('subjectsTitle')
+          color: theme.textSecondary,
+          style: styles.sectionTitle,
+          children: "QUICK LINKS"
         })
       }), /*#__PURE__*/_jsx(ScrollView, {
         horizontal: true,
         showsHorizontalScrollIndicator: false,
-        contentContainerStyle: styles.subjectsContainer,
-        children: courses.map(course => {
-          let iconName = 'flask';
-          if (course.title.toLowerCase().includes('physic')) iconName = 'atom';
-          if (course.title.toLowerCase().includes('biolog')) iconName = 'dna';
-          if (course.title.toLowerCase().includes('anatom')) iconName = 'book-open';
-          return /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: [styles.subjectTab, {
-              backgroundColor: theme.cardBackground,
-              borderColor: theme.border
+        contentContainerStyle: styles.quickLinksScroll,
+        children: quickLinksData.map(link => /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.quickLinkItem,
+          onPress: () => {
+            link.onPress?.();
+            onPressQuickLink?.(link.id);
+          },
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.quickLinkCircle, {
+              backgroundColor: `${link.color}15`
             }],
-            onPress: () => callbacks.onSelectCourse?.(course),
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.subjectIconWrap, {
-                backgroundColor: theme.secondary
-              }],
-              children: /*#__PURE__*/_jsx(Icon, {
-                name: iconName,
-                size: 20,
-                color: theme.primary
-              })
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "label",
-              bold: true,
-              style: styles.subjectText,
-              children: course.title
-            })]
-          }, course.id);
-        })
+            children: /*#__PURE__*/_jsx(Icon, {
+              name: link.icon,
+              size: 20,
+              color: link.color
+            })
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "caption",
+            color: theme.textPrimary,
+            bold: true,
+            style: styles.quickLinkLabel,
+            children: link.label
+          })]
+        }, link.id))
       }), /*#__PURE__*/_jsx(View, {
         style: styles.sectionHeader,
         children: /*#__PURE__*/_jsx(Typography, {
-          variant: "h2",
+          variant: "caption",
           bold: true,
-          children: getString('popularTopicsTitle')
+          color: theme.textSecondary,
+          style: styles.sectionTitle,
+          children: "BRAIN TEASERS OF THE DAY"
         })
       }), /*#__PURE__*/_jsxs(Card, {
         bordered: true,
-        style: styles.infoCard,
-        children: [/*#__PURE__*/_jsx(Image, {
+        style: styles.mcqCard,
+        children: [dailyMcqData.imageUrl && /*#__PURE__*/_jsx(Image, {
           source: {
-            uri: 'https://images.unsplash.com/photo-1576086213369-97a306d36557?q=80&w=600&auto=format&fit=crop'
+            uri: dailyMcqData.imageUrl
           },
-          style: styles.infoCardImage,
-          resizeMode: "cover"
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.infoCardContent,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.infoCardHeader,
+          style: styles.mcqImage
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body",
+          color: theme.textPrimary,
+          style: styles.mcqQuestion,
+          children: dailyMcqData.question
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.mcqOptionsList,
+          children: dailyMcqData.options.map((option, idx) => {
+            const isSelected = selectedTeaserOption === idx;
+            const isCorrectAnswer = idx === dailyMcqData.correctIndex;
+            const isTeaserAnswered = selectedTeaserOption !== null;
+            let circleBorder = theme.border;
+            let circleFill = 'transparent';
+            let rowBg = 'transparent';
+            if (isTeaserAnswered) {
+              if (isCorrectAnswer) {
+                circleBorder = theme.success;
+                circleFill = theme.success;
+                rowBg = 'rgba(16, 185, 129, 0.04)';
+              } else if (isSelected) {
+                circleBorder = theme.danger;
+                circleFill = theme.danger;
+                rowBg = 'rgba(239, 68, 68, 0.04)';
+              }
+            } else if (isSelected) {
+              circleBorder = theme.primary;
+              circleFill = theme.primary;
+            }
+            return /*#__PURE__*/_jsxs(TouchableOpacity, {
+              activeOpacity: 0.8,
+              disabled: isTeaserAnswered,
+              style: [styles.mcqOptionRow, {
+                backgroundColor: rowBg
+              }],
+              onPress: () => setSelectedTeaserOption(idx),
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [styles.mcqRadioOuter, {
+                  borderColor: circleBorder
+                }],
+                children: isSelected || isTeaserAnswered && isCorrectAnswer ? /*#__PURE__*/_jsx(View, {
+                  style: [styles.mcqRadioInner, {
+                    backgroundColor: circleFill
+                  }]
+                }) : null
+              }), /*#__PURE__*/_jsx(Typography, {
+                variant: "body",
+                color: theme.textPrimary,
+                style: styles.mcqOptionText,
+                children: option
+              })]
+            }, idx);
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onPressMcqViewDetails,
+          style: styles.mcqViewDetailsBtn,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "h3",
+            color: theme.primary,
+            bold: true,
+            children: "View Details"
+          })
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.sectionHeader,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          bold: true,
+          color: theme.textSecondary,
+          style: styles.sectionTitle,
+          children: "GET STARTED"
+        })
+      }), /*#__PURE__*/_jsx(Card, {
+        bordered: true,
+        onPress: onPressGetStarted,
+        style: styles.getStartedCard,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.getStartedRow,
+          children: [/*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: getStartedData.avatarUrl
+            },
+            style: styles.doctorAvatar
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.getStartedInfo,
             children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "caption",
-              color: theme.primary,
+              variant: "h3",
               bold: true,
-              children: "HISTOLOGY"
+              color: theme.textPrimary,
+              children: getStartedData.title
             }), /*#__PURE__*/_jsx(Typography, {
               variant: "caption",
               color: theme.textSecondary,
-              children: "12 min read"
+              children: getStartedData.subtitle
             })]
-          }), /*#__PURE__*/_jsx(Typography, {
-            variant: "h3",
-            bold: true,
-            style: styles.infoCardTitle,
-            children: "Tissue structures under microscope examination"
-          }), /*#__PURE__*/_jsx(Typography, {
-            variant: "body",
-            color: theme.textSecondary,
-            numberOfLines: 2,
-            children: "Learn the identification of epithelial tissues, connective tissues, and muscle structures for medical examination prep."
+          }), /*#__PURE__*/_jsx(Icon, {
+            name: "chevron-right",
+            size: 16,
+            color: theme.textSecondary
           })]
-        })]
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.sectionHeader,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          bold: true,
+          color: theme.textSecondary,
+          style: styles.sectionTitle,
+          children: "CONTINUE LEARNING"
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.continueLearningList,
+        children: continueLearningData.map(item => /*#__PURE__*/_jsx(TouchableOpacity, {
+          activeOpacity: 0.8,
+          onPress: () => onPressContinueLearning?.(item.id),
+          children: /*#__PURE__*/_jsx(Card, {
+            bordered: true,
+            style: styles.continueLearningCard,
+            children: /*#__PURE__*/_jsxs(View, {
+              style: styles.continueLearningRow,
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [styles.subjectIconBox, {
+                  backgroundColor: theme.secondary
+                }],
+                children: /*#__PURE__*/_jsx(Icon, {
+                  name: item.icon,
+                  size: 20,
+                  color: theme.primary
+                })
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.continueLearningInfo,
+                children: [/*#__PURE__*/_jsx(View, {
+                  style: styles.continueLearningTextRow,
+                  children: /*#__PURE__*/_jsx(Typography, {
+                    variant: "h3",
+                    bold: true,
+                    color: theme.textPrimary,
+                    children: item.title
+                  })
+                }), /*#__PURE__*/_jsx(ProgressBar, {
+                  progress: item.progressPercentage / 100,
+                  color: "#0891B2",
+                  height: 6,
+                  style: styles.continueProgressBar
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.continueStatsRow,
+                  children: [/*#__PURE__*/_jsxs(Typography, {
+                    variant: "caption",
+                    color: theme.textSecondary,
+                    children: [item.completedModules, " / ", item.totalModules, " Modules"]
+                  }), /*#__PURE__*/_jsxs(Typography, {
+                    variant: "caption",
+                    bold: true,
+                    color: theme.textPrimary,
+                    children: [item.progressPercentage, "%"]
+                  })]
+                })]
+              })]
+            })
+          })
+        }, item.id))
+      }), /*#__PURE__*/_jsx(Card, {
+        style: styles.referralCard,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.referralRow,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.referralLeft,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.referralIconContainer,
+              children: /*#__PURE__*/_jsx(Icon, {
+                name: "share",
+                size: 16,
+                color: "#FFFFFF"
+              })
+            }), /*#__PURE__*/_jsx(Typography, {
+              variant: "body",
+              bold: true,
+              color: "#1E293B",
+              style: styles.referralText,
+              children: referralData.text
+            })]
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: onPressShareApp,
+            style: styles.referralButton,
+            children: /*#__PURE__*/_jsx(Typography, {
+              variant: "caption",
+              bold: true,
+              color: "#1E293B",
+              children: referralData.buttonText
+            })
+          })]
+        })
       })]
     })]
   });
@@ -209,122 +545,335 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingHorizontal: 20,
-    paddingVertical: 16
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1
+  },
+  headerDropdown: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  appLogo: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 10
   },
-  headerLeft: {
+  appNameRow: {
     flexDirection: 'row',
     alignItems: 'center'
   },
-  avatarContainer: {
-    marginRight: 12
+  chevronWrap: {
+    transform: [{
+      rotate: '-90deg'
+    }],
+    marginLeft: 6
   },
-  avatarPlaceholder: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    justifyContent: 'center',
+  appSubName: {
+    fontSize: 11,
+    marginTop: 1
+  },
+  headerRight: {
+    flexDirection: 'row',
     alignItems: 'center'
   },
-  iconButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
+  iconBtn: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
     borderWidth: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    position: 'relative'
+    position: 'relative',
+    marginRight: 10
   },
   badge: {
     position: 'absolute',
-    top: 10,
-    right: 10,
-    width: 8,
-    height: 8,
-    borderRadius: 4
+    top: -4,
+    right: -4,
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    justifyContent: 'center',
+    alignItems: 'center'
   },
-  scrollContent: {
-    paddingHorizontal: 20,
-    paddingBottom: 24
+  badgeText: {
+    fontSize: 9,
+    fontWeight: '700'
   },
-  dailyQuizCard: {
-    marginVertical: 12,
-    padding: 20,
-    borderRadius: 20
+  profileContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    overflow: 'hidden'
+  },
+  profileAvatar: {
+    width: '100%',
+    height: '100%'
   },
-  dailyQuizRow: {
+  scrollContent: {
+    paddingHorizontal: 16,
+    paddingBottom: 32
+  },
+  promoBanner: {
     flexDirection: 'row',
+    borderRadius: 20,
+    padding: 16,
+    marginTop: 12,
     justifyContent: 'space-between',
-    alignItems: 'center'
+    overflow: 'hidden',
+    height: 120
   },
-  dailyQuizLeft: {
-    flex: 1,
-    paddingRight: 16
+  promoTextColumn: {
+    flex: 1.2,
+    justifyContent: 'center'
   },
-  dailyQuizDesc: {
-    marginTop: 6,
+  promoTitle: {
+    fontSize: 18,
+    lineHeight: 22,
+    marginBottom: 6
+  },
+  promoSubtitle: {
+    fontSize: 11,
     opacity: 0.9
   },
-  trackQuickBadge: {
-    backgroundColor: '#FFFFFF',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 16,
-    alignSelf: 'flex-start',
-    marginTop: 14
+  promoBannerImage: {
+    flex: 0.8,
+    height: '100%',
+    width: '100%',
+    alignSelf: 'flex-end',
+    borderRadius: 10
+  },
+  qbankProgressCard: {
+    padding: 16,
+    marginTop: 12,
+    borderRadius: 16
   },
-  dailyQuizRight: {
+  qbankProgressRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 12
+  },
+  qbankProgressTextContainer: {
+    flex: 1
+  },
+  percentageText: {
+    fontSize: 24,
+    lineHeight: 28
+  },
+  qbankProgressBar: {
+    marginTop: 4
+  },
+  actionsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 12
+  },
+  actionPill: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 14,
+    borderRadius: 14,
+    marginHorizontal: 4
+  },
+  actionPillIconContainer: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: '#FFFFFF',
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    marginRight: 10
+  },
+  actionPillText: {
+    fontSize: 15
   },
   sectionHeader: {
     marginTop: 20,
-    marginBottom: 12
+    marginBottom: 8
+  },
+  sectionTitle: {
+    fontSize: 12,
+    letterSpacing: 0.8
   },
-  subjectsContainer: {
+  quickLinksScroll: {
     paddingVertical: 4
   },
-  subjectTab: {
+  quickLinkItem: {
+    alignItems: 'center',
+    marginRight: 20,
+    width: 72
+  },
+  quickLinkCircle: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 6
+  },
+  quickLinkLabel: {
+    textAlign: 'center',
+    fontSize: 11
+  },
+  mcqCard: {
+    padding: 16,
+    borderRadius: 16,
+    overflow: 'hidden'
+  },
+  mcqImage: {
+    width: '100%',
+    height: 140,
+    borderRadius: 12,
+    marginBottom: 12
+  },
+  mcqQuestion: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '500',
+    marginBottom: 12
+  },
+  mcqOptionsList: {
+    marginBottom: 8
+  },
+  mcqOptionRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 16,
     paddingVertical: 10,
-    borderRadius: 20,
-    borderWidth: 1,
-    marginRight: 12
+    paddingHorizontal: 8,
+    borderRadius: 8,
+    marginBottom: 6
   },
-  subjectIconWrap: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
+  mcqRadioOuter: {
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    borderWidth: 1.5,
     justifyContent: 'center',
     alignItems: 'center',
-    marginRight: 8
+    marginRight: 10
   },
-  subjectText: {
-    fontSize: 14
+  mcqRadioInner: {
+    width: 10,
+    height: 10,
+    borderRadius: 5
   },
-  infoCard: {
-    padding: 0,
-    overflow: 'hidden',
+  mcqOptionText: {
+    fontSize: 13,
+    flex: 1
+  },
+  mcqViewDetailsBtn: {
+    alignItems: 'center',
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
+    paddingTop: 12,
     marginTop: 8
   },
-  infoCardImage: {
-    width: '100%',
-    height: 160
+  getStartedCard: {
+    padding: 12,
+    borderRadius: 16
   },
-  infoCardContent: {
-    padding: 16
+  getStartedRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
   },
-  infoCardHeader: {
+  doctorAvatar: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    marginRight: 12
+  },
+  getStartedInfo: {
+    flex: 1
+  },
+  continueLearningList: {
+    marginTop: 4
+  },
+  continueLearningCard: {
+    padding: 12,
+    marginBottom: 10,
+    borderRadius: 16
+  },
+  continueLearningRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  subjectIconBox: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12
+  },
+  continueLearningInfo: {
+    flex: 1
+  },
+  continueLearningTextRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     marginBottom: 6
   },
-  infoCardTitle: {
-    marginBottom: 8,
-    lineHeight: 22
+  continueProgressBar: {
+    height: 4,
+    marginBottom: 6
+  },
+  continueStatsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  referralCard: {
+    marginTop: 16,
+    padding: 14,
+    borderRadius: 16,
+    backgroundColor: '#FDE047' // RxDx Amber
+  },
+  referralRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  referralLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    paddingRight: 12
+  },
+  referralIconContainer: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: '#EA580C',
+    // Orange sharing accent
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 10
+  },
+  referralText: {
+    fontSize: 12,
+    lineHeight: 16,
+    flex: 1
+  },
+  referralButton: {
+    backgroundColor: '#FFFFFF',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 12,
+    shadowColor: '#000000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 1,
+    elevation: 1
   }
 });
 //# sourceMappingURL=HomeScreen.js.map