{% extends "admin/base_site.html" %}
{% load i18n admin_static %}

{% block content %}
<div id="content-main">
    <!-- Row 1: Stats Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon-bg" style="background: #eef2ff; color: #6366f1;">￥</div>
                <span class="stat-info-icon">ⓘ</span>
            </div>
            <div class="stat-label">销售总额</div>
            <div class="stat-value">¥ 8,231,078</div>
            <div class="stat-footer">
                <span class="stat-trend trend-up">较上月 ▲ 12.6%</span>
                <svg class="sparkline" viewBox="0 0 100 30"><path d="M0,25 Q15,5 30,20 T60,10 T100,25" fill="none" stroke="#6366f1" stroke-width="2"/></svg>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon-bg" style="background: #eff6ff; color: #3b82f6;">📋</div>
                <span class="stat-info-icon">ⓘ</span>
            </div>
            <div class="stat-label">待办审批</div>
            <div class="stat-value">32</div>
            <div class="stat-footer">
                <span class="stat-trend trend-down" style="color: #ef4444;">较昨日 ▲ 8</span>
                <svg class="sparkline" viewBox="0 0 100 30"><path d="M0,15 L20,25 L40,10 L60,20 L80,5 L100,15" fill="none" stroke="#3b82f6" stroke-width="2"/></svg>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon-bg" style="background: #fff7ed; color: #f97316;">📦</div>
                <span class="stat-info-icon">ⓘ</span>
            </div>
            <div class="stat-label">库存预警</div>
            <div class="stat-value">18</div>
            <div class="stat-footer">
                <span class="stat-trend trend-down" style="color: #ef4444;">较昨日 ▲ 5</span>
                <svg class="sparkline" viewBox="0 0 100 30"><path d="M0,25 L30,5 L70,25 L100,10" fill="none" stroke="#f97316" stroke-width="2"/></svg>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon-bg" style="background: #f0fdf4; color: #10b981;">🖥️</div>
                <span class="stat-info-icon">ⓘ</span>
            </div>
            <div class="stat-label">系统在线</div>
            <div class="stat-value">98.6%</div>
            <div class="stat-footer">
                <span class="stat-trend trend-up">较昨日 ▲ 0.8%</span>
                <svg class="sparkline" viewBox="0 0 100 30"><path d="M0,20 L25,15 L50,22 L75,10 L100,12" fill="none" stroke="#10b981" stroke-width="2"/></svg>
            </div>
        </div>
    </div>

    <!-- Row 2: Main Grid -->
    <div class="dashboard-main-grid">
        <!-- Operation Logs -->
        <div class="module-card">
            <div class="card-title">最近操作日志</div>
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th>操作人</th>
                            <th>模块</th>
                            <th>操作类型</th>
                            <th>操作内容</th>
                            <th>IP地址</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2025-05-22 10:24:31</td>
                            <td>张伟</td>
                            <td>销售管理</td>
                            <td><span class="badge badge-new">新增</span></td>
                            <td>新增销售订单 SO-20250522-001</td>
                            <td>192.168.1.100</td>
                        </tr>
                        <tr>
                            <td>2025-05-22 10:18:44</td>
                            <td>李娜</td>
                            <td>采购管理</td>
                            <td><span class="badge badge-audit">审核</span></td>
                            <td>审核采购订单 PO-20250522-045</td>
                            <td>192.168.1.101</td>
                        </tr>
                        <tr>
                            <td>2025-05-22 09:56:12</td>
                            <td>王强</td>
                            <td>库存管理</td>
                            <td><span class="badge badge-update">更新</span></td>
                            <td>更新库存调拔单 TB-20250522-009</td>
                            <td>192.168.1.102</td>
                        </tr>
                        <tr>
                            <td>2025-05-22 09:41:07</td>
                            <td>张伟</td>
                            <td>审批中心</td>
                            <td><span class="badge badge-submit">提交</span></td>
                            <td>提交费用报销单 FB-20250522-008</td>
                            <td>192.168.1.100</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style="padding: 20px 32px; border-top: 1px solid var(--slate-50); display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--slate-400);">
                <span>共 120 条记录</span>
                <div style="display: flex; gap: 8px;">
                    <span style="width: 24px; height: 24px; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; border-radius: 4px;">1</span>
                    <span style="width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;">2</span>
                    <span style="width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;">3</span>
                </div>
            </div>
        </div>

        <!-- Task Sidebar -->
        <div class="module-card">
            <div class="card-title">
                待办任务
                <a href="#" style="font-size: 12px; color: var(--primary); text-decoration: none;">更多 ></a>
            </div>
            <div class="task-list">
                <div class="task-item">
                    <div class="task-icon" style="background: #3b82f6;">📄</div>
                    <div class="task-content">
                        <div class="task-name">费用报销单审批</div>
                        <div class="task-info">报销人：张伟</div>
                        <span class="priority-tag p-urgent">紧急</span>
                    </div>
                    <div class="task-time">10分钟前</div>
                </div>
                <div class="task-item">
                    <div class="task-icon" style="background: #f97316;">🛒</div>
                    <div class="task-content">
                        <div class="task-name">采购订单审批</div>
                        <div class="task-info">单号：PO-20250522-047</div>
                        <span class="priority-tag p-high">高</span>
                    </div>
                    <div class="task-time">30分钟前</div>
                </div>
                <div class="task-item">
                    <div class="task-icon" style="background: #10b981;">💰</div>
                    <div class="task-content">
                        <div class="task-name">销售订单审批</div>
                        <div class="task-info">单号：SO-20250522-004</div>
                        <span class="priority-tag p-medium">中</span>
                    </div>
                    <div class="task-time">1小时前</div>
                </div>
            </div>
            <div class="view-all">
                <a href="/admin/workflow/todolist/">查看全部待办 →</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}