# 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