hyungi/TK-BOM-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 구매신청 기능 완성 및 SUPPORT/SPECIAL 카테고리 개선

Browse Source 
- 모든 카테고리 구매신청 기능 완성 (PIPE, FITTING, VALVE, FLANGE, GASKET, BOLT, SUPPORT, SPECIAL, UNKNOWN)
- 구매신청 완료 항목: 회색 배경, 체크박스 비활성화, '구매신청완료' 배지 표시
- 전체 선택/구매신청 시 이미 구매신청된 항목 자동 제외
- 구매신청 quantity 타입 에러 수정 (문자열 -> 정수 변환)

SUPPORT 카테고리 (구 U-BOLT):
- U-BOLT -> SUPPORT로 카테고리명 변경
- 클램프, 유볼트, 우레탄블럭슈 분류 개선
- 테이블 헤더: 선택-종류-타입-크기-디스크립션-추가요구-사용자요구-수량
- 크기 정보 main_nom 필드에서 가져오기 (배관 인치)
- 엑셀 내보내기 형식 조정

SPECIAL 카테고리:
- SPECIAL 키워드 자재 자동 분류 (SPECIFICATION 제외)
- 파일 업로드 시 SPECIAL 카테고리 처리 로직 추가
- 도면번호 필드 추가 (drawing_name, line_no)
- 타입 필드: 크기/스케줄/재질 제외한 핵심 정보 표시
- 엑셀 DWG_NAME, LINE_NUM 컬럼 파싱 및 저장

FITTING 카테고리:
- 테이블 컬럼 너비 조정 (선택 2%, 종류 8.5%, 수량 12%)

구매신청 관리:
- 엑셀 재다운로드 형식 개선 (BOM 페이지와 동일한 형식)
- 그룹화된 자재 정보 포함하여 저장 및 다운로드
This commit is contained in:
Hyungi Ahn
2025-10-14 12:39:25 +09:00
parent e468663386
commit e27020ae9b
44 changed files with 13102 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/App.css
View File

