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

refactor: 기존 group-leader.html 대시보드를 모던 디자인으로 개선

Browse Source 
🎯 기존 페이지 개선 (별도 페이지 생성 X):
- group-leader.html을 모던 디자인 시스템으로 완전 리뉴얼
- 기존 복잡한 인라인 스타일 제거 → design-system.css 활용
- modern-dashboard.js 연동으로 실시간 데이터 로딩

✨ 모던 UI/UX 적용:
- 그라데이션 헤더 → 실시간 시간 표시 + 사용자 프로필
- 4개 요약 카드: 작업자 수, 작업 시간, 프로젝트 수, 오류 건수
- 프로젝트별 작업 현황 시각화 (실제 API 데이터 기반)
- 작업자별 현황 카드/리스트 뷰 전환
- 빠른 작업 메뉴 (작업 보고서, 현황 확인, 분석, 관리)

🚀 기능 개선:
- 실시간 데이터 로딩 (작업자, 작업 현황)
- 날짜 선택기로 특정 날짜 조회
- 토스트 알림 시스템
- 로딩/에러 상태 처리
- 반응형 디자인 (모바일 최적화)

🗑️ 정리:
- modern-dashboard.html 삭제 (기존 페이지 개선으로 불필요)
- 기존 복잡한 인라인 CSS 완전 제거
- 일관된 디자인 시스템 적용

접근: http://localhost:20000/pages/dashboard/group-leader.html
This commit is contained in:
Hyungi Ahn
2025-11-03 11:48:13 +09:00
parent eb98bd79f6
commit b84f48b74a
2 changed files with 264 additions and 828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

808
web-ui/pages/dashboard/group-leader.html
View File

