vorqard-ai-sdk 1.0.0

package/src/components/ChatUtils.js

@@ -0,0 +1,33 @@
+import { getSDKClient } from '../api/sdkClient';
+
+  export const getAbsoluteProfilePicture = (path) => {
+    if (!path || String(path).trim() === '' || String(path).trim() === 'null' || String(path).trim() === 'undefined') {
+      return null;
+    }
+    const cleanPath = String(path).trim();
+    if (cleanPath.startsWith('http://') || cleanPath.startsWith('https://')) {
+      return cleanPath;
+    }
+    try {
+      const sdkClient = getSDKClient();
+      const baseURL = sdkClient?.defaults?.baseURL;
+      if (baseURL) {
+        const cleanBase = baseURL.endsWith('/') ? baseURL.slice(0, -1) : baseURL;
+        const cleanSub = cleanPath.startsWith('/') ? cleanPath : `/${cleanPath}`;
+        return `${cleanBase}${cleanSub}`;
+      }
+    } catch (e) {
+      console.warn('Error resolving base URL for profile picture:', e);
+    }
+    return cleanPath;
+  };
+
+  export const getFormattedDoctorName = (name) => {
+    if (!name) return "";
+    const nameStr = String(name).trim();
+    if (nameStr.toLowerCase().startsWith("dr.")) {
+      return nameStr;
+    }
+    return `Dr. ${nameStr}`;
+  };
+

package/src/components/ReportAnalysisComponents.js

