83b90ef05c
Some checks failed
SonarQube Analysis / SonarQube Scan (push) Has been cancelled
- 파이프 수량 계산 로직 수정 (단관 개수가 아닌 실제 길이 기반 계산) - UI 전면 개편 (DevonThink 스타일의 간결하고 세련된 디자인) - 자재별 그룹핑 로직 개선: * 플랜지: 동일 사양별 그룹핑, WN 스케줄 표시, ORIFICE 풀네임 표시 * 피팅: 상세 타입 표시 (니플 길이, 엘보 각도/연결, 티 타입, 리듀서 타입 등) * 밸브: 동일 사양별 그룹핑, 타입/연결방식/압력 표시 * 볼트: 크기/재질/길이별 그룹핑 (8SET → 개별 집계) * 가스켓: 동일 사양별 그룹핑, 재질/상세내역/두께 분리 표시 * UNKNOWN: 원본 설명 전체 표시, 동일 항목 그룹핑 - 전체 카테고리 버튼 제거 (표시 복잡도 감소) - 카테고리별 동적 컬럼 헤더 및 레이아웃 적용
483 lines
24 KiB
JavaScript
483 lines
24 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import { api } from '../api';
|
||
|
||
const PersonalizedDashboard = () => {
|
||
const [user, setUser] = useState(null);
|
||
const [dashboardData, setDashboardData] = useState(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [recentActivities, setRecentActivities] = useState([]);
|
||
|
||
useEffect(() => {
|
||
loadUserData();
|
||
loadDashboardData();
|
||
loadRecentActivities();
|
||
}, []);
|
||
|
||
const loadUserData = () => {
|
||
const userData = localStorage.getItem('user_data');
|
||
if (userData) {
|
||
setUser(JSON.parse(userData));
|
||
}
|
||
};
|
||
|
||
const loadDashboardData = async () => {
|
||
try {
|
||
// 실제 API에서 대시보드 데이터 로드
|
||
const response = await api.get('/dashboard/stats');
|
||
if (response.data && response.data.success) {
|
||
// API 데이터와 목 데이터를 병합 (quickActions 등 누락된 필드 보완)
|
||
const mockData = generateMockDataByRole();
|
||
const mergedData = {
|
||
...mockData,
|
||
...response.data.stats,
|
||
// quickActions가 없으면 목 데이터의 것을 사용
|
||
quickActions: response.data.stats.quickActions || mockData?.quickActions || []
|
||
};
|
||
setDashboardData(mergedData);
|
||
} else {
|
||
// API 실패 시 목 데이터 사용
|
||
console.log('대시보드 API 응답이 없어 목 데이터를 사용합니다.');
|
||
const mockData = generateMockDataByRole();
|
||
setDashboardData(mockData);
|
||
}
|
||
} catch (error) {
|
||
console.log('대시보드 API가 구현되지 않아 목 데이터를 사용합니다:', error.response?.status);
|
||
// 에러 시 목 데이터 사용
|
||
const mockData = generateMockDataByRole();
|
||
setDashboardData(mockData);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const loadRecentActivities = async () => {
|
||
try {
|
||
// 실제 API에서 활동 이력 로드
|
||
const response = await api.get('/dashboard/activities?limit=5');
|
||
if (response.data.success && response.data.activities.length > 0) {
|
||
setRecentActivities(response.data.activities);
|
||
} else {
|
||
// API 실패 시 목 데이터 사용
|
||
const mockActivities = generateMockActivitiesByRole();
|
||
setRecentActivities(mockActivities);
|
||
}
|
||
} catch (error) {
|
||
console.log('활동 이력 API가 구현되지 않아 목 데이터를 사용합니다:', error.response?.status);
|
||
// 에러 시 목 데이터 사용
|
||
const mockActivities = generateMockActivitiesByRole();
|
||
setRecentActivities(mockActivities);
|
||
}
|
||
};
|
||
|
||
const generateMockDataByRole = () => {
|
||
if (!user) return null;
|
||
|
||
const baseData = {
|
||
admin: {
|
||
title: "시스템 관리자",
|
||
subtitle: "전체 시스템을 관리하고 모니터링합니다",
|
||
metrics: [
|
||
{ label: "전체 프로젝트 수", value: 45, icon: "📋", color: "#667eea" },
|
||
{ label: "활성 사용자 수", value: 12, icon: "👥", color: "#48bb78" },
|
||
{ label: "시스템 상태", value: "정상", icon: "🟢", color: "#38b2ac" },
|
||
{ label: "오늘 업로드", value: 8, icon: "📤", color: "#ed8936" }
|
||
],
|
||
quickActions: [
|
||
{ title: "사용자 관리", icon: "👤", path: "/admin/users", color: "#667eea" },
|
||
{ title: "시스템 설정", icon: "⚙️", path: "/admin/settings", color: "#48bb78" },
|
||
{ title: "백업 관리", icon: "💾", path: "/admin/backup", color: "#ed8936" },
|
||
{ title: "활동 로그", icon: "📊", path: "/admin/logs", color: "#9f7aea" }
|
||
]
|
||
},
|
||
manager: {
|
||
title: "프로젝트 매니저",
|
||
subtitle: "팀 프로젝트를 관리하고 진행상황을 모니터링합니다",
|
||
metrics: [
|
||
{ label: "담당 프로젝트", value: 8, icon: "📋", color: "#667eea" },
|
||
{ label: "팀 진행률", value: "87%", icon: "📈", color: "#48bb78" },
|
||
{ label: "승인 대기", value: 3, icon: "⏳", color: "#ed8936" },
|
||
{ label: "이번 주 완료", value: 5, icon: "✅", color: "#38b2ac" }
|
||
],
|
||
quickActions: [
|
||
{ title: "프로젝트 생성", icon: "➕", path: "/projects/new", color: "#667eea" },
|
||
{ title: "팀 관리", icon: "👥", path: "/team", color: "#48bb78" },
|
||
{ title: "진행 상황", icon: "📊", path: "/progress", color: "#38b2ac" },
|
||
{ title: "승인 처리", icon: "✅", path: "/approvals", color: "#ed8936" }
|
||
]
|
||
},
|
||
designer: {
|
||
title: "설계 담당자",
|
||
subtitle: "BOM 파일을 관리하고 자재를 분류합니다",
|
||
metrics: [
|
||
{ label: "내 BOM 파일", value: 15, icon: "📄", color: "#667eea" },
|
||
{ label: "분류 완료율", value: "92%", icon: "🎯", color: "#48bb78" },
|
||
{ label: "검증 대기", value: 7, icon: "⏳", color: "#ed8936" },
|
||
{ label: "이번 주 업로드", value: 12, icon: "📤", color: "#9f7aea" }
|
||
],
|
||
quickActions: [
|
||
{ title: "BOM 업로드", icon: "📤", path: "/upload", color: "#667eea" },
|
||
{ title: "자재 분류", icon: "🔧", path: "/materials", color: "#48bb78" },
|
||
{ title: "리비전 관리", icon: "🔄", path: "/revisions", color: "#38b2ac" },
|
||
{ title: "분류 검증", icon: "✅", path: "/verify", color: "#ed8936" }
|
||
]
|
||
},
|
||
purchaser: {
|
||
title: "구매 담당자",
|
||
subtitle: "구매 요청을 처리하고 발주를 관리합니다",
|
||
metrics: [
|
||
{ label: "구매 요청", value: 23, icon: "🛒", color: "#667eea" },
|
||
{ label: "발주 완료", value: 18, icon: "✅", color: "#48bb78" },
|
||
{ label: "입고 대기", value: 5, icon: "📦", color: "#ed8936" },
|
||
{ label: "이번 달 금액", value: "₩2.3M", icon: "💰", color: "#9f7aea" }
|
||
],
|
||
quickActions: [
|
||
{ title: "구매 확정", icon: "🛒", path: "/purchase", color: "#667eea" },
|
||
{ title: "발주 관리", icon: "📋", path: "/orders", color: "#48bb78" },
|
||
{ title: "공급업체", icon: "🏢", path: "/suppliers", color: "#38b2ac" },
|
||
{ title: "입고 처리", icon: "📦", path: "/receiving", color: "#ed8936" }
|
||
]
|
||
},
|
||
user: {
|
||
title: "일반 사용자",
|
||
subtitle: "할당된 업무를 수행하고 프로젝트에 참여합니다",
|
||
metrics: [
|
||
{ label: "내 업무", value: 6, icon: "📋", color: "#667eea" },
|
||
{ label: "완료율", value: "75%", icon: "📈", color: "#48bb78" },
|
||
{ label: "대기 중", value: 2, icon: "⏳", color: "#ed8936" },
|
||
{ label: "이번 주 활동", value: 12, icon: "🎯", color: "#9f7aea" }
|
||
],
|
||
quickActions: [
|
||
{ title: "내 업무", icon: "📋", path: "/my-tasks", color: "#667eea" },
|
||
{ title: "프로젝트 보기", icon: "👁️", path: "/projects", color: "#48bb78" },
|
||
{ title: "리포트 다운로드", icon: "📊", path: "/reports", color: "#38b2ac" },
|
||
{ title: "도움말", icon: "❓", path: "/help", color: "#9f7aea" }
|
||
]
|
||
}
|
||
};
|
||
|
||
return baseData[user.role] || baseData.user;
|
||
};
|
||
|
||
const generateMockActivitiesByRole = () => {
|
||
if (!user) return [];
|
||
|
||
const activities = {
|
||
admin: [
|
||
{ type: "system", message: "새 사용자 3명이 등록되었습니다", time: "30분 전", icon: "👥" },
|
||
{ type: "backup", message: "일일 백업이 완료되었습니다", time: "2시간 전", icon: "💾" },
|
||
{ type: "alert", message: "시스템 리소스 사용률 85%", time: "4시간 전", icon: "⚠️" },
|
||
{ type: "update", message: "데이터베이스 인덱스가 최적화되었습니다", time: "6시간 전", icon: "🔧" }
|
||
],
|
||
manager: [
|
||
{ type: "approval", message: "냉동기 프로젝트 구매 승인 완료", time: "1시간 전", icon: "✅" },
|
||
{ type: "meeting", message: "주간 팀 미팅 일정이 등록되었습니다", time: "3시간 전", icon: "📅" },
|
||
{ type: "progress", message: "BOG 시스템 프로젝트 90% 진행", time: "5시간 전", icon: "📈" },
|
||
{ type: "task", message: "김설계님에게 새 업무가 할당되었습니다", time: "1일 전", icon: "👤" }
|
||
],
|
||
designer: [
|
||
{ type: "upload", message: "다이아프램 펌프 BOM 파일을 업로드했습니다", time: "45분 전", icon: "📤" },
|
||
{ type: "classify", message: "스테인리스 파이프 127개 자재 분류 완료", time: "2시간 전", icon: "🔧" },
|
||
{ type: "revision", message: "드라이어 시스템 Rev.2 업데이트", time: "4시간 전", icon: "🔄" },
|
||
{ type: "verify", message: "볼트 분류 검증 5건 완료", time: "1일 전", icon: "✅" }
|
||
],
|
||
purchaser: [
|
||
{ type: "purchase", message: "스테인리스 파이프 구매 확정", time: "20분 전", icon: "🛒" },
|
||
{ type: "order", message: "ABC 공급업체에 발주서 전송", time: "1시간 전", icon: "📋" },
|
||
{ type: "receive", message: "밸브 15개 입고 처리 완료", time: "3시간 전", icon: "📦" },
|
||
{ type: "quote", message: "새 견적서 3건 접수", time: "5시간 전", icon: "💰" }
|
||
],
|
||
user: [
|
||
{ type: "task", message: "자재 검증 업무 2건 완료", time: "1시간 전", icon: "✅" },
|
||
{ type: "view", message: "냉동기 프로젝트 진행상황 확인", time: "3시간 전", icon: "👁️" },
|
||
{ type: "download", message: "월간 리포트 다운로드", time: "6시간 전", icon: "📊" },
|
||
{ type: "help", message: "도움말 페이지 방문", time: "1일 전", icon: "❓" }
|
||
]
|
||
};
|
||
|
||
return activities[user.role] || activities.user;
|
||
};
|
||
|
||
const handleQuickAction = (action) => {
|
||
// 실제 네비게이션 구현 (향후)
|
||
console.log(`네비게이션: ${action.path}`);
|
||
alert(`${action.title} 기능은 곧 구현될 예정입니다.`);
|
||
};
|
||
|
||
const handleLogout = () => {
|
||
localStorage.removeItem('access_token');
|
||
localStorage.removeItem('user_data');
|
||
window.location.reload();
|
||
};
|
||
|
||
if (loading || !user || !dashboardData) {
|
||
return (
|
||
<div style={{
|
||
minHeight: '100vh',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
background: '#f7fafc'
|
||
}}>
|
||
<div style={{ textAlign: 'center' }}>
|
||
<div style={{ fontSize: '48px', marginBottom: '16px' }}>⏳</div>
|
||
<div>대시보드를 불러오는 중...</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div style={{
|
||
minHeight: '100vh',
|
||
background: '#f7fafc',
|
||
fontFamily: 'Arial, sans-serif'
|
||
}}>
|
||
{/* 네비게이션 바 */}
|
||
<nav style={{
|
||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||
padding: '16px 24px',
|
||
color: 'white',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||
<span style={{ fontSize: '24px' }}>🚀</span>
|
||
<div>
|
||
<h1 style={{ margin: '0', fontSize: '20px', fontWeight: '700' }}>TK-MP System</h1>
|
||
<span style={{ fontSize: '12px', opacity: '0.9' }}>통합 프로젝트 관리</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||
<div style={{ textAlign: 'right' }}>
|
||
<div style={{ fontSize: '14px', fontWeight: '600' }}>{user.name || user.username}</div>
|
||
<div style={{ fontSize: '12px', opacity: '0.9' }}>
|
||
{dashboardData.title}
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={handleLogout}
|
||
style={{
|
||
padding: '8px 16px',
|
||
background: 'rgba(255, 255, 255, 0.2)',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '6px',
|
||
cursor: 'pointer',
|
||
fontSize: '14px'
|
||
}}
|
||
>
|
||
로그아웃
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* 메인 콘텐츠 */}
|
||
<main style={{ padding: '32px 24px' }}>
|
||
<div style={{ maxWidth: '1200px', margin: '0 auto' }}>
|
||
{/* 개인별 맞춤 배너 */}
|
||
<div style={{
|
||
background: `linear-gradient(135deg, ${dashboardData.metrics[0].color}20 0%, ${dashboardData.metrics[1].color}20 100%)`,
|
||
borderRadius: '16px',
|
||
padding: '32px',
|
||
marginBottom: '32px',
|
||
border: `1px solid ${dashboardData.metrics[0].color}40`
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '16px' }}>
|
||
<div style={{ fontSize: '48px' }}>
|
||
{user.role === 'admin' ? '👑' :
|
||
user.role === 'manager' ? '👨💼' :
|
||
user.role === 'designer' ? '🎨' :
|
||
user.role === 'purchaser' ? '🛒' : '👤'}
|
||
</div>
|
||
<div>
|
||
<h2 style={{
|
||
margin: '0 0 8px 0',
|
||
fontSize: '28px',
|
||
fontWeight: '700',
|
||
color: '#2d3748'
|
||
}}>
|
||
안녕하세요, {user.name || user.username}님! 👋
|
||
</h2>
|
||
<p style={{
|
||
margin: '0',
|
||
fontSize: '16px',
|
||
color: '#4a5568',
|
||
fontWeight: '500'
|
||
}}>
|
||
{dashboardData.subtitle}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 핵심 지표 카드들 */}
|
||
<div style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
|
||
gap: '24px',
|
||
marginBottom: '32px'
|
||
}}>
|
||
{(dashboardData.metrics || []).map((metric, index) => (
|
||
<div key={index} style={{
|
||
background: 'white',
|
||
borderRadius: '12px',
|
||
padding: '24px',
|
||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||
border: '1px solid #e2e8f0',
|
||
transition: 'transform 0.2s ease, box-shadow 0.2s ease',
|
||
cursor: 'pointer'
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||
e.currentTarget.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.15)';
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
e.currentTarget.style.transform = 'translateY(0)';
|
||
e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)';
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<div>
|
||
<div style={{
|
||
fontSize: '14px',
|
||
color: '#718096',
|
||
marginBottom: '8px',
|
||
fontWeight: '500'
|
||
}}>
|
||
{metric.label}
|
||
</div>
|
||
<div style={{
|
||
fontSize: '32px',
|
||
fontWeight: '700',
|
||
color: metric.color
|
||
}}>
|
||
{metric.value}
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
fontSize: '32px',
|
||
opacity: 0.8
|
||
}}>
|
||
{metric.icon}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',
|
||
gap: '24px'
|
||
}}>
|
||
{/* 빠른 작업 */}
|
||
<div style={{
|
||
background: 'white',
|
||
borderRadius: '12px',
|
||
padding: '24px',
|
||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||
border: '1px solid #e2e8f0'
|
||
}}>
|
||
<h3 style={{
|
||
fontSize: '18px',
|
||
fontWeight: '600',
|
||
color: '#2d3748',
|
||
margin: '0 0 20px 0'
|
||
}}>
|
||
⚡ 빠른 작업
|
||
</h3>
|
||
<div style={{ display: 'grid', gap: '12px' }}>
|
||
{(dashboardData.quickActions || []).map((action, index) => (
|
||
<button
|
||
key={index}
|
||
onClick={() => handleQuickAction(action)}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '12px',
|
||
padding: '12px 16px',
|
||
background: 'transparent',
|
||
border: '1px solid #e2e8f0',
|
||
borderRadius: '8px',
|
||
cursor: 'pointer',
|
||
transition: 'all 0.2s ease',
|
||
fontSize: '14px',
|
||
color: '#4a5568',
|
||
textAlign: 'left'
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
e.target.style.background = `${action.color}10`;
|
||
e.target.style.borderColor = action.color;
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
e.target.style.background = 'transparent';
|
||
e.target.style.borderColor = '#e2e8f0';
|
||
}}
|
||
>
|
||
<span style={{ fontSize: '16px' }}>{action.icon}</span>
|
||
<span>{action.title}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 최근 활동 */}
|
||
<div style={{
|
||
background: 'white',
|
||
borderRadius: '12px',
|
||
padding: '24px',
|
||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||
border: '1px solid #e2e8f0'
|
||
}}>
|
||
<h3 style={{
|
||
fontSize: '18px',
|
||
fontWeight: '600',
|
||
color: '#2d3748',
|
||
margin: '0 0 20px 0'
|
||
}}>
|
||
📈 최근 활동
|
||
</h3>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||
{recentActivities.map((activity, index) => (
|
||
<div key={index} style={{
|
||
display: 'flex',
|
||
alignItems: 'flex-start',
|
||
gap: '12px',
|
||
padding: '12px',
|
||
borderRadius: '8px',
|
||
background: '#f7fafc',
|
||
border: '1px solid #e2e8f0'
|
||
}}>
|
||
<span style={{ fontSize: '16px' }}>
|
||
{activity.icon}
|
||
</span>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{
|
||
fontSize: '14px',
|
||
color: '#2d3748',
|
||
marginBottom: '4px'
|
||
}}>
|
||
{activity.message}
|
||
</div>
|
||
<div style={{
|
||
fontSize: '12px',
|
||
color: '#718096'
|
||
}}>
|
||
{activity.time}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default PersonalizedDashboard;
|