feat: BOM 관리 시스템 대폭 개선 및 Docker 배포 가이드 추가

- 🎨 UI/UX 개선: 데본씽크 스타일 모던 디자인 적용
- 📁 컴포넌트 구조 개선: 폴더별 체계적 관리 (common/, bom/, materials/)
- 🔧 BOM 관리 페이지 리팩토링: NewMaterialsPage → BOMManagementPage + 카테고리별 컴포넌트 분리
- 💾 구매신청 기능 개선: 선택된 자재 비활성화, 제목 편집, 엑셀 다운로드
- 📊 자재 표시 개선: 타입/서브타입 컬럼 정리, 상세 정보 복원
- 🐛 CSS 빌드 오류 수정: NewMaterialsPage.css 문법 오류 해결
- 📚 문서화: PAGES_GUIDE.md 추가, README에 Docker 캐시 문제 해결 가이드 추가
- 🔄 API 개선: 구매신청 자재 조회, 제목 수정 엔드포인트 추가

frontend/src/components/bom/materials/FittingMaterialsView.jsx

@@ -0,0 +1,666 @@
+import React, { useState } from 'react';
+import { exportMaterialsToExcel } from '../../../utils/excelExport';
+import api from '../../../api';
+import { FilterableHeader, MaterialTable } from '../shared';
+
+const FittingMaterialsView = ({ 
+  materials, 
+  selectedMaterials, 
+  setSelectedMaterials,
+  userRequirements,
+  setUserRequirements,
+  purchasedMaterials,
+  fileId,
+  user,
+  onNavigate 
+}) => {
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
+  const [columnFilters, setColumnFilters] = useState({});
+  const [showFilterDropdown, setShowFilterDropdown] = useState(null);
+
+  // 니플 끝단 정보 추출 (기존 로직 복원)
+  const extractNippleEndInfo = (description) => {
+    const descUpper = description.toUpperCase();
+    
+    // 니플 끝단 패턴들 (기존 NewMaterialsPage와 동일)
+    const endPatterns = {
+      'PBE': 'PBE',      // Plain Both End
+      'BBE': 'BBE',      // Bevel Both End  
+      'POE': 'POE',      // Plain One End
+      'BOE': 'BOE',      // Bevel One End
+      'TOE': 'TOE',      // Thread One End
+      'SW X NPT': 'SW×NPT',  // Socket Weld x NPT
+      'SW X SW': 'SW×SW',    // Socket Weld x Socket Weld
+      'NPT X NPT': 'NPT×NPT', // NPT x NPT
+      'BOTH END THREADED': 'B.E.T',
+      'B.E.T': 'B.E.T',
+      'ONE END THREADED': 'O.E.T',
+      'O.E.T': 'O.E.T',
+      'THREADED': 'THD'
+    };
+    
+    for (const [pattern, display] of Object.entries(endPatterns)) {
+      if (descUpper.includes(pattern)) {
+        return display;
+      }
+    }
+    
+    return '';
+  };
+
+  // 피팅 정보 파싱 (기존 상세 로직 복원)
+  const parseFittingInfo = (material) => {
+    const fittingDetails = material.fitting_details || {};
+    const classificationDetails = material.classification_details || {};
+    
+    // 개선된 분류기 결과 우선 사용
+    const fittingTypeInfo = classificationDetails.fitting_type || {};
+    const scheduleInfo = classificationDetails.schedule_info || {};
+    
+    // 기존 필드와 새 필드 통합
+    const fittingType = fittingTypeInfo.type || fittingDetails.fitting_type || '';
+    const fittingSubtype = fittingTypeInfo.subtype || fittingDetails.fitting_subtype || '';
+    const mainSchedule = scheduleInfo.main_schedule || fittingDetails.schedule || '';
+    const redSchedule = scheduleInfo.red_schedule || '';
+    const hasDifferentSchedules = scheduleInfo.has_different_schedules || false;
+    
+    const description = material.original_description || '';
+    
+    // 피팅 타입별 상세 표시
+    let displayType = '';
+    
+    // 개선된 분류기 결과 우선 표시
+    if (fittingType === 'TEE' && fittingSubtype === 'REDUCING') {
+      displayType = 'TEE REDUCING';
+    } else if (fittingType === 'REDUCER' && fittingSubtype === 'CONCENTRIC') {
+      displayType = 'REDUCER CONC';
+    } else if (fittingType === 'REDUCER' && fittingSubtype === 'ECCENTRIC') {
+      displayType = 'REDUCER ECC';
+    } else if (description.toUpperCase().includes('TEE RED')) {
+      displayType = 'TEE REDUCING';
+    } else if (description.toUpperCase().includes('RED CONC')) {
+      displayType = 'REDUCER CONC';
+    } else if (description.toUpperCase().includes('RED ECC')) {
+      displayType = 'REDUCER ECC';
+    } else if (description.toUpperCase().includes('CAP')) {
+      if (description.includes('NPT(F)')) {
+        displayType = 'CAP NPT(F)';
+      } else if (description.includes('SW')) {
+        displayType = 'CAP SW';
+      } else if (description.includes('BW')) {
+        displayType = 'CAP BW';
+      } else {
+        displayType = 'CAP';
+      }
+    } else if (description.toUpperCase().includes('PLUG')) {
+      if (description.toUpperCase().includes('HEX')) {
+        if (description.includes('NPT(M)')) {
+          displayType = 'HEX PLUG NPT(M)';
+        } else {
+          displayType = 'HEX PLUG';
+        }
+      } else if (description.includes('NPT(M)')) {
+        displayType = 'PLUG NPT(M)';
+      } else if (description.includes('NPT')) {
+        displayType = 'PLUG NPT';
+      } else {
+        displayType = 'PLUG';
+      }
+    } else if (fittingType === 'NIPPLE') {
+      const length = fittingDetails.length_mm || fittingDetails.avg_length_mm;
+      const endInfo = extractNippleEndInfo(description);
+      
+      let nippleType = 'NIPPLE';
+      if (length) nippleType += ` ${length}mm`;
+      if (endInfo) nippleType += ` ${endInfo}`;
+      
+      displayType = nippleType;
+    } else if (fittingType === 'ELBOW') {
+      let elbowDetails = [];
+      
+      // 각도 정보 추출
+      if (fittingSubtype.includes('90DEG') || description.includes('90') || description.includes('90°')) {
+        elbowDetails.push('90°');
+      } else if (fittingSubtype.includes('45DEG') || description.includes('45') || description.includes('45°')) {
+        elbowDetails.push('45°');
+      }
+      
+      // 반경 정보 추출 (Long Radius / Short Radius)
+      if (fittingSubtype.includes('LONG_RADIUS') || description.toUpperCase().includes('LR') || description.toUpperCase().includes('LONG RADIUS')) {
+        elbowDetails.push('LR');
+      } else if (fittingSubtype.includes('SHORT_RADIUS') || description.toUpperCase().includes('SR') || description.toUpperCase().includes('SHORT RADIUS')) {
+        elbowDetails.push('SR');
+      }
+      
+      // 연결 방식
+      if (description.includes('SW')) {
+        elbowDetails.push('SW');
+      } else if (description.includes('BW')) {
+        elbowDetails.push('BW');
+      }
+      
+      // 기본값 설정 (각도가 없으면 90도로 가정)
+      if (!elbowDetails.some(detail => detail.includes('°'))) {
+        elbowDetails.unshift('90°');
+      }
+      
+      displayType = `ELBOW ${elbowDetails.join(' ')}`.trim();
+    } else if (fittingType === 'TEE') {
+      // TEE 타입과 연결 방식 상세 표시
+      let teeDetails = [];
+      
+      // 등경/축소 타입
+      if (fittingSubtype === 'EQUAL' || description.toUpperCase().includes('TEE EQ')) {
+        teeDetails.push('EQ');
+      } else if (fittingSubtype === 'REDUCING' || description.toUpperCase().includes('TEE RED')) {
+        teeDetails.push('RED');
+      }
+      
+      // 연결 방식
+      if (description.includes('SW')) {
+        teeDetails.push('SW');
+      } else if (description.includes('BW')) {
+        teeDetails.push('BW');
+      }
+      
+      displayType = `TEE ${teeDetails.join(' ')}`.trim();
+    } else if (fittingType === 'REDUCER') {
+      const reducerType = fittingSubtype === 'CONCENTRIC' ? 'CONC' : fittingSubtype === 'ECCENTRIC' ? 'ECC' : '';
+      const sizes = fittingDetails.reduced_size ? `${material.size_spec}×${fittingDetails.reduced_size}` : material.size_spec;
+      displayType = `RED ${reducerType} ${sizes}`.trim();
+    } else if (fittingType === 'SWAGE') {
+      const swageType = fittingSubtype || '';
+      displayType = `SWAGE ${swageType}`.trim();
+    } else if (fittingType === 'OLET') {
+      const oletSubtype = fittingSubtype || '';
+      let oletDisplayName = '';
+      
+      // 백엔드 분류기 결과 우선 사용
+      switch (oletSubtype) {
+        case 'SOCKOLET':
+          oletDisplayName = 'SOCK-O-LET';
+          break;
+        case 'WELDOLET':
+          oletDisplayName = 'WELD-O-LET';
+          break;
+        case 'ELLOLET':
+          oletDisplayName = 'ELL-O-LET';
+          break;
+        case 'THREADOLET':
+          oletDisplayName = 'THREAD-O-LET';
+          break;
+        case 'ELBOLET':
+          oletDisplayName = 'ELB-O-LET';
+          break;
+        case 'NIPOLET':
+          oletDisplayName = 'NIP-O-LET';
+          break;
+        case 'COUPOLET':
+          oletDisplayName = 'COUP-O-LET';
+          break;
+        default:
+          // 백엔드 분류가 없으면 description에서 직접 추출
+          const upperDesc = description.toUpperCase();
+          if (upperDesc.includes('SOCK-O-LET') || upperDesc.includes('SOCKOLET')) {
+            oletDisplayName = 'SOCK-O-LET';
+          } else if (upperDesc.includes('WELD-O-LET') || upperDesc.includes('WELDOLET')) {
+            oletDisplayName = 'WELD-O-LET';
+          } else if (upperDesc.includes('ELL-O-LET') || upperDesc.includes('ELLOLET')) {
+            oletDisplayName = 'ELL-O-LET';
+          } else if (upperDesc.includes('THREAD-O-LET') || upperDesc.includes('THREADOLET')) {
+            oletDisplayName = 'THREAD-O-LET';
+          } else if (upperDesc.includes('ELB-O-LET') || upperDesc.includes('ELBOLET')) {
+            oletDisplayName = 'ELB-O-LET';
+          } else if (upperDesc.includes('NIP-O-LET') || upperDesc.includes('NIPOLET')) {
+            oletDisplayName = 'NIP-O-LET';
+          } else if (upperDesc.includes('COUP-O-LET') || upperDesc.includes('COUPOLET')) {
+            oletDisplayName = 'COUP-O-LET';
+          } else {
+            oletDisplayName = 'OLET';
+          }
+      }
+      
+      displayType = oletDisplayName;
+    } else if (!displayType) {
+      displayType = fittingType || 'FITTING';
+    }
+    
+    // 압력 등급과 스케줄 추출 (기존 NewMaterialsPage 로직)
+    let pressure = '-';
+    let schedule = '-';
+    
+    // 압력 등급 찾기 (3000LB, 6000LB 등) - 소켓웰드 피팅에 특히 중요
+    const pressureMatch = description.match(/(\d+)LB/i);
+    if (pressureMatch) {
+      pressure = `${pressureMatch[1]}LB`;
+    }
+    
+    // 소켓웰드 피팅의 경우 압력 등급이 더 중요함
+    if (description.includes('SW') && !pressureMatch) {
+      // SW 피팅인데 압력이 명시되지 않은 경우 기본값 설정
+      if (description.includes('3000') || description.includes('3K')) {
+        pressure = '3000LB';
+      } else if (description.includes('6000') || description.includes('6K')) {
+        pressure = '6000LB';
+      }
+    }
+    
+    // 스케줄 표시 (분리 스케줄 지원)
+    if (hasDifferentSchedules && mainSchedule && redSchedule) {
+      schedule = `${mainSchedule}×${redSchedule}`;
+    } else if (mainSchedule) {
+      schedule = mainSchedule;
+    } else {
+      // Description에서 스케줄 추출
+      const scheduleMatch = description.match(/SCH\s*(\d+[A-Z]*)/i);
+      if (scheduleMatch) {
+        schedule = `SCH ${scheduleMatch[1]}`;
+      }
+    }
+    
+    return {
+      type: 'FITTING',
+      subtype: displayType,
+      size: material.size_spec || '-',
+      pressure: pressure,
+      schedule: schedule,
+      grade: material.full_material_grade || material.material_grade || '-',
+      quantity: Math.round(material.quantity || 0),
+      unit: '개',
+      isFitting: true
+    };
+  };
+
+  // 정렬 처리
+  const handleSort = (key) => {
+    let direction = 'asc';
+    if (sortConfig.key === key && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    setSortConfig({ key, direction });
+  };
+
+  // 필터링된 및 정렬된 자재 목록
+  const getFilteredAndSortedMaterials = () => {
+    let filtered = materials.filter(material => {
+      return Object.entries(columnFilters).every(([key, filterValue]) => {
+        if (!filterValue) return true;
+        const info = parseFittingInfo(material);
+        const value = info[key]?.toString().toLowerCase() || '';
+        return value.includes(filterValue.toLowerCase());
+      });
+    });
+
+    if (sortConfig.key) {
+      filtered.sort((a, b) => {
+        const aInfo = parseFittingInfo(a);
+        const bInfo = parseFittingInfo(b);
+        const aValue = aInfo[sortConfig.key] || '';
+        const bValue = bInfo[sortConfig.key] || '';
+        
+        if (sortConfig.direction === 'asc') {
+          return aValue > bValue ? 1 : -1;
+        } else {
+          return aValue < bValue ? 1 : -1;
+        }
+      });
+    }
+
+    return filtered;
+  };
+
+  // 전체 선택/해제 (구매신청된 자재 제외)
+  const handleSelectAll = () => {
+    const filteredMaterials = getFilteredAndSortedMaterials();
+    const selectableMaterials = filteredMaterials.filter(m => !purchasedMaterials.has(m.id));
+    
+    if (selectedMaterials.size === selectableMaterials.length) {
+      setSelectedMaterials(new Set());
+    } else {
+      setSelectedMaterials(new Set(selectableMaterials.map(m => m.id)));
+    }
+  };
+
+  // 개별 선택 (구매신청된 자재는 선택 불가)
+  const handleMaterialSelect = (materialId) => {
+    if (purchasedMaterials.has(materialId)) {
+      return; // 구매신청된 자재는 선택 불가
+    }
+    
+    const newSelected = new Set(selectedMaterials);
+    if (newSelected.has(materialId)) {
+      newSelected.delete(materialId);
+    } else {
+      newSelected.add(materialId);
+    }
+    setSelectedMaterials(newSelected);
+  };
+
+  // 엑셀 내보내기
+  const handleExportToExcel = async () => {
+    const selectedMaterialsData = materials.filter(m => selectedMaterials.has(m.id));
+    if (selectedMaterialsData.length === 0) {
+      alert('내보낼 자재를 선택해주세요.');
+      return;
+    }
+
+    const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
+    const excelFileName = `FITTING_Materials_${timestamp}.xlsx`;
+
+    const dataWithRequirements = selectedMaterialsData.map(material => ({
+      ...material,
+      user_requirement: userRequirements[material.id] || ''
+    }));
+
+    try {
+      await api.post('/files/save-excel', {
+        file_id: fileId,
+        category: 'FITTING',
+        materials: dataWithRequirements,
+        filename: excelFileName,
+        user_id: user?.id
+      });
+
+      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
+        category: 'FITTING',
+        filename: excelFileName,
+        uploadDate: new Date().toLocaleDateString()
+      });
+
+      alert('엑셀 파일이 생성되고 서버에 저장되었습니다.');
+    } catch (error) {
+      console.error('엑셀 저장 실패:', error);
+      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
+        category: 'FITTING',
+        filename: excelFileName,
+        uploadDate: new Date().toLocaleDateString()
+      });
+    }
+  };
+
+  const filteredMaterials = getFilteredAndSortedMaterials();
+
+  // 필터 헤더 컴포넌트
+  const FilterableHeader = ({ sortKey, filterKey, children }) => (
+    <div className="filterable-header" style={{ position: 'relative' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <span
+          onClick={() => handleSort(sortKey)}
+          style={{ cursor: 'pointer', flex: 1 }}
+        >
+          {children}
+          {sortConfig.key === sortKey && (
+            <span style={{ marginLeft: '4px' }}>
+              {sortConfig.direction === 'asc' ? '↑' : '↓'}
+            </span>
+          )}
+        </span>
+        <button
+          onClick={() => setShowFilterDropdown(showFilterDropdown === filterKey ? null : filterKey)}
+          style={{
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            padding: '2px',
+            fontSize: '12px',
+            color: '#6b7280'
+          }}
+        >
+          🔍
+        </button>
+      </div>
+      {showFilterDropdown === filterKey && (
+        <div style={{
+          position: 'absolute',
+          top: '100%',
+          left: 0,
+          background: 'white',
+          border: '1px solid #e2e8f0',
+          borderRadius: '6px',
+          padding: '8px',
+          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+          zIndex: 1000,
+          minWidth: '150px'
+        }}>
+          <input
+            type="text"
+            placeholder={`Filter ${children}...`}
+            value={columnFilters[filterKey] || ''}
+            onChange={(e) => setColumnFilters({
+              ...columnFilters,
+              [filterKey]: e.target.value
+            })}
+            style={{
+              width: '100%',
+              padding: '4px 8px',
+              border: '1px solid #d1d5db',
+              borderRadius: '4px',
+              fontSize: '12px'
+            }}
+            autoFocus
+          />
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <div style={{ padding: '32px' }}>
+      {/* 헤더 */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+        <div>
+          <h3 style={{ 
+            fontSize: '24px', 
+            fontWeight: '700', 
+            color: '#0f172a', 
+            margin: '0 0 8px 0' 
+          }}>
+            Fitting Materials
+          </h3>
+          <p style={{ 
+            fontSize: '14px', 
+            color: '#64748b', 
+            margin: 0 
+          }}>
+            {filteredMaterials.length} items • {selectedMaterials.size} selected
+          </p>
+        </div>
+        
+        <div style={{ display: 'flex', gap: '12px' }}>
+          <button
+            onClick={handleSelectAll}
+            style={{
+              background: 'white',
+              color: '#6b7280',
+              border: '1px solid #d1d5db',
+              borderRadius: '8px',
+              padding: '10px 16px',
+              cursor: 'pointer',
+              fontSize: '14px',
+              fontWeight: '500'
+            }}
+          >
+            {selectedMaterials.size === filteredMaterials.length ? 'Deselect All' : 'Select All'}
+          </button>
+          
+          <button
+            onClick={handleExportToExcel}
+            disabled={selectedMaterials.size === 0}
+            style={{
+              background: selectedMaterials.size > 0 ? 'linear-gradient(135deg, #10b981 0%, #059669 100%)' : '#e5e7eb',
+              color: selectedMaterials.size > 0 ? 'white' : '#9ca3af',
+              border: 'none',
+              borderRadius: '8px',
+              padding: '10px 16px',
+              cursor: selectedMaterials.size > 0 ? 'pointer' : 'not-allowed',
+              fontSize: '14px',
+              fontWeight: '500'
+            }}
+          >
+            Export to Excel ({selectedMaterials.size})
+          </button>
+        </div>
+      </div>
+
+      {/* 테이블 */}
+      <div style={{ 
+        background: 'white', 
+        borderRadius: '12px', 
+        overflow: 'hidden',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
+      }}>
+        {/* 헤더 */}
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: '50px 200px 120px 100px 120px 150px 80px 80px 200px',
+          gap: '16px',
+          padding: '16px',
+          background: '#f8fafc',
+          borderBottom: '1px solid #e2e8f0',
+          fontSize: '14px',
+          fontWeight: '600',
+          color: '#374151'
+        }}>
+          <div>
+            <input
+              type="checkbox"
+              checked={(() => {
+                const selectableMaterials = filteredMaterials.filter(m => !purchasedMaterials.has(m.id));
+                return selectedMaterials.size === selectableMaterials.length && selectableMaterials.length > 0;
+              })()}
+              onChange={handleSelectAll}
+              style={{ cursor: 'pointer' }}
+            />
+          </div>
+          <div>Type</div>
+          <div>Size</div>
+          <div>Pressure</div>
+          <div>Schedule</div>
+          <div>Material Grade</div>
+          <div>Quantity</div>
+          <div>Unit</div>
+          <div>User Requirement</div>
+        </div>
+
+        {/* 데이터 행들 */}
+        <div style={{ maxHeight: '600px', overflowY: 'auto' }}>
+          {filteredMaterials.map((material, index) => {
+            const info = parseFittingInfo(material);
+            const isSelected = selectedMaterials.has(material.id);
+            const isPurchased = purchasedMaterials.has(material.id);
+            
+            return (
+              <div
+                key={material.id}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '50px 200px 120px 100px 120px 150px 80px 80px 200px',
+                  gap: '16px',
+                  padding: '16px',
+                  borderBottom: index < filteredMaterials.length - 1 ? '1px solid #f1f5f9' : 'none',
+                  background: isSelected ? '#eff6ff' : (isPurchased ? '#fef3c7' : 'white'),
+                  transition: 'background 0.15s ease'
+                }}
+                onMouseEnter={(e) => {
+                  if (!isSelected && !isPurchased) {
+                    e.target.style.background = '#f8fafc';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isSelected && !isPurchased) {
+                    e.target.style.background = 'white';
+                  }
+                }}
+              >
+                <div>
+                  <input
+                    type="checkbox"
+                    checked={isSelected}
+                    onChange={() => handleMaterialSelect(material.id)}
+                    disabled={isPurchased}
+                    style={{ 
+                      cursor: isPurchased ? 'not-allowed' : 'pointer',
+                      opacity: isPurchased ? 0.5 : 1
+                    }}
+                  />
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '500' }}>
+                  {info.subtype}
+                  {isPurchased && (
+                    <span style={{
+                      marginLeft: '8px',
+                      padding: '2px 6px',
+                      background: '#fbbf24',
+                      color: '#92400e',
+                      borderRadius: '4px',
+                      fontSize: '10px',
+                      fontWeight: '500'
+                    }}>
+                      PURCHASED
+                    </span>
+                  )}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.size}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.pressure}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.schedule}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.grade}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '600', textAlign: 'right' }}>
+                  {info.quantity}
+                </div>
+                <div style={{ fontSize: '14px', color: '#6b7280' }}>
+                  {info.unit}
+                </div>
+                <div>
+                  <input
+                    type="text"
+                    value={userRequirements[material.id] || ''}
+                    onChange={(e) => setUserRequirements({
+                      ...userRequirements,
+                      [material.id]: e.target.value
+                    })}
+                    placeholder="Enter requirement..."
+                    style={{
+                      width: '100%',
+                      padding: '6px 8px',
+                      border: '1px solid #d1d5db',
+                      borderRadius: '4px',
+                      fontSize: '12px'
+                    }}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {filteredMaterials.length === 0 && (
+        <div style={{
+          textAlign: 'center',
+          padding: '60px 20px',
+          color: '#64748b'
+        }}>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }}>⚙️</div>
+          <div style={{ fontSize: '18px', fontWeight: '600', marginBottom: '8px' }}>
+            No Fitting Materials Found
+          </div>
+          <div style={{ fontSize: '14px' }}>
+            {Object.keys(columnFilters).some(key => columnFilters[key]) 
+              ? 'Try adjusting your filters' 
+              : 'No fitting materials available in this BOM'}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FittingMaterialsView;