# Testing Guide - Fellowship Housing Budget App

## What Was Fixed

### 1. CSS Display Issues
**Problem**: Both login screen and app screen were visible at once because CSS had conflicting display rules.

**Fix**: Updated [public/css/styles.css](public/css/styles.css) to properly hide/show screens:
- Changed `#login-screen` to only show `display: flex` when it has `.active` class
- Changed `#app-screen` to only show `display: flex` when it has `.active` class
- Base `.screen` class now properly hides screens by default

### 2. .htaccess Routing
**Status**: Already configured correctly for SPA routing
- API endpoints route to correct PHP files
- Static files (CSS/JS/assets) serve from public directory
- Root and all other routes serve public/index.html
- Includes directory is protected from direct access

### 3. Configuration Files
**Status**: All present and working
- Database credentials configured
- CORS headers configured
- Application constants defined
- Sinch SMS has development fallback (logs to error log when not configured)

## How to Test

### Step 1: Access the Application
1. Open your browser and navigate to: `https://localhost` or `http://localhost`
2. You should ONLY see the **login screen** with:
   - Fellowship Housing logo
   - Dark purple background (#392539)
   - "Phone Number or Email" input field
   - Language selector (English/Español)
   - "Send Code" button

**Expected Result**: Only login screen is visible, no app screens showing

### Step 2: Test Phone Authentication

1. Enter a phone number (any format works):
   - `1234567890`
   - `(123) 456-7890`
   - `+1-123-456-7890`

2. Click "Send Code"

3. **Check PHP error log** for the verification code:
   - Location: `/tmp/php_errors.log` (Linux/Mac) or check Apache error logs
   - Look for: `Sinch not configured - would send: Your Fellowship Housing verification code is: 123456`

4. Enter the 6-digit code from the log

5. Click "Login"

**Expected Result**:
- Successfully logged in
- Login screen hides
- App screen shows with:
  - Dark purple header with "Budget" title and logout button
  - Budget summary card (will show $0.00 values)
  - Income and Expenses sections
  - Dark purple bottom navigation

### Step 3: Test Email Authentication

1. Click logout (or refresh page)
2. Enter an email address: `test@example.com`
3. Click "Send Code"

**Check email delivery** (or PHP mail log):
- If PHP mail() is configured, check the email inbox
- If not configured, check PHP error logs: `Email send failed to: test@example.com`
- The email service will still generate a code and save it to database

**Note**: Email delivery requires SMTP configuration in production. For testing, you can:
- Check the database `verification_codes` table for the code
- Set up a local mail server like MailHog
- Configure SMTP in [includes/Email.php](includes/Email.php)

### Step 4: Test Budget Features

1. After logging in, you should be on the **Budget** tab
2. Click "+ Add Income"
3. Select a category (if categories exist in DB)
4. Enter an amount (e.g., 2000)
5. Click "Save"

**Expected Result**:
- Modal closes
- Income appears in the Income section
- Total Income updates at the top

6. Click "+ Add Expense"
7. Select a category
8. Enter an amount (e.g., 500)
9. Click "Save"

**Expected Result**:
- Expense appears in Expenses section
- Monthly Budget total updates
- Remaining amount shows (should be green if positive)

### Step 5: Test Transactions

1. Click the **Expenses** tab in bottom navigation
2. Click "+ Add Expense" button
3. Enter:
   - Description: "Grocery store"
   - Category: Select one of your expense categories
   - Amount: 50.00
4. Click "Save"

**Expected Result**:
- Transaction appears in the list
- Shows description, category, and amount
- Switch back to Budget tab - spent amounts should update

### Step 6: Test Navigation

Test all bottom navigation tabs:
- **Budget**: Main budget screen (working)
- **Expenses**: Transaction list (working)
- **Goals**: Shows "Coming soon" message
- **Reports**: Shows "Coming soon" message
- **Support**: Shows "Coming soon" message

**Expected Result**: Navigation switches between tabs, header title changes

### Step 7: Test Logout

1. Click the logout button (top right, icon in header)
2. Confirm logout

**Expected Result**:
- Returns to login screen
- Token cleared from localStorage
- User data cleared

## Database Setup Verification

Make sure your database has been updated with the latest schema:

```bash
# Run this if you haven't already
mysql -u pwistagi_fhcapp -p pwistagi_fhcapp < schema/additional_tables.sql
```

This ensures:
- `verification_codes` table has `email` column
- `verification_codes` table has proper indexes
- All other tables exist (users, categories, budget_items, transactions, etc.)

## API Endpoints to Test

### Authentication
- `POST /api/v1/auth/request-code` - Request verification code
- `POST /api/v1/auth/verify-code` - Verify code and login
- `POST /api/v1/auth/logout` - Logout
- `GET /api/v1/user/profile` - Get user profile

### Budget
- `GET /api/v1/budget/categories` - Get categories
- `GET /api/v1/budget/items` - Get budget items
- `POST /api/v1/budget/items` - Create/update budget item
- `GET /api/v1/budget/goals` - Get savings goals

### Transactions
- `GET /api/v1/transactions` - Get transactions list
- `POST /api/v1/transactions` - Create transaction

## Troubleshooting

### Issue: "All screens visible at once"
**Status**: FIXED ✅
- Updated CSS to properly hide/show screens based on `.active` class

### Issue: "CSS/JS files not loading"
- Check browser console for 404 errors
- Verify .htaccess is being read (check Apache config for AllowOverride)
- Check file paths in [public/index.html](public/index.html)

### Issue: "API endpoints return 404"
- Verify mod_rewrite is enabled: `a2enmod rewrite` (Ubuntu/Debian)
- Check .htaccess RewriteEngine is On
- Check Apache error logs for rewrite issues

### Issue: "Database connection failed"
- Verify credentials in [api/config/database.php](api/config/database.php)
- Test connection: `mysql -h pwistaging.com -u pwistagi_fhcapp -p`
- Check if MySQL user has proper permissions

### Issue: "Verification code not received"
**Phone SMS**:
- Sinch is in development mode (not configured)
- Check PHP error log for the code: `/tmp/php_errors.log`
- Look for: `Sinch not configured - would send: ...`

**Email**:
- PHP mail() requires SMTP configuration
- Check PHP error log: `Email send failed to: ...`
- For testing, retrieve code directly from `verification_codes` table

### Issue: "Categories not showing in dropdown"
**Solution**: Check if categories exist in database:
```sql
SELECT * FROM categories WHERE deleted_at IS NULL;
```

If empty, insert default categories:
```sql
INSERT INTO categories (name, type, icon) VALUES
('Salary', 'income', 'dollar-sign'),
('Housing', 'expense', 'home'),
('Food', 'expense', 'shopping-cart'),
('Transportation', 'expense', 'car');
```

## Next Steps

Once basic functionality is tested and working:

1. **Configure Sinch SMS** (for real SMS delivery)
   - Login to Sinch dashboard: developers+fhc@projectworldimpact.com
   - Get Service Plan ID, API Token, and From Number
   - Update [api/config/sinch.php](api/config/sinch.php)

2. **Configure Email Service** (for real email delivery)
   - Set up SendGrid, Mailgun, or AWS SES
   - Update [includes/Email.php](includes/Email.php) with SMTP credentials

3. **Test Multi-language**
   - Switch language dropdown to "Español"
   - Verify API sends correct language header

4. **Implement Remaining Features**
   - Goals tracking UI
   - Reports and charts
   - File upload with Cloudinary
   - Split transactions
   - Debt tracking

## Expected Behavior Summary

✅ **Login Screen**: Only login screen visible, dark purple background
✅ **Authentication**: Phone or email with 6-digit code
✅ **Screen Switching**: Proper show/hide of login vs app screens
✅ **Budget Tab**: Add income/expense items, view totals
✅ **Transactions Tab**: Add expenses, view transaction list
✅ **Navigation**: Bottom nav switches between tabs
✅ **Logout**: Returns to login screen

## Developer Notes

- **Development Mode**: SMS and Email services log to error log instead of sending
- **Database**: Make sure schema is updated before testing
- **CORS**: Configured to allow all origins (for mobile app compatibility)
- **Token Expiry**: Auth tokens last 30 days
- **Code Expiry**: Verification codes expire in 10 minutes
- **Rate Limiting**: Max 3 verification codes per contact per hour