// odontox-app/components/ui/SlotGrid.tsx
import { useEffect, useState } from 'react';
import {
  View, Text, Pressable, StyleSheet, ActivityIndicator,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { Colors, Typography, Spacing } from '@/constants/theme';
import { papi } from '@/lib/api';

interface SlotsResponse {
  slots: string[];
  clinicClosed: boolean;
  doctorOff: boolean;
  clinicPhone: string | null;
}

interface SlotGridProps {
  date: string;          // 'YYYY-MM-DD', empty string = no date yet
  doctorId?: string;
  selected: string;      // currently selected slot 'HH:MM' or ''
  onSelect: (slot: string) => void;
}

export function SlotGrid({ date, doctorId, selected, onSelect }: SlotGridProps) {
  const [data, setData] = useState<SlotsResponse | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!date) { setData(null); return; }
    setLoading(true);
    const params = new URLSearchParams({ date });
    if (doctorId) params.set('doctorId', doctorId);
    papi.get<SlotsResponse>(`/appointments/available-slots?${params}`)
      .then(res => setData(res))
      .catch(() => setData(null))
      .finally(() => setLoading(false));
  }, [date, doctorId]);

  if (!date) {
    return <Text style={s.hint}>Select a date to see available times.</Text>;
  }

  if (loading) {
    return (
      <View style={s.loadingRow}>
        <ActivityIndicator color={Colors.brand} size="small" />
        <Text style={s.hint}>Loading slots…</Text>
      </View>
    );
  }

  if (!data) return null;

  if (data.clinicClosed || data.doctorOff || data.slots.length === 0) {
    const reason = data.clinicClosed
      ? 'Clinic is closed on this day.'
      : data.doctorOff
      ? 'Doctor is unavailable on this day.'
      : 'No available slots for this day.';
    return (
      <View style={s.emptyBox}>
        <Ionicons name="calendar-outline" size={20} color={Colors.textMuted} />
        <Text style={s.emptyText}>{reason}</Text>
        {data.clinicPhone ? (
          <Text style={s.phone}>{data.clinicPhone}</Text>
        ) : null}
      </View>
    );
  }

  return (
    <View style={s.grid}>
      {data.slots.map(slot => (
        <Pressable
          key={slot}
          onPress={() => onSelect(slot)}
          style={({ pressed }) => [
            s.slot,
            selected === slot && s.slotSelected,
            pressed && { opacity: 0.7 },
          ]}
        >
          <Text style={[s.slotText, selected === slot && s.slotTextSelected]}>{slot}</Text>
        </Pressable>
      ))}
    </View>
  );
}

const s = StyleSheet.create({
  hint: { fontSize: Typography.sm, color: Colors.textMuted, textAlign: 'center', paddingVertical: Spacing.md },
  loadingRow: { flexDirection: 'row', alignItems: 'center', gap: Spacing.sm, paddingVertical: Spacing.md },
  emptyBox: {
    alignItems: 'center',
    gap: Spacing.sm,
    padding: Spacing.lg,
    borderWidth: 1,
    borderStyle: 'dashed',
    borderColor: Colors.border,
    borderRadius: 12,
  },
  emptyText: { fontSize: Typography.sm, color: Colors.textMuted, textAlign: 'center' },
  phone: { fontSize: Typography.sm, fontWeight: '600', color: Colors.brand },
  grid: { flexDirection: 'row', flexWrap: 'wrap', gap: Spacing.sm },
  slot: {
    paddingHorizontal: 14,
    paddingVertical: 8,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: Colors.border,
    backgroundColor: Colors.surface,
  },
  slotSelected: { backgroundColor: Colors.brand, borderColor: Colors.brand },
  slotText: { fontSize: Typography.sm, color: Colors.text, fontWeight: '500' },
  slotTextSelected: { color: '#fff' },
});

git add odontox-app/components/ui/SlotGrid.tsx
git commit -m "feat(mobile): add SlotGrid component wired to available-slots rule engine"

// odontox-app/components/booking/BookingSheet.tsx
import { forwardRef, useCallback, useMemo } from 'react';
import {
  View, Text, StyleSheet, Pressable, ScrollView,
  KeyboardAvoidingView, Platform, ActivityIndicator,
} from 'react-native';
import BottomSheet, {
  BottomSheetScrollView,
  BottomSheetBackdrop,
} from '@gorhom/bottom-sheet';
import { Calendar } from 'react-native-calendars';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import Toast from 'react-native-toast-message';
import { Colors, Typography, Spacing } from '@/constants/theme';
import { SlotGrid } from '@/components/ui/SlotGrid';
import { papi } from '@/lib/api';

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

type BookingForm = z.infer<typeof bookingSchema>;

const TYPES = [
  { value: 'checkup', label: 'Checkup' },
  { value: 'cleaning', label: 'Cleaning' },
  { value: 'emergency', label: 'Emergency' },
  { value: 'consultation', label: 'Consultation' },
  { value: 'other', label: 'Other' },
] as const;

