ContractHub/dist/ContractManager/_internal/templates/dashboard.html

{% extends "base.html" %}

{% block title %}逐鹿人才-证件合同管理系统-控制台{% endblock %}

{% block content %}
<div class="container-fluid mt-4">

    <!-- 顶部统计卡片 + 快速操作按钮 -->
    <div class="row mb-4 g-3 align-items-stretch">
        <!-- 左侧统计卡片 -->
        <div class="col-12 col-lg-9">
            <div class="row g-3 h-100">
                {% set stat_cards = [
                    {'icon':'bi-file-earmark-text-fill','title':'合同总数','value':stats.total,'bg':'#4e73df','gradient':'#224abe','type':'all'},
                    {'icon':'bi-check-circle-fill','title':'有效合同','value':stats.active,'bg':'#1cc88a','gradient':'#17a673','type':'active'},
                    {'icon':'bi-exclamation-triangle-fill','title':'即将到期','value':stats.expiring,'bg':'#f6c23e','gradient':'#dda20a','type':'expiring'},
                    {'icon':'bi-x-circle-fill','title':'已到期合同','value':stats.expired_already,'bg':'#e74a3b','gradient':'#be2617','type':'expired'},
                    {'icon':'bi-file-earmark-excel-fill','title':'待收回合同','value':stats.uncollected,'bg':'#36b9cc','gradient':'#258391','type':'uncollected'},
                    {'icon':'bi-slash-circle-fill','title':'已终止合同','value':stats.terminated,'bg':'#6c757d','gradient':'#495057','type':'terminated'}
                ] %}
                {% for card in stat_cards %}
                <div class="col-6 col-md-4 col-lg-2 d-flex">
                    <a href="{{ url_for('contract_list', type=card.type) }}" class="text-decoration-none w-100">
                        <div class="card shadow-sm text-white rounded-4 flex-fill hover-scale"
                             style="background: linear-gradient(135deg, {{ card.bg }}, {{ card.gradient }});">
                            <div class="card-body d-flex flex-column justify-content-center align-items-center text-center p-3">
                                <i class="bi {{ card.icon }} fs-3 mb-2"></i>
                                <h6 class="card-title mb-1 fw-normal">{{ card.title }}</h6>
                                <p class="card-text fs-3 fw-bold mb-0">{{ card.value }}</p>
                            </div>
                        </div>
                    </a>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- 右侧快速操作按钮 -->
        <div class="col-12 col-lg-3 d-flex align-items-center">
            <div class="d-flex flex-column gap-2 w-100">
                {% if current_user.can_create %}
                <a href="{{ url_for('create_contract') }}" class="btn btn-success shadow-sm rounded-3 py-3 btn-action">
                    <i class="bi bi-file-earmark-plus-fill me-2"></i> 新建合同
                </a>
                {% endif %}
                <a href="{{ url_for('contract_list') }}" class="btn btn-primary shadow-sm rounded-3 py-3 btn-action">
                    <i class="bi bi-list-ul me-2"></i> 查看全部
                </a>
            </div>
        </div>
    </div>

    <!-- 详情卡片 -->
    <div class="row g-3">
        {% set detail_cards = [
            {'title':'待收回合同','data':uncollected_contracts,'icon':'bi-file-earmark-excel-fill','bg':'#17a2b8','type':'uncollected','badge':'未收回'},
            {'title':'即将到期合同（30天内）','data':expiring_soon,'icon':'bi-clock-history','bg':'#dc3545','type':'expiring','badge':'剩余天数'},
            {'title':'已到期合同','data':expired_contracts,'icon':'bi-calendar-x-fill','bg':'#e74a3b','type':'expired','badge':'已到期'},
            {'title':'已终止合同','data':terminated_contracts,'icon':'bi-slash-circle-fill','bg':'#6c757d','type':'terminated','badge':'已终止'},
            {'title':'最近添加的合同','data':recent_contracts,'icon':'bi-clock-fill','bg':'#007bff','type':'recent','badge':'状态'},
            {'title':'公司证件','data':company_docs,'icon':'bi-building','bg':'#6c757d','type':'company_doc','badge':'公司证件'},
            {'title':'公用模板','data':public_templates,'icon':'bi-file-earmark-text-fill','bg':'#17a2b8','type':'template','badge':'公用模板'}
        ] %}

        {% for card in detail_cards %}
        <div class="col-12 col-md-6 col-lg-4 d-flex">
            <div class="card shadow-sm flex-fill">
                <div class="card-header text-white rounded-top-3" style="background: {{ card.bg }};">
                    <h6 class="mb-0"><i class="bi {{ card.icon }} me-2"></i>{{ card.title }}</h6>
                </div>
                <div class="card-body d-flex flex-column p-2">
                    {% if card.data %}
                    <div class="list-group flex-grow-1 overflow-auto mb-2">
                        {% for contract in card.data %}
                        <a href="{{ url_for('view_contract', contract_id=contract.id) }}"
                           class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-1 shadow-sm rounded-2 hover-shadow">
                            <div>
                                <strong>{{ contract.contract_number }}</strong><br>
                                <small>{{ contract.name }}</small>
                                {% if card.badge == '未收回' %}
                                <span class="badge bg-warning ms-1">未收回</span>
                                {% elif card.badge == '公司证件' %}
                                <span class="badge bg-secondary ms-1">公司证件</span>
                                {% elif card.badge == '公用模板' %}
                                <span class="badge bg-info ms-1">公用模板</span>
                                {% elif card.badge == '状态' %}
                                <span class="badge bg-{{ 'success' if contract.is_active else 'secondary' }} ms-1">
                                    {{ '有效' if contract.is_active else '终止' }}
                                </span>
                                {% elif card.badge == '剩余天数' %}
                                <span class="badge bg-info ms-1">剩余 {{ (contract.end_date - today).days }} 天</span>
                                {% elif card.badge == '已到期' %}
                                <span class="badge bg-danger ms-1">已到期</span>
                                {% elif card.badge == '已终止' %}
                                <span class="badge bg-secondary ms-1">已终止</span>
                                {% endif %}
                            </div>
                            <i class="bi bi-arrow-right-circle fs-5 text-primary"></i>
                        </a>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="alert alert-info mb-2 py-1 text-center">暂无数据</div>
                    {% endif %}
                    <a href="{{ url_for('contract_list', type=card.type) }}" class="btn btn-sm btn-outline-secondary w-100 mt-auto">查看更多</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

</div>

<style>
.hover-shadow:hover {
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
    transition: box-shadow 0.3s;
}
.list-group-item {
    padding: 0.5rem 0.75rem;
}
.card-header {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
}
.card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    scroll-behavior: smooth;
}
.card-body::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}
.card-body:hover::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
}

/* 统计卡片优化 */
.hover-scale {
    transition: transform 0.2s, box-shadow 0.2s;
}
.hover-scale:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15);
    cursor: pointer;
}

/* 按钮悬停效果 */
.btn-action {
    transition: all 0.2s;
}
.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 响应式调整 */
@media (max-width: 992px) {
    .stat-card .card-body {
        padding: 1rem;
    }
    .btn-action {
        padding: 0.75rem;
    }
}

@media (max-width: 768px) {
    .stat-card .card-body {
        padding: 0.75rem;
    }
    .stat-card i {
        font-size: 1.5rem;
    }
    .stat-card h6 {
        font-size: 0.85rem;
    }
    .stat-card p {
        font-size: 1.5rem;
    }
}

/* 链接卡片样式 */
.stat-card-link {
    text-decoration: none;
    color: inherit;
}
.stat-card-link:hover {
    text-decoration: none;
}
</style>
{% endblock %}