564 lines
14 KiB
HTML
564 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>작업 현황판 | (주)테크니컬코리아</title>
|
|
<link rel="stylesheet" href="/css/main-layout.css">
|
|
<link rel="icon" type="image/png" href="/img/favicon.png">
|
|
<script src="/js/auth-check.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<div class="main-layout-no-sidebar">
|
|
<!-- 네비게이션만 로드 -->
|
|
<div id="navbar-container"></div>
|
|
|
|
<!-- 사이드바 없이 전체 화면 사용 -->
|
|
<div class="full-content-wrapper">
|
|
<div id="content-container">
|
|
<header class="dashboard-header">
|
|
<div class="header-content">
|
|
<div class="header-left">
|
|
<h1>📊 작업 현황판</h1>
|
|
<p id="welcome-message">실시간 팀 현황 및 작업 모니터링</p>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="status-badge">
|
|
<span class="status-dot active"></span>
|
|
<span>활성 상태</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="dashboard-sections">
|
|
<!-- 빠른 액션 영역 -->
|
|
<section class="quick-actions-section">
|
|
<h2>⚡ 빠른 메뉴</h2>
|
|
<div class="workflow-cards">
|
|
<div class="workflow-card" onclick="location.href='/pages/common/daily-work-report.html'">
|
|
<div class="card-icon">👥</div>
|
|
<div class="card-content">
|
|
<h3>팀 작업 관리</h3>
|
|
<p>팀원 작업 현황 확인 및 관리</p>
|
|
</div>
|
|
<div class="card-arrow">→</div>
|
|
</div>
|
|
|
|
<div class="workflow-card" onclick="location.href='/pages/common/management-dashboard.html'">
|
|
<div class="card-icon">📊</div>
|
|
<div class="card-content">
|
|
<h3>관리 대시보드</h3>
|
|
<p>종합 관리 및 모니터링 시스템</p>
|
|
</div>
|
|
<div class="card-arrow">→</div>
|
|
</div>
|
|
|
|
<div class="workflow-card-empty"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 대시보드 그리드 -->
|
|
<div class="dashboard-grid">
|
|
<!-- 팀 현황 -->
|
|
<section class="dashboard-card">
|
|
<div class="card-header">
|
|
<h2>👥 팀 현황</h2>
|
|
<div class="refresh-btn" onclick="refreshTeamStatus()">🔄</div>
|
|
</div>
|
|
<div class="team-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-number" id="team-total">8</div>
|
|
<div class="stat-label">총 팀원</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number present" id="team-present">7</div>
|
|
<div class="stat-label">출근</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number absent" id="team-absent">1</div>
|
|
<div class="stat-label">결근</div>
|
|
</div>
|
|
</div>
|
|
<div class="team-list" id="team-list">
|
|
<div class="team-member present">
|
|
<span class="member-name">김작업</span>
|
|
<span class="member-status">출근</span>
|
|
</div>
|
|
<div class="team-member present">
|
|
<span class="member-name">이현장</span>
|
|
<span class="member-status">출근</span>
|
|
</div>
|
|
<div class="team-member absent">
|
|
<span class="member-name">박휴가</span>
|
|
<span class="member-status">휴가</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 공지사항 -->
|
|
<section class="dashboard-card">
|
|
<div class="card-header">
|
|
<h2>📢 공지사항</h2>
|
|
</div>
|
|
<div class="notice-content">
|
|
<div class="notice-item">
|
|
<div class="notice-title">안전 교육 실시 안내</div>
|
|
<div class="notice-date">2025.06.10</div>
|
|
</div>
|
|
<div class="notice-item">
|
|
<div class="notice-title">하절기 근무시간 변경</div>
|
|
<div class="notice-date">2025.06.05</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 근무 일지 (준비중) -->
|
|
<section class="dashboard-card coming-soon-card">
|
|
<div class="card-header">
|
|
<h2>📅 근무 일지</h2>
|
|
<div class="coming-soon-badge">준비중</div>
|
|
</div>
|
|
<div class="coming-soon-content">
|
|
<div class="coming-soon-icon">🚧</div>
|
|
<p>근무 일지 기능을 준비중입니다.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 통계 (준비중) -->
|
|
<section class="dashboard-card coming-soon-card">
|
|
<div class="card-header">
|
|
<h2>📈 통계</h2>
|
|
<div class="coming-soon-badge">준비중</div>
|
|
</div>
|
|
<div class="coming-soon-content">
|
|
<div class="coming-soon-icon">📊</div>
|
|
<p>통계 기능을 준비중입니다.</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 사이드바 로딩 없이 네비게이션만 로드 -->
|
|
<script type="module" src="/js/load-navbar.js"></script>
|
|
|
|
<style>
|
|
/* 사이드바 없는 레이아웃 */
|
|
.main-layout-no-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
font-family: 'Malgun Gothic', sans-serif;
|
|
}
|
|
|
|
.full-content-wrapper {
|
|
flex: 1;
|
|
padding: 20px;
|
|
background: #f5f7fa;
|
|
}
|
|
|
|
#content-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* 현황판 전용 스타일 */
|
|
.dashboard-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 32px;
|
|
border-radius: 16px;
|
|
margin-bottom: 32px;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-left h1 {
|
|
margin: 0 0 12px 0;
|
|
font-size: 2.2rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.header-left p {
|
|
margin: 0;
|
|
opacity: 0.9;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.status-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: rgba(255,255,255,0.2);
|
|
padding: 12px 20px;
|
|
border-radius: 25px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.status-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: #4CAF50;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
/* 빠른 메뉴 영역 */
|
|
.quick-actions-section {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.quick-actions-section h2 {
|
|
margin-bottom: 20px;
|
|
color: #333;
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.workflow-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
max-width: 1000px;
|
|
}
|
|
|
|
.workflow-card {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
border: 2px solid transparent;
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.workflow-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.card-icon {
|
|
font-size: 2.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.card-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.card-content h3 {
|
|
margin: 0 0 8px 0;
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.card-content p {
|
|
margin: 0;
|
|
color: #666;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.card-arrow {
|
|
font-size: 1.8rem;
|
|
color: #667eea;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.workflow-card:hover .card-arrow {
|
|
transform: translateX(6px);
|
|
}
|
|
|
|
.workflow-card-empty {
|
|
background: transparent;
|
|
border: 3px dashed #e0e0e0;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
min-height: 100px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* 대시보드 그리드 */
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: 24px;
|
|
}
|
|
|
|
.dashboard-card {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 28px;
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.dashboard-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.card-header h2 {
|
|
margin: 0;
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.refresh-btn {
|
|
cursor: pointer;
|
|
opacity: 0.6;
|
|
transition: opacity 0.3s ease;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.refresh-btn:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 통계 스타일 */
|
|
.team-stats {
|
|
display: flex;
|
|
gap: 24px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
flex: 1;
|
|
padding: 16px;
|
|
background: #f8f9fa;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2.2rem;
|
|
font-weight: 700;
|
|
color: #333;
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.stat-number.present {
|
|
color: #4CAF50;
|
|
}
|
|
|
|
.stat-number.absent {
|
|
color: #f44336;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.9rem;
|
|
color: #666;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 팀 멤버 리스트 */
|
|
.team-list {
|
|
space-y: 10px;
|
|
}
|
|
|
|
.team-member {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
background: #f8f9fa;
|
|
margin-bottom: 10px;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.team-member:hover {
|
|
background: #e9ecef;
|
|
}
|
|
|
|
.team-member.present {
|
|
border-left: 5px solid #4CAF50;
|
|
}
|
|
|
|
.team-member.absent {
|
|
border-left: 5px solid #f44336;
|
|
}
|
|
|
|
.member-name {
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.member-status {
|
|
font-size: 0.9rem;
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.team-member.present .member-status {
|
|
background: #e8f5e8;
|
|
color: #4CAF50;
|
|
}
|
|
|
|
.team-member.absent .member-status {
|
|
background: #ffebee;
|
|
color: #f44336;
|
|
}
|
|
|
|
/* 준비중 카드 스타일 */
|
|
.coming-soon-card {
|
|
position: relative;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.coming-soon-badge {
|
|
background: #ff9800;
|
|
color: white;
|
|
font-size: 0.75rem;
|
|
padding: 6px 12px;
|
|
border-radius: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.coming-soon-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 50px 20px;
|
|
color: #666;
|
|
}
|
|
|
|
.coming-soon-icon {
|
|
font-size: 3.5rem;
|
|
margin-bottom: 20px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.coming-soon-content p {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* 공지사항 스타일 */
|
|
.notice-content {
|
|
space-y: 16px;
|
|
}
|
|
|
|
.notice-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px;
|
|
border-left: 5px solid #2196f3;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
margin-bottom: 16px;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.notice-item:hover {
|
|
background: #e9ecef;
|
|
}
|
|
|
|
.notice-title {
|
|
font-weight: 600;
|
|
color: #333;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.notice-date {
|
|
font-size: 0.85rem;
|
|
color: #666;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 반응형 */
|
|
@media (max-width: 1024px) {
|
|
.full-content-wrapper {
|
|
padding: 16px;
|
|
}
|
|
|
|
.dashboard-header {
|
|
padding: 24px;
|
|
}
|
|
|
|
.header-left h1 {
|
|
font-size: 1.8rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.workflow-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.workflow-card-empty {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.header-content {
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.team-stats {
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// 디버깅용 콘솔 로그
|
|
console.log('📊 그룹장 대시보드 로딩됨');
|
|
console.log('👤 현재 사용자:', JSON.parse(localStorage.getItem('user') || '{}'));
|
|
|
|
// 팀 현황 새로고침
|
|
function refreshTeamStatus() {
|
|
console.log('팀 현황 새로고침');
|
|
// 실제로는 API 호출
|
|
}
|
|
|
|
// 환영 메시지 개인화
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const user = JSON.parse(localStorage.getItem('user') || '{}');
|
|
if (user && user.name) {
|
|
const welcomeMsg = document.getElementById('welcome-message');
|
|
if (welcomeMsg) {
|
|
welcomeMsg.textContent = `${user.name}님의 실시간 팀 현황 및 작업 모니터링`;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |