AdminLTE3
This commit is contained in:
342
.history/views/admin/dashboard-tabler_20251026211716.ejs
Normal file
342
.history/views/admin/dashboard-tabler_20251026211716.ejs
Normal file
@@ -0,0 +1,342 @@
|
||||
<!-- Tabler Dashboard -->
|
||||
<div class="row row-deck row-cards">
|
||||
<!-- Stats Cards -->
|
||||
<div class="col-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-sm">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<span class="bg-primary text-white avatar">
|
||||
<i class="fas fa-briefcase"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="font-weight-medium">
|
||||
포트폴리오 프로젝트
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
<%= stats.portfolioCount || 0 %>개 프로젝트
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-sm">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<span class="bg-green text-white avatar">
|
||||
<i class="fas fa-cogs"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="font-weight-medium">
|
||||
제공 서비스
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
<%= stats.servicesCount || 0 %>개 서비스
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-sm">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<span class="bg-yellow text-white avatar">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="font-weight-medium">
|
||||
문의 메시지
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
<%= stats.contactsCount || 0 %>개 메시지
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-sm">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<span class="bg-red text-white avatar">
|
||||
<i class="fas fa-users"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="font-weight-medium">
|
||||
관리자 계정
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
<%= stats.usersCount || 0 %>명 사용자
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Portfolio Projects -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">최근 포트폴리오 프로젝트</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<% if (recentPortfolio && recentPortfolio.length > 0) { %>
|
||||
<div class="divide-y">
|
||||
<% recentPortfolio.forEach(function(project, index) { %>
|
||||
<div class="row <%= index < recentPortfolio.length - 1 ? 'py-2' : 'pt-2' %>">
|
||||
<div class="col-auto">
|
||||
<span class="avatar avatar-sm bg-blue-lt">
|
||||
<i class="fas fa-code"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="text-truncate">
|
||||
<strong><%= project.title %></strong>
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
<%= project.category %> •
|
||||
<%= project.createdAt ? project.createdAt.toLocaleDateString('ko-KR') : '날짜 없음' %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<span class="badge bg-<%= project.status === 'completed' ? 'green' : project.status === 'in-progress' ? 'yellow' : 'blue' %>">
|
||||
<%= project.status === 'completed' ? '완료' : project.status === 'in-progress' ? '진행중' : '계획' %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<% }); %>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<a href="/admin/portfolio" class="btn btn-primary btn-sm w-100">
|
||||
모든 프로젝트 보기
|
||||
</a>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<div class="empty">
|
||||
<div class="empty-img">
|
||||
<i class="fas fa-briefcase fa-3x text-muted"></i>
|
||||
</div>
|
||||
<p class="empty-title">포트폴리오가 없습니다</p>
|
||||
<p class="empty-subtitle text-muted">
|
||||
첫 번째 프로젝트를 추가해보세요
|
||||
</p>
|
||||
<div class="empty-action">
|
||||
<a href="/admin/portfolio/add" class="btn btn-primary">
|
||||
<i class="fas fa-plus"></i>
|
||||
프로젝트 추가
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Contact Messages -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">최근 문의 메시지</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<% if (recentContacts && recentContacts.length > 0) { %>
|
||||
<div class="divide-y">
|
||||
<% recentContacts.forEach(function(contact, index) { %>
|
||||
<div class="row <%= index < recentContacts.length - 1 ? 'py-2' : 'pt-2' %>">
|
||||
<div class="col-auto">
|
||||
<span class="avatar avatar-sm">
|
||||
<%= contact.name ? contact.name.charAt(0).toUpperCase() : 'U' %>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="text-truncate">
|
||||
<strong><%= contact.name %></strong>
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
<%= contact.email %> •
|
||||
<%= contact.createdAt ? contact.createdAt.toLocaleDateString('ko-KR') : '날짜 없음' %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<span class="badge bg-<%= contact.status === 'replied' ? 'green' : contact.status === 'pending' ? 'yellow' : 'blue' %>">
|
||||
<%= contact.status === 'replied' ? '답변완료' : contact.status === 'pending' ? '대기중' : '신규' %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<% }); %>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<a href="/admin/contacts" class="btn btn-warning btn-sm w-100">
|
||||
모든 문의 보기
|
||||
</a>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<div class="empty">
|
||||
<div class="empty-img">
|
||||
<i class="fas fa-envelope fa-3x text-muted"></i>
|
||||
</div>
|
||||
<p class="empty-title">새로운 문의가 없습니다</p>
|
||||
<p class="empty-subtitle text-muted">
|
||||
고객 문의가 들어오면 여기에 표시됩니다
|
||||
</p>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">빠른 작업</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<a href="/admin/portfolio/add" class="card card-link bg-primary-lt">
|
||||
<div class="card-body text-center">
|
||||
<div class="text-primary mb-3">
|
||||
<i class="fas fa-plus fa-2x"></i>
|
||||
</div>
|
||||
<div class="font-weight-medium">새 프로젝트</div>
|
||||
<div class="text-muted">포트폴리오에 추가</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<a href="/admin/services" class="card card-link bg-green-lt">
|
||||
<div class="card-body text-center">
|
||||
<div class="text-green mb-3">
|
||||
<i class="fas fa-cog fa-2x"></i>
|
||||
</div>
|
||||
<div class="font-weight-medium">서비스 관리</div>
|
||||
<div class="text-muted">가격 및 내용 수정</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<a href="/admin/media" class="card card-link bg-yellow-lt">
|
||||
<div class="card-body text-center">
|
||||
<div class="text-yellow mb-3">
|
||||
<i class="fas fa-images fa-2x"></i>
|
||||
</div>
|
||||
<div class="font-weight-medium">미디어 업로드</div>
|
||||
<div class="text-muted">이미지 및 파일 관리</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<a href="/admin/settings" class="card card-link bg-red-lt">
|
||||
<div class="card-body text-center">
|
||||
<div class="text-red mb-3">
|
||||
<i class="fas fa-wrench fa-2x"></i>
|
||||
</div>
|
||||
<div class="font-weight-medium">사이트 설정</div>
|
||||
<div class="text-muted">전체 설정 관리</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Status & Analytics -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">시스템 상태</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<i class="fas fa-server fa-2x text-green"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="h4 mb-0">99.2%</div>
|
||||
<div class="text-muted">서버 업타임</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<i class="fas fa-clock fa-2x text-blue"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="h4 mb-0">2.3초</div>
|
||||
<div class="text-muted">평균 응답시간</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Telegram Bot Status -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">텔레그램 봇</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<i class="fab fa-telegram fa-2x text-green"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="h4 mb-0 text-green">연결됨</div>
|
||||
<div class="text-muted">봇 상태</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<i class="fas fa-paper-plane fa-2x text-blue"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="h4 mb-0">24</div>
|
||||
<div class="text-muted">오늘 전송</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<a href="/admin/telegram" class="btn btn-outline-primary w-100">
|
||||
텔레그램 설정
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user