tilbudgivern/docs/api/CUSTOMER_SEARCH_INTEGRATION.md

Customer Search Integration - Completed ✅

Dato: 26. Oktober 2025

Oversigt

Implementeret komplet kunde-søgning til offer creation UI med automatisk udfyldning af kunde-data fra Ordrestyring database.

Komponenter

1. Backend API Endpoints

/api/customers/search?q=<query>

• Metode: GET
• Database: ordrestyring_local.ordrestyring_debtors
• Søger i: kundenummer, navn, email, telefon, mobil
• Returnerer: Op til 50 kunder sorteret efter relevans
• Features:
  • Prioriterer matches der starter med søgeteksten
  • Sorterer efter total revenue
  • Inkluderer analytics (caseCount, totalRevenue, lastCaseDate)

Eksempel request:

curl "http://localhost:4031/api/customers/search?q=Alexander"

Eksempel response:

{
  "success": true,
  "count": 7,
  "customers": [
    {
      "customerNumber": "3352",
      "name": "Alexander Warme",
      "address": "Røsevangen 44",
      "city": "Farum",
      "postalCode": "3520",
      "email": "alexpolo2850@gmail.com",
      "phone": "50590903",
      "mobile": null,
      "cvr": null,
      "totalRevenue": "0.00",
      "caseCount": 0,
      "lastCaseDate": null,
      "displayText": "3352 - Alexander Warme (Farum)"
    }
  ],
  "query": "Alexander"
}

/api/customers/:customerNumber

• Metode: GET
• Returnerer: Fuld kunde-information for specifikt kundenummer
• Inkluderer: Alle felter + analytics + metadata

Eksempel request:

curl "http://localhost:4031/api/customers/3352"

2. Frontend Components

CustomerSearch.js (Ny komponent)

Lokation: /frontend/src/components/CustomerSearch.js

Features:

• ✅ Autocomplete dropdown med debounced search (300ms)
• ✅ Real-time søgning mens du skriver
• ✅ Visuelt feedback (loading, selection, clear)
• ✅ Søger efter mindst 2 tegn
• ✅ Klikke udenfor lukker dropdown
• ✅ Viser kunde-detaljer (📍 by, ✉️ email, 📞 telefon, 📊 antal sager)
• ✅ Grøn baggrund når kunde valgt
• ✅ Clear knap (✕) til at rydde valg

Props:

• apiBaseUrl - Base URL for API calls
• onCustomerSelect - Callback når kunde vælges (customer object eller null)
• selectedCustomer - Aktuel valgt kunde (for controlled component)

Styling:

• Lilla focus border (#8b5cf6)
• Grøn selection background (#f0fdf4)
• Responsive dropdown med max-height 300px
• Hover effekter på kunde-items

ProjectCreation.js (Opdateret)

Lokation: /frontend/src/components/ProjectCreation.js

Ændringer:

1. ✅ Importeret CustomerSearch komponent
2. ✅ Tilføjet selectedCustomer state
3. ✅ Implementeret handleCustomerSelect funktion
4. ✅ Erstattet simpel input med CustomerSearch komponent
5. ✅ Auto-udfylder kunde-felter når kunde vælges:
   • Kunde navn
   • Email
   • Telefon/mobil
   • Adresse (formateret med postnummer og by)
6. ✅ Disabled kunde-felter når kunde valgt (grøn baggrund)
7. ✅ Nulstiller selectedCustomer ved:
   • Form submit (success)
   • Edit annullering
   • Update completion

UI Flow:

1. Bruger starter at skrive i kunde-søgning (min 2 tegn)
2. Dropdown vises med matchende kunder
3. Bruger klikker på en kunde
4. Alle kunde-felter udfyldes automatisk
5. Felter bliver disabled med grøn baggrund
6. Bruger kan stadig ændre projektnavn og beskrivelse
7. Ved clear (✕) kan bruger indtaste manuelt

Database

Tabel: ordrestyring_local.ordrestyring_debtors

Synces fra Ordrestyring via: comprehensive_ordrestyring_import.js

Vigtige felter:

• customer_number (PRIMARY KEY)
• customer_name
• customer_address
• customer_city
• customer_postalcode
• customer_email
• customer_telephone
• customer_mobile
• cvr
• total_revenue (analytics)
• case_count (analytics)
• last_case_date (analytics)
• last_sync (timestamp)

Stats:

• 1,356 kunder i databasen
• Synces via GraphQL API
• Auto-update via PM2 scheduled job

Testing

Backend Tests

# Test search by name
curl "http://localhost:4031/api/customers/search?q=Alexander"

# Test search by customer number
curl "http://localhost:4031/api/customers/search?q=3352"

# Test get single customer
curl "http://localhost:4031/api/customers/3352"

Frontend Test Scenario

1. Åbn http://localhost:4031
2. Klik "Opret Nyt Projekt"
3. Start at skrive "Alex" i kunde-feltet
4. Se dropdown med matches
5. Vælg "Alexander Warme"
6. Verificer at navn, email, telefon, adresse udfyldes automatisk
7. Se at felterne er disabled med grøn baggrund
8. Indtast projektnavn og beskrivelse
9. Klik "Opret Projekt"
10. Verificer at formen nulstilles

Tekniske Detaljer

Debouncing

• 300ms delay før API call
• Forhindrer for mange requests mens bruger skriver
• Implementeret med useRef timeout

Error Handling

• Network errors fanges og vises til bruger
• Database connection errors logges
• Validation errors vises inline

Performance

• Max 50 resultater per søgning
• Indekseret søgning i database
• Cached connection pool (mysql2/promise)

Security

• SQL injection beskyttelse via prepared statements
• URL encoding af query parameters
• Input validation på backend

Næste Skridt (Valgfri Forbedringer)

🔮 Kontaktperson og Leveringsadresse

Disse felter findes i Ordrestyring men er ikke i lokal database endnu:

• Kontaktperson (dropdown fra kunde relations)
• Leveringsadresse (dropdown fra kunde addresses)

Implementation plan:

1. Check om GraphQL API har customerContacts eller attentions relation
2. Tilføj tabeller til ordrestyring_local database
3. Opdater sync script (comprehensive_ordrestyring_import.js)
4. Tilføj dropdown komponenter til ProjectCreation

📊 Customer Analytics Widget

Vis mere kunde-info når kunde vælges:

• Total omsætning
• Antal tidligere sager
• Sidste sag dato
• Customer tier (Bronze/Silver/Gold/Platinum)
• Payment history score

🔄 Real-time Sync Status

Vis hvornår kunde-data sidst blev syncet:

• "Synced 5 minutes ago"
• Status indikator (grøn/gul/rød)

Filer Ændret/Oprettet

Oprettet:

• ✅ /frontend/src/components/CustomerSearch.js (282 linjer)
• ✅ /CUSTOMER_SEARCH_INTEGRATION.md (denne fil)

Ændret:

• ✅ /unified-server.js (tilføjet 2 endpoints, linje 848-1018)
• ✅ /frontend/src/components/ProjectCreation.js (integreret CustomerSearch)

Status: ✅ COMPLETED

Alle tre hovedkrav er implementeret og testet:

1. ✅ Kunde-søgning til offer creation UI
2. ✅ Autocomplete komponent til kunde-valg
3. ✅ Pre-udfyldning af kunde-felter ved valg

Server kører: PM2 process 0 på port 4031 Frontend bygget: Build success (237.18 kB gzipped) API testet: Alle endpoints virker korrekt Database: 1,356 kunder tilgængelige for søgning