Files
TK-FB-Project/web-ui/pages/dashboard/system.html
Hyungi Ahn 94ecc7333d feat: 데이터베이스 및 웹 UI 대규모 리팩토링
- 삭제된 DB 테이블들과 관련 코드 정리:
  * 12개 사용하지 않는 테이블 삭제 (activity_logs, CuttingPlan, DailyIssueReports 등)
  * 관련 모델, 컨트롤러, 라우트 파일들 삭제
  * index.js에서 삭제된 라우트들 제거

- 웹 UI 페이지 정리:
  * 21개 사용하지 않는 페이지 삭제
  * issue-reports 폴더 전체 삭제
  * 모든 사용자 권한을 그룹장 대시보드로 통일

- 데이터베이스 스키마 정리:
  * v1 스키마로 통일 (daily_work_reports 테이블)
  * JSON 데이터 임포트 스크립트 구현
  * 외래키 관계 정리 및 데이터 일관성 확보

- 통합 Docker Compose 설정:
  * 모든 서비스를 단일 docker-compose.yml로 통합
  * 20000번대 포트 유지
  * JWT 시크릿 및 환경변수 설정

- 문서화:
  * DATABASE_SCHEMA.md: 현재 DB 스키마 문서화
  * DELETED_TABLES.md: 삭제된 테이블 목록
  * DELETED_PAGES.md: 삭제된 페이지 목록
2025-11-03 09:26:50 +09:00

