Skip to main content
Learn how to use APTIV Scrap Control to register, monitor, and analyze scrap generated in production lines.

​
Login to the System

APTIV Scrap Control works in two modes:
  • MySQL Mode: Connected to backend server (production)
  • Local Mode: Using browser localStorage (standalone)
1

Access the Application

Open your browser and navigate to:
http://<SERVER-IP>:8080
For standalone mode, open dist/index.html directly or use npx serve dist
2

Choose Your Role

The system supports multiple roles with different permissions:

Administrator

Full system access including user management and permissions

Quality

Manage catalogs, view reports, and handle quality issues

Supervisor

Register scrap, edit records, and view area reports

Operator

Register scrap and view own records
3

Login with Demo Credentials

Use the quick access buttons or enter credentials manually:
UsernamePasswordRole
adminadmin123Administrator
calidadcalidad123Quality
supervisor1super123Supervisor
operador1oper123Operator
src/components/LoginPage.tsx
// Quick login buttons for demo access
const quickAccess = [
  { label: 'Admin', g: 'admin', c: 'admin123', color: '#E4002B' },
  { label: 'Calidad', g: 'calidad', c: 'calidad123', color: '#2563eb' },
  { label: 'Supervisor', g: 'supervisor1', c: 'super123', color: '#059669' },
  { label: 'Operador', g: 'operador1', c: 'oper123', color: '#7c3aed' },
];
Change these default credentials in production environments for security.

​
Register Your First Scrap Entry

Once logged in, you can immediately start registering scrap records.
1

Navigate to Register Scrap

Click on “Registrar Scrap” in the navigation menu. The system automatically detects the current shift based on time:
src/components/RegisterScrap.tsx
// Auto-detect shift by current hour
const detectTurno = () => {
  const hour = new Date().getHours();
  if (hour >= 6 && hour < 14) setTurno('T1');      // 6am-2pm
  else if (hour >= 14 && hour < 22) setTurno('T2'); // 2pm-10pm
  else setTurno('T3');                              // 10pm-6am
};
2

Fill in Required Fields

The form requires these essential fields:
interface ScrapEntry {
  AREA: string;           // Production area
  NP: string;             // Part number
  MATERIAL: string;       // Material description
  PESO: number;           // Unit weight (kg)
  COSTO: number;          // Unit cost (USD)
  CADENA: string;         // Production chain
  TURNO: string;          // Shift (T1/T2/T3)
  TOTAL_PZAS: number;     // Quantity (pieces)
  MODO_FALLA: string;     // Failure mode
  SUPERVISOR: string;     // Supervisor name
}
3

Use Barcode Scanner (Optional)

The system supports USB barcode scanners for fast part number entry:
Scanner Detection: Automatically detects input if characters arrive less than 80ms apart
src/components/RegisterScrap.tsx
// Barcode scanner detection logic
const handleKeyDown = (e: KeyboardEvent) => {
  const now = Date.now();
  const timeDiff = now - lastScanTime;
  
  // Fast input = barcode scanner
  if (timeDiff < 80 || scanBuffer.length === 0) {
    scanBuffer += e.key;
  }
  
  if (e.key === 'Enter') {
    // Search part number in catalog
    buscarNP(scanBuffer.trim());
    scanBuffer = '';
  }
};
Supported formats: Code 128, Code 39, QR, DataMatrix, EAN/UPC
4

Submit the Entry

Click “Guardar” to save the scrap entry. The system will:
  • Validate all required fields
  • Calculate total weight and cost
  • Log the entry with timestamp
  • Update dashboard metrics in real-time
In MySQL mode, data is saved to the backend. In Local mode, data is stored in browser localStorage.

​
View Dashboard and Reports

After registering scrap entries, explore the analytics dashboard.
1

Access the Dashboard

Click “Dashboard” in the navigation menu to see real-time metrics:

Today's Summary

Total scrap quantity and cost for current day

Weekly Trends

7-day comparison with previous week

Top Areas

Areas with highest scrap generation

Failure Modes

Most common failure modes
2

Explore Visualizations

The dashboard provides multiple chart types:
src/components/Dashboard.tsx
// Calculate today's metrics
const todayQty = todayRecords.reduce((sum, r) => 
  sum + Number(r.TOTAL_PZAS || 0), 0
);

const todayCost = todayRecords.reduce((sum, r) => 
  sum + (r.COSTO || 0), 0
);

// Weekly trend comparison
const weekChange = prevWeekCost > 0 
  ? ((weekCost - prevWeekCost) / prevWeekCost * 100) 
  : 0;
Available Charts:
  • Line chart: 30-day trend
  • Bar chart: Scrap by area/shift
  • Pie chart: Category distribution
  • Table: Top 5 part numbers
3

Generate Reports

Navigate to “Reportes” for detailed analysis:
  • By Area: Scrap breakdown per production area
  • By Category: Classification by scrap type
  • By Shift: T1, T2, T3 comparison
  • By Production Chain: Cadena analysis
  • Top Parts: Highest cost part numbers
  • Top Failures: Most frequent failure modes
Export reports to PDF or CSV using the export buttons in each section.

​
Next Steps

Installation

Deploy the full system with Docker and MySQL

User Management

Create user accounts and configure roles

Catalogs

Manage areas, part numbers, and failure modes

API Reference

Integrate with external systems

​
Common Workflows

  1. Login at shift start
  2. Register scrap entries as they occur
  3. Use barcode scanner for speed
  4. Review shift summary before close
  5. Export daily report for management
  1. Access Reports section
  2. Filter by date range
  3. Identify top failure modes
  4. Export data for root cause analysis
  5. Set tolerance thresholds
  1. Check dashboard metrics
  2. Review area performance
  3. Edit/correct same-day entries
  4. View real-time alerts
  5. Approve shift closure

​
Troubleshooting

Login Failed: Verify credentials and check if backend is accessible (MySQL mode)
Scanner Not Working: Ensure scanner is in HID keyboard mode and configured to send Enter after scan
Data Not Showing: Check localStorage is not full (5-10MB limit). Use “Reiniciar Aplicación” in Backups if needed.

Build docs developers (and LLMs) love

Get started for freeTalk to us