## Casadoc: Technical specifications describing cross-platform feasibility

##### Summary

The strategic choice, considering high quality UI/UX and performance over a quick-fix migration (using a framework like Ionic), is **React Native**. While it requires more initial work than Ionic, the result will be a robust mobile app that feels truly native on both iOS and Android. The frontend will have to be written in JavaScript entirely but it offers a significantly faster, smoother *native* feel. The PHP code would only serve as the backend API.

##### React Native

* **Architecture:** Renders true native mobile UI components using JavaScript.

* **Frontend Migration:** We won't be able to use the original HTML/CSS output rendered by the PHP code directly. We'll have to rewrite the UI using JSX (React).

* **Language:** JavaScript/TypeScript.

* **Native Features:** React Native supports a large ecosystem of native modules.

#### Technical strategy for migrating Casadoc from PHP to React Native

1. **Architectural Shift**
   
   **Decoupling**. Currently, our PHP code likely mixes logic and UI (e.g., fetching data from DB and immediately rendering an HTML table).
   
   - **Current State:** PHP $\rightarrow$ HTML/CSS (Browser renders UI)
   
   - **Future State:** PHP $\rightarrow$ JSON Data $\rightarrow$ React Native (Mobile renders UI)

2. **Category-Wise Migration Plan**
   
   - **The Backend (PHP): Transformation to API**
     
     We do not need to rewrite the backend logic (code), but we must change *how* it delivers data.
     
     - Create a new set of endpoints specifically for the mobile app.
     
     - **Authentication:**
       
       - *Current:* Likely uses Sessions/Cookies (`$_SESSION`).
       
       - *New:* Switch to **JWT (JSON Web Tokens)**. The app will send a "Token" with every request to prove who the user is.
     
     - **Response Format:**
       
       - Stop returning `view('profile.index', $data)`
       
       - Start returning `json_encode($data)` or `return response()->json($data)`
   
   - **The Frontend (React Native): Complete Rewrite**
     
     Most of the work will go into the frontend development since we can't use the HTML/CSS given by PHP directly for rendering.
     
     **UI Components:**
     
     - HTML `<div>` becomes `<View>`
     
     - HTML `<span>` or `<p>` becomes `<Text>`
     
     - HTML `<img>` becomes `<Image>`
     
     - HTML `<button>` becomes `<TouchableOpacity>`
     
     **Styling:**
     
     - CSS is replaced by **StyleSheet** objects (JavaScript objects that look like CSS).
     
     **Navigation:**
     
     - Unlike the web app which uses URLs, mobile app uses Stack/Tab navigation. We'll use a library like **React Navigation** to move between screens.
   
   - ###### **The Database (DB)**
     
     - **Master DB:** Stays as MySQL/MariaDB on the server.
     
     - **Local Storage:** For features like caching, we'll use **AsyncStorage**. For heavy offline data (e.g., viewing documents offline), we'll use **SQLite** on the device.

3. **Example code comparison**
   
   A simple "User Profile" card change from PHP to React Native.
   
   - **Current PHP (Blade/Standard)**
     
     ```php
     <div class="user-card">
         <img src="<?php echo $user->avatar; ?>" />
         <h1><?php echo $user->name; ?></h1>
         <p><?php echo $user->email; ?></p>
     </div>
     ```
   
   - **New React Native (JSX)**
     
     ```javascript
     // UserProfile.js
     import React from 'react';
     import { View, Text, Image, StyleSheet } from 'react-native';
     
     const UserProfile = ({ user }) => {
       return (
         <View style={styles.card}>
           <Image source={{ uri: user.avatar }} style={styles.avatar} />
           <Text style={styles.name}>{user.name}</Text>
           <Text style={styles.email}>{user.email}</Text>
         </View>
       );
     };
     
     // Styles are defined in JS, not CSS files
     const styles = StyleSheet.create({
       card: { padding: 20, backgroundColor: '#fff' },
       name: { fontSize: 18, fontWeight: 'bold' }
     });
     
     export default UserProfile; 
     ```

### Tentative roadmap

##### **Phase 1: API Foundation (PHP Side)**

1. **Environment:** Set up a route group (e.g., `/api/v1/`) in the PHP project.

2. **Auth:** Implement an endpoint `/api/login` that accepts email/password and returns a JWT Token.

3. **Read-Only Data:** Create endpoints to *fetch* data (e.g., `GET /documents`).

##### **Phase 2: The Basic Blueprint App (React Native Side)**

1. **Setup:** Initialize the project using **React Native CLI** (for maximum control) or **Expo**.

2. **Navigation:** Build the "Skeleton" – Login Screen, Dashboard (List View), and Detail Screen.

3. **Connection:** Write a service function in JS to `fetch` data from the new PHP API and display it.

##### **Phase 3: Native Features & Interactivity**

1. **Camera:** Add a feature to "Scan Document" using a React Native Camera library.

2. **Upload:** Create a PHP endpoint to accept `POST` file uploads and wire it to the camera.

3. **Push Notifications:** (*optional*) Integrate Firebase (FCM) to notify users when a document status changes.