🚲 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

git clone <repository-url>
cd fiets-service

2. Backend Setup (Laravel)

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)

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

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

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.

🆘 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
• Laravel Documentatie
• Vite Documentatie
• Fiets Service Zakelijke 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