bikeservice/README.md

# 🚲 Fiets Service Applicatie

Een moderne full-stack fiets service beheer applicatie gebouwd met Vue.js 3 aan de voorkant en Laravel 12 aan de achterkant.

## 🚀 Functies

### Klantenzijde
- **Service Aanvraag Formulier**: Gebruiksvriendelijk formulier voor het boeken van fietsreparaties
- **Verplichte Velden**: Naam, adres, plaats, reparatie beschrijving, datum en tijd
- **Contactinformatie**: E-mail of telefoon (ten minste één verplicht)
- **Datum Validatie**: Kan geen data in het verleden boeken
- **Succes Bevestiging**: Duidelijke feedback wanneer aanvraag is verzonden

### Beheerzijde
- **Service Aanvraag Beheer**: Bekijk alle ingediende aanvragen in tabelformaat
- **Aanvraag Details**: Klik op elke rij om volledige aanvraaginformatie te zien
- **Status Beheer**: Update aanvraag status (in afwachting, bevestigd, voltooid, geannuleerd)
- **Reparatie Planning**: Stel werkelijke reparatie datum en tijd in
- **Communicatie Tools**: Verstuur e-mails en SMS naar klanten
- **Communicatie Geschiedenis**: Bekijk alle communicatie records
- **Geblokkeerde Data**: Blokkeer specifieke data van boeking
- **Instellingen Beheer**: Configureer beheerder notificatie e-mail en bedrijfsdetails

### Technische Functies
- **Frontend**: Vue.js 3 met Composition API, Vue Router 4 en Pinia
- **Backend**: Laravel 12 met RESTful API endpoints
- **Database**: SQLite met Eloquent ORM
- **Build Tool**: Vite voor snelle ontwikkeling en geoptimaliseerde builds
- **Responsive Design**: Werkt op alle apparaten
- **Real-time Updates**: Onmiddellijke feedback voor alle acties
- **Nederlandse Taal**: Volledig in het Nederlands voor Nederlandse klanten

## 🏗️ Project Structuur

```
fiets-service/
├── backend/                 # Laravel backend applicatie
│   ├── app/
│   │   ├── Http/Controllers/
│   │   │   ├── ServiceRequestController.php
│   │   │   ├── BlockedDateController.php
│   │   │   └── SettingController.php
│   │   └── Models/
│   │       ├── ServiceRequest.php
│   │       ├── BlockedDate.php
│   │       ├── Communication.php
│   │       └── Setting.php
│   ├── database/
│   │   ├── migrations/
│   │   │   ├── create_service_requests_table.php
│   │   │   ├── create_blocked_dates_table.php
│   │   │   ├── create_communications_table.php
│   │   │   └── create_settings_table.php
│   │   └── seeders/
│   │       ├── DatabaseSeeder.php
│   │       └── SettingsSeeder.php
│   ├── routes/
│   │   └── api.php
│   └── .env
├── frontend/                # Vue.js frontend applicatie
│   ├── src/
│   │   ├── views/
│   │   │   ├── Home.vue
│   │   │   ├── Booking.vue
│   │   │   └── Admin.vue
│   │   ├── router/
│   │   │   └── index.js
│   │   ├── assets/
│   │   │   └── main.css
│   │   ├── App.vue
│   │   └── main.js
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
└── README.md
```

## 🛠️ Vereisten

- PHP 8.1+ met Composer
- Node.js 18+ met npm
- SQLite (inbegrepen bij PHP)

## 📦 Installatie

### 1. Repository klonen
```bash
git clone <repository-url>
cd fiets-service
```

### 2. Backend Setup (Laravel)
```bash
cd backend

# PHP dependencies installeren
composer install

# Environment bestand kopiëren
cp .env.example .env

# Applicatie sleutel genereren
php artisan key:generate

# Database migraties uitvoeren
php artisan migrate

# Database seeden met initiële instellingen
php artisan db:seed

# Development server starten
php artisan serve --host=0.0.0.0 --port=8000
```

De Laravel backend zal beschikbaar zijn op `http://localhost:8000`

### 3. Frontend Setup (Vue.js)
```bash
cd frontend

# Node.js dependencies installeren
npm install

# Development server starten
npm run dev
```

De Vue.js frontend zal beschikbaar zijn op `http://localhost:3000`

## 🌐 API Endpoints

### Service Aanvragen
- `GET /api/service-requests` - Alle service aanvragen ophalen
- `POST /api/service-requests` - Nieuwe service aanvraag aanmaken
- `GET /api/service-requests/{id}` - Specifieke service aanvraag ophalen
- `PUT /api/service-requests/{id}` - Service aanvraag bijwerken
- `DELETE /api/service-requests/{id}` - Service aanvraag verwijderen
- `POST /api/service-requests/{id}/send-email` - E-mail naar klant versturen
- `POST /api/service-requests/{id}/send-sms` - SMS naar klant versturen
- `GET /api/service-requests/{id}/communications` - Communicatie geschiedenis ophalen

### Geblokkeerde Data
- `GET /api/blocked-dates` - Alle geblokkeerde data ophalen
- `POST /api/blocked-dates` - Nieuwe geblokkeerde datum aanmaken
- `GET /api/blocked-dates/{id}` - Specifieke geblokkeerde datum ophalen
- `PUT /api/blocked-dates/{id}` - Geblokkeerde datum bijwerken
- `DELETE /api/blocked-dates/{id}` - Geblokkeerde datum verwijderen
- `POST /api/blocked-dates/check-date` - Controleren of specifieke datum geblokkeerd is