@@ -0,0 +1,170 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, Image, ActivityIndicator, Animated, StyleSheet } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+export const ScoreRing = ({ score, condition }) => {
+  const getColor = () => {
+    if (score >= 80) return ['#10B981', '#059669'];
+    if (score >= 60) return ['#F59E0B', '#D97706'];
+    if (score >= 40) return ['#EF4444', '#DC2626'];
+    return ['#7C3AED', '#6D28D9'];
+  };
+  const [c1, c2] = getColor();
+  return (
+    <LinearGradient colors={[c1 + '22', c2 + '11']} style={styles.scoreRingWrap}>
+      <View style={[styles.scoreRingOuter, { borderColor: c1 }]}>
+        <View style={styles.scoreRingInner}>
+          <Text style={[styles.scoreNumber, { color: c1 }]}>{score}</Text>
+          <Text style={styles.scoreLabel}>/ 100</Text>
+        </View>
+      </View>
+      <Text style={[styles.conditionBadge, { color: c1, borderColor: c1 + '44', backgroundColor: c1 + '15' }]}>
+        {condition}
+      </Text>
+    </LinearGradient>
+  );
+};
+
+export const UploadArea = ({ captureWithCamera, pickFromGallery }) => (
+  <View style={styles.uploadArea}>
+    <LinearGradient colors={['#EFF6FF', '#DBEAFE']} style={styles.uploadBox}>
+      <Ionicons name="cloud-upload-outline" size={52} color="#2563EB" />
+      <Text style={styles.uploadTitle}>Upload Your Test Report</Text>
+      <Text style={styles.uploadSub}>Blood test, X-ray, CBC, Lipid panel — any report</Text>
+      <View style={styles.uploadBtns}>
+        <TouchableOpacity style={styles.uploadBtn} onPress={captureWithCamera}>
+          <Ionicons name="camera" size={20} color="#fff" />
+          <Text style={styles.uploadBtnText}>Camera</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={[styles.uploadBtn, { backgroundColor: '#10B981' }]} onPress={pickFromGallery}>
+          <Ionicons name="images" size={20} color="#fff" />
+          <Text style={styles.uploadBtnText}>Gallery</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  </View>
+);
+
+export const ImagePreview = ({ selectedImage, clearImage, analyzeReport, loading }) => (
+  <View style={styles.previewSection}>
+    <Image source={{ uri: selectedImage.uri }} style={styles.previewImage} resizeMode="cover" />
+    <View style={styles.previewActions}>
+      <TouchableOpacity style={styles.retakeBtn} onPress={clearImage}>
+        <Ionicons name="refresh" size={16} color="#64748B" />
+        <Text style={styles.retakeBtnText}>Change</Text>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.analyzeBtn} onPress={analyzeReport} disabled={loading}>
+        <LinearGradient colors={['#2563EB', '#1D4ED8']} style={styles.analyzeBtnGrad}>
+          {loading ? <ActivityIndicator color="#fff" size="small" /> : (
+            <>
+              <Ionicons name="sparkles" size={18} color="#fff" />
+              <Text style={styles.analyzeBtnText}>Analyze with AI</Text>
+            </>
+          )}
+        </LinearGradient>
+      </TouchableOpacity>
+    </View>
+  </View>
+);
+
+export const ResultsPanel = ({ result, fadeAnim, onChatWithAIPress }) => (
+  <Animated.View style={{ opacity: fadeAnim }}>
+    <View style={styles.card}>
+      <Text style={styles.cardTitle}>Health Assessment</Text>
+      <ScoreRing score={result.health_score} condition={result.condition} />
+      <Text style={styles.summaryText}>{result.summary}</Text>
+    </View>
+
+    {result.see_doctor && (
+      <View style={styles.doctorAlert}>
+        <Ionicons name="medical" size={18} color="#EF4444" />
+        <Text style={styles.doctorAlertText}>Your report may need a doctor's review. Book a consultation.</Text>
+      </View>
+    )}
+
+    {result.findings?.length > 0 && (
+      <View style={styles.card}>
+        <View style={styles.cardHeader}>
+          <Ionicons name="analytics-outline" size={18} color="#EF4444" />
+          <Text style={styles.cardTitle}>Notable Findings</Text>
+        </View>
+        {result.findings.map((f, i) => (
+          <View key={i} style={styles.findingItem}>
+            <View style={styles.findingDot} />
+            <Text style={styles.findingText}>{f}</Text>
+          </View>
+        ))}
+      </View>
+    )}
+
+    {result.suggestions?.length > 0 && (
+      <View style={styles.card}>
+        <View style={styles.cardHeader}>
+          <Ionicons name="bulb-outline" size={18} color="#10B981" />
+          <Text style={styles.cardTitle}>AI Suggestions</Text>
+        </View>
+        {result.suggestions.map((s, i) => (
+          <View key={i} style={styles.suggestionItem}>
+            <View style={styles.suggestionNum}><Text style={styles.suggestionNumText}>{i + 1}</Text></View>
+            <Text style={styles.suggestionText}>{s}</Text>
+          </View>
+        ))}
+      </View>
+    )}
+
+    {onChatWithAIPress && (
+      <TouchableOpacity style={styles.chatBtn} onPress={onChatWithAIPress}>
+        <LinearGradient colors={['#2563EB', '#1D4ED8']} style={styles.chatBtnGrad}>
+          <Ionicons name="chatbubble-ellipses" size={20} color="#fff" />
+          <Text style={styles.chatBtnText}>Ask AI about this report</Text>
+        </LinearGradient>
+      </TouchableOpacity>
+    )}
+
+    <Text style={styles.disclaimer}>
+      ⚠ AI analysis is for informational purposes only. Always consult your VORQARD doctor for medical decisions.
+    </Text>
+  </Animated.View>
+);
+
+const styles = StyleSheet.create({
+  scoreRingWrap: { borderRadius: 16, padding: 20, alignItems: 'center', marginBottom: 14, marginTop: 4 },
+  scoreRingOuter: { width: 110, height: 110, borderRadius: 55, borderWidth: 5, justifyContent: 'center', alignItems: 'center', marginBottom: 12 },
+  scoreRingInner: { alignItems: 'center' },
+  scoreNumber: { fontSize: 34, fontWeight: 'bold' },
+  scoreLabel: { fontSize: 12, color: '#94A3B8', marginTop: -2 },
+  conditionBadge: { paddingHorizontal: 16, paddingVertical: 6, borderRadius: 20, fontSize: 13, fontWeight: 'bold', borderWidth: 1 },
+  uploadArea: { marginBottom: 20 },
+  uploadBox: { borderRadius: 20, padding: 30, alignItems: 'center', borderWidth: 2, borderColor: '#BFDBFE', borderStyle: 'dashed' },
+  uploadTitle: { fontSize: 18, fontWeight: 'bold', color: '#1E293B', marginTop: 16, marginBottom: 6 },
+  uploadSub: { fontSize: 13, color: '#64748B', textAlign: 'center', marginBottom: 20 },
+  uploadBtns: { flexDirection: 'row', gap: 12 },
+  uploadBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, backgroundColor: '#2563EB', paddingHorizontal: 20, paddingVertical: 12, borderRadius: 12 },
+  uploadBtnText: { color: '#fff', fontWeight: 'bold', fontSize: 14 },
+  previewSection: { marginBottom: 16 },
+  previewImage: { width: '100%', height: 220, borderRadius: 16, marginBottom: 12 },
+  previewActions: { flexDirection: 'row', gap: 10 },
+  retakeBtn: { flexDirection: 'row', alignItems: 'center', gap: 6, borderWidth: 1, borderColor: '#E2E8F0', borderRadius: 12, paddingHorizontal: 16, paddingVertical: 12, backgroundColor: '#fff' },
+  retakeBtnText: { color: '#64748B', fontWeight: '600', fontSize: 14 },
+  analyzeBtn: { flex: 1, borderRadius: 12, overflow: 'hidden' },
+  analyzeBtnGrad: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8, paddingVertical: 14 },
+  analyzeBtnText: { color: '#fff', fontWeight: 'bold', fontSize: 15 },
+  card: { backgroundColor: '#fff', borderRadius: 16, padding: 20, marginBottom: 12, elevation: 2 },
+  cardHeader: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 14 },
+  cardTitle: { fontSize: 15, fontWeight: 'bold', color: '#1E293B' },
+  summaryText: { fontSize: 14, color: '#475569', lineHeight: 22, textAlign: 'center' },
+  doctorAlert: { flexDirection: 'row', alignItems: 'center', gap: 10, backgroundColor: '#FEF2F2', borderRadius: 12, padding: 14, borderWidth: 1, borderColor: '#FCA5A5', marginBottom: 12 },
+  doctorAlertText: { flex: 1, fontSize: 13, color: '#DC2626', fontWeight: '500' },
+  findingItem: { flexDirection: 'row', alignItems: 'flex-start', gap: 10, marginBottom: 10 },
+  findingDot: { width: 8, height: 8, borderRadius: 4, backgroundColor: '#EF4444', marginTop: 6 },
+  findingText: { flex: 1, fontSize: 14, color: '#475569', lineHeight: 20 },
+  suggestionItem: { flexDirection: 'row', alignItems: 'flex-start', gap: 12, marginBottom: 12 },
+  suggestionNum: { width: 26, height: 26, borderRadius: 13, backgroundColor: '#DCFCE7', justifyContent: 'center', alignItems: 'center' },
+  suggestionNumText: { fontSize: 12, fontWeight: 'bold', color: '#10B981' },
+  suggestionText: { flex: 1, fontSize: 14, color: '#475569', lineHeight: 20 },
+  chatBtn: { borderRadius: 14, overflow: 'hidden', marginBottom: 16 },
+  chatBtnGrad: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10, paddingVertical: 15 },
+  chatBtnText: { color: '#fff', fontSize: 16, fontWeight: 'bold' },
+  disclaimer: { fontSize: 11, color: '#94A3B8', textAlign: 'center', lineHeight: 16, paddingHorizontal: 10 },
+});

