tilbudgivern/_archive/NOEGLETAL_QUICKSTART.md

🚀 Nøgletal Dashboard - Quick Start Guide

Access the Dashboard

1. Open tilbudgivern application at http://localhost:3000
2. Login with your credentials
3. Click "💼 Nøgletal" button in the navigation
4. Dashboard will display with real-time metrics from Ordrestyring

What You're Seeing

Top Section - KPI Cards

• Afventende Tilbud: Number of pending/awaiting offers
• Denne Måned: Offers created this month with total value (DKK)
• År-til-dato: Offers created year-to-date with total value (DKK)

Middle Section - Charts

• Tilbud fordelt på status: Bar chart showing offer distribution by status

  • Orange = Pending (Afventende)
  • Green = Converted (Konverteret)
  • Red = Rejected (Afvist)

• Konvertering af Tilbud: Flow diagram showing conversion rates

  • Total offers created
  • Percentage breakdown of each status
  • Actual count per status

Bottom Section

• Samlet Antal Tilbud: Total number of all offers

Data Sources

✅ Live Ordrestyring API: Data pulled from https://graphql.ordrestyring.dk/graphql
✅ Auto-refresh: Every 5 minutes automatically
✅ Error handling: Falls back to empty metrics if API unavailable

File Locations

Frontend:
  /frontend/src/components/NoeglatalDashboard.js      (React component)
  /frontend/src/components/NoeglatalDashboard.css     (Styling)
  
Backend:
  /backend/src/services/ordrestyringService.js        (GraphQL integration)
  /backend/unified-server.js (line 1368-1418)         (API endpoint)
  
API:
  GET http://localhost:4031/api/dashboard/noegletal

Troubleshooting

Dashboard shows "Fejl: Kunde ikke hente data"

Cause: Invalid or deregistered Ordrestyring API key
Solution: Update /apitest/apikey with valid credentials

Dashboard shows zero metrics but no error

Cause: API key valid but query returns no data
Solution: Verify the API key has permission to query offers

Component doesn't load

Cause: Frontend build issue
Solution:

cd /mnt/HC_Volume_103713257/tilbudgivern/frontend
npm run build
pm2 restart tilbudgivern-unified --force

Configuration

Change refresh interval (default: 5 minutes)

Edit /frontend/src/components/NoeglatalDashboard.js line ~50:

// Change 5 * 60 * 1000 to desired milliseconds
const interval = setInterval(fetchMetrics, 5 * 60 * 1000);

Change API endpoint

Edit /backend/src/services/ordrestyringService.js line ~16:

const GRAPHQL_ENDPOINT = 'https://graphql.ordrestyring.dk/graphql';

Change API key file location

Edit /backend/src/services/ordrestyringService.js line ~28:

const apiKeyPath = '/path/to/your/apikey/file';

Features

✅ Responsive design (mobile, tablet, desktop)
✅ Danish locale formatting (DKK, number separators)
✅ Real-time data from Ordrestyring
✅ Graceful error handling
✅ Auto-refresh every 5 minutes
✅ Color-coded status indicators
✅ Conversion percentage calculation
✅ Hover effects on KPI cards

Development Commands

# Frontend development
cd /mnt/HC_Volume_103713257/tilbudgivern/frontend
npm start                    # Local development server
npm run build                # Production build

# Backend
pm2 start backend/unified-server.js
pm2 restart tilbudgivern-unified
pm2 logs tilbudgivern-unified

# Testing
curl http://localhost:4031/api/dashboard/noegletal | python3 -m json.tool

Performance

• Frontend bundle: 277.48 kB (gzipped JS), 34.65 kB (gzipped CSS)
• API response: ~2-5 seconds (depends on number of offers)
• Memory usage: ~117 MB (PM2 process)
• CPU impact: <1% (idle), <5% (API query)

Next Steps

1. Verify API key: Ensure you have valid Ordrestyring credentials
2. Test with real data: Login to Ordrestyring and check if offers exist
3. Monitor metrics: Use browser DevTools to see API responses
4. Set up alerts: Could add notification system for high pending offers
5. Add caching: Could reduce API calls with Redis caching

---

Need help? Check /NOEGLETAL_DASHBOARD_SUMMARY.md for full technical documentation.