# Service Finder Frontend

Modern Vue 3 frontend for the Service Finder platform with dual layout system (B2B/B2C), internationalization, and Docker deployment.

## 🚀 Tech Stack

- **Vue 3** (Composition API)
- **TypeScript** for type safety
- **Vite** for fast development and builds
- **Pinia** for state management
- **Vue Router** for navigation
- **Vue I18n** for translations
- **Tailwind CSS** for styling
- **Axios** for HTTP requests
- **Docker** (multi-stage) + **Nginx** for production

## 📁 Project Structure

```
frontend/
├── src/
│   ├── assets/          # Styles, images, fonts
│   ├── components/      # Reusable Vue components
│   ├── layouts/         # Layout components (Corporate, Consumer)
│   ├── router/          # Vue Router configuration
│   ├── stores/          # Pinia stores (app mode, translations)
│   ├── services/        # API services (translation, auth)
│   ├── views/           # Page components (Home, About)
│   ├── locales/         # Translation files (future)
│   ├── App.vue          # Root component
│   └── main.ts          # Application entry point
├── public/              # Static assets
├── Dockerfile           # Multi-stage Docker build
├── nginx.conf           # Nginx configuration with API proxy
├── vite.config.ts       # Vite configuration
├── tailwind.config.js   # Tailwind CSS configuration
├── tsconfig.json        # TypeScript configuration
└── package.json         # Dependencies and scripts
```

## 🎯 Features

### 1. **Dual Layout System**
   - **CorporateLayout**: Clean, data-oriented design for B2B users (fleet management)
   - **ConsumerLayout**: Playful, bento-grid design for B2C users (individual vehicle owners)
   - Dynamic switching via Pinia store

### 2. **Internationalization (i18n)**
   - Integrated vue-i18n with backend translation API
   - Language switcher component
   - Fallback to English
   - Translation loading from `/api/v1/translations`

### 3. **App Mode Store (Pinia)**
   - Centralized state for app mode (B2B/B2C) and language
   - Persistent storage in localStorage
   - Reactive computed properties

### 4. **Docker Deployment**
   - Multi-stage build (Node 20 + Nginx Alpine)
   - Nginx reverse proxy to backend API (`sf_api:8000`)
   - Health check endpoint
   - Optimized production image (~50MB)

### 5. **Development Proxy**
   - Vite dev server proxies `/api` requests to backend
   - Hot module replacement (HMR)
   - TypeScript support

## 🐳 Docker Commands

### Build the image
```bash
docker build -t service-finder-frontend .
```

### Run locally (with network)
```bash
docker run -p 8080:80 --network sf_net service-finder-frontend
```

### Development (with hot reload)
```bash
cd frontend
npm install
npm run dev
```

## 🔧 Configuration

### Environment Variables
Create `.env` file:
```env
VITE_API_BASE=/api
```

### Nginx Proxy
All `/api/*` requests are proxied to `http://sf_api:8000` (internal Docker network).

### Tailwind CSS
Custom colors for corporate (`corporate-blue`) and consumer (`consumer-orange`, `consumer-teal`, `consumer-purple`) themes.

## 📦 Scripts

- `npm run dev` – Start development server
- `npm run build` – Build for production
- `npm run preview` – Preview production build
- `npm run lint` – Lint code with ESLint

## 🔗 Backend Integration

The frontend expects the following backend endpoints:

- `GET /api/v1/translations?lang={code}` – Fetch translations
- `GET /api/v1/translations/all` – Fetch all translations
- `POST /api/v1/translations` – Update translations (admin)

## 🎨 Design System

### Corporate Theme
- Colors: Blue (#1e3a8a), Gray (#6b7280), Light (#f9fafb)
- Font: Inter (sans-serif)
- Layout: Sidebar navigation, data tables, analytics

### Consumer Theme
- Colors: Orange (#f97316), Teal (#0d9488), Purple (#7c3aed)
- Font: Inter (sans-serif) with playful elements
- Layout: Bento grid, cards, gradient backgrounds

## 📄 License

Proprietary – Service Finder Platform