npx expo install @gorhom/bottom-sheet react-native-pdf react-native-image-viewing \
  react-native-toast-message react-hook-form zod expo-haptics react-native-webview

"plugins": [
  "expo-router",
  "expo-secure-store",
  ["expo-local-authentication", { "faceIDPermission": "Allow OdontoX to use Face ID for secure access" }],
  ["expo-notifications", { "color": "#5048E5" }],
  "expo-sharing",
  "react-native-pdf",
  "react-native-webview"
]

// In RootLayout component, after useEffect({ initialize })
useEffect(() => {
  let backgroundedAt: number | null = null;
  const LOCK_AFTER_MS = 15 * 60 * 1000; // 15 min

  const sub = AppState.addEventListener('change', async (state) => {
    if (state === 'background') {
      backgroundedAt = Date.now();
      // Flush user from memory (keeps jwt+pin in SecureStore)
      useAuthStore.getState().suspendSession();
    }
    if (state === 'active' && backgroundedAt !== null) {
      const elapsed = Date.now() - backgroundedAt;
      if (elapsed > LOCK_AFTER_MS) {
        // Full re-login required
        await useAuthStore.getState().logout();
      } else {
        // Re-auth with biometric or PIN
        useAuthStore.getState().requireReauth();
      }
      backgroundedAt = null;
    }
  });
  return () => sub.remove();
}, []);

// SlotGrid renders a 3-column grid of time slots
// Selected slot highlighted with brand indigo
// clinicClosed / doctorOff states show contextual empty state with clinic phone
// Loading: shows 9 shimmer placeholders

Step 1: Date selection
  └─ react-native-calendars Calendar
  └─ Disable past dates (minDate = today)
  └─ On day select → fetch slots

Step 2: Slot selection
  └─ SlotGrid component
  └─ Selected slot persisted in react-hook-form

Step 3: Confirm
  └─ Appointment type (Checkup / Cleaning / Emergency / Consultation)
  └─ Notes (optional, TextInput)
  └─ Submit → POST /protected/appointments
     body: { appointmentDate, appointmentTime, appointmentType, notes, status: 'requested' }

const bookingSchema = z.object({
  date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
  time: z.string().regex(/^\d{2}:\d{2}$/),
  appointmentType: z.enum(['checkup', 'cleaning', 'emergency', 'consultation', 'other']),
  notes: z.string().max(500).optional(),
});

→ Confirmation alert
→ PATCH /protected/appointments/:id/status { status: 'cancelled' }
→ Server applies canCancelAppointment rule (48h window)
→ If blocked: surface rule engine message in toast
→ If success: navigate back, invalidate appointments query

// After upcoming list, show past section:
{past.length > 0 && (
  <View style={s.sectionHeader}>
    <Text style={s.sectionTitle}>Past Appointments</Text>
  </View>
)}
// Past items rendered with muted styling (opacity 0.7, grey status badge)
// Tappable → appointment detail (read-only, no cancel button for past)

// After successful verifyPin or biometric in pin.tsx:
async function registerPushToken() {
  const { status } = await Notifications.requestPermissionsAsync();
  if (status !== 'granted') return;
  const token = await Notifications.getExpoPushTokenAsync({
    projectId: Constants.expoConfig?.extra?.eas?.projectId,
  });
  // POST to existing endpoint
  await papi.post('/user-devices', {
    pushToken: token.data,
    deviceModel: Device.modelName,
    osVersion: Device.osVersion,
    appVersion: Application.nativeApplicationVersion,
    bundleId: Application.applicationId,
  });
}

// In RootLayout:
useEffect(() => {
  // Foreground: suppress OS banner, show in-app toast
  const sub1 = Notifications.addNotificationReceivedListener(notification => {
    Toast.show({
      type: 'info',
      text1: notification.request.content.title ?? 'OdontoX',
      text2: notification.request.content.body ?? '',
    });
  });

  // Tap on notification (background/killed): deep link
  const sub2 = Notifications.addNotificationResponseReceivedListener(response => {
    const url = response.notification.request.content.data?.url as string;
    if (url) router.push(url as never);
  });

  return () => { sub1.remove(); sub2.remove(); };
}, []);