const today = new Date().toISOString().split('T')[0];

const CAL_THEME = {
  selectedDayBackgroundColor: Colors.brand,
  selectedDayTextColor: '#fff',
  todayTextColor: Colors.brand,
  arrowColor: Colors.brand,
  dotColor: Colors.brand,
};

interface BookingSheetProps {
  onSuccess?: () => void;
}

export const BookingSheet = forwardRef<BottomSheet, BookingSheetProps>(
  function BookingSheet({ onSuccess }, ref) {
    const snapPoints = useMemo(() => ['75%', '95%'], []);

    const { control, handleSubmit, watch, setValue, reset, formState: { isSubmitting, errors } } = useForm<BookingForm>({
      resolver: zodResolver(bookingSchema),
      defaultValues: { date: '', time: '', appointmentType: 'checkup', notes: '' },
    });

    const selectedDate = watch('date');
    const selectedTime = watch('time');

    const renderBackdrop = useCallback(
      (props: any) => <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} />,
      [],
    );

    async function onSubmit(data: BookingForm) {
      try {
        await papi.post('/appointments', {
          appointmentDate: data.date,
          appointmentTime: data.time,
          appointmentType: data.appointmentType,
          notes: data.notes || null,
          status: 'requested',
        });
        Toast.show({ type: 'success', text1: 'Appointment requested', text2: 'The clinic will confirm shortly.' });
        reset();
        (ref as any)?.current?.close();
        onSuccess?.();
      } catch (e: unknown) {
        const msg = e instanceof Error ? e.message : 'Failed to request appointment';
        Toast.show({ type: 'error', text1: 'Could not book', text2: msg });
      }
    }

    return (
      <BottomSheet
        ref={ref}
        index={-1}
        snapPoints={snapPoints}
        enablePanDownToClose
        backdropComponent={renderBackdrop}
        backgroundStyle={{ backgroundColor: Colors.surface }}
        handleIndicatorStyle={{ backgroundColor: Colors.border }}
      >
        <BottomSheetScrollView contentContainerStyle={s.container}>
          <Text style={s.heading}>Book Appointment</Text>

          {/* Date picker */}
          <Text style={s.label}>Select Date</Text>
          <Controller
            control={control}
            name="date"
            render={() => (
              <Calendar
                minDate={today}
                onDayPress={day => {
                  setValue('date', day.dateString, { shouldValidate: true });
                  setValue('time', ''); // reset time when date changes
                }}
                markedDates={selectedDate ? { [selectedDate]: { selected: true, selectedColor: Colors.brand } } : {}}
                theme={CAL_THEME}
                hideExtraDays
                enableSwipeMonths
              />
            )}
          />
          {errors.date && <Text style={s.error}>{errors.date.message}</Text>}

          {/* Time slots */}
          <Text style={[s.label, { marginTop: Spacing.md }]}>Available Times</Text>
          <Controller
            control={control}
            name="time"
            render={() => (
              <SlotGrid
                date={selectedDate}
                selected={selectedTime}
                onSelect={slot => setValue('time', slot, { shouldValidate: true })}
              />
            )}
          />
          {errors.time && <Text style={s.error}>{errors.time.message}</Text>}

          {/* Appointment type */}
          <Text style={[s.label, { marginTop: Spacing.md }]}>Type</Text>
          <Controller
            control={control}
            name="appointmentType"
            render={({ field: { value, onChange } }) => (
              <View style={s.typeRow}>
                {TYPES.map(t => (
                  <Pressable
                    key={t.value}
                    onPress={() => onChange(t.value)}
                    style={[s.typeChip, value === t.value && s.typeChipSelected]}
                  >
                    <Text style={[s.typeText, value === t.value && s.typeTextSelected]}>{t.label}</Text>
                  </Pressable>
                ))}
              </View>
            )}
          />

          {/* Submit */}
          <Pressable
            onPress={handleSubmit(onSubmit)}
            disabled={isSubmitting}
            style={({ pressed }) => [s.btn, pressed && { opacity: 0.8 }, isSubmitting && { opacity: 0.6 }]}
          >
            {isSubmitting
              ? <ActivityIndicator color="#fff" />
              : <Text style={s.btnText}>Request Appointment</Text>}
          </Pressable>
        </BottomSheetScrollView>
      </BottomSheet>
    );
  }
);

