Files
TK-BOM-Project/frontend/src/components/FittingDetailsCard.jsx
Hyungi Ahn 82f057a0c9 feat: PIPE 분석 기능 개선 및 자재 확인 페이지 UX 향상
- 자재 확인 페이지에 뒤로가기 버튼 추가
- 상세 목록 탭에 PIPE 분석 섹션 추가
  - 재질-외경-스케줄-제작방식별로 그룹화
  - 동일 속성 파이프들의 길이 합산 표시
  - 총 파이프 길이 및 규격 종류 수 요약
- 파일 삭제 기능 수정 (외래키 제약 조건 해결)
- MaterialsPage에서 전체 자재 목록 표시 (limit 10000)
- 길이 단위 변환 로직 수정 (mm 단위 유지)
- 파싱 로직에 디버그 출력 추가

TODO: MAIN_NOM/RED_NOM 별도 저장을 위한 스키마 개선 필요
2025-07-17 15:55:40 +09:00

99 lines
3.8 KiB
JavaScript

import React from 'react';
import { Card, CardContent, Typography, Box, Grid, Chip, Divider } from '@mui/material';
const FittingDetailsCard = ({ material }) => {
const fittingDetails = material.fitting_details || {};
return (
<Card sx={{ mt: 2, backgroundColor: '#f5f5f5' }}>
<CardContent>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>
🔗 FITTING 상세 정보
</Typography>
<Chip
label={`신뢰도: ${Math.round((material.classification_confidence || 0) * 100)}%`}
color={material.classification_confidence >= 0.8 ? 'success' : 'warning'}
size="small"
/>
</Box>
<Divider sx={{ mb: 2 }} />
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle2" color="text.secondary">자재명</Typography>
<Typography variant="body1" sx={{ fontWeight: 'medium' }}>
{material.original_description}
</Typography>
</Grid>
<Grid item xs={6} sm={3}>
<Typography variant="subtitle2" color="text.secondary">피팅 타입</Typography>
<Typography variant="body1">
{fittingDetails.fitting_type || '-'}
</Typography>
</Grid>
<Grid item xs={6} sm={3}>
<Typography variant="subtitle2" color="text.secondary">세부 타입</Typography>
<Typography variant="body1">
{fittingDetails.fitting_subtype || '-'}
</Typography>
</Grid>
<Grid item xs={6} sm={3}>
<Typography variant="subtitle2" color="text.secondary">연결 방식</Typography>
<Typography variant="body1">
{fittingDetails.connection_method || '-'}
</Typography>
</Grid>
<Grid item xs={6} sm={3}>
<Typography variant="subtitle2" color="text.secondary">압력 등급</Typography>
<Typography variant="body1">
{fittingDetails.pressure_rating || '-'}
</Typography>
</Grid>
<Grid item xs={6} sm={3}>
<Typography variant="subtitle2" color="text.secondary">재질 규격</Typography>
<Typography variant="body1">
{fittingDetails.material_standard || '-'}
</Typography>
</Grid>
<Grid item xs={6} sm={3}>
<Typography variant="subtitle2" color="text.secondary">재질 등급</Typography>
<Typography variant="body1">
{fittingDetails.material_grade || material.material_grade || '-'}
</Typography>
</Grid>
<Grid item xs={6} sm={3}>
<Typography variant="subtitle2" color="text.secondary"> 사이즈</Typography>
<Typography variant="body1">
{fittingDetails.main_size || material.size_spec || '-'}
</Typography>
</Grid>
<Grid item xs={6} sm={3}>
<Typography variant="subtitle2" color="text.secondary">축소 사이즈</Typography>
<Typography variant="body1">
{fittingDetails.reduced_size || '-'}
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="subtitle2" color="text.secondary">수량</Typography>
<Typography variant="body1" sx={{ fontWeight: 'bold', color: 'primary.main' }}>
{material.quantity} {material.unit}
</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
);
};
export default FittingDetailsCard;