Installation Manual Feature

Overview

This feature allows users to view detailed installation manuals for materials directly from the MaterialsManager component.

How It Works

Backend

API Endpoint: GET /api/customer/installation-manual/search?productName=<name>
Database Table: installation_manuals
Data Source: Automated scraper (scrape_and_analyze_bygma.py) downloads PDFs from Bygma and analyzes them with GPT-4o

Frontend

Component: MaterialsManager.js
Button: 📖 icon button next to each material in the materials list
Modal: Full-screen modal displaying:
- Installation steps (numbered list)
- Time estimate per unit
- Required tools
- Safety requirements
- Material requirements
- Weather conditions
- Key points

Usage

Add materials to your project in the MaterialsManager
Click the 📖 button next to any material
System searches for installation manual by material name
If found, displays comprehensive installation guide
If not found, shows message "Ingen montagevejledning fundet"

Database Schema

CREATE TABLE installation_manuals (
  id INT AUTO_INCREMENT PRIMARY KEY,
  product_name VARCHAR(255),
  manufacturer VARCHAR(255),
  manual_url TEXT,
  manual_filename VARCHAR(255),
  installation_steps JSON,
  time_estimate_per_unit DECIMAL(10,2),
  time_unit VARCHAR(50),
  required_tools JSON,
  safety_requirements JSON,
  material_requirements JSON,
  skill_level ENUM('easy', 'medium', 'hard'),
  weather_conditions TEXT,
  key_points JSON,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Adding New Manuals

Run the automated scraper to download and analyze new installation manuals:

python3 scrape_and_analyze_bygma.py

This will:

Login to Bygma with credentials
Find all PDF files with "montage" in the name
Download PDFs to temp_pdfs/
Extract text from PDFs
Analyze with OpenAI GPT-4o
Save structured data to database
Delete PDF files to save space

Features

✅ Automatic search by material name (partial match)
✅ Beautiful gradient modal design
✅ Mobile-responsive layout
✅ Smooth animations
✅ Step-by-step installation guide
✅ Time estimates for project planning
✅ Safety warnings prominently displayed
✅ Tool list for preparation
✅ Material requirements for purchasing
✅ Weather condition recommendations

Example Data

Currently in database:

Product: 280 Montagevejledning Boelgepladetag
Manufacturer: Cembrit
Steps: 15 installation steps
Time: 2.5 hours per m²
Tools: 6 different tools required
Safety: 3 safety requirements
Materials: 5 material types with quantities

CSS Classes

.manual-modal-overlay - Full-screen dark overlay
.manual-modal - Modal container
.manual-header - Gradient purple header
.manual-content - Content area with sections
.installation-steps - Numbered step list
.tools-list - Tool requirements
.safety-section - Yellow warning section
.time-estimate - Purple gradient time display

API Response Format

{
  "success": true,
  "found": true,
  "manual": {
    "id": 1,
    "product_name": "280 Montagevejledning Boelgepladetag",
    "manufacturer": "Cembrit",
    "installation_steps": ["Step 1", "Step 2", ...],
    "time_estimate_per_unit": "2.50",
    "time_unit": "per_sqm",
    "required_tools": ["Tool 1", "Tool 2", ...],
    "safety_requirements": ["Safety 1", "Safety 2", ...],
    "material_requirements": {"Material": "Quantity"},
    "skill_level": "medium",
    "weather_conditions": "Tørt vejr anbefales",
    "key_points": ["Point 1", "Point 2", ...]
  }
}

Integration Points

Works seamlessly with existing MaterialsManager
Uses same API base URL configuration
Shares styling with MaterialPackages.css
No additional dependencies required

Future Enhancements

Add ability to print installation manual
Export to PDF functionality
Link installation tasks to quote generation
Add installation video links
Multi-language support
User ratings and comments
Search by category or manufacturer

4.1 KiB Raw Blame History