const s = StyleSheet.create({
  container: { padding: Spacing.lg, paddingBottom: 60 },
  heading: { fontSize: Typography.xl, fontWeight: '700', color: Colors.text, marginBottom: Spacing.lg },
  label: { fontSize: Typography.sm, fontWeight: '600', color: Colors.textSecondary, marginBottom: Spacing.sm },
  error: { fontSize: Typography.xs, color: Colors.error, marginTop: 4 },
  typeRow: { flexDirection: 'row', flexWrap: 'wrap', gap: Spacing.sm },
  typeChip: {
    paddingHorizontal: 14, paddingVertical: 8,
    borderRadius: 20, borderWidth: 1, borderColor: Colors.border,
    backgroundColor: Colors.surface,
  },
  typeChipSelected: { backgroundColor: Colors.brand, borderColor: Colors.brand },
  typeText: { fontSize: Typography.sm, color: Colors.text },
  typeTextSelected: { color: '#fff', fontWeight: '600' },
  btn: {
    marginTop: Spacing.xl,
    backgroundColor: Colors.brand,
    borderRadius: 12,
    paddingVertical: 16,
    alignItems: 'center',
  },
  btnText: { color: '#fff', fontSize: Typography.base, fontWeight: '700' },
});

git add odontox-app/components/booking/BookingSheet.tsx
git commit -m "feat(mobile): add patient BookingSheet with calendar + slot grid + react-hook-form"

// odontox-app/hooks/useRecentPatients.ts
import { useEffect, useState, useCallback } from 'react';
import * as SecureStore from 'expo-secure-store';
import { papi } from '@/lib/api';

export interface PatientSummary {
  id: string;
  name: string;
  patientNumber: string | null;
}

const STORAGE_KEY = 'odx_recent_patients_v1';
const MAX_RECENT = 20;

async function loadFrequencyMap(): Promise<Record<string, number>> {
  const raw = await SecureStore.getItemAsync(STORAGE_KEY);
  return raw ? (JSON.parse(raw) as Record<string, number>) : {};
}

async function bumpFrequency(patientId: string) {
  const map = await loadFrequencyMap();
  map[patientId] = (map[patientId] ?? 0) + 1;
  // Keep only top MAX_RECENT by frequency
  const sorted = Object.entries(map)
    .sort((a, b) => b[1] - a[1])
    .slice(0, MAX_RECENT);
  await SecureStore.setItemAsync(STORAGE_KEY, JSON.stringify(Object.fromEntries(sorted)));
}

export function useRecentPatients() {
  const [recentIds, setRecentIds] = useState<string[]>([]);
  const [recentPatients, setRecentPatients] = useState<PatientSummary[]>([]);
  const [searchResults, setSearchResults] = useState<PatientSummary[]>([]);
  const [searching, setSearching] = useState(false);

  useEffect(() => {
    loadFrequencyMap().then(map => {
      const sorted = Object.entries(map)
        .sort((a, b) => b[1] - a[1])
        .slice(0, MAX_RECENT)
        .map(([id]) => id);
      setRecentIds(sorted);
    });
  }, []);

  useEffect(() => {
    if (recentIds.length === 0) return;
    // Fetch patient names for recent IDs
    papi.get<{ data: PatientSummary[] }>(`/patients?limit=50`)
      .then(res => {
        const all = res.data ?? (Array.isArray(res) ? res : []);
        const recentMap = new Map(recentIds.map((id, i) => [id, i]));
        const filtered = (all as any[])
          .filter(p => recentMap.has(p.id))
          .sort((a, b) => (recentMap.get(a.id) ?? 99) - (recentMap.get(b.id) ?? 99))
          .map(p => ({
            id: p.id,
            name: `${p.firstName} ${p.lastName}`,
            patientNumber: p.patientNumber ?? null,
          }));
        setRecentPatients(filtered);
      })
      .catch(() => {});
  }, [recentIds]);

  const search = useCallback(async (query: string) => {
    if (query.trim().length < 2) { setSearchResults([]); return; }
    setSearching(true);
    try {
      const res = await papi.get<any>(`/patients?search=${encodeURIComponent(query.trim())}&limit=20`);
      const all = Array.isArray(res) ? res : (res?.data ?? []);
      setSearchResults(all.map((p: any) => ({
        id: p.id,
        name: `${p.firstName} ${p.lastName}`,
        patientNumber: p.patientNumber ?? null,
      })));
    } catch {}
    finally { setSearching(false); }
  }, []);

  return { recentPatients, searchResults, searching, search, bumpFrequency };
}

