From 17b78dfac6710c94dfab9cff0eec731bb9f5f4ff Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 19 May 2026 19:05:08 +0000 Subject: [PATCH 01/18] feat(native): initialize Expo bare-workflow workspace for RN migration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sets up the complete React Native + Expo (SDK 54) project in native/ alongside the existing web app. Covers all infrastructure, configuration, and business logic layers so parallel screen-conversion agents can build on a clean base. What's in this commit ───────────────────── • MOBILE_MIGRATION_PLAN.md — full route→screen mapping doc (Phase 1) • native/app.json — bundle IDs, permissions, dark splash, scheme • native/eas.json — development / preview / production EAS Build profiles • native/babel.config.js — NativeWind + module-resolver + Reanimated (last) • native/metro.config.js — withNativeWind wrapper • native/tailwind.config.js — brand palette (#0E0E12, #00E5FF, #9B59B6) • native/tsconfig.json — @/ path alias → ./src/ • native/.env.example — EXPO_PUBLIC_* variable template • src/integrations/supabase/client.ts — AsyncStorage auth (replaces localStorage) • src/integrations/supabase/types.ts — verbatim copy of generated DB types • src/constants/, src/types/ — copied as-is from web app • src/lib/{utils,toast,geo,device,ble}.ts — native rewrites • src/hooks/ — 9 hooks (5 verbatim, useBiometrics env-var swap, useBlePeripheral→ble-advertiser, useBleScanner NEW central scan) • src/navigation/ — RootNavigator (auth-aware), AuthStack, StudentTabs, LecturerTabs, typed ParamLists • src/theme/colors.ts — brand color tokens • src/components/ui/ — Button, Card, Input, Badge (RN primitives) • src/components/ — BlurCard (expo-blur), PresenceLoader (Reanimated), CameraCapture (expo-camera, replaces MediaPipe LivenessScanner) • src/components/dashboard/ — LiveSessionCard, DashboardHeader, AttendancePinger, CourseManagementDialog, LogoutConfirmDialog • src/components/live-session/ — SessionHeader, SessionStats • src/screens/ — LandingScreen, LoginScreen (auth screens in progress) • App.tsx — GestureHandlerRootView → SafeAreaProvider → QueryClient → RootNavigator Screens still being written by parallel agents (follow-up commit pending): register wizard, StudentDashboard, AttendanceVerification, AttendanceLedger, LecturerDashboard, CreateSession, LiveSession, remaining live-session components. https://claude.ai/code/session_013FrbpAh4Sg7nG88Y62p3yE --- MOBILE_MIGRATION_PLAN.md | 163 + native/.claude/settings.json | 5 + native/.gitignore | 41 + native/AGENTS.md | 3 + native/App.tsx | 78 + native/CLAUDE.md | 1 + native/app.json | 53 + native/assets/adaptive-icon.png | Bin 0 -> 17547 bytes native/assets/favicon.png | Bin 0 -> 1466 bytes native/assets/icon.png | Bin 0 -> 22380 bytes native/assets/splash-icon.png | Bin 0 -> 17547 bytes native/babel.config.js | 22 + native/eas.json | 29 + native/global.css | 3 + native/index.ts | 3 + native/metro.config.js | 6 + native/nativewind-env.d.ts | 1 + native/package-lock.json | 8808 +++++++++++++++++ native/package.json | 22 + native/src/components/BlurCard.tsx | 64 + native/src/components/LogoutConfirmDialog.tsx | 124 + native/src/components/OfflineStatus.tsx | 120 + native/src/components/PresenceLoader.tsx | 92 + .../components/dashboard/AttendancePinger.tsx | 112 + .../dashboard/AttendanceScoreboard.tsx | 417 + .../dashboard/CourseManagementDialog.tsx | 402 + .../components/dashboard/DashboardHeader.tsx | 101 + .../components/dashboard/LiveSessionCard.tsx | 408 + .../components/live-session/SessionHeader.tsx | 98 + .../components/live-session/SessionStats.tsx | 117 + native/src/components/ui/Badge.tsx | 76 + native/src/components/ui/Button.tsx | 159 + native/src/components/ui/Card.tsx | 29 + native/src/components/ui/Input.tsx | 81 + native/src/components/ui/index.ts | 11 + .../components/verification/CameraCapture.tsx | 507 + native/src/constants/index.ts | 29 + native/src/hooks/use-toast.ts | 2 + native/src/hooks/useAttendanceStats.ts | 106 + native/src/hooks/useBiometrics.ts | 73 + native/src/hooks/useBlePeripheral.ts | 111 + native/src/hooks/useBleScanner.ts | 196 + native/src/hooks/useLecturerData.ts | 102 + native/src/hooks/useLiveSessions.ts | 80 + native/src/hooks/useProfile.ts | 45 + native/src/hooks/useSessionData.ts | 82 + native/src/integrations/supabase/client.ts | 15 + native/src/integrations/supabase/types.ts | 456 + native/src/lib/ble.ts | 97 + native/src/lib/device.ts | 58 + native/src/lib/geo.ts | 76 + native/src/lib/toast.ts | 10 + native/src/lib/utils.ts | 11 + native/src/navigation/AuthStack.tsx | 72 + native/src/navigation/LecturerTabs.tsx | 110 + native/src/navigation/RootNavigator.tsx | 206 + native/src/navigation/StudentTabs.tsx | 140 + native/src/navigation/types.ts | 93 + native/src/screens/LandingScreen.tsx | 355 + native/src/screens/LoginScreen.tsx | 223 + .../src/screens/register/BasicInfoScreen.tsx | 536 + native/src/theme/colors.ts | 27 + native/src/types/index.ts | 43 + native/tailwind.config.js | 53 + native/tsconfig.json | 16 + 65 files changed, 15579 insertions(+) create mode 100644 MOBILE_MIGRATION_PLAN.md create mode 100644 native/.claude/settings.json create mode 100644 native/.gitignore create mode 100644 native/AGENTS.md create mode 100644 native/App.tsx create mode 100644 native/CLAUDE.md create mode 100644 native/app.json create mode 100644 native/assets/adaptive-icon.png create mode 100644 native/assets/favicon.png create mode 100644 native/assets/icon.png create mode 100644 native/assets/splash-icon.png create mode 100644 native/babel.config.js create mode 100644 native/eas.json create mode 100644 native/global.css create mode 100644 native/index.ts create mode 100644 native/metro.config.js create mode 100644 native/nativewind-env.d.ts create mode 100644 native/package-lock.json create mode 100644 native/package.json create mode 100644 native/src/components/BlurCard.tsx create mode 100644 native/src/components/LogoutConfirmDialog.tsx create mode 100644 native/src/components/OfflineStatus.tsx create mode 100644 native/src/components/PresenceLoader.tsx create mode 100644 native/src/components/dashboard/AttendancePinger.tsx create mode 100644 native/src/components/dashboard/AttendanceScoreboard.tsx create mode 100644 native/src/components/dashboard/CourseManagementDialog.tsx create mode 100644 native/src/components/dashboard/DashboardHeader.tsx create mode 100644 native/src/components/dashboard/LiveSessionCard.tsx create mode 100644 native/src/components/live-session/SessionHeader.tsx create mode 100644 native/src/components/live-session/SessionStats.tsx create mode 100644 native/src/components/ui/Badge.tsx create mode 100644 native/src/components/ui/Button.tsx create mode 100644 native/src/components/ui/Card.tsx create mode 100644 native/src/components/ui/Input.tsx create mode 100644 native/src/components/ui/index.ts create mode 100644 native/src/components/verification/CameraCapture.tsx create mode 100644 native/src/constants/index.ts create mode 100644 native/src/hooks/use-toast.ts create mode 100644 native/src/hooks/useAttendanceStats.ts create mode 100644 native/src/hooks/useBiometrics.ts create mode 100644 native/src/hooks/useBlePeripheral.ts create mode 100644 native/src/hooks/useBleScanner.ts create mode 100644 native/src/hooks/useLecturerData.ts create mode 100644 native/src/hooks/useLiveSessions.ts create mode 100644 native/src/hooks/useProfile.ts create mode 100644 native/src/hooks/useSessionData.ts create mode 100644 native/src/integrations/supabase/client.ts create mode 100644 native/src/integrations/supabase/types.ts create mode 100644 native/src/lib/ble.ts create mode 100644 native/src/lib/device.ts create mode 100644 native/src/lib/geo.ts create mode 100644 native/src/lib/toast.ts create mode 100644 native/src/lib/utils.ts create mode 100644 native/src/navigation/AuthStack.tsx create mode 100644 native/src/navigation/LecturerTabs.tsx create mode 100644 native/src/navigation/RootNavigator.tsx create mode 100644 native/src/navigation/StudentTabs.tsx create mode 100644 native/src/navigation/types.ts create mode 100644 native/src/screens/LandingScreen.tsx create mode 100644 native/src/screens/LoginScreen.tsx create mode 100644 native/src/screens/register/BasicInfoScreen.tsx create mode 100644 native/src/theme/colors.ts create mode 100644 native/src/types/index.ts create mode 100644 native/tailwind.config.js create mode 100644 native/tsconfig.json diff --git a/MOBILE_MIGRATION_PLAN.md b/MOBILE_MIGRATION_PLAN.md new file mode 100644 index 0000000..2c4cca2 --- /dev/null +++ b/MOBILE_MIGRATION_PLAN.md @@ -0,0 +1,163 @@ +# Smart Campus Presence — Mobile Migration Plan +## Web (Capacitor) → React Native + Expo (Bare Workflow) + +> **Status**: Phase 1 — Approved, implementation in progress on branch `native-build`. +> **Expo workspace**: `/native/` directory in repo root. Web app (`/src`) is untouched. + +--- + +## 1. Route → Screen Mapping + +| Web Route | Web Component (lines) | RN Screen File | Navigator | Key Conversion Notes | +|---|---|---|---|---| +| `/` | `Landing.tsx` (110) | `screens/LandingScreen.tsx` | `AuthStack` | No Capacitor calls. Framer Motion glows → Reanimated. CTA buttons navigate to Login | +| `/login` | `Login.tsx` (102) | `screens/LoginScreen.tsx` | `AuthStack` | `
` → controlled `TextInput`s. `sonner` toast → `react-native-toast-message`. Supabase auth unchanged | +| `/register/student` | `StudentRegister.tsx` (457) | `screens/student-register/BasicInfoScreen.tsx` `CourseSelectScreen.tsx` `FaceEnrollScreen.tsx` | `RegisterStack` (nested) | Split 3-step wizard into 3 screens. `LivenessScanner` (MediaPipe WebAssembly) → `expo-camera` still photo → POST to `/enroll` on FastAPI | +| `/register/lecturer` | `LecturerRegister.tsx` (128) | `screens/LecturerRegisterScreen.tsx` | `AuthStack` | Single form, straight port | +| `/student` | `StudentDashboard.tsx` (563) | `screens/StudentDashboardScreen.tsx` | `StudentTabs` (Bottom Tabs) | `BottomNav.tsx` dropped; `@react-navigation/bottom-tabs` used instead. Backdrop blur → `expo-blur` BlurView | +| `/student/verify/:sessionId` | `AttendanceVerification.tsx` (457) | `screens/AttendanceVerificationScreen.tsx` | `StudentStack` (modal) | `@capacitor/geolocation` → `expo-location`. BLE central scan → `react-native-ble-manager`. Camera → `expo-camera` → FastAPI `/verify`. `@capacitor/haptics` → `expo-haptics` | +| `/ledger/:sessionId` | `AttendanceLedger.tsx` (210) | `screens/AttendanceLedgerScreen.tsx` | `StudentStack` | `