// Client fallback: fetch appointments for current week
// GET /protected/appointments?startDate=MON&endDate=SUN&limit=200
// Group by appointmentDate, count per day → build WEEK_CHART from real data

import Pdf from 'react-native-pdf';

// PdfViewer screen receives { url: string, title: string }
// 1. Download signed URL via expo-file-system to cache
// 2. Render with react-native-pdf (native iOS/Android renderer)
// 3. Header with back button + share button (expo-sharing)
// 4. Loading progress bar during download

import ImageViewing from 'react-native-image-viewing';
// Shows X-ray images, patient photos, uploaded files
// Pinch-zoom, swipe gallery for multiple images
// Share button via expo-sharing

// If biometricAvailable && !enrolled:
//   Show "Enable Face ID" button
//   On press: attempt authenticateAsync() → if success, store flag in SecureStore
//   Future PIN verifications → try biometric first automatically (already done in pin.tsx)

// If enrolled:
//   Show "Disable Face ID" toggle
//   On disable: remove flag from SecureStore

import * as Haptics from 'expo-haptics';

// On each digit press:
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

// On PIN success:
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);

// On PIN failure:
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);

// app/_layout.tsx
import Toast from 'react-native-toast-message';

// At end of QueryClientProvider JSX:
<>
  <StatusBar style="auto" />
  <AuthGate />
  <Toast />
</>

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal",
      "ios": { "buildConfiguration": "Release" },
      "android": { "buildType": "apk" }
    },
    "production": {
      "autoIncrement": true,
      "android": { "buildType": "aab" }
    }
  }
}

# Build preview .ipa (real native, Release config, no App Store)
eas build --platform ios --profile preview

# Install options (pick one):
# A. TestFlight: eas submit --platform ios --profile preview
#    → App Store Connect → TestFlight → add your Apple ID as tester → install via TestFlight app
# B. Direct: download .ipa from EAS dashboard → Apple Configurator 2 → drag to connected device
# C. AltStore: install AltStore on device → sideload .ipa (free, no Apple account needed)

# Build preview .apk (direct install, no Play Store)
eas build --platform android --profile preview

# Install:
# A. Direct: download .apk → email/AirDrop to Android → tap to install
#    (Settings → Security → Install unknown apps → allow)
# B. Google Play Internal Testing: upload .aab to Play Console → Internal Testing track
#    → share opt-in link with yourself → install via Play Store. No review. Instant.

Auth:
[ ] Login with each role (patient/doctor/admin/receptionist)
[ ] PIN setup on first login
[ ] Biometric fallback
[ ] Background for 16+ min → re-login required
[ ] Background for < 15 min → PIN re-auth only

Patient:
[ ] Home shows next appointment + stats
[ ] Book appointment → date picker → slot grid → confirm → appointment appears in list
[ ] Cancel appointment (< 48h before → error shown, > 48h → success)
[ ] Past appointments visible and tappable
[ ] Records list → tap prescription → detail screen
[ ] Records list → tap file → PDF viewer renders
[ ] Bills → tap invoice → PDF downloads and renders in-app

Doctor:
[ ] Home shows TODAY's own appointments only
[ ] Appointment detail → mark in-progress → mark completed
[ ] Patient list → patient detail → clinical notes visible
[ ] Chat message send/receive

Receptionist:
[ ] Today queue on home, sorted by time
[ ] Check-in appointment (status → in_progress)
[ ] Finance → invoices + receipts, PDF viewer

Admin:
[ ] KPIs on home (real data)
[ ] Weekly chart shows real week data
[ ] Finance tab shows all clinic invoices

Notifications:
[ ] Push notification received while app is open → in-app toast shows
[ ] Push notification received while app is closed → tap opens correct screen
[ ] Notifications screen shows all notifications

code changes
    ↓
eas build --profile preview (iOS + Android in parallel)
    ↓
Install on physical devices and run checklist above
    ↓
eas build --profile production
    ↓
iOS: eas submit --platform ios → App Store Connect → Submit for Review (~24-48h)
Android: eas submit --platform android --track internal → Internal Testing (instant)
         → when ready: promote to Production track (~3-7h review)