// odontox-app/components/booking/StaffBookingSheet.tsx
import { forwardRef, useCallback, useMemo, useState } from 'react';
import {
  View, Text, StyleSheet, Pressable, TextInput,
  FlatList, ActivityIndicator,
} from 'react-native';
import BottomSheet, { BottomSheetScrollView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
import { Calendar } from 'react-native-calendars';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import Toast from 'react-native-toast-message';
import { Ionicons } from '@expo/vector-icons';
import { Colors, Typography, Spacing } from '@/constants/theme';
import { SlotGrid } from '@/components/ui/SlotGrid';
import { useRecentPatients, type PatientSummary } from '@/hooks/useRecentPatients';
import { papi } from '@/lib/api';
import { useAuthStore } from '@/store/auth';

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

type StaffBookingForm = z.infer<typeof staffBookingSchema>;

const TYPES = [
  { value: 'checkup', label: 'Checkup' },
  { value: 'cleaning', label: 'Cleaning' },
  { value: 'emergency', label: 'Emergency' },
  { value: 'consultation', label: 'Consultation' },
  { value: 'other', label: 'Other' },
] as const;

const today = new Date().toISOString().split('T')[0];

const CAL_THEME = {
  selectedDayBackgroundColor: Colors.brand,
  selectedDayTextColor: '#fff',
  todayTextColor: Colors.brand,
  arrowColor: Colors.brand,
};

interface StaffBookingSheetProps {
  onSuccess?: () => void;
}

export const StaffBookingSheet = forwardRef<BottomSheet, StaffBookingSheetProps>(
  function StaffBookingSheet({ onSuccess }, ref) {
    const { user } = useAuthStore();
    const snapPoints = useMemo(() => ['90%', '95%'], []);
    const [searchQuery, setSearchQuery] = useState('');
    const [selectedPatient, setSelectedPatient] = useState<PatientSummary | null>(null);

    const { recentPatients, searchResults, searching, search, bumpFrequency } = useRecentPatients();

    const { control, handleSubmit, watch, setValue, reset, formState: { isSubmitting, errors } } = useForm<StaffBookingForm>({
      resolver: zodResolver(staffBookingSchema),
      defaultValues: { patientId: '', date: '', time: '', appointmentType: 'checkup', notes: '' },
    });

    const selectedDate = watch('date');
    const selectedTime = watch('time');

    // Staff (doctor) see their own ID as doctorId for slot filtering
    const doctorIdForSlots = user?.role === 'doctor' ? user.id : undefined;

    const renderBackdrop = useCallback(
      (props: any) => <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} />,
      [],
    );

    function selectPatient(patient: PatientSummary) {
      setSelectedPatient(patient);
      setValue('patientId', patient.id, { shouldValidate: true });
      setSearchQuery('');
    }

    async function onSubmit(data: StaffBookingForm) {
      try {
        await papi.post('/appointments', {
          patientId: data.patientId,
          appointmentDate: data.date,
          appointmentTime: data.time,
          appointmentType: data.appointmentType,
          notes: data.notes || null,
          status: 'scheduled',
          ...(user?.role === 'doctor' ? { doctorId: user.id } : {}),
        });
        await bumpFrequency(data.patientId);
        Toast.show({ type: 'success', text1: 'Appointment scheduled' });
        reset();
        setSelectedPatient(null);
        setSearchQuery('');
        (ref as any)?.current?.close();
        onSuccess?.();
      } catch (e: unknown) {
        const msg = e instanceof Error ? e.message : 'Failed to create appointment';
        Toast.show({ type: 'error', text1: 'Could not schedule', text2: msg });
      }
    }

    const displayList = searchQuery.length >= 2 ? searchResults : recentPatients;
    const listLabel = searchQuery.length >= 2 ? 'Search results' : 'Recent patients';

    return (
      <BottomSheet
        ref={ref}
        index={-1}
        snapPoints={snapPoints}
        enablePanDownToClose
        backdropComponent={renderBackdrop}
        backgroundStyle={{ backgroundColor: Colors.surface }}
        handleIndicatorStyle={{ backgroundColor: Colors.border }}
        keyboardBehavior="interactive"
        keyboardBlurBehavior="restore"
      >
        <BottomSheetScrollView contentContainerStyle={s.container} keyboardShouldPersistTaps="handled">
          <Text style={s.heading}>New Appointment</Text>

          {/* Patient selection */}
          <Text style={s.label}>Patient</Text>
          {selectedPatient ? (
            <Pressable style={s.selectedPatient} onPress={() => { setSelectedPatient(null); setValue('patientId', ''); }}>
              <View style={{ flex: 1 }}>
                <Text style={s.patientName}>{selectedPatient.name}</Text>
                {selectedPatient.patientNumber && (
                  <Text style={s.patientNum}>#{selectedPatient.patientNumber}</Text>
                )}
              </View>
              <Ionicons name="close-circle" size={20} color={Colors.textMuted} />
            </Pressable>
          ) : (
            <>
              <TextInput
                style={s.searchInput}
                placeholder="Search by name…"
                placeholderTextColor={Colors.textMuted}
                value={searchQuery}
                onChangeText={q => { setSearchQuery(q); search(q); }}
                autoCapitalize="words"
                returnKeyType="search"
              />
              <Text style={s.listLabel}>{listLabel}</Text>
              {searching && <ActivityIndicator color={Colors.brand} style={{ marginVertical: 8 }} />}
              {displayList.map(p => (
                <Pressable
                  key={p.id}
                  style={({ pressed }) => [s.patientRow, pressed && { opacity: 0.7 }]}
                  onPress={() => selectPatient(p)}
                >
                  <Text style={s.patientRowName}>{p.name}</Text>
                  {p.patientNumber && <Text style={s.patientNum}>#{p.patientNumber}</Text>}
                </Pressable>
              ))}
            </>
          )}
          {errors.patientId && <Text style={s.error}>{errors.patientId.message}</Text>}

          {/* Date */}
          <Text style={[s.label, { marginTop: Spacing.md }]}>Date</Text>
          <Controller
            control={control}
            name="date"
            render={() => (
              <Calendar
                minDate={today}
                onDayPress={day => {
                  setValue('date', day.dateString, { shouldValidate: true });
                  setValue('time', '');
                }}
                markedDates={selectedDate ? { [selectedDate]: { selected: true, selectedColor: Colors.brand } } : {}}
                theme={CAL_THEME}
                hideExtraDays
                enableSwipeMonths
              />
            )}
          />
          {errors.date && <Text style={s.error}>{errors.date.message}</Text>}

          {/* Slots */}
          <Text style={[s.label, { marginTop: Spacing.md }]}>Time</Text>
          <Controller
            control={control}
            name="time"
            render={() => (
              <SlotGrid
                date={selectedDate}
                doctorId={doctorIdForSlots}
                selected={selectedTime}
                onSelect={slot => setValue('time', slot, { shouldValidate: true })}
              />
            )}
          />
          {errors.time && <Text style={s.error}>{errors.time.message}</Text>}

          {/* Type */}
          <Text style={[s.label, { marginTop: Spacing.md }]}>Type</Text>
          <Controller
            control={control}
            name="appointmentType"
            render={({ field: { value, onChange } }) => (
              <View style={s.typeRow}>
                {TYPES.map(t => (
                  <Pressable
                    key={t.value}
                    onPress={() => onChange(t.value)}
                    style={[s.typeChip, value === t.value && s.typeChipSelected]}
                  >
                    <Text style={[s.typeText, value === t.value && s.typeTextSelected]}>{t.label}</Text>
                  </Pressable>
                ))}
              </View>
            )}
          />

          <Pressable
            onPress={handleSubmit(onSubmit)}
            disabled={isSubmitting}
            style={({ pressed }) => [s.btn, pressed && { opacity: 0.8 }, isSubmitting && { opacity: 0.6 }]}
          >
            {isSubmitting
              ? <ActivityIndicator color="#fff" />
              : <Text style={s.btnText}>Schedule Appointment</Text>}
          </Pressable>
        </BottomSheetScrollView>
      </BottomSheet>
    );
  }
);

const s = StyleSheet.create({
  container: { padding: Spacing.lg, paddingBottom: 80 },
  heading: { fontSize: Typography.xl, fontWeight: '700', color: Colors.text, marginBottom: Spacing.lg },
  label: { fontSize: Typography.sm, fontWeight: '600', color: Colors.textSecondary, marginBottom: Spacing.sm },
  error: { fontSize: Typography.xs, color: Colors.error, marginTop: 4 },
  searchInput: {
    backgroundColor: Colors.surface,
    borderWidth: 1,
    borderColor: Colors.border,
    borderRadius: 10,
    paddingHorizontal: Spacing.md,
    paddingVertical: 10,
    fontSize: Typography.base,
    color: Colors.text,
    marginBottom: Spacing.sm,
  },
  listLabel: { fontSize: Typography.xs, color: Colors.textMuted, marginBottom: 4 },
  patientRow: {
    paddingVertical: 10,
    paddingHorizontal: Spacing.sm,
    borderBottomWidth: 1,
    borderBottomColor: Colors.border,
  },
  patientRowName: { fontSize: Typography.base, color: Colors.text },
  patientNum: { fontSize: Typography.xs, color: Colors.textMuted },
  selectedPatient: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: Colors.brandSurface,
    borderRadius: 10,
    padding: Spacing.md,
    borderWidth: 1,
    borderColor: Colors.brand + '40',
  },
  patientName: { fontSize: Typography.base, fontWeight: '600', color: Colors.text },
  typeRow: { flexDirection: 'row', flexWrap: 'wrap', gap: Spacing.sm },
  typeChip: {
    paddingHorizontal: 14, paddingVertical: 8,
    borderRadius: 20, borderWidth: 1, borderColor: Colors.border,
    backgroundColor: Colors.surface,
  },
  typeChipSelected: { backgroundColor: Colors.brand, borderColor: Colors.brand },
  typeText: { fontSize: Typography.sm, color: Colors.text },
  typeTextSelected: { color: '#fff', fontWeight: '600' },
  btn: {
    marginTop: Spacing.xl,
    backgroundColor: Colors.brand,
    borderRadius: 12,
    paddingVertical: 16,
    alignItems: 'center',
  },
  btnText: { color: '#fff', fontSize: Typography.base, fontWeight: '700' },
});

