# Frontend-Backend Integration Guide

## Overview
This document describes the integration between the HAVEN GRAZURI INVESTMENT LIMITEDfrontend website and the Django backend loan management system.

## What Was Done

### 1. Frontend Updates (index.html & contact.html)

#### Added Login Link to Navigation
- Added a "Login" button to the navigation menu that links to `/login/`
- The button is styled with the primary orange color (#ff5e14) to stand out
- Links to the Django backend authentication system

#### Increased Logo Size
- **Mobile devices**: Logo increased from 80px to 120px height
- **Desktop (769px+)**: Logo increased from 100px to 150px height
- Logo maintains aspect ratio and doesn't affect other elements

### 2. Backend Updates

#### Django URLs Configuration (branch_system/urls.py)
- Root URL (`/`) now serves the frontend landing page
- Backend app entry moved to `/app/`
- Login accessible at `/login/`
- Frontend static files (CSS, JS, images, fonts) served through Django

#### Login Template (templates/users/login.html)
- Updated to use the larger HAVEN GRAZURI VESTMENT LIMITEDlogo
- Logo path changed to: `{% static 'images/Branch-Logo-full.jpeg' %}`
- Logo size increased to 128px (h-32) for consistency with frontend

#### Static Files
- Frontend logo copied to `static/images/Branch-Logo-full.jpeg`
- Both frontend and backend now use the same logo file

## URL Structure

### Public URLs (Frontend)
- `/` - Landing page (frontend website)
- `/css/` - Frontend CSS files
- `/js/` - Frontend JavaScript files
- `/images/` - Frontend images
- `/fonts/` - Frontend fonts

### Authentication URLs
- `/login/` - User login page
- `/logout/` - User logout
- `/password-reset/` - Password reset

### Backend URLs (Requires Login)
- `/app/` - Redirects to dashboard
- `/dashboard/` - Main dashboard
- `/loans/` - Loan management
- `/reports/` - Reports and analytics
- `/payments/` - Payment processing
- `/expenses/` - Expense management
- `/admin/` - Django admin panel

## Navigation Flow

1. **Visitor arrives at website** → Sees frontend landing page at `/`
2. **Clicks "Login" button** → Redirected to `/login/`
3. **Enters credentials** → Authenticated and redirected to `/dashboard/`
4. **Uses backend system** → Full access to loan management features

## Logo Specifications

### Frontend Logo
- **Location**: `frontend/images/Branch-Logo-full.jpeg`
- **Mobile size**: 120px height
- **Desktop size**: 150px height
- **Format**: JPEG
- **Usage**: Navigation header on all frontend pages

### Backend Logo
- **Location**: `static/images/Branch-Logo-full.jpeg`
- **Size**: 128px height (h-32 Tailwind class)
- **Format**: JPEG
- **Usage**: Login page and admin interface

## Testing the Integration

### 1. Test Frontend
```bash
# Start Django development server
python manage.py runserver

# Visit in browser
http://localhost:8000/
```

You should see:
- The frontend landing page with larger logo
- Navigation menu with Home, About Us, Services, Gallery, Contact, and Login
- Login button styled in orange

### 2. Test Login Flow
1. Click "Login" button on frontend
2. Should redirect to `/login/`
3. See login page with large HAVEN GRAZURI VESTMENT LIMITEDlogo
4. Enter credentials and login
5. Should redirect to dashboard at `/dashboard/`

### 3. Test Logo Display
- Frontend logo should be noticeably larger (120-150px)
- Backend login logo should be 128px
- Both should maintain aspect ratio
- No layout issues or overlapping elements

## File Changes Summary

### Modified Files
1. `frontend/index.html`
   - Added Login link to navigation
   - Increased logo size (120px mobile, 150px desktop)

2. `frontend/contact.html`
   - Added Login link to navigation
   - Increased logo size to 250px max-width

3. `branch_system/urls.py`
   - Added LandingPageView to serve frontend
   - Configured static file serving for frontend assets
   - Reorganized URL structure

4. `templates/users/login.html`
   - Updated logo path to use frontend logo
   - Increased logo size to 128px

### New Files
- `static/images/Branch-Logo-full.jpeg` (copied from frontend)

## Production Deployment Notes

### Apache/Nginx Configuration
When deploying to production, configure your web server to:

1. **Serve frontend static files directly** (better performance)
   ```apache
   Alias /css/ /path/to/frontend/css/
   Alias /js/ /path/to/frontend/js/
   Alias /images/ /path/to/frontend/images/
   Alias /fonts/ /path/to/frontend/fonts/
   ```

2. **Serve Django static files**
   ```apache
   Alias /static/ /path/to/static/
   Alias /media/ /path/to/media/
   ```

3. **Route requests appropriately**
   - `/` → Frontend landing page
   - `/login/`, `/dashboard/`, etc. → Django application

### Collect Static Files
Before deployment, run:
```bash
python manage.py collectstatic
```

## Customization Options

### Change Logo Size
Edit the CSS in `frontend/index.html`:
```css
.logo img {
    max-height: 120px;  /* Change this value */
    width: auto;
}
```

### Change Login Button Style
Edit the navigation link in `frontend/index.html`:
```html
<li><a href="/login/" style="background-color: var(--primary-color); color: var(--white); padding: 8px 20px; border-radius: 5px;">Login</a></li>
```

### Add More Navigation Items
Add new `<li>` elements to the `<nav><ul>` section in both `index.html` and `contact.html`.

## Troubleshooting

### Logo Not Displaying
- Check that `Branch-Logo-full.jpeg` exists in both `frontend/images/` and `static/images/`
- Run `python manage.py collectstatic` if in production
- Clear browser cache

### Login Button Not Working
- Verify Django server is running
- Check that `/login/` URL is accessible
- Ensure `users` app URLs are included in main `urls.py`

### Frontend CSS Not Loading
- Check that static file paths are correct in `urls.py`
- Verify frontend files exist in `frontend/` directory
- Check browser console for 404 errors

## Support
For issues or questions, contact the development team or refer to:
- Django documentation: https://docs.djangoproject.com/
- Project README files in the repository