@@ -3,562 +3,282 @@
<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">
<title>작업 현황판 | 테크니컬코리아</title>
<!-- 모던 디자인 시스템 적용 -->
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/modern-dashboard.css">
<link rel="icon" type="image/png" href="/img/favicon.png">
<!-- 스크립트 -->
<script src="/js/auth-check.js" defer></script>
<script src="/js/api-config.js" defer></script>
<script src="/js/modern-dashboard.js" defer></script>
</head>
<body>
<div class="main-layout-no-sidebar">
<!-- 네비게이션만 로드 -->
<div id="navbar-container"></div>
<!-- 메인 컨테이너 -->
<div class="dashboard-container">
<!-- 사이드바 없이 전체 화면 사용 -->
<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>
<!-- 헤더 -->
<header class="dashboard-header">
<div class="header-content">
<div class="header-left">
<div class="brand">
<img src="/img/logo.png" alt="테크니컬코리아" class="brand-logo">
<div class="brand-text">
<h1 class="brand-title">테크니컬코리아</h1>
<p class="brand-subtitle">작업 현황판</p>
</div>
</div>
</header>
</div>
<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 class="header-center">
<div class="current-time" id="currentTime">
<span class="time-label">현재 시각</span>
<span class="time-value" id="timeValue">--:--:--</span>
</div>
</main>
</div>
<div class="header-right">
<div class="user-profile" id="userProfile">
<div class="user-avatar">
<span class="avatar-text" id="userInitial">사</span>
</div>
<div class="user-info">
<span class="user-name" id="userName">사용자</span>
<span class="user-role" id="userRole">작업자</span>
</div>
<div class="profile-menu" id="profileMenu">
<a href="/pages/profile/my-profile.html" class="menu-item">
<span class="menu-icon">👤</span>
내 프로필
</a>
<a href="/pages/profile/change-password.html" class="menu-item">
<span class="menu-icon">🔐</span>
비밀번호 변경
</a>
<button class="menu-item logout-btn" id="logoutBtn">
<span class="menu-icon">🚪</span>
로그아웃
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- 메인 콘텐츠 -->
<main class="dashboard-main">
<!-- 상태 요약 카드 -->
<section class="summary-section">
<div class="grid grid-cols-4">
<!-- 오늘 작업자 수 -->
<div class="card summary-card fade-in">
<div class="card-body">
<div class="summary-icon success">
<span>👥</span>
</div>
<div class="summary-content">
<h3 class="summary-title">오늘 작업자</h3>
<div class="summary-value" id="todayWorkers">
<span class="value-number">-</span>
<span class="value-unit">명</span>
</div>
<p class="summary-change positive" id="workersChange">
<span class="change-icon">↗</span>
전일 대비 +2명
</p>
</div>
</div>
</div>
<!-- 총 작업 시간 -->
<div class="card summary-card fade-in">
<div class="card-body">
<div class="summary-icon primary">
<span>⏰</span>
</div>
<div class="summary-content">
<h3 class="summary-title">총 작업 시간</h3>
<div class="summary-value" id="totalHours">
<span class="value-number">-</span>
<span class="value-unit">시간</span>
</div>
<p class="summary-change positive" id="hoursChange">
<span class="change-icon">↗</span>
전일 대비 +4시간
</p>
</div>
</div>
</div>
<!-- 진행 중인 프로젝트 -->
<div class="card summary-card fade-in">
<div class="card-body">
<div class="summary-icon warning">
<span>📁</span>
</div>
<div class="summary-content">
<h3 class="summary-title">진행 프로젝트</h3>
<div class="summary-value" id="activeProjects">
<span class="value-number">-</span>
<span class="value-unit">개</span>
</div>
<p class="summary-change neutral" id="projectsChange">
<span class="change-icon">→</span>
변동 없음
</p>
</div>
</div>
</div>
<!-- 오류 발생 건수 -->
<div class="card summary-card fade-in">
<div class="card-body">
<div class="summary-icon error">
<span>⚠️</span>
</div>
<div class="summary-content">
<h3 class="summary-title">오류 발생</h3>
<div class="summary-value" id="errorCount">
<span class="value-number">-</span>
<span class="value-unit">건</span>
</div>
<p class="summary-change negative" id="errorsChange">
<span class="change-icon">↘</span>
전일 대비 -1건
</p>
</div>
</div>
</div>
</div>
</section>
<!-- 메인 콘텐츠 그리드 -->
<section class="content-section">
<div class="grid grid-cols-3 gap-6">
<!-- 오늘의 작업 현황 -->
<div class="card content-card col-span-2">
<div class="card-header">
<div class="flex justify-between items-center">
<h2 class="card-title">📊 오늘의 작업 현황</h2>
<div class="date-selector">
<input type="date" id="selectedDate" class="date-input">
<button class="btn btn-primary btn-sm" id="refreshBtn">
<span>🔄</span>
새로고침
</button>
</div>
</div>
</div>
<div class="card-body">
<div class="work-status-container" id="workStatusContainer">
<div class="loading-state">
<div class="spinner"></div>
<p>작업 현황을 불러오는 중...</p>
</div>
</div>
</div>
</div>
<!-- 빠른 작업 -->
<div class="card content-card">
<div class="card-header">
<h2 class="card-title">⚡ 빠른 작업</h2>
</div>
<div class="card-body">
<div class="quick-actions">
<a href="/pages/common/daily-work-report.html" class="quick-action-btn">
<div class="action-icon">📝</div>
<div class="action-content">
<h3>작업 보고서 작성</h3>
<p>오늘의 작업 내용 입력</p>
</div>
</a>
<a href="/pages/common/daily-work-report-viewer.html" class="quick-action-btn">
<div class="action-icon">📋</div>
<div class="action-content">
<h3>작업 현황 확인</h3>
<p>팀원들의 작업 현황 조회</p>
</div>
</a>
<a href="/pages/analysis/daily_work_analysis.html" class="quick-action-btn">
<div class="action-icon">📈</div>
<div class="action-content">
<h3>작업 분석</h3>
<p>작업 효율성 및 통계 확인</p>
</div>
</a>
<a href="/pages/admin/manage-daily-work.html" class="quick-action-btn admin-only">
<div class="action-icon">⚙️</div>
<div class="action-content">
<h3>작업 관리</h3>
<p>작업자 및 프로젝트 관리</p>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- 작업자별 현황 -->
<section class="workers-section">
<div class="card">
<div class="card-header">
<div class="flex justify-between items-center">
<h2 class="card-title">👥 작업자별 현황</h2>
<div class="view-controls">
<button class="btn btn-secondary btn-sm" id="listViewBtn">
<span>📋</span>
목록형
</button>
<button class="btn btn-secondary btn-sm" id="cardViewBtn">
<span>🎴</span>
카드형
</button>
</div>
</div>
</div>
<div class="card-body">
<div class="workers-container" id="workersContainer">
<div class="loading-state">
<div class="spinner"></div>
<p>작업자 정보를 불러오는 중...</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- 푸터 -->
<footer class="dashboard-footer">
<div class="footer-content">
<p class="footer-text">
© 2025 (주)테크니컬코리아. 모든 권리 보유.
</p>
<div class="footer-links">
<a href="#" class="footer-link">도움말</a>
<a href="#" class="footer-link">문의하기</a>
<a href="#" class="footer-link">개인정보처리방침</a>
</div>
</div>
</footer>
</div>
<!-- 사이드바 로딩 없이 네비게이션만 로드 -->
<script type="module" src="/js/load-navbar.js"></script>
<!-- 알림 토스트 -->
<div class="toast-container" id="toastContainer"></div>
<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>