git add odontox-app/hooks/useRecentPatients.ts odontox-app/components/booking/StaffBookingSheet.tsx
git commit -m "feat(mobile): add StaffBookingSheet with recent/search patient selector"

import { useRef, useCallback } from 'react';
import type BottomSheet from '@gorhom/bottom-sheet';
import { BookingSheet } from '@/components/booking/BookingSheet';

const bookingRef = useRef<BottomSheet>(null);
const openBooking = useCallback(() => bookingRef.current?.snapToIndex(0), []);
const { refetch } = /* existing load call */ ;

{!summary?.metrics.nextAppointment && (
  <Pressable
    onPress={openBooking}
    style={({ pressed }) => [s.bookBtn, pressed && { opacity: 0.8 }]}
  >
    <Ionicons name="calendar-plus-outline" size={20} color="#fff" />
    <Text style={s.bookBtnText}>Book Appointment</Text>
  </Pressable>
)}

bookBtn: {
  backgroundColor: Colors.brand,
  borderRadius: 14,
  padding: Spacing.md,
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'center',
  gap: Spacing.sm,
},
bookBtnText: { color: '#fff', fontSize: Typography.base, fontWeight: '700' },

<BookingSheet ref={bookingRef} onSuccess={() => load(true)} />

import { useRef, useCallback } from 'react';
import type BottomSheet from '@gorhom/bottom-sheet';
import { BookingSheet } from '@/components/booking/BookingSheet';