301 lines
13 KiB
HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>시스템 관리자 대시보드 - TK Portal</title>
<link rel="stylesheet" href="/css/main-layout.css">
<link rel="stylesheet" href="/css/admin.css">
<link rel="stylesheet" href="/css/system-dashboard.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script type="module" src="/js/auth-check.js"></script>
</head>
<body>
<div class="main-layout">
<!-- 기존 네비게이션 바 사용 -->
<div id="navbar-container"></div>
<div class="content-wrapper">
<!-- 시스템 관리자 배너 -->
<div class="system-banner">
<div class="banner-content">
<div class="banner-left">
<div class="system-icon">🔧</div>
<div class="banner-text">
<h1>시스템 관리자</h1>
<p>시스템 전반의 설정, 모니터링 및 관리를 담당합니다</p>
</div>
</div>
<div class="banner-right">
<span class="system-badge">SYSTEM</span>
<div class="system-status">
<span class="status-dot online"></span>
<span>시스템 정상</span>
</div>
<div class="quick-actions">
<button class="quick-btn" onclick="window.location.href='/pages/admin/manage-user.html'" title="사용자 관리">
👤
</button>
<button class="quick-btn" onclick="window.location.href='/pages/analysis/work-report-analytics.html'" title="분석 대시보드">
📊
</button>
<button class="quick-btn" onclick="window.location.href='/pages/analysis/project-worktype-analysis.html'" title="프로젝트별 작업 시간 분석">
🏗️
</button>
<button class="quick-btn" onclick="refreshSystemStatus()" title="시스템 새로고침">
🔄
</button>
</div>
</div>
</div>
</div>
<!-- 메인 컨텐츠 -->
<main class="main-content">
<!-- 시스템 상태 개요 -->
<section class="system-overview">
<h2><i class="fas fa-tachometer-alt"></i> 시스템 상태</h2>
<div class="status-grid">
<div class="status-card">
<div class="status-info">
<h3>서버 상태</h3>
<p class="status-value online">온라인</p>
<small>마지막 확인: <span id="server-check-time">--</span></small>
</div>
</div>
<div class="status-card">
<div class="status-info">
<h3>데이터베이스</h3>
<p class="status-value online">정상</p>
<small>연결 수: <span id="db-connections">--</span></small>
</div>
</div>
<div class="status-card">
<div class="status-info">
<h3>활성 사용자</h3>
<p class="status-value" id="active-users">--</p>
<small>총 사용자: <span id="total-users">--</span></small>
</div>
</div>
<div class="status-card">
<div class="status-info">
<h3>시스템 알림</h3>
<p class="status-value warning" id="system-alerts">--</p>
<small>미처리 알림</small>
</div>
</div>
</div>
</section>
<!-- 주요 관리 기능 -->
<section class="management-section">
<h2><i class="fas fa-tools"></i> 시스템 관리</h2>
<div class="management-grid">
<!-- 계정 관리 -->
<div class="management-card primary">
<div class="card-header">
<i class="fas fa-user-cog"></i>
<h3>계정 관리</h3>
</div>
<div class="card-content">
<p>사용자 계정 생성, 수정, 삭제 및 권한 관리</p>
<div class="card-actions">
<button class="btn btn-primary" data-action="account-management">
<i class="fas fa-users"></i> 계정 관리
</button>
</div>
</div>
</div>
<!-- 시스템 로그 -->
<div class="management-card">
<div class="card-header">
<i class="fas fa-file-alt"></i>
<h3>시스템 로그</h3>
</div>
<div class="card-content">
<p>로그인 이력, 시스템 활동 및 오류 로그 조회</p>
<div class="card-actions">
<button class="btn btn-secondary" data-action="system-logs">
<i class="fas fa-search"></i> 로그 조회
</button>
</div>
</div>
</div>
<!-- 데이터베이스 관리 -->
<div class="management-card">
<div class="card-header">
<i class="fas fa-database"></i>
<h3>데이터베이스</h3>
</div>
<div class="card-content">
<p>데이터베이스 백업, 복원 및 최적화</p>
<div class="card-actions">
<button class="btn btn-secondary" data-action="database-management">
<i class="fas fa-cog"></i> DB 관리
</button>
</div>
</div>
</div>
<!-- 시스템 설정 -->
<div class="management-card">
<div class="card-header">
<i class="fas fa-sliders-h"></i>
<h3>시스템 설정</h3>
</div>
<div class="card-content">
<p>전역 설정, 보안 정책 및 시스템 매개변수</p>
<div class="card-actions">
<button class="btn btn-secondary" data-action="system-settings">
<i class="fas fa-wrench"></i> 설정
</button>
</div>
</div>
</div>
<!-- 백업 관리 -->
<div class="management-card">
<div class="card-header">
<i class="fas fa-shield-alt"></i>
<h3>백업 관리</h3>
</div>
<div class="card-content">
<p>자동 백업 설정 및 복원 관리</p>
<div class="card-actions">
<button class="btn btn-secondary" data-action="backup-management">
<i class="fas fa-download"></i> 백업
</button>
</div>
</div>
</div>
<!-- 프로젝트별 작업 시간 분석 -->
<div class="management-card primary">
<div class="card-header">
<i class="fas fa-project-diagram"></i>
<h3>프로젝트 작업 분석</h3>
</div>
<div class="card-content">
<p>프로젝트별-작업별 시간 분석 및 에러율 모니터링</p>
<div class="card-actions">
<button class="btn btn-primary" onclick="window.location.href='/pages/analysis/project-worktype-analysis.html'">
<i class="fas fa-chart-bar"></i> 분석 보기
</button>
</div>
</div>
</div>
<!-- 모니터링 -->
<div class="management-card">
<div class="card-header">
<i class="fas fa-chart-line"></i>
<h3>시스템 모니터링</h3>
</div>
<div class="card-content">
<p>성능 지표, 리소스 사용량 및 트래픽 분석</p>
<div class="card-actions">
<button class="btn btn-secondary" data-action="monitoring">
<i class="fas fa-eye"></i> 모니터링
</button>
</div>
</div>
</div>
</div>
</section>
<!-- 최근 활동 -->
<section class="recent-activity">
<h2><i class="fas fa-history"></i> 최근 시스템 활동</h2>
<div class="activity-container">
<div class="activity-list" id="recent-activities">
<!-- 동적으로 로드됨 -->
</div>
</div>
</section>
</main>
<!-- 계정 관리 모달 -->
<div id="account-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3><i class="fas fa-user-cog"></i> 계정 관리</h3>
<button class="close-btn" data-action="close-modal">&times;</button>
</div>
<div class="modal-body">
<div id="account-management-content">
<!-- 계정 관리 내용이 여기에 로드됩니다 -->
</div>
</div>
</main>
</div>
</div>
<!-- 시스템 관리자 스크립트 -->
<script>
console.log('🔧 시스템 관리자 대시보드 로드됨');
// 시스템 상태 새로고침 함수
function refreshSystemStatus() {
console.log('🔄 시스템 상태 새로고침 중...');
// 시각적 피드백
const statusDot = document.querySelector('.status-dot');
const refreshBtn = document.querySelector('.quick-btn[title="시스템 새로고침"]');
if (refreshBtn) {
refreshBtn.style.transform = 'rotate(360deg)';
setTimeout(() => {
refreshBtn.style.transform = '';
}, 1000);
}
// 실제 상태 업데이트 (시뮬레이션)
setTimeout(() => {
updateSystemTime();
console.log('✅ 시스템 상태 업데이트 완료');
}, 1000);
}
// 시스템 시간 업데이트
function updateSystemTime() {
const timeElement = document.getElementById('server-check-time');
if (timeElement) {
timeElement.textContent = new Date().toLocaleTimeString('ko-KR');
}
}
// 간단한 테스트 함수
function testClick() {
console.log('🎯 버튼 클릭 테스트 성공!');
alert('버튼이 정상적으로 작동합니다!');
}
// DOM 로드 후 초기화
document.addEventListener('DOMContentLoaded', function() {
console.log('📄 시스템 대시보드 DOM 로드 완료');
// 초기 시간 설정
updateSystemTime();
// 주기적 시간 업데이트 (30초마다)
setInterval(updateSystemTime, 30000);
// 계정 관리 버튼 이벤트
const accountBtn = document.querySelector('[data-action="account-management"]');
if (accountBtn) {
accountBtn.addEventListener('click', testClick);
console.log('✅ 계정 관리 버튼 이벤트 설정 완료');
}
console.log('🚀 시스템 관리자 대시보드 초기화 완료');
});
</script>
<script type="module" src="/js/load-navbar.js"></script>
<script type="module" src="/js/system-dashboard.js"></script>
</body>
</html>