### Instellingen
- `GET /api/settings` - Alle instellingen ophalen
- `POST /api/settings` - Nieuwe instelling aanmaken
- `GET /api/settings/{id}` - Specifieke instelling ophalen
- `PUT /api/settings/{id}` - Instelling bijwerken
- `DELETE /api/settings/{id}` - Instelling verwijderen
- `GET /api/settings/key/{key}` - Instelling ophalen op sleutel
- `PUT /api/settings/key/{key}` - Instelling bijwerken op sleutel

## 📱 Applicatie Flow

### Klant Journey
1. **Home Pagina Bezoeken**: Fiets service informatie en functies bekijken
2. **Navigeren naar Boeken**: Klik op "Nu Service Boeken" knop
3. **Service Formulier Invullen**: Alle verplichte velden invullen
4. **Aanvraag Verzenden**: Formulier validatie en verzending
5. **Bevestiging**: Succes bericht met aanvraag ID

### Beheer Workflow
1. **Beheer Paneel Toegang**: Navigeer naar beheer sectie
2. **Aanvragen Bekijken**: Alle service aanvragen in tabelformaat zien
3. **Aanvragen Beheren**: Klik op rijen om details te bekijken/bewerken
4. **Communiceren**: E-mails/SMS naar klanten versturen
5. **Data Blokkeren**: Voorkom boeking op specifieke data
6. **Instellingen Bijwerken**: Configureer applicatie parameters

## 🎨 UI Componenten

- **Responsive Navigatie**: Moderne navigatie met fiets service branding
- **Service Aanvraag Formulier**: Schoon, gebruiksvriendelijk boekingsformulier
- **Beheer Dashboard**: Tabbed interface voor verschillende beheergebieden
- **Data Tabellen**: Sorteerbare tabellen met actie knoppen
- **Modal Dialogen**: Popup formulieren voor gedetailleerde weergaven en acties
- **Status Indicatoren**: Kleurgecodeerde status badges
- **Actie Knoppen**: Context-bewuste knoppen met juiste statussen

## 🔧 Ontwikkeling

### Backend Ontwikkeling
```bash
cd backend

# Tests uitvoeren
php artisan test

# Cache legen
php artisan cache:clear

# Routes bekijken
php artisan route:list

# Database operaties
php artisan migrate:status
php artisan db:seed
```

### Frontend Ontwikkeling
```bash
cd frontend

# Bouwen voor productie
npm run build

# Productie build preview
npm run preview

# Linting problemen controleren
npm run lint
```

## 🚀 Productie Deployment

### Backend (Laravel)
1. Stel `APP_ENV=production` in in `.env`
2. Voer `composer install --optimize-autoloader --no-dev` uit
3. Stel je webserver (Apache/Nginx) in om naar de `public` directory te wijzen
4. Configureer je database verbinding
5. Stel e-mail en SMS services in voor productie gebruik

### Frontend (Vue.js)
1. Voer `npm run build` uit
2. Deploy de `dist` folder naar je webserver
3. Configureer je webserver om Vue Router's history mode te handlen

## 📧 E-mail & SMS Integratie

De applicatie is ontworpen om te integreren met e-mail en SMS services:

- **E-mail**: Configureer SMTP instellingen in Laravel voor klant notificaties
- **SMS**: Integreer met services zoals Twilio, Vonage of vergelijkbaar
- **Beheerder Notificaties**: Automatische e-mails wanneer nieuwe service aanvragen worden ingediend

## 🔒 Beveiligings Functies

- **Input Validatie**: Server-side validatie voor alle formulier inputs
- **CSRF Bescherming**: Laravel's ingebouwde CSRF bescherming
- **SQL Injectie Preventie**: Eloquent ORM met parameter binding
- **XSS Bescherming**: Vue.js automatische HTML escaping

## 📱 Browser Ondersteuning

- Chrome (laatste)
- Firefox (laatste)
- Safari (laatste)
- Edge (laatste)
- Mobiele browsers (iOS Safari, Chrome Mobile)

## 🤝 Bijdragen

1. Fork de repository
2. Maak een feature branch
3. Maak je wijzigingen
4. Voeg tests toe indien van toepassing
5. Dien een pull request in

## 📄 Licentie

Dit project is open-source software gelicentieerd onder de [MIT licentie](LICENSE).

## 🆘 Ondersteuning

Als je problemen tegenkomt of vragen hebt:

1. Bekijk de Laravel en Vue.js documentatie
2. Controleer de error logs in de browser console en Laravel logs
3. Zorg ervoor dat alle dependencies correct zijn geïnstalleerd
4. Verifieer dat beide servers draaien op de juiste poorten
5. Controleer database verbinding en migraties

## 🔗 Nuttige Links

- [Vue.js Documentatie](https://vuejs.org/)
- [Laravel Documentatie](https://laravel.com/docs)
- [Vite Documentatie](https://vitejs.dev/)
- [Fiets Service Zakelijke Gids](https://example.com/fiets-service-gids)

## 🎯 Toekomstige Verbeteringen

- **Klant Portaal**: Laat klanten hun service aanvragen volgen
- **Betaling Integratie**: Online betalingsverwerking
- **Voorraad Beheer**: Fiets onderdelen en voorraden bijhouden
- **Rapportage**: Analytics en zakelijke inzichten
- **Mobiele App**: Native mobiele applicaties
- **Meertalige Ondersteuning**: Internationalisering
- **Geavanceerde Planning**: Kalender integratie en beschikbaarheid beheer