const bookingRef = useRef<BottomSheet>(null);
const openBooking = useCallback(() => bookingRef.current?.snapToIndex(0), []);

// Replace: const listData = viewMode === 'upcoming' ? upcoming : dayAppointments;
// With:
const listData = viewMode === 'upcoming'
  ? [
      ...upcoming.map(a => ({ ...a, _section: 'upcoming' as const })),
      ...past.map(a => ({ ...a, _section: 'past' as const })),
    ]
  : dayAppointments.map(a => ({ ...a, _section: 'day' as const }));

function renderItem({ item, index }: { item: typeof listData[0]; index: number }) {
  const prevItem = index > 0 ? listData[index - 1] : null;
  const showPastDivider = item._section === 'past' && prevItem?._section !== 'past';

  return (
    <>
      {showPastDivider && (
        <Text style={s.sectionDivider}>Past Appointments</Text>
      )}
      <Pressable
        onPress={() => router.push({ pathname: '/(patient)/appointments/[id]', params: { id: item.id } })}
        style={({ pressed }) => [s.row, item._section === 'past' && { opacity: 0.6 }, pressed && { opacity: 0.5 }]}
      >
        <View style={{ flex: 1 }}>
          <Text style={s.rowDate}>{item.appointmentDate}</Text>
          {item.appointmentTime ? <Text style={s.rowSub}>{item.appointmentTime}</Text> : null}
          {item.appointmentType ? <Text style={s.rowType}>{item.appointmentType}</Text> : null}
        </View>
        <StatusBadge status={item.status} />
        <Ionicons name="chevron-forward" size={16} color={Colors.textMuted} />
      </Pressable>
    </>
  );
}

sectionDivider: {
  fontSize: Typography.xs,
  fontWeight: '700',
  color: Colors.textMuted,
  textTransform: 'uppercase',
  letterSpacing: 0.8,
  paddingVertical: Spacing.sm,
  marginTop: Spacing.sm,
},

<Pressable
  onPress={openBooking}
  style={({ pressed }) => [s.fab, pressed && { opacity: 0.8 }]}
>
  <Ionicons name="add" size={28} color="#fff" />
</Pressable>
<BookingSheet ref={bookingRef} onSuccess={() => loadUpcoming(true)} />

fab: {
  position: 'absolute',
  bottom: 24,
  right: 24,
  width: 56,
  height: 56,
  borderRadius: 28,
  backgroundColor: Colors.brand,
  alignItems: 'center',
  justifyContent: 'center',
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 4 },
  shadowOpacity: 0.2,
  shadowRadius: 8,
  elevation: 8,
},

import { Alert } from 'react-native';
import Toast from 'react-native-toast-message';

async function handleCancel() {
  Alert.alert(
    'Cancel Appointment',
    'Are you sure you want to cancel this appointment?',
    [
      { text: 'Keep', style: 'cancel' },
      {
        text: 'Cancel Appointment',
        style: 'destructive',
        onPress: async () => {
          try {
            await papi.patch(`/appointments/${id}/status`, { status: 'cancelled' });
            Toast.show({ type: 'success', text1: 'Appointment cancelled' });
            load(true);
          } catch (e: unknown) {
            const msg = e instanceof Error ? e.message : 'Could not cancel';
            Toast.show({ type: 'error', text1: 'Cancellation failed', text2: msg });
          }
        },
      },
    ],
  );
}