@@ -71,6 +71,17 @@ body {
100% { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
}
/* 접근 거부 페이지 */
.access-denied-container {
display: flex;

144
frontend/src/App.jsx
View File

@@ -5,6 +5,8 @@ import NewMaterialsPage from './pages/NewMaterialsPage';
import SystemSettingsPage from './pages/SystemSettingsPage';
import AccountSettingsPage from './pages/AccountSettingsPage';
import UserManagementPage from './pages/UserManagementPage';
import PurchaseBatchPage from './pages/PurchaseBatchPage';
import PurchaseRequestPage from './pages/PurchaseRequestPage';
import SystemLogsPage from './pages/SystemLogsPage';
import LogMonitoringPage from './pages/LogMonitoringPage';
import ErrorBoundary from './components/ErrorBoundary';
@@ -27,6 +29,20 @@ function App() {
const [newProjectCode, setNewProjectCode] = useState('');
const [newProjectName, setNewProjectName] = useState('');
const [newClientName, setNewClientName] = useState('');
const [pendingSignupCount, setPendingSignupCount] = useState(0);
// 승인 대기 중인 회원가입 수 조회
const loadPendingSignups = async () => {
try {
const response = await api.get('/auth/signup-requests');
// API 응답이 { requests: [...], count: ... } 형태
const pendingCount = response.data.count || 0;
setPendingSignupCount(pendingCount);
} catch (error) {
console.error('승인 대기 조회 실패:', error);
setPendingSignupCount(0);
}
};
// 프로젝트 목록 로드
const loadProjects = async () => {
@@ -143,11 +159,32 @@ function App() {
};
}, [showUserMenu]);
// 관리자인 경우 주기적으로 승인 대기 수 확인
useEffect(() => {
if ((user?.role === 'admin' || user?.role === 'system') && isAuthenticated) {
// 초기 로드
loadPendingSignups();
// 30초마다 확인
const interval = setInterval(() => {
loadPendingSignups();
}, 30000);
return () => clearInterval(interval);
}
}, [user?.role, isAuthenticated]);
// 로그인 성공 시 호출될 함수
const handleLoginSuccess = () => {
const userData = localStorage.getItem('user_data');
if (userData) {
setUser(JSON.parse(userData));
const parsedUser = JSON.parse(userData);
setUser(parsedUser);
// 관리자인 경우 승인 대기 수 확인
if (parsedUser?.role === 'admin' || parsedUser?.role === 'system') {
loadPendingSignups();
}
}
setIsAuthenticated(true);
};
@@ -173,8 +210,14 @@ function App() {
{
id: 'bom',
title: '📋 BOM 업로드 & 분류',
description: '엑셀 파일 업로드 → 자동 분류 → 검토 → 자재 확인 → 엑셀 내보내기',
description: '엑셀 파일 업로드 → 자동 분류 → 검토 → 자재 확인 → 구매신청 (엑셀 내보내기)',
color: '#4299e1'
},
{
id: 'purchase-request',
title: '📦 구매신청 관리',
description: '구매신청한 자재들을 그룹별로 조회하고 엑셀 재다운로드',
color: '#10b981'
}
];
};
@@ -183,15 +226,20 @@ function App() {
const getAdminFeatures = () => {
const features = [];
// 시스템 관리자 전용 기능
if (user?.role === 'system') {
console.log('getAdminFeatures - Current user:', user);
console.log('getAdminFeatures - User role:', user?.role);
console.log('getAdminFeatures - Pending count:', pendingSignupCount);
// 시스템 관리자 기능 (admin role이 시스템 관리자)
if (user?.role === 'admin') {
features.push(
{
id: 'user-management',
title: '👥 사용자 관리',
description: '계정 생성, 역할 변경, 사용자 삭제',
description: '계정 생성, 역할 변경, 회원가입 승인',
color: '#dc2626',
badge: '시스템 관리자'
badge: '시스템 관리자',
pendingCount: pendingSignupCount
},
{
id: 'system-logs',
@@ -203,8 +251,24 @@ function App() {
);
}
// 일반 관리자 기능
if (user?.role === 'manager') {
// 일반 관리자는 회원가입 승인만 가능
features.push(
{
id: 'user-management',
title: '👥 회원가입 승인',
description: '신규 회원가입 승인 및 거부',
color: '#dc2626',
badge: '관리자',
pendingCount: pendingSignupCount
}
);
}
// 관리자 이상 공통 기능
if (user?.role === 'admin' || user?.role === 'system') {
if (user?.role === 'admin' || user?.role === 'manager') {
features.push(
{
id: 'log-monitoring',
@@ -661,13 +725,12 @@ function App() {
)}
</div>
{/* 핵심 기능 */}
{/* 핵심 기능 - 프로젝트 선택 시만 표시 */}
{selectedProject && (
<>
<div style={{ marginBottom: '32px' }}>
<h2 style={{ fontSize: '20px', fontWeight: '600', color: '#2d3748', marginBottom: '16px' }}>
📋 BOM 관리 워크플로우
</h2>
<div style={{ marginBottom: '32px' }}>
<h2 style={{ fontSize: '20px', fontWeight: '600', color: '#2d3748', marginBottom: '16px' }}>
📋 BOM 관리 워크플로우
</h2>
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
@@ -701,7 +764,10 @@ function App() {
{feature.description}
</p>
<button
onClick={() => navigateToPage(feature.id, { selectedProject })}
onClick={() => navigateToPage(feature.id, {
selectedProject,
jobNo: selectedProject?.official_project_code
})}
style={{
background: feature.color,
color: 'white',
@@ -720,8 +786,9 @@ function App() {
))}
</div>
</div>
)} {/* selectedProject 조건문 닫기 */}
{/* 관리자 기능 (있는 경우만) */}
{/* 관리자 기능 (프로젝트 선택과 무관하게 항상 표시) */}
{adminFeatures.length > 0 && (
<div style={{ marginBottom: '32px' }}>
<h2 style={{ fontSize: '20px', fontWeight: '600', color: '#2d3748', marginBottom: '16px' }}>
@@ -753,8 +820,29 @@ function App() {
e.currentTarget.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.07)';
}}
>
<h3 style={{ fontSize: '18px', fontWeight: '600', color: '#2d3748', marginBottom: '12px' }}>
{feature.title}
<h3 style={{
fontSize: '18px',
fontWeight: '600',
color: '#2d3748',
marginBottom: '12px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}}>
<span>{feature.title}</span>
{feature.id === 'user-management' && feature.pendingCount > 0 && (
<span style={{
background: '#ef4444',
color: 'white',
borderRadius: '12px',
padding: '2px 8px',
fontSize: '12px',
fontWeight: '700',
animation: 'pulse 2s ease-in-out infinite'
}}>
{feature.pendingCount}명 대기
</span>
)}
</h3>
<p style={{ color: '#718096', marginBottom: '16px', fontSize: '14px' }}>
{feature.description}
@@ -853,8 +941,7 @@ function App() {
</div>
</div>
</div>
</>
)} {/* selectedProject 조건문 닫기 */}
)} {/* adminFeatures 조건문 닫기 */}
</div>
</div>
);
@@ -880,6 +967,25 @@ function App() {
filename={pageParams.filename}
/>
);
case 'purchase-batch':
return (
<PurchaseBatchPage
onNavigate={navigateToPage}
fileId={pageParams.file_id}
jobNo={pageParams.jobNo}
/>
);
case 'purchase-request':
return (
<PurchaseRequestPage
onNavigate={navigateToPage}
fileId={pageParams.file_id}
jobNo={pageParams.jobNo}
selectedProject={pageParams.selectedProject}
/>
);
case 'system-settings':
return (

42
frontend/src/pages/NewMaterialsPage.css
View File

@@ -294,7 +294,7 @@
background: white;
margin: 16px 24px;
overflow-y: auto;
overflow-x: hidden;
overflow-x: auto; /* 좌우 스크롤 가능하도록 변경 */
max-height: calc(100vh - 220px);
border: 1px solid #d1d5db;
}
@@ -431,40 +431,40 @@
font-weight: 600;
}
/* U-BOLT 전용 헤더 - 8개 컬럼 */
.detailed-grid-header.ubolt-header {
grid-template-columns: 3% 11% 15% 10% 20% 12% 18% 10%;
/* SUPPORT 전용 헤더 - 8개 컬럼 */
.detailed-grid-header.support-header {
grid-template-columns: 3% 10% 12% 10% 25% 10% 18% 12%;
}
/* U-BOLT 전용 행 - 8개 컬럼 */
.detailed-material-row.ubolt-row {
grid-template-columns: 3% 11% 15% 10% 20% 12% 18% 10%;
/* SUPPORT 전용 행 - 8개 컬럼 */
.detailed-material-row.support-row {
grid-template-columns: 3% 10% 12% 10% 25% 10% 18% 12%;
}
/* U-BOLT 헤더 테두리 */
.detailed-grid-header.ubolt-header > div,
.detailed-grid-header.ubolt-header .filterable-header {
/* SUPPORT 헤더 테두리 */
.detailed-grid-header.support-header > div,
.detailed-grid-header.support-header .filterable-header {
border-right: 1px solid #d1d5db;
}
.detailed-grid-header.ubolt-header > div:last-child,
.detailed-grid-header.ubolt-header .filterable-header:last-child {
.detailed-grid-header.support-header > div:last-child,
.detailed-grid-header.support-header .filterable-header:last-child {
border-right: none;
}
/* U-BOLT 행 테두리 */
.detailed-material-row.ubolt-row .material-cell {
/* SUPPORT 행 테두리 */
.detailed-material-row.support-row .material-cell {
border-right: 1px solid #d1d5db;
}
.detailed-material-row.ubolt-row .material-cell:last-child {
.detailed-material-row.support-row .material-cell:last-child {
border-right: none;
}
/* U-BOLT 타입 배지 */
.type-badge.ubolt {
/* SUPPORT 타입 배지 */
.type-badge.support {
background: #059669;
color: white;
border: 2px solid #047857;
@@ -533,7 +533,7 @@
/* 플랜지 전용 헤더 - 10개 컬럼 */
.detailed-grid-header.flange-header {
grid-template-columns: 2% 8% 12% 8% 10% 10% 18% 10% 15% 6%;
grid-template-columns: 1.5% 8.5% 12% 8% 10% 10% 15% 8% 12% 11.5%;
}
@@ -550,7 +550,7 @@
/* 플랜지 전용 행 - 10개 컬럼 */
.detailed-material-row.flange-row {
grid-template-columns: 1.5% 8.5% 12% 8% 10% 10% 18% 10% 15% 6%;
grid-template-columns: 1.5% 8.5% 12% 8% 10% 10% 15% 8% 12% 11.5%;
}
@@ -565,7 +565,7 @@
/* 피팅 전용 헤더 - 10개 컬럼 */
.detailed-grid-header.fitting-header {
grid-template-columns: 2% 8% 20% 8% 8% 10% 18% 10% 15% 0%;
grid-template-columns: 2% 8.5% 16% 7.5% 7.5% 9% 15% 9% 13% 12%;
}
@@ -582,7 +582,7 @@
/* 피팅 전용 행 - 10개 컬럼 */
.detailed-material-row.fitting-row {
grid-template-columns: 2% 8% 20% 8% 8% 10% 18% 10% 15% 0%;
grid-template-columns: 2% 8.5% 16% 7.5% 7.5% 9% 15% 9% 13% 12%;
}

726
frontend/src/pages/NewMaterialsPage.jsx
View File

File diff suppressed because it is too large Load Diff

388
frontend/src/pages/PurchaseBatchPage.jsx Normal file
View File

@@ -0,0 +1,388 @@
import React, { useState, useEffect } from 'react';
import api from '../api';
const PurchaseBatchPage = ({ onNavigate, fileId, jobNo }) => {
const [batches, setBatches] = useState([]);
const [selectedBatch, setSelectedBatch] = useState(null);
const [batchMaterials, setBatchMaterials] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [activeTab, setActiveTab] = useState('all'); // all, pending, requested, ordered, received
const [message, setMessage] = useState({ type: '', text: '' });
useEffect(() => {
loadBatches();
}, [fileId, jobNo]);
const loadBatches = async () => {
setIsLoading(true);
try {
const params = {};
if (fileId) params.file_id = fileId;
if (jobNo) params.job_no = jobNo;
const response = await api.get('/export/batches', { params });
setBatches(response.data.batches || []);
} catch (error) {
console.error('Failed to load batches:', error);
setMessage({ type: 'error', text: '배치 목록 로드 실패' });
} finally {
setIsLoading(false);
}
};
const loadBatchMaterials = async (exportId) => {
setIsLoading(true);
try {
const response = await api.get(`/export/batch/${exportId}/materials`);
setBatchMaterials(response.data.materials || []);
} catch (error) {
console.error('Failed to load batch materials:', error);
setMessage({ type: 'error', text: '자재 목록 로드 실패' });
} finally {
setIsLoading(false);
}
};
const handleBatchSelect = (batch) => {
setSelectedBatch(batch);
loadBatchMaterials(batch.export_id);
};
const handleDownloadExcel = async (exportId, batchNo) => {
try {
const response = await api.get(`/export/batch/${exportId}/download`, {
responseType: 'blob'
});
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `batch_${batchNo}.xlsx`);
document.body.appendChild(link);
link.click();
link.remove();
window.URL.revokeObjectURL(url);
setMessage({ type: 'success', text: '엑셀 다운로드 완료' });
} catch (error) {
console.error('Failed to download excel:', error);
setMessage({ type: 'error', text: '엑셀 다운로드 실패' });
}
};
const handleBatchStatusUpdate = async (exportId, newStatus) => {
try {
const prNo = prompt('구매요청 번호 (PR)를 입력하세요:');
const response = await api.patch(`/export/batch/${exportId}/status`, {
status: newStatus,
purchase_request_no: prNo
});
if (response.data.success) {
setMessage({ type: 'success', text: response.data.message });
loadBatches();
if (selectedBatch?.export_id === exportId) {
loadBatchMaterials(exportId);
}
}
} catch (error) {
console.error('Failed to update batch status:', error);
setMessage({ type: 'error', text: '상태 업데이트 실패' });
}
};
const getStatusBadge = (status) => {
const styles = {
pending: { bg: '#FFFFE0', color: '#856404', text: '구매 전' },
requested: { bg: '#FFE4B5', color: '#8B4513', text: '구매신청' },
in_progress: { bg: '#ADD8E6', color: '#00008B', text: '진행중' },
ordered: { bg: '#87CEEB', color: '#4682B4', text: '발주완료' },
received: { bg: '#90EE90', color: '#228B22', text: '입고완료' },
completed: { bg: '#98FB98', color: '#006400', text: '완료' }
};
const style = styles[status] || styles.pending;
return (
<span style={{
background: style.bg,
color: style.color,
padding: '4px 8px',
borderRadius: '12px',
fontSize: '12px',
fontWeight: '600'
}}>
{style.text}
</span>
);
};
const filteredBatches = activeTab === 'all'
? batches
: batches.filter(b => b.batch_status === activeTab);
return (
<div style={{ padding: '24px', maxWidth: '1400px', margin: '0 auto' }}>
{/* 헤더 */}
<div style={{ marginBottom: '24px' }}>
<h1 style={{ fontSize: '24px', fontWeight: '600', marginBottom: '8px' }}>
구매 배치 관리
</h1>
<p style={{ color: '#6c757d' }}>
엑셀로 내보낸 자재들을 배치 단위로 관리합니다
</p>
</div>
{/* 메시지 */}
{message.text && (
<div style={{
padding: '12px',
marginBottom: '16px',
borderRadius: '8px',
background: message.type === 'error' ? '#fee' : '#e6ffe6',
color: message.type === 'error' ? '#dc3545' : '#28a745',
border: `1px solid ${message.type === 'error' ? '#fcc' : '#cfc'}`
}}>
{message.text}
</div>
)}
{/* 탭 네비게이션 */}
<div style={{ display: 'flex', gap: '12px', marginBottom: '20px' }}>
{[
{ key: 'all', label: '전체' },
{ key: 'pending', label: '구매 전' },
{ key: 'requested', label: '구매신청' },
{ key: 'in_progress', label: '진행중' },
{ key: 'completed', label: '완료' }
].map(tab => (
<button
key={tab.key}
onClick={() => setActiveTab(tab.key)}
style={{
padding: '8px 16px',
borderRadius: '20px',
border: activeTab === tab.key ? '2px solid #007bff' : '1px solid #dee2e6',
background: activeTab === tab.key ? '#007bff' : 'white',
color: activeTab === tab.key ? 'white' : '#495057',
fontSize: '14px',
fontWeight: '500',
cursor: 'pointer',
transition: 'all 0.2s'
}}
>
{tab.label}
</button>
))}
</div>
{/* 메인 컨텐츠 */}
<div style={{ display: 'grid', gridTemplateColumns: '400px 1fr', gap: '24px' }}>
{/* 배치 목록 */}
<div style={{
background: 'white',
borderRadius: '12px',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
overflow: 'hidden'
}}>
<div style={{
padding: '16px',
borderBottom: '1px solid #e9ecef',
background: '#f8f9fa'
}}>
<h2 style={{ fontSize: '16px', fontWeight: '600', margin: 0 }}>
배치 목록 ({filteredBatches.length})
</h2>
</div>
<div style={{ maxHeight: '600px', overflow: 'auto' }}>
{isLoading ? (
<div style={{ padding: '40px', textAlign: 'center' }}>
로딩중...
</div>
) : filteredBatches.length === 0 ? (
<div style={{ padding: '40px', textAlign: 'center', color: '#6c757d' }}>
배치가 없습니다
</div>
) : (
filteredBatches.map(batch => (
<div
key={batch.export_id}
onClick={() => handleBatchSelect(batch)}
style={{
padding: '16px',
borderBottom: '1px solid #f1f3f4',
cursor: 'pointer',
background: selectedBatch?.export_id === batch.export_id ? '#f0f8ff' : 'white',
transition: 'background 0.2s'
}}
onMouseEnter={(e) => {
if (selectedBatch?.export_id !== batch.export_id) {
e.currentTarget.style.background = '#f8f9fa';
}
}}
onMouseLeave={(e) => {
if (selectedBatch?.export_id !== batch.export_id) {
e.currentTarget.style.background = 'white';
}
}}
>
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
<span style={{ fontWeight: '600', fontSize: '14px' }}>
{batch.batch_no}
</span>
{getStatusBadge(batch.batch_status)}
</div>
<div style={{ fontSize: '12px', color: '#6c757d', marginBottom: '4px' }}>
{batch.job_no} - {batch.job_name}
</div>
<div style={{ fontSize: '12px', color: '#6c757d', marginBottom: '8px' }}>
{batch.category || '전체'} | {batch.material_count}개 자재
</div>
<div style={{ display: 'flex', gap: '8px', fontSize: '11px' }}>
<span style={{ background: '#e9ecef', padding: '2px 6px', borderRadius: '4px' }}>
대기: {batch.status_detail.pending}
</span>
<span style={{ background: '#fff3cd', padding: '2px 6px', borderRadius: '4px' }}>
신청: {batch.status_detail.requested}
</span>
<span style={{ background: '#cce5ff', padding: '2px 6px', borderRadius: '4px' }}>
발주: {batch.status_detail.ordered}
</span>
<span style={{ background: '#d4edda', padding: '2px 6px', borderRadius: '4px' }}>
입고: {batch.status_detail.received}
</span>
</div>
<div style={{ marginTop: '8px', fontSize: '11px', color: '#6c757d' }}>
{new Date(batch.export_date).toLocaleDateString()} | {batch.exported_by}
</div>
</div>
))
)}
</div>
</div>
{/* 선택된 배치 상세 */}
{selectedBatch ? (
<div style={{
background: 'white',
borderRadius: '12px',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
overflow: 'hidden'
}}>
<div style={{
padding: '16px',
borderBottom: '1px solid #e9ecef',
background: '#f8f9fa'
}}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<h2 style={{ fontSize: '16px', fontWeight: '600', margin: 0 }}>
배치 {selectedBatch.batch_no}
</h2>
<div style={{ display: 'flex', gap: '8px' }}>
<button
onClick={() => handleDownloadExcel(selectedBatch.export_id, selectedBatch.batch_no)}
style={{
padding: '6px 12px',
background: '#28a745',
color: 'white',
border: 'none',
borderRadius: '6px',
fontSize: '12px',
cursor: 'pointer'
}}
>
📥 엑셀 다운로드
</button>
<button
onClick={() => handleBatchStatusUpdate(selectedBatch.export_id, 'requested')}
style={{
padding: '6px 12px',
background: '#ffc107',
color: 'white',
border: 'none',
borderRadius: '6px',
fontSize: '12px',
cursor: 'pointer'
}}
>
구매신청
</button>
</div>
</div>
</div>
<div style={{ padding: '16px' }}>
<div style={{ overflow: 'auto', maxHeight: '500px' }}>
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
<thead>
<tr style={{ background: '#f8f9fa' }}>
<th style={{ padding: '8px', textAlign: 'left', fontSize: '12px', borderBottom: '2px solid #dee2e6' }}>No</th>
<th style={{ padding: '8px', textAlign: 'left', fontSize: '12px', borderBottom: '2px solid #dee2e6' }}>카테고리</th>
<th style={{ padding: '8px', textAlign: 'left', fontSize: '12px', borderBottom: '2px solid #dee2e6' }}>자재 설명</th>
<th style={{ padding: '8px', textAlign: 'center', fontSize: '12px', borderBottom: '2px solid #dee2e6' }}>수량</th>
<th style={{ padding: '8px', textAlign: 'center', fontSize: '12px', borderBottom: '2px solid #dee2e6' }}>상태</th>
<th style={{ padding: '8px', textAlign: 'left', fontSize: '12px', borderBottom: '2px solid #dee2e6' }}>PR번호</th>
<th style={{ padding: '8px', textAlign: 'left', fontSize: '12px', borderBottom: '2px solid #dee2e6' }}>PO번호</th>
</tr>
</thead>
<tbody>
{batchMaterials.map((material, idx) => (
<tr key={material.exported_material_id} style={{ borderBottom: '1px solid #f1f3f4' }}>
<td style={{ padding: '8px', fontSize: '12px' }}>{idx + 1}</td>
<td style={{ padding: '8px', fontSize: '12px' }}>
<span style={{
background: '#e9ecef',
padding: '2px 6px',
borderRadius: '4px',
fontSize: '11px'
}}>
{material.category}
</span>
</td>
<td style={{ padding: '8px', fontSize: '12px' }}>{material.description}</td>
<td style={{ padding: '8px', fontSize: '12px', textAlign: 'center' }}>
{material.quantity} {material.unit}
</td>
<td style={{ padding: '8px', textAlign: 'center' }}>
{getStatusBadge(material.purchase_status)}
</td>
<td style={{ padding: '8px', fontSize: '12px' }}>
{material.purchase_request_no || '-'}
</td>
<td style={{ padding: '8px', fontSize: '12px' }}>
{material.purchase_order_no || '-'}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
) : (
<div style={{
background: 'white',
borderRadius: '12px',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
minHeight: '400px'
}}>
<div style={{ textAlign: 'center', color: '#6c757d' }}>
<div style={{ fontSize: '48px', marginBottom: '16px' }}>📦</div>
<div style={{ fontSize: '16px' }}>배치를 선택하세요</div>
</div>
</div>
)}
</div>
</div>
);
};
export default PurchaseBatchPage;

211
frontend/src/pages/PurchaseRequestPage.css Normal file
View File

@@ -0,0 +1,211 @@
.purchase-request-page {
padding: 24px;
max-width: 1400px;
margin: 0 auto;
}
.page-header {
margin-bottom: 24px;
}
.back-btn {
background: none;
border: none;
color: #007bff;
cursor: pointer;
font-size: 14px;
padding: 0;
margin-bottom: 16px;
}
.back-btn:hover {
text-decoration: underline;
}
.page-header h1 {
font-size: 24px;
font-weight: 600;
margin: 0 0 8px 0;
}
.subtitle {
color: #6c757d;
margin: 0;
}
.main-content {
display: grid;
grid-template-columns: 400px 1fr;
gap: 24px;
}
/* 구매신청 목록 패널 */
.requests-panel {
background: white;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
overflow: hidden;
}
.panel-header {
padding: 16px;
border-bottom: 1px solid #e9ecef;
background: #f8f9fa;
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-header h2 {
font-size: 16px;
font-weight: 600;
margin: 0;
}
.requests-list {
max-height: 600px;
overflow-y: auto;
}
.request-card {
padding: 16px;
border-bottom: 1px solid #f1f3f4;
cursor: pointer;
transition: background 0.2s;
}
.request-card:hover {
background: #f8f9fa;
}
.request-card.selected {
background: #e7f3ff;
}
.request-header {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.request-no {
font-weight: 600;
font-size: 14px;
color: #007bff;
}
.request-date {
font-size: 12px;
color: #6c757d;
}
.request-info {
font-size: 13px;
color: #495057;
margin-bottom: 8px;
}
.material-count {
font-size: 12px;
color: #6c757d;
margin-top: 4px;
}
.request-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.requested-by {
font-size: 11px;
color: #6c757d;
}
.download-btn {
background: #28a745;
color: white;
border: none;
border-radius: 4px;
padding: 4px 8px;
font-size: 11px;
cursor: pointer;
}
.download-btn:hover {
background: #218838;
}
/* 상세 패널 */
.details-panel {
background: white;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
overflow: hidden;
}
.excel-btn {
background: #28a745;
color: white;
border: none;
border-radius: 6px;
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
}
.excel-btn:hover {
background: #218838;
}
.materials-table {
padding: 16px;
overflow: auto;
}
.materials-table table {
width: 100%;
border-collapse: collapse;
}
.materials-table th {
background: #f8f9fa;
padding: 8px;
text-align: left;
font-size: 12px;
font-weight: 600;
border-bottom: 2px solid #dee2e6;
}
.materials-table td {
padding: 8px;
font-size: 12px;
border-bottom: 1px solid #f1f3f4;
}
.category-badge {
background: #e9ecef;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
color: #6c757d;
}
.empty-icon {
font-size: 48px;
margin-bottom: 16px;
}
.loading {
padding: 40px;
text-align: center;
color: #6c757d;
}

274
frontend/src/pages/PurchaseRequestPage.jsx Normal file
View File

@@ -0,0 +1,274 @@
import React, { useState, useEffect } from 'react';
import api from '../api';
import { exportMaterialsToExcel } from '../utils/excelExport';
import './PurchaseRequestPage.css';
const PurchaseRequestPage = ({ onNavigate, fileId, jobNo, selectedProject }) => {
const [requests, setRequests] = useState([]);
const [selectedRequest, setSelectedRequest] = useState(null);
const [requestMaterials, setRequestMaterials] = useState([]);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
loadRequests();
}, [fileId, jobNo]);
const loadRequests = async () => {
setIsLoading(true);
try {
const params = {};
if (fileId) params.file_id = fileId;
if (jobNo) params.job_no = jobNo;
const response = await api.get('/purchase-request/list', { params });
setRequests(response.data.requests || []);
} catch (error) {
console.error('Failed to load requests:', error);
} finally {
setIsLoading(false);
}
};
const loadRequestMaterials = async (requestId) => {
setIsLoading(true);
try {
const response = await api.get(`/purchase-request/${requestId}/materials`);
// 그룹화된 자재가 있으면 우선 표시, 없으면 개별 자재 표시
if (response.data.grouped_materials && response.data.grouped_materials.length > 0) {
setRequestMaterials(response.data.grouped_materials);
} else {
setRequestMaterials(response.data.materials || []);
}
} catch (error) {
console.error('Failed to load materials:', error);
} finally {
setIsLoading(false);
}
};
const handleRequestSelect = (request) => {
setSelectedRequest(request);
loadRequestMaterials(request.request_id);
};
const handleDownloadExcel = async (requestId, requestNo) => {
try {
// 서버에서 자재 데이터 가져오기
const response = await api.get(`/purchase-request/${requestId}/download-excel`);
if (response.data.success) {
const materials = response.data.materials;
const groupedMaterials = response.data.grouped_materials || [];
const jobNo = response.data.job_no;
// 사용자 요구사항 매핑
const userRequirements = {};
materials.forEach(material => {
if (material.user_requirement) {
userRequirements[material.material_id || material.id] = material.user_requirement;
}
});
// 그룹화된 자재가 있으면 그것을 사용, 없으면 원본 자재 사용
const dataToExport = groupedMaterials.length > 0 ? groupedMaterials : materials;
// 파일명 생성
const timestamp = new Date().toISOString().split('T')[0];
const fileName = `${jobNo}_${requestNo}_${timestamp}.xlsx`;
// 기존 엑셀 유틸리티 사용하여 엑셀 생성
// 그룹화된 데이터와 사용자 요구사항 전달
exportMaterialsToExcel(dataToExport, fileName, {
jobNo,
requestNo,
userRequirements
});
} else {
alert('데이터를 가져올 수 없습니다');
}
} catch (error) {
console.error('Failed to download excel:', error);
alert('엑셀 다운로드 실패');
}
};
return (
<div className="purchase-request-page">
<div className="page-header">
<button onClick={() => onNavigate('bom', { selectedProject })} className="back-btn">
← BOM 관리로 돌아가기
</button>
<h1>구매신청 관리</h1>
<p className="subtitle">구매신청한 자재들을 그룹별로 관리합니다</p>
</div>
<div className="main-content">
{/* 구매신청 목록 */}
<div className="requests-panel">
<div className="panel-header">
<h2>구매신청 목록 ({requests.length})</h2>
</div>
<div className="requests-list">
{isLoading ? (
<div className="loading">로딩중...</div>
) : requests.length === 0 ? (
<div className="empty-state">구매신청이 없습니다</div>
) : (
requests.map(request => (
<div
key={request.request_id}
className={`request-card ${selectedRequest?.request_id === request.request_id ? 'selected' : ''}`}
onClick={() => handleRequestSelect(request)}
>
<div className="request-header">
<span className="request-no">{request.request_no}</span>
<span className="request-date">
{new Date(request.requested_at).toLocaleDateString()}
</span>
</div>
<div className="request-info">
<div>{request.job_no} - {request.job_name}</div>
<div className="material-count">
{request.category || '전체'} | {request.material_count}개 자재
</div>
</div>
<div className="request-footer">
<span className="requested-by">{request.requested_by}</span>
<button
onClick={(e) => {
e.stopPropagation();
handleDownloadExcel(request.request_id, request.request_no);
}}
className="download-btn"
>
📥 엑셀
</button>
</div>
</div>
))
)}
</div>
</div>
{/* 선택된 구매신청 상세 */}
<div className="details-panel">
{selectedRequest ? (
<>
<div className="panel-header">
<h2>{selectedRequest.request_no}</h2>
<button
onClick={() => handleDownloadExcel(selectedRequest.request_id, selectedRequest.request_no)}
className="excel-btn"
>
📥 엑셀 다운로드
</button>
</div>
<div className="materials-table">
{/* 카테고리별로 그룹화하여 표시 */}
{(() => {
// 카테고리별로 자재 그룹화
const groupedByCategory = requestMaterials.reduce((acc, material) => {
const category = material.category || 'UNKNOWN';
if (!acc[category]) acc[category] = [];
acc[category].push(material);
return acc;
}, {});
return Object.entries(groupedByCategory).map(([category, materials]) => (
<div key={category} style={{ marginBottom: '30px' }}>
<h3 style={{
background: '#f0f0f0',
padding: '10px',
borderRadius: '4px',
fontSize: '14px',
fontWeight: 'bold'
}}>
{category} ({materials.length}개)
</h3>
<table>
<thead>
<tr>
<th>No</th>
<th>카테고리</th>
<th>자재 설명</th>
<th>크기</th>
{category === 'BOLT' ? <th>길이</th> : <th>스케줄</th>}
<th>재질</th>
<th>수량</th>
<th>사용자요구</th>
</tr>
</thead>
<tbody>
{materials.map((material, idx) => (
<tr key={material.item_id || `${category}-${idx}`}>
<td>{idx + 1}</td>
<td>
<span className="category-badge">
{material.category}
</span>
</td>
<td>{material.description}</td>
<td>{material.size || '-'}</td>
<td>{material.schedule || '-'}</td>
<td>{material.material_grade || '-'}</td>
<td>
{material.category === 'PIPE' ? (
<div>
<span style={{ fontWeight: 'bold' }}>
{(() => {
// 총 길이와 개수 계산
let totalLengthMm = material.total_length || 0;
let totalCount = 0;
if (material.pipe_lengths && material.pipe_lengths.length > 0) {
// pipe_lengths 배열에서 총 개수 계산
totalCount = material.pipe_lengths.reduce((sum, p) => sum + parseFloat(p.quantity || 0), 0);
} else if (material.material_ids && material.material_ids.length > 0) {
totalCount = material.material_ids.length;
if (!totalLengthMm) {
totalLengthMm = totalCount * 6000;
}
} else {
totalCount = parseFloat(material.quantity) || 1;
if (!totalLengthMm) {
totalLengthMm = totalCount * 6000;
}
}
// 6,000mm를 1본으로 계산
const pipeCount = Math.ceil(totalLengthMm / 6000);
// 형식: 2본(11,000mm/40개)
return `${pipeCount}본(${totalLengthMm.toLocaleString()}mm/${totalCount}개)`;
})()}
</span>
</div>
) : (
`${material.quantity} ${material.unit || 'EA'}`
)}
</td>
<td>{material.user_requirement || '-'}</td>
</tr>
))}
</tbody>
</table>
</div>
));
})()}
</div>
</>
) : (
<div className="empty-state">
<div className="empty-icon">📦</div>
<div>구매신청을 선택하세요</div>
</div>
)}
</div>
</div>
</div>
);
};
export default PurchaseRequestPage;

541
frontend/src/pages/UserManagementPage.jsx
View File

@@ -4,6 +4,9 @@ import { reportError, logUserActionError } from '../utils/errorLogger';
const UserManagementPage = ({ onNavigate, user }) => {
const [users, setUsers] = useState([]);
const [pendingUsers, setPendingUsers] = useState([]);
const [suspendedUsers, setSuspendedUsers] = useState([]);
const [activeTab, setActiveTab] = useState('pending'); // 'pending', 'active', or 'suspended'
const [isLoading, setIsLoading] = useState(true);
const [message, setMessage] = useState({ type: '', text: '' });
const [showCreateModal, setShowCreateModal] = useState(false);
@@ -25,6 +28,8 @@ const UserManagementPage = ({ onNavigate, user }) => {
useEffect(() => {
loadUsers();
loadPendingUsers();
loadSuspendedUsers();
}, []);
const loadUsers = async () => {
@@ -46,6 +51,95 @@ const UserManagementPage = ({ onNavigate, user }) => {
}
};
const loadPendingUsers = async () => {
try {
const response = await api.get('/auth/signup-requests');
// API 응답에서 requests 배열을 가져옴
if (response.data.success && response.data.requests) {
setPendingUsers(response.data.requests);
} else {
setPendingUsers([]);
}
} catch (err) {
console.error('Load pending users error:', err);
// 에러는 무시하고 빈 배열로 설정
setPendingUsers([]);
}
};
const handleApproveUser = async (userId) => {
try {
const response = await api.post(`/auth/approve-signup/${userId}`);
if (response.data.success) {
setMessage({ type: 'success', text: '사용자가 승인되었습니다' });
loadPendingUsers();
loadUsers();
}
} catch (err) {
console.error('Approve user error:', err);
setMessage({ type: 'error', text: '승인 중 오류가 발생했습니다' });
}
};
const handleRejectUser = async (userId) => {
if (!window.confirm('정말로 이 가입 요청을 거부하시겠습니까?')) return;
try {
const response = await api.delete(`/auth/reject-signup/${userId}`);
if (response.data.success) {
setMessage({ type: 'success', text: '가입 요청이 거부되었습니다' });
loadPendingUsers();
}
} catch (err) {
console.error('Reject user error:', err);
setMessage({ type: 'error', text: '거부 중 오류가 발생했습니다' });
}
};
const loadSuspendedUsers = async () => {
try {
const response = await api.get('/auth/users/suspended');
if (response.data.success) {
setSuspendedUsers(response.data.users);
}
} catch (err) {
console.error('Load suspended users error:', err);
setSuspendedUsers([]);
}
};
const handleSuspendUser = async (userToSuspend) => {
if (!window.confirm(`정말로 ${userToSuspend.name} 사용자를 정지하시겠습니까?`)) return;
try {
const response = await api.patch(`/auth/users/${userToSuspend.user_id}/suspend`);
if (response.data.success) {
setMessage({ type: 'success', text: response.data.message });
loadUsers();
loadSuspendedUsers();
}
} catch (err) {
console.error('Suspend user error:', err);
setMessage({ type: 'error', text: '사용자 정지 중 오류가 발생했습니다' });
}
};
const handleReactivateUser = async (userToReactivate) => {
if (!window.confirm(`${userToReactivate.name} 사용자를 재활성화하시겠습니까?`)) return;
try {
const response = await api.patch(`/auth/users/${userToReactivate.user_id}/reactivate`);
if (response.data.success) {
setMessage({ type: 'success', text: response.data.message });
loadUsers();
loadSuspendedUsers();
}
} catch (err) {
console.error('Reactivate user error:', err);
setMessage({ type: 'error', text: '사용자 재활성화 중 오류가 발생했습니다' });
}
};
const handleCreateUser = async (e) => {
e.preventDefault();
@@ -256,22 +350,267 @@ const UserManagementPage = ({ onNavigate, user }) => {
</div>
)}
{/* 사용자 목록 */}
{/* 탭 네비게이션 */}
<div style={{
background: 'white',
borderRadius: '12px',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
overflow: 'hidden'
display: 'flex',
gap: '8px',
marginBottom: '24px',
borderBottom: '2px solid #e9ecef',
paddingBottom: '0'
}}>
<button
onClick={() => setActiveTab('pending')}
style={{
background: activeTab === 'pending' ? 'white' : 'transparent',
color: activeTab === 'pending' ? '#007bff' : '#6c757d',
border: activeTab === 'pending' ? '2px solid #e9ecef' : '2px solid transparent',
borderBottom: activeTab === 'pending' ? '2px solid white' : '2px solid transparent',
borderRadius: '8px 8px 0 0',
padding: '12px 24px',
fontSize: '14px',
fontWeight: '600',
cursor: 'pointer',
marginBottom: '-2px',
position: 'relative',
transition: 'all 0.2s'
}}
>
승인 대기
{pendingUsers.length > 0 && (
<span style={{
background: '#dc3545',
color: 'white',
borderRadius: '12px',
padding: '2px 6px',
fontSize: '11px',
marginLeft: '8px'
}}>
{pendingUsers.length}
</span>
)}
</button>
<button
onClick={() => setActiveTab('active')}
style={{
background: activeTab === 'active' ? 'white' : 'transparent',
color: activeTab === 'active' ? '#007bff' : '#6c757d',
border: activeTab === 'active' ? '2px solid #e9ecef' : '2px solid transparent',
borderBottom: activeTab === 'active' ? '2px solid white' : '2px solid transparent',
borderRadius: '8px 8px 0 0',
padding: '12px 24px',
fontSize: '14px',
fontWeight: '600',
cursor: 'pointer',
marginBottom: '-2px',
transition: 'all 0.2s'
}}
>
등록된 사용자 ({users.length}명)
</button>
<button
onClick={() => setActiveTab('suspended')}
style={{
background: activeTab === 'suspended' ? 'white' : 'transparent',
color: activeTab === 'suspended' ? '#007bff' : '#6c757d',
border: activeTab === 'suspended' ? '2px solid #e9ecef' : '2px solid transparent',
borderBottom: activeTab === 'suspended' ? '2px solid white' : '2px solid transparent',
borderRadius: '8px 8px 0 0',
padding: '12px 24px',
fontSize: '14px',
fontWeight: '600',
cursor: 'pointer',
marginBottom: '-2px',
transition: 'all 0.2s'
}}
>
정지된 사용자
{suspendedUsers.length > 0 && (
<span style={{
background: '#ffc107',
color: '#856404',
borderRadius: '12px',
padding: '2px 6px',
fontSize: '11px',
marginLeft: '8px'
}}>
{suspendedUsers.length}
</span>
)}
</button>
</div>
{/* 승인 대기 사용자 목록 */}
{activeTab === 'pending' && (
<div style={{
padding: '20px 24px',
borderBottom: '1px solid #e9ecef',
background: '#f8f9fa'
background: 'white',
borderRadius: '12px',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
overflow: 'hidden'
}}>
<h2 style={{ fontSize: '18px', fontWeight: '600', color: '#2d3748', margin: 0 }}>
등록된 사용자 ({users.length}명)
</h2>
<div style={{
padding: '20px 24px',
borderBottom: '1px solid #e9ecef',
background: '#fff5f5'
}}>
<h2 style={{ fontSize: '18px', fontWeight: '600', color: '#2d3748', margin: 0 }}>
승인 대기 사용자 ({pendingUsers.length}명)
</h2>
</div>
{pendingUsers.length === 0 ? (
<div style={{ padding: '40px', textAlign: 'center' }}>
<div style={{ fontSize: '16px', color: '#6c757d' }}>승인 대기 중인 사용자가 없습니다</div>
</div>
) : (
<div style={{ overflow: 'auto' }}>
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
<thead>
<tr style={{ background: '#f8f9fa' }}>
<th style={{ padding: '12px 16px', textAlign: 'left', fontWeight: '600', color: '#495057', borderBottom: '1px solid #dee2e6' }}>사용자</th>
<th style={{ padding: '12px 16px', textAlign: 'left', fontWeight: '600', color: '#495057', borderBottom: '1px solid #dee2e6' }}>역할</th>
<th style={{ padding: '12px 16px', textAlign: 'left', fontWeight: '600', color: '#495057', borderBottom: '1px solid #dee2e6' }}>부서/직책</th>
<th style={{ padding: '12px 16px', textAlign: 'left', fontWeight: '600', color: '#495057', borderBottom: '1px solid #dee2e6' }}>상태</th>
<th style={{ padding: '12px 16px', textAlign: 'left', fontWeight: '600', color: '#495057', borderBottom: '1px solid #dee2e6' }}>가입일</th>
<th style={{ padding: '12px 16px', textAlign: 'center', fontWeight: '600', color: '#495057', borderBottom: '1px solid #dee2e6' }}>관리</th>
</tr>
</thead>
<tbody>
{pendingUsers.map((userItem) => (
<tr key={userItem.user_id} style={{ borderBottom: '1px solid #f1f3f4' }}>
<td style={{ padding: '16px' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<div style={{
width: '40px',
height: '40px',
borderRadius: '50%',
background: '#e9ecef',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#6c757d',
fontSize: '16px',
fontWeight: '600'
}}>
{userItem.name ? userItem.name.charAt(0).toUpperCase() : '?'}
</div>
<div>
<div style={{ fontSize: '14px', fontWeight: '600', color: '#2d3748' }}>
{userItem.name || '이름 없음'}
</div>
<div style={{ fontSize: '12px', color: '#6c757d' }}>
@{userItem.username}
</div>
{userItem.email && (
<div style={{ fontSize: '12px', color: '#6c757d' }}>
{userItem.email}
</div>
)}
</div>
</div>
</td>
<td style={{ padding: '16px' }}>
<span style={{
background: '#e9ecef',
color: '#495057',
padding: '4px 8px',
borderRadius: '12px',
fontSize: '12px',
fontWeight: '600'
}}>
{userItem.role || '사용자'}
</span>
</td>
<td style={{ padding: '16px' }}>
<div style={{ fontSize: '14px', color: '#495057' }}>
{userItem.department || '-'}
</div>
<div style={{ fontSize: '12px', color: '#6c757d' }}>
{userItem.position || '-'}
</div>
</td>
<td style={{ padding: '16px' }}>
<span style={{
background: '#fff3cd',
color: '#856404',
padding: '4px 8px',
borderRadius: '12px',
fontSize: '12px',
fontWeight: '600'
}}>
승인 대기
</span>
</td>
<td style={{ padding: '16px' }}>
<div style={{ fontSize: '12px', color: '#6c757d' }}>
{userItem.created_at ? new Date(userItem.created_at).toLocaleDateString() : '-'}
</div>
</td>
<td style={{ padding: '16px' }}>
<div style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}>
<button
onClick={() => handleApproveUser(userItem.user_id)}
style={{
background: '#28a745',
color: 'white',
border: 'none',
borderRadius: '6px',
padding: '6px 12px',
fontSize: '12px',
fontWeight: '600',
cursor: 'pointer',
transition: 'background-color 0.2s'
}}
onMouseEnter={(e) => e.target.style.backgroundColor = '#218838'}
onMouseLeave={(e) => e.target.style.backgroundColor = '#28a745'}
>
승인
</button>
<button
onClick={() => handleRejectUser(userItem.user_id)}
style={{
background: '#dc3545',
color: 'white',
border: 'none',
borderRadius: '6px',
padding: '6px 12px',
fontSize: '12px',
fontWeight: '600',
cursor: 'pointer',
transition: 'background-color 0.2s'
}}
onMouseEnter={(e) => e.target.style.backgroundColor = '#c82333'}
onMouseLeave={(e) => e.target.style.backgroundColor = '#dc3545'}
>
거부
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
)}
{/* 등록된 사용자 목록 */}
{activeTab === 'active' && (
<div style={{
background: 'white',
borderRadius: '12px',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
overflow: 'hidden'
}}>
<div style={{
padding: '20px 24px',
borderBottom: '1px solid #e9ecef',
background: '#f8f9fa'
}}>
<h2 style={{ fontSize: '18px', fontWeight: '600', color: '#2d3748', margin: 0 }}>
등록된 사용자 ({users.length}명)
</h2>
</div>
{isLoading ? (
<div style={{ padding: '40px', textAlign: 'center' }}>
@@ -388,6 +727,26 @@ const UserManagementPage = ({ onNavigate, user }) => {
>
역할 변경
</button>
{userItem.user_id !== user?.user_id && (
<button
onClick={() => handleSuspendUser(userItem)}
style={{
background: '#ff9800',
color: 'white',
border: 'none',
borderRadius: '4px',
padding: '6px 12px',
fontSize: '12px',
cursor: 'pointer',
transition: 'background-color 0.2s'
}}
onMouseEnter={(e) => e.target.style.backgroundColor = '#e68900'}
onMouseLeave={(e) => e.target.style.backgroundColor = '#ff9800'}
title="사용자 정지"
>
정지
</button>
)}
{userItem.user_id !== user?.user_id && (
<button
onClick={() => handleDeleteUser(userItem)}
@@ -417,7 +776,165 @@ const UserManagementPage = ({ onNavigate, user }) => {
</table>
</div>
)}
</div>
</div>
)}
{/* 정지된 사용자 목록 */}
{activeTab === 'suspended' && (
<div style={{
background: 'white',
borderRadius: '12px',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
overflow: 'hidden'
}}>
<div style={{
padding: '20px 24px',
borderBottom: '1px solid #e9ecef',
background: '#fff8e1'
}}>
<h2 style={{ fontSize: '18px', fontWeight: '600', color: '#2d3748', margin: 0 }}>
정지된 사용자 ({suspendedUsers.length}명)
</h2>
</div>
{suspendedUsers.length === 0 ? (
<div style={{ padding: '40px', textAlign: 'center' }}>
<div style={{ fontSize: '16px', color: '#6c757d' }}>정지된 사용자가 없습니다</div>
</div>
) : (
<div style={{ overflow: 'auto' }}>
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
<thead>
<tr style={{ background: '#f8f9fa' }}>
<th style={{ padding: '12px 16px', textAlign: 'left', fontWeight: '600', color: '#495057', borderBottom: '1px solid #dee2e6' }}>사용자</th>
<th style={{ padding: '12px 16px', textAlign: 'left', fontWeight: '600', color: '#495057', borderBottom: '1px solid #dee2e6' }}>역할</th>
<th style={{ padding: '12px 16px', textAlign: 'left', fontWeight: '600', color: '#495057', borderBottom: '1px solid #dee2e6' }}>부서/직책</th>
<th style={{ padding: '12px 16px', textAlign: 'left', fontWeight: '600', color: '#495057', borderBottom: '1px solid #dee2e6' }}>상태</th>
<th style={{ padding: '12px 16px', textAlign: 'left', fontWeight: '600', color: '#495057', borderBottom: '1px solid #dee2e6' }}>정지일</th>
<th style={{ padding: '12px 16px', textAlign: 'center', fontWeight: '600', color: '#495057', borderBottom: '1px solid #dee2e6' }}>관리</th>
</tr>
</thead>
<tbody>
{suspendedUsers.map((userItem) => (
<tr key={userItem.user_id} style={{ borderBottom: '1px solid #f1f3f4' }}>
<td style={{ padding: '16px' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<div style={{
width: '40px',
height: '40px',
borderRadius: '50%',
background: '#ffc107',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
fontSize: '16px',
fontWeight: '600'
}}>
{userItem.name ? userItem.name.charAt(0).toUpperCase() : '?'}
</div>
<div>
<div style={{ fontSize: '14px', fontWeight: '600', color: '#2d3748' }}>
{userItem.name || '이름 없음'}
</div>
<div style={{ fontSize: '12px', color: '#6c757d' }}>
@{userItem.username}
</div>
{userItem.email && (
<div style={{ fontSize: '12px', color: '#6c757d' }}>
{userItem.email}
</div>
)}
</div>
</div>
</td>
<td style={{ padding: '16px' }}>
<span style={{
background: getRoleBadgeColor(userItem.role).bg,
color: getRoleBadgeColor(userItem.role).color,
padding: '4px 8px',
borderRadius: '12px',
fontSize: '12px',
fontWeight: '600'
}}>
{getRoleDisplayName(userItem.role)}
</span>
</td>
<td style={{ padding: '16px' }}>
<div style={{ fontSize: '14px', color: '#495057' }}>
{userItem.department || '-'}
</div>
<div style={{ fontSize: '12px', color: '#6c757d' }}>
{userItem.position || '-'}
</div>
</td>
<td style={{ padding: '16px' }}>
<span style={{
background: '#fff3cd',
color: '#856404',
padding: '4px 8px',
borderRadius: '12px',
fontSize: '12px',
fontWeight: '600'
}}>
정지됨
</span>
</td>
<td style={{ padding: '16px' }}>
<div style={{ fontSize: '12px', color: '#6c757d' }}>
{userItem.updated_at ? new Date(userItem.updated_at).toLocaleDateString() : '-'}
</div>
</td>
<td style={{ padding: '16px' }}>
<div style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}>
<button
onClick={() => handleReactivateUser(userItem)}
style={{
background: '#28a745',
color: 'white',
border: 'none',
borderRadius: '6px',
padding: '6px 12px',
fontSize: '12px',
fontWeight: '600',
cursor: 'pointer',
transition: 'background-color 0.2s'
}}
onMouseEnter={(e) => e.target.style.backgroundColor = '#218838'}
onMouseLeave={(e) => e.target.style.backgroundColor = '#28a745'}
>
재활성화
</button>
{userItem.user_id !== user?.user_id && (
<button
onClick={() => handleDeleteUser(userItem)}
style={{
background: '#dc3545',
color: 'white',
border: 'none',
borderRadius: '6px',
padding: '6px 12px',
fontSize: '12px',
fontWeight: '600',
cursor: 'pointer',
transition: 'background-color 0.2s'
}}
onMouseEnter={(e) => e.target.style.backgroundColor = '#c82333'}
onMouseLeave={(e) => e.target.style.backgroundColor = '#dc3545'}
>
삭제
</button>
)}
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
)}
</div>
{/* 사용자 생성 모달 */}

29
frontend/src/utils/excelExport.js
View File

@@ -189,6 +189,18 @@ const formatMaterialForExcel = (material, includeComparison = false) => {
}
} else if (category === 'BOLT') {
itemName = 'BOLT';
} else if (category === 'SUPPORT' || category === 'U_BOLT') {
// SUPPORT 카테고리: 타입별 구분
const desc = cleanDescription.toUpperCase();
if (desc.includes('URETHANE') || desc.includes('BLOCK SHOE')) {
itemName = 'URETHANE BLOCK SHOE';
} else if (desc.includes('CLAMP')) {
itemName = 'CLAMP';
} else if (desc.includes('U-BOLT') || desc.includes('U BOLT')) {
itemName = 'U-BOLT';
} else {
itemName = 'SUPPORT';
}
} else {
itemName = category || 'UNKNOWN';
}
@@ -392,11 +404,26 @@ const formatMaterialForExcel = (material, includeComparison = false) => {
detailInfo = otherDetails.join(', ');
}
// 수량 계산 (PIPE는 본 단위)
let quantity = purchaseInfo.purchaseQuantity || material.quantity || 0;
if (category === 'PIPE') {
// PIPE의 경우 본 단위로 계산
if (material.total_length) {
// 총 길이를 6000mm로 나누어 본 수 계산
quantity = Math.ceil(material.total_length / 6000);
} else if (material.pipe_details && material.pipe_details.total_length_mm) {
quantity = Math.ceil(material.pipe_details.total_length_mm / 6000);
} else if (material.pipe_count) {
quantity = material.pipe_count;
}
}
// 새로운 엑셀 양식에 맞춘 데이터 구조
const base = {
'TAGNO': '', // 비워둠
'품목명': itemName,
'수량': purchaseInfo.purchaseQuantity || material.quantity || 0,
'수량': quantity,
'통화구분': 'KRW', // 기본값
'단가': 1, // 일괄 1로 설정
'크기': material.size_spec || '-',