package/src/components/cards/BookingConfirmationCard.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, Image } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { styles } from '../ChatStyles';
+import { getAbsoluteProfilePicture, getFormattedDoctorName } from '../ChatUtils';
+
+// 7. Booking Confirmation
+export const BookingConfirmationCard = ({ ui, onOptionPress }) => {
+  const [booked, setBooked] = useState(false);
+  const { doctor, date, slot, options } = ui;
+  return (
+    <View style={styles.confirmCard}>
+      <Text style={styles.confirmHeading}>Confirm Your Appointment</Text>
+      <View style={styles.confirmDocRow}>
+        {(() => {
+          const picUri = getAbsoluteProfilePicture(doctor.profile_picture);
+          return picUri ? (
+            <Image source={{ uri: picUri }} style={styles.confirmDocAvatar} />
+          ) : (
+            <View style={[styles.confirmDocAvatar, { backgroundColor: '#FFFFFF', borderWidth: 1, borderColor: '#E2E8F0', justifyContent: 'center', alignItems: 'center' }]}>
+              <Ionicons name="person" size={14} color="#CBD5E1" />
+            </View>
+          );
+        })()}
+        <View style={{ flex: 1, marginLeft: 12 }}>
+          <Text style={styles.confirmDocName}>{getFormattedDoctorName(doctor.name)}</Text>
+          <Text style={styles.confirmDocSpecialty}>{doctor.specialty}</Text>
+        </View>
+      </View>
+      <View style={styles.confirmDetailsBox}>
+        <View style={styles.confirmDetailItem}>
+          <Ionicons name="calendar-outline" size={14} color="#4F46E5" />
+          <Text style={styles.confirmDetailText}>{date}</Text>
+        </View>
+        <View style={styles.confirmDetailItem}>
+          <Ionicons name="time-outline" size={14} color="#4F46E5" />
+          <Text style={styles.confirmDetailText}>{slot}</Text>
+        </View>
+      </View>
+      <View style={styles.confirmActionRow}>
+        {booked ? (
+          <View style={styles.bookedBanner}>
+            <Ionicons name="checkmark-circle" size={18} color="#10B981" />
+            <Text style={styles.bookedBannerText}>Appointment Confirmed!</Text>
+          </View>
+        ) : (
+          options.map((opt) => {
+            const isConfirm = opt.id === 'confirm';
+            return (
+              <TouchableOpacity
+                key={opt.id}
+                style={[styles.confirmBtn, isConfirm ? styles.confirmBtnOk : styles.confirmBtnCancel]}
+                onPress={() => {
+                  if (isConfirm) setBooked(true);
+                  onOptionPress?.(opt);
+                }}
+                activeOpacity={0.8}
+              >
+                <Text style={[styles.confirmBtnText, { color: isConfirm ? '#FFF' : '#EF4444' }]}>
+                  {opt.label}
+                </Text>
+              </TouchableOpacity>
+            );
+          })
+        )}
+      </View>
+    </View>
+  );
+};