{data && ['requested', 'scheduled', 'confirmed'].includes(data.status) && (
  <Pressable
    onPress={handleCancel}
    style={({ pressed }) => [s.cancelBtn, pressed && { opacity: 0.7 }]}
  >
    <Text style={s.cancelBtnText}>Cancel Appointment</Text>
  </Pressable>
)}

cancelBtn: {
  marginTop: Spacing.sm,
  borderRadius: 12,
  borderWidth: 1,
  borderColor: Colors.error,
  paddingVertical: 14,
  alignItems: 'center',
},
cancelBtnText: { color: Colors.error, fontSize: Typography.base, fontWeight: '600' },

cd odontox-app && npx tsc --noEmit 2>&1 | grep -v "node_modules" | head -20

git add "odontox-app/app/(patient)/index.tsx" \
  "odontox-app/app/(patient)/appointments/index.tsx" \
  "odontox-app/app/(patient)/appointments/[id].tsx"
git commit -m "feat(mobile): patient booking CTA, past appointments, cancel with rule-engine errors"

import { useRef, useCallback } from 'react';
import type BottomSheet from '@gorhom/bottom-sheet';
import { StaffBookingSheet } from '@/components/booking/StaffBookingSheet';

const bookingRef = useRef<BottomSheet>(null);
const openBooking = useCallback(() => bookingRef.current?.snapToIndex(0), []);

<Pressable
  onPress={openBooking}
  style={({ pressed }) => [s.fab, pressed && { opacity: 0.8 }]}
>
  <Ionicons name="add" size={28} color="#fff" />
</Pressable>
<StaffBookingSheet ref={bookingRef} onSuccess={() => loadDay(selectedDate)} />

fab: {
  position: 'absolute', bottom: 24, right: 24,
  width: 56, height: 56, borderRadius: 28, backgroundColor: Colors.brand,
  alignItems: 'center', justifyContent: 'center',
  shadowColor: '#000', shadowOffset: { width: 0, height: 4 },
  shadowOpacity: 0.2, shadowRadius: 8, elevation: 8,
},

git add "odontox-app/app/(doctor)/appointments/index.tsx" \
  "odontox-app/app/(receptionist)/appointments/index.tsx" \
  "odontox-app/app/(admin)/appointments/index.tsx"
git commit -m "feat(mobile): add new appointment FAB + StaffBookingSheet for doctor/receptionist/admin"

// odontox-app/components/viewer/PdfViewer.tsx
import { useState, useEffect } from 'react';
import {
  View, Text, StyleSheet, Pressable, ActivityIndicator,
  Platform, SafeAreaView,
} from 'react-native';
import { WebView } from 'react-native-webview';
import * as FileSystem from 'expo-file-system';
import * as Sharing from 'expo-sharing';
import { Ionicons } from '@expo/vector-icons';
import { Colors, Typography, Spacing } from '@/constants/theme';
import { BASE_URL } from '@/lib/api';
import { getJwt } from '@/lib/secure-storage';

interface PdfViewerProps {
  /** Full protected path like /protected/invoices/:id/pdf */
  path: string;
  title: string;
  onClose: () => void;
}

export function PdfViewer({ path, title, onClose }: PdfViewerProps) {
  const [localUri, setLocalUri] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [downloading, setDownloading] = useState(true);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    let cancelled = false;

    async function download() {
      setDownloading(true);
      setError(null);
      try {
        const jwt = await getJwt();
        const cacheUri = FileSystem.cacheDirectory + `odx_${Date.now()}.pdf`;

        const downloadResumable = FileSystem.createDownloadResumable(
          `${BASE_URL}${path}`,
          cacheUri,
          { headers: { Authorization: `Bearer ${jwt ?? ''}` } },
          ({ totalBytesWritten, totalBytesExpectedToWrite }) => {
            if (totalBytesExpectedToWrite > 0) {
              setProgress(totalBytesWritten / totalBytesExpectedToWrite);
            }
          },
        );

        const result = await downloadResumable.downloadAsync();
        if (cancelled) return;

        if (!result || result.status < 200 || result.status >= 300) {
          throw new Error(`Download failed: HTTP ${result?.status ?? 'unknown'}`);
        }

        if (Platform.OS === 'android') {
          // Android WebView cannot render local PDFs — use system viewer via Sharing
          await Sharing.shareAsync(result.uri, { mimeType: 'application/pdf' });
          onClose(); // close this screen after handing off to system viewer
          return;
        }

        setLocalUri(result.uri);
      } catch (e: unknown) {
        if (!cancelled) setError(e instanceof Error ? e.message : 'Download failed');
      } finally {
        if (!cancelled) setDownloading(false);
      }
    }

    download();
    return () => { cancelled = true; };
  }, [path]);

  async function handleShare() {
    if (!localUri) return;
    await Sharing.shareAsync(localUri, { mimeType: 'application/pdf' });
  }

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#000' }}>
      {/* Header */}
      <View style={s.header}>
        <Pressable onPress={onClose} hitSlop={8} style={s.headerBtn}>
          <Ionicons name="close" size={24} color="#fff" />
        </Pressable>
        <Text style={s.headerTitle} numberOfLines={1}>{title}</Text>
        <Pressable onPress={handleShare} hitSlop={8} style={s.headerBtn} disabled={!localUri}>
          <Ionicons name="share-outline" size={22} color={localUri ? '#fff' : '#666'} />
        </Pressable>
      </View>

      {/* Body */}
      {downloading && (
        <View style={s.center}>
          <ActivityIndicator color={Colors.brand} size="large" />
          <Text style={s.progressText}>
            {progress > 0 ? `${Math.round(progress * 100)}%` : 'Loading…'}
          </Text>
        </View>
      )}

      {error && (
        <View style={s.center}>
          <Ionicons name="alert-circle-outline" size={40} color={Colors.error} />
          <Text style={s.errorText}>{error}</Text>
          <Pressable onPress={onClose} style={s.closeBtn}>
            <Text style={{ color: Colors.brand }}>Go back</Text>
          </Pressable>
        </View>
      )}

      {!downloading && !error && localUri && Platform.OS === 'ios' && (
        <WebView
          source={{ uri: localUri }}
          style={{ flex: 1, backgroundColor: '#fff' }}
          onError={() => setError('Could not display PDF')}
        />
      )}
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: Spacing.md,
    paddingVertical: 12,
    backgroundColor: '#1a1a1a',
  },
  headerBtn: { padding: 4, minWidth: 36 },
  headerTitle: {
    flex: 1,
    textAlign: 'center',
    color: '#fff',
    fontSize: Typography.base,
    fontWeight: '600',
    marginHorizontal: 8,
  },
  center: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#111', gap: 12 },
  progressText: { color: '#aaa', fontSize: Typography.sm },
  errorText: { color: Colors.error, fontSize: Typography.sm, textAlign: 'center', paddingHorizontal: 24 },
  closeBtn: { marginTop: 8, padding: 8 },
});

git add odontox-app/components/viewer/PdfViewer.tsx
git commit -m "feat(mobile): add PdfViewer (WebView/iOS + Sharing/Android)"

// odontox-app/components/viewer/ImageViewer.tsx
import { useState } from 'react';
import { Pressable, View, Text, StyleSheet } from 'react-native';
import RNImageViewing from 'react-native-image-viewing';
import * as Sharing from 'expo-sharing';
import { Ionicons } from '@expo/vector-icons';
import { Colors, Typography, Spacing } from '@/constants/theme';

interface ImageViewerProps {
  images: Array<{ uri: string; title?: string }>;
  initialIndex?: number;
  visible: boolean;
  onClose: () => void;
}

export function ImageViewer({ images, initialIndex = 0, visible, onClose }: ImageViewerProps) {
  const [currentIndex, setCurrentIndex] = useState(initialIndex);

  async function handleShare() {
    const uri = images[currentIndex]?.uri;
    if (uri) {
      await Sharing.shareAsync(uri).catch(() => {});
    }
  }

  return (
    <RNImageViewing
      images={images.map(img => ({ uri: img.uri }))}
      imageIndex={initialIndex}
      visible={visible}
      onRequestClose={onClose}
      onImageIndexChange={setCurrentIndex}
      HeaderComponent={() => (
        <View style={s.header}>
          <Pressable onPress={onClose} style={s.btn} hitSlop={8}>
            <Ionicons name="close" size={24} color="#fff" />
          </Pressable>
          <Text style={s.title} numberOfLines={1}>
            {images[currentIndex]?.title ?? `${currentIndex + 1} / ${images.length}`}
          </Text>
          <Pressable onPress={handleShare} style={s.btn} hitSlop={8}>
            <Ionicons name="share-outline" size={22} color="#fff" />
          </Pressable>
        </View>
      )}
    />
  );
}

const s = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: Spacing.md,
    paddingTop: 56,
    paddingBottom: 12,
  },
  btn: { padding: 4, minWidth: 36 },
  title: {
    flex: 1,
    textAlign: 'center',
    color: '#fff',
    fontSize: Typography.base,
    fontWeight: '600',
    marginHorizontal: 8,
  },
});

git add odontox-app/components/viewer/ImageViewer.tsx
git commit -m "feat(mobile): add ImageViewer wrapping react-native-image-viewing"

import { useRouter } from 'expo-router';

// Inside the component:
const router = useRouter();

function routeForItem(item: RecordItem) {
  switch (item.type) {
    case 'prescription':
      return { pathname: '/(patient)/records/prescription/[id]', params: { id: item.id } };
    case 'file':
      return { pathname: '/(patient)/records/file/[id]', params: { id: item.id } };
    case 'clinical_note':
      return { pathname: '/(patient)/records/note/[id]', params: { id: item.id } };
    default:
      return null;
  }
}