284
web-ui/pages/dashboard/modern-dashboard.html
View File

@@ -1,284 +0,0 @@
<!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/design-system.css">
<link rel="stylesheet" href="/css/modern-dashboard.css">
<link rel="icon" type="image/png" href="/img/favicon.png">
<!-- 스크립트 -->
<script src="/js/auth-check.js" defer></script>
<script src="/js/api-config.js" defer></script>
<script src="/js/modern-dashboard.js" defer></script>
</head>
<body>
<!-- 메인 컨테이너 -->
<div class="dashboard-container">
<!-- 헤더 -->
<header class="dashboard-header">
<div class="header-content">
<div class="header-left">
<div class="brand">
<img src="/img/logo.png" alt="테크니컬코리아" class="brand-logo">
<div class="brand-text">
<h1 class="brand-title">테크니컬코리아</h1>
<p class="brand-subtitle">작업 현황판</p>
</div>
</div>
</div>
<div class="header-center">
<div class="current-time" id="currentTime">
<span class="time-label">현재 시각</span>
<span class="time-value" id="timeValue">--:--:--</span>
</div>
</div>
<div class="header-right">
<div class="user-profile" id="userProfile">
<div class="user-avatar">
<span class="avatar-text" id="userInitial">사</span>
</div>
<div class="user-info">
<span class="user-name" id="userName">사용자</span>
<span class="user-role" id="userRole">작업자</span>
</div>
<div class="profile-menu" id="profileMenu">
<a href="/pages/profile/my-profile.html" class="menu-item">
<span class="menu-icon">👤</span>
내 프로필
</a>
<a href="/pages/profile/change-password.html" class="menu-item">
<span class="menu-icon">🔐</span>
비밀번호 변경
</a>
<button class="menu-item logout-btn" id="logoutBtn">
<span class="menu-icon">🚪</span>
로그아웃
</button>
</div>
</div>
</div>
</div>
</header>
<!-- 메인 콘텐츠 -->
<main class="dashboard-main">
<!-- 상태 요약 카드 -->
<section class="summary-section">
<div class="grid grid-cols-4">
<!-- 오늘 작업자 수 -->
<div class="card summary-card fade-in">
<div class="card-body">
<div class="summary-icon success">
<span>👥</span>
</div>
<div class="summary-content">
<h3 class="summary-title">오늘 작업자</h3>
<div class="summary-value" id="todayWorkers">
<span class="value-number">-</span>
<span class="value-unit">명</span>
</div>
<p class="summary-change positive" id="workersChange">
<span class="change-icon">↗</span>
전일 대비 +2명
</p>
</div>
</div>
</div>
<!-- 총 작업 시간 -->
<div class="card summary-card fade-in">
<div class="card-body">
<div class="summary-icon primary">
<span>⏰</span>
</div>
<div class="summary-content">
<h3 class="summary-title">총 작업 시간</h3>
<div class="summary-value" id="totalHours">
<span class="value-number">-</span>
<span class="value-unit">시간</span>
</div>
<p class="summary-change positive" id="hoursChange">
<span class="change-icon">↗</span>
전일 대비 +4시간
</p>
</div>
</div>
</div>
<!-- 진행 중인 프로젝트 -->
<div class="card summary-card fade-in">
<div class="card-body">
<div class="summary-icon warning">
<span>📁</span>
</div>
<div class="summary-content">
<h3 class="summary-title">진행 프로젝트</h3>
<div class="summary-value" id="activeProjects">
<span class="value-number">-</span>
<span class="value-unit">개</span>
</div>
<p class="summary-change neutral" id="projectsChange">
<span class="change-icon">→</span>
변동 없음
</p>
</div>
</div>
</div>
<!-- 오류 발생 건수 -->
<div class="card summary-card fade-in">
<div class="card-body">
<div class="summary-icon error">
<span>⚠️</span>
</div>
<div class="summary-content">
<h3 class="summary-title">오류 발생</h3>
<div class="summary-value" id="errorCount">
<span class="value-number">-</span>
<span class="value-unit">건</span>
</div>
<p class="summary-change negative" id="errorsChange">
<span class="change-icon">↘</span>
전일 대비 -1건
</p>
</div>
</div>
</div>
</div>
</section>
<!-- 메인 콘텐츠 그리드 -->
<section class="content-section">
<div class="grid grid-cols-3 gap-6">
<!-- 오늘의 작업 현황 -->
<div class="card content-card col-span-2">
<div class="card-header">
<div class="flex justify-between items-center">
<h2 class="card-title">📊 오늘의 작업 현황</h2>
<div class="date-selector">
<input type="date" id="selectedDate" class="date-input">
<button class="btn btn-primary btn-sm" id="refreshBtn">
<span>🔄</span>
새로고침
</button>
</div>
</div>
</div>
<div class="card-body">
<div class="work-status-container" id="workStatusContainer">
<div class="loading-state">
<div class="spinner"></div>
<p>작업 현황을 불러오는 중...</p>
</div>
</div>
</div>
</div>
<!-- 빠른 작업 -->
<div class="card content-card">
<div class="card-header">
<h2 class="card-title">⚡ 빠른 작업</h2>
</div>
<div class="card-body">
<div class="quick-actions">
<a href="/pages/common/daily-work-report.html" class="quick-action-btn">
<div class="action-icon">📝</div>
<div class="action-content">
<h3>작업 보고서 작성</h3>
<p>오늘의 작업 내용 입력</p>
</div>
</a>
<a href="/pages/common/daily-work-report-viewer.html" class="quick-action-btn">
<div class="action-icon">📋</div>
<div class="action-content">
<h3>작업 현황 확인</h3>
<p>팀원들의 작업 현황 조회</p>
</div>
</a>
<a href="/pages/analysis/daily_work_analysis.html" class="quick-action-btn">
<div class="action-icon">📈</div>
<div class="action-content">
<h3>작업 분석</h3>
<p>작업 효율성 및 통계 확인</p>
</div>
</a>
<a href="/pages/admin/manage-daily-work.html" class="quick-action-btn admin-only">
<div class="action-icon">⚙️</div>
<div class="action-content">
<h3>작업 관리</h3>
<p>작업자 및 프로젝트 관리</p>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- 작업자별 현황 -->
<section class="workers-section">
<div class="card">
<div class="card-header">
<div class="flex justify-between items-center">
<h2 class="card-title">👥 작업자별 현황</h2>
<div class="view-controls">
<button class="btn btn-secondary btn-sm" id="listViewBtn">
<span>📋</span>
목록형
</button>
<button class="btn btn-secondary btn-sm" id="cardViewBtn">
<span>🎴</span>
카드형
</button>
</div>
</div>
</div>
<div class="card-body">
<div class="workers-container" id="workersContainer">
<div class="loading-state">
<div class="spinner"></div>
<p>작업자 정보를 불러오는 중...</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- 푸터 -->
<footer class="dashboard-footer">
<div class="footer-content">
<p class="footer-text">
© 2025 (주)테크니컬코리아. 모든 권리 보유.
</p>
<div class="footer-links">
<a href="#" class="footer-link">도움말</a>
<a href="#" class="footer-link">문의하기</a>
<a href="#" class="footer-link">개인정보처리방침</a>
</div>
</div>
</footer>
</div>
<!-- 알림 토스트 -->
<div class="toast-container" id="toastContainer"></div>
</body>
</html>