package/src/components/cards/DoctorCards.js

@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, Image } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { styles } from '../ChatStyles';
+import { getAbsoluteProfilePicture, getFormattedDoctorName } from '../ChatUtils';
+
+// 4. Doctor Selection List
+export const DoctorSelectionList = ({ options, onOptionPress }) => {
+  const [expanded, setExpanded] = useState(false);
+  const limit = 7;
+  const showViewAll = options.length > limit;
+  const visibleOptions = expanded ? options : options.slice(0, limit);
+
+  return (
+    <View style={styles.doctorListContainer}>
+      {visibleOptions.map((opt) => (
+        <TouchableOpacity
+          key={opt.id}
+          style={styles.doctorCard}
+          onPress={() => onOptionPress?.(opt)}
+          activeOpacity={0.8}
+        >
+          {(() => {
+            const picUri = getAbsoluteProfilePicture(opt.profile_picture);
+            return picUri ? (
+              <Image
+                source={{ uri: picUri }}
+                style={styles.doctorAvatar}
+              />
+            ) : (
+              <View style={[styles.doctorAvatar, { backgroundColor: '#FFFFFF', borderWidth: 1, borderColor: '#E2E8F0', justifyContent: 'center', alignItems: 'center' }]}>
+                <Ionicons name="person" size={20} color="#CBD5E1" />
+              </View>
+            );
+          })()}
+          <View style={styles.doctorDetails}>
+            <Text style={styles.doctorName} numberOfLines={1}>{getFormattedDoctorName(opt.name)}</Text>
+            <Text style={styles.doctorSpecialty} numberOfLines={1}>{opt.specialty}</Text>
+            <Text style={styles.doctorExp}>{opt.experience ? `${opt.experience} Experience` : "No experience listed"}</Text>
+          </View>
+          <View style={styles.doctorRatingCol}>
+            <View style={styles.doctorRatingRow}>
+              <Ionicons name="star" size={10} color="#F59E0B" />
+              <Text style={styles.doctorRatingValue}>{opt.rating || "0.0"}</Text>
+            </View>
+            <Text style={styles.doctorReviewsCount}>({opt.reviews || "0"})</Text>
+          </View>
+          <Ionicons name="chevron-forward" size={16} color="#94A3B8" style={{ marginLeft: 4 }} />
+        </TouchableOpacity>
+      ))}
+
+      {showViewAll && !expanded && (
+        <TouchableOpacity
+          style={styles.viewAllButton}
+          onPress={() => setExpanded(true)}
+          activeOpacity={0.7}
+        >
+          <Text style={styles.viewAllText}>View all {options.length} doctors</Text>
+          <Ionicons name="chevron-forward" size={12} color="#6366F1" />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+// 5. Doctor Profile Card
+export const DoctorProfileCard = ({ doctor, options, onOptionPress }) => {
+  return (
+    <View style={styles.profileCard}>
+      <View style={styles.profileHeader}>
+        {(() => {
+          const picUri = getAbsoluteProfilePicture(doctor.profile_picture);
+          return picUri ? (
+            <Image
+              source={{ uri: picUri }}
+              style={styles.profileAvatar}
+            />
+          ) : (
+            <View style={[styles.profileAvatar, { backgroundColor: '#FFFFFF', borderWidth: 1, borderColor: '#E2E8F0', justifyContent: 'center', alignItems: 'center' }]}>
+              <Ionicons name="person" size={30} color="#CBD5E1" />
+            </View>
+          );
+        })()}
+        <Text style={styles.profileName}>{getFormattedDoctorName(doctor.name)}</Text>
+        <Text style={styles.profileTitleSub}>
+          {doctor.qualification} • {doctor.specialty}
+        </Text>
+        <Text style={styles.profileExperienceText}>
+          {doctor.experience ? `${doctor.experience} Experience` : "No experience listed"}
+        </Text>
+      </View>
+
+      <View style={styles.badgeRow}>
+        <View style={styles.badgeItem}>
+          <Ionicons name="star" size={12} color="#F59E0B" />
+          <Text style={styles.badgeVal}>{doctor.rating || "0.0"}</Text>
+          <Text style={styles.badgeLabel}>({doctor.reviews || "0"} reviews)</Text>
+        </View>
+        <View style={styles.badgeDivider} />
+        <View style={styles.badgeItem}>
+          <Ionicons name="wallet-outline" size={12} color="#10B981" />
+          <Text style={styles.badgeVal}>Rs. {doctor.consultation_fee}</Text>
+          <Text style={styles.badgeLabel}>Consult Fee</Text>
+        </View>
+        <View style={styles.badgeDivider} />
+        <View style={styles.badgeItem}>
+          <Ionicons name="people-outline" size={12} color="#6366F1" />
+          <Text style={styles.badgeVal}>{doctor.patients || "0"}</Text>
+          <Text style={styles.badgeLabel}>Patients</Text>
+        </View>
+      </View>
+
+      <View style={styles.aboutSection}>
+        <Text style={styles.aboutTitle}>About Doctor</Text>
+        <Text style={styles.aboutBody} numberOfLines={4}>
+          {doctor.bio || "Highly experienced practitioner committed to delivering high-quality healthcare and compassionate treatment for patients."}
+        </Text>
+      </View>
+
+      <View style={styles.hospitalSection}>
+        <Text style={styles.aboutTitle}>Available At</Text>
+        <View style={styles.profileHospitalCard}>
+          <View style={styles.hospitalIconCircle}>
+            <Ionicons name="business" size={16} color="#4F46E5" />
+          </View>
+          <View style={{ flex: 1, marginLeft: 10 }}>
+            <Text style={styles.profileHospitalName}>{doctor.hospital_name || "Independent Practice"}</Text>
+            <Text style={styles.profileHospitalAddress}>In-Clinic / Video Consultation</Text>
+          </View>
+        </View>
+      </View>
+
+      <View style={styles.profileActionRow}>
+        {options.map((opt) => {
+          const isYes = opt.id === 'yes' || opt.id === 'confirm';
+          return (
+            <TouchableOpacity
+              key={opt.id}
+              style={[styles.profileBtn, isYes ? styles.profileBtnConfirm : styles.profileBtnCancel]}
+              onPress={() => onOptionPress?.(opt)}
+              activeOpacity={0.8}
+            >
+              <Text style={[styles.profileBtnText, { color: isYes ? '#FFF' : '#EF4444' }]}>
+                {opt.label}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+};

package/src/components/cards/DoctorTypeSelectionCard.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { styles } from '../ChatStyles';
+
+// 1. Doctor Type Selection (Side-by-side cards)
+export const DoctorTypeSelectionCard = ({ options, onOptionPress }) => {
+  return (
+    <View style={styles.typeSelectionGrid}>
+      {options.map((opt) => {
+        const isHospital = opt.id === 'hospital';
+        return (
+          <TouchableOpacity
+            key={opt.id}
+            style={[styles.typeCard, isHospital ? styles.typeCardHospital : styles.typeCardIndividual]}
+            onPress={() => onOptionPress?.(opt)}
+            activeOpacity={0.8}
+          >
+            <View style={[styles.typeIconContainer, { backgroundColor: isHospital ? '#EFF6FF' : '#ECFDF5' }]}>
+              <Ionicons
+                name={isHospital ? "business" : "person"}
+                size={28}
+                color={isHospital ? "#3B82F6" : "#10B981"}
+              />
+            </View>
+            <Text style={[styles.typeTitle, { color: isHospital ? "#1E3A8A" : "#065F46" }]}>
+              {isHospital ? "Hospital Doctors" : "Individual Doctors"}
+            </Text>
+            <Text style={styles.typeSub}>
+              {isHospital ? "Consult with doctors from top hospitals" : "Consult with individual doctors"}
+            </Text>
+            <View style={[styles.typeArrowCircle, { backgroundColor: isHospital ? '#3B82F6' : '#10B981' }]}>
+              <Ionicons name="arrow-forward" size={12} color="#FFF" />
+            </View>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};

package/src/components/cards/HospitalCards.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, Image, Linking, Platform } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { styles } from '../ChatStyles';
+import { getAbsoluteProfilePicture } from '../ChatUtils';
+
+// 2. Hospital Selection List
+export const HospitalSelectionList = ({ options, onOptionPress }) => {
+  return (
+    <View style={styles.hospitalListContainer}>
+      {options.map((opt) => {
+        const logoUri = getAbsoluteProfilePicture(opt.logo_url);
+        return (
+          <TouchableOpacity
+            key={opt.id}
+            style={styles.hospitalCard}
+            onPress={() => onOptionPress?.(opt)}
+            activeOpacity={0.8}
+          >
+            <View style={styles.hospitalLogoBox}>
+              {logoUri ? (
+                <Image source={{ uri: logoUri }} style={styles.hospitalLogoImage} resizeMode="cover" />
+              ) : (
+                <Ionicons name="business" size={20} color="#3B82F6" />
+              )}
+            </View>
+            <View style={styles.hospitalDetails}>
+              <Text style={styles.hospitalName} numberOfLines={1}>{opt.label}</Text>
+              <Text style={styles.hospitalAddress} numberOfLines={1}>{opt.address || 'India'}</Text>
+              {opt.rating != null && (
+                <View style={styles.hospitalRatingRow}>
+                  <Ionicons name="star" size={11} color="#F59E0B" />
+                  <Text style={styles.hospitalRatingText}>
+                    {opt.rating} ({opt.reviews || 0} reviews)
+                  </Text>
+                </View>
+              )}
+            </View>
+            <Ionicons name="chevron-forward" size={18} color="#6366F1" style={styles.chevronRight} />
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+// 3. Hospital Profile Card
+export const HospitalProfileCard = ({ hospital, options, onOptionPress }) => {
+  return (
+    <View style={styles.profileCard}>
+      <View style={styles.profileHeader}>
+        {(() => {
+          const picUri = getAbsoluteProfilePicture(hospital.logo_url);
+          return picUri ? (
+            <Image
+              source={{ uri: picUri }}
+              style={styles.profileAvatar}
+              resizeMode="cover"
+            />
+          ) : (
+            <View style={[styles.profileAvatar, { backgroundColor: '#EFF6FF', borderWidth: 1, borderColor: '#BFDBFE', justifyContent: 'center', alignItems: 'center' }]}>
+              <Ionicons name="business" size={30} color="#3B82F6" />
+            </View>
+          );
+        })()}
+        <View style={styles.profileHeaderRight}>
+          <Text style={styles.profileName} numberOfLines={1}>{hospital.name}</Text>
+          <Text style={styles.profileSpecialty} numberOfLines={2}>{hospital.address || 'India'}</Text>
+          {hospital.rating != null && (
+            <View style={styles.profileRatingBadge}>
+              <Ionicons name="star" size={11} color="#FFF" />
+              <Text style={styles.profileRatingText}>{hospital.rating}</Text>
+              <Text style={styles.profileReviewText}>({hospital.reviews || 0})</Text>
+            </View>
+          )}
+        </View>
+      </View>
+
+      {/* Hospital Extra Info */}
+      <View style={{ marginBottom: 12, gap: 4 }}>
+        {hospital.phone && (
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+            <Ionicons name="call" size={12} color="#64748B" />
+            <Text style={{ fontSize: 11, color: '#64748B' }}>{hospital.phone}</Text>
+          </View>
+        )}
+        {hospital.email && (
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+            <Ionicons name="mail" size={12} color="#64748B" />
+            <Text style={{ fontSize: 11, color: '#64748B' }}>{hospital.email}</Text>
+          </View>
+        )}
+        {hospital.website && (
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+            <Ionicons name="globe" size={12} color="#64748B" />
+            <Text style={{ fontSize: 11, color: '#64748B' }}>{hospital.website}</Text>
+          </View>
+        )}
+      </View>
+
+      <View style={styles.profileStatsRow}>
+        <TouchableOpacity 
+          style={[styles.profileStatBox, { flex: 1, backgroundColor: '#EFF6FF' }]}
+          onPress={() => {
+            const address = hospital.address || hospital.name;
+            const url = Platform.OS === 'ios'
+              ? `http://maps.apple.com/?daddr=${encodeURIComponent(address)}&dirflg=d`
+              : `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(address)}`;
+            Linking.openURL(url);
+          }}
+        >
+          <Ionicons name="location" size={20} color="#3B82F6" />
+          <Text style={[styles.profileStatLabel, { color: '#3B82F6' }]}>Get Directions</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.profileActionRow}>
+        {options.map((opt) => {
+          const isConfirm = opt.id === 'view_doctors';
+          return (
+            <TouchableOpacity
+              key={opt.id}
+              style={[styles.profileBtn, isConfirm ? styles.profileBtnConfirm : styles.profileBtnCancel]}
+              onPress={() => onOptionPress?.(opt)}
+              activeOpacity={0.8}
+            >
+              <Text style={[styles.profileBtnText, { color: isConfirm ? '#FFF' : '#EF4444' }]}>
+                {opt.label}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+};