<div class="finance-dashboard">
  <!-- 顶部标题区域 -->
  <div class="dashboard-header">
    <h1 class="dashboard-title">财务工作台</h1>
    <div class="current-date">{{ today | date: 'yyyy年MM月dd日' }}</div>
  </div>

  <!-- 快捷操作区域 -->
  <div class="quick-actions">
    <button class="action-btn" [class.active]="activeNavItem() === 'newQuote'" (click)="handleQuickAction('newQuote')">
      <div class="action-icon new-quote">📝</div>
      <div class="action-label">新建报价</div>
    </button>
    <button class="action-btn" [class.active]="activeNavItem() === 'recordPayment'" (click)="handleQuickAction('recordPayment')">
      <div class="action-icon record-payment">💰</div>
      <div class="action-label">录入收款</div>
    </button>
    <button class="action-btn" [class.active]="activeNavItem() === 'generateReport'" (click)="handleQuickAction('generateReport')">
      <div class="action-icon generate-report">📊</div>
      <div class="action-label">生成日接单表</div>
    </button>
    <button class="action-btn" [class.active]="activeNavItem() === 'quotationApproval'" (click)="handleQuickAction('quotationApproval')">
      <div class="action-icon quotation-approval">✅</div>
      <div class="action-label">报价审核</div>
    </button>
    <button class="action-btn work-hour-btn" [class.active]="showWorkHourModule()" (click)="toggleWorkHourModule(); activeNavItem.set('workHour')">
      <div class="action-icon work-hour">⏱️</div>
      <div class="action-label">工时统计</div>
    </button>
  </div>

  <!-- 主内容区域 -->
  <div class="dashboard-content">
    <!-- 工时统计模块 -->
    <div class="work-hour-module" *ngIf="showWorkHourModule()">
      <div class="section-header">
        <h2>有效工时统计</h2>
        <button class="close-btn" (click)="toggleWorkHourModule()">×</button>
      </div>
      
      <!-- 时间维度筛选 -->
      <div class="time-dimension-filter">
        <button 
          class="dimension-btn" 
          [class.active]="timeDimension() === 'week'"
          (click)="setTimeDimension('week')">
          本周
        </button>
        <button 
          class="dimension-btn" 
          [class.active]="timeDimension() === 'month'"
          (click)="setTimeDimension('month')">
          本月
        </button>
        <button 
          class="dimension-btn" 
          [class.active]="timeDimension() === 'quarter'"
          (click)="setTimeDimension('quarter')">
          本季度
        </button>
      </div>

      <!-- 工时概览卡片 -->
      <div class="work-hour-overview" *ngIf="workHourDashboard()">
        <div class="overview-card">
          <div class="card-icon">👥</div>
          <div class="card-content">
            <div class="card-value">{{ workHourDashboard()!.totalDesigners }}</div>
            <div class="card-label">设计师总数</div>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon">📋</div>
          <div class="card-content">
            <div class="card-value">{{ workHourDashboard()!.totalProjects }}</div>
            <div class="card-label">项目总数</div>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon">⏰</div>
          <div class="card-content">
            <div class="card-value">{{ formatWorkHours(workHourDashboard()!.averageEffectiveHours) }}</div>
            <div class="card-label">平均有效工时</div>
          </div>
        </div>
        
        <div class="overview-card warning-card">
          <div class="card-icon">⚠️</div>
          <div class="card-content">
            <div class="card-value">{{ overdueProjects().length }}</div>
            <div class="card-label">逾期项目数</div>
          </div>
        </div>
      </div>

      <!-- 标准工时设置 -->
      <div class="standard-hours-section">
        <h3>📊 标准工时预设</h3>
        <div class="complexity-cards">
          <div class="complexity-card" *ngFor="let complexity of projectComplexities">
            <div class="complexity-header">
              <span class="complexity-type">{{ complexity.type }}</span>
            </div>
            <div class="complexity-stages">
              <div class="stage-item">
                <span class="stage-name">需求深化</span>
                <span class="stage-hours">{{ complexity.standardHours.requirementDeepening }}h</span>
              </div>
              <div class="stage-item">
                <span class="stage-name">建模</span>
                <span class="stage-hours">{{ complexity.standardHours.modeling }}h</span>
              </div>
              <div class="stage-item">
                <span class="stage-name">渲染</span>
                <span class="stage-hours">{{ complexity.standardHours.rendering }}h</span>
              </div>
              <div class="stage-item">
                <span class="stage-name">后期</span>
                <span class="stage-hours">{{ complexity.standardHours.postProduction }}h</span>
              </div>
            </div>
            <div class="complexity-total">
              总计: {{ complexity.standardHours.requirementDeepening + complexity.standardHours.modeling + complexity.standardHours.rendering + complexity.standardHours.postProduction }}h
            </div>
          </div>
        </div>
      </div>

      <!-- 逾期项目管理 -->
      <div class="overdue-section">
        <div class="section-title">
          <h3>⚠️ 逾期项目监控</h3>
          <button class="export-btn" (click)="exportOverdueReport()">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
              <polyline points="7 10 12 15 17 10"></polyline>
              <line x1="12" y1="15" x2="12" y2="3"></line>
            </svg>
            导出报表
          </button>
        </div>
        
        <div class="overdue-list">
          <div 
            class="overdue-item" 
            *ngFor="let project of overdueProjects()"
            [class]="getOverdueClass(project.overdueDays)"
            (click)="viewProjectDetail(project.id)">
            <div class="overdue-header">
              <div class="project-info">
                <span class="project-name">{{ project.name }}</span>
                <span class="project-id">ID: {{ project.id }}</span>
              </div>
              <div class="overdue-badge" [class]="getOverdueClass(project.overdueDays)">
                逾期 {{ project.overdueDays }} 天
              </div>
            </div>
            <div class="overdue-content">
              <div class="overdue-detail">
                <span class="detail-label">阶段：</span>
                <span class="detail-value stage-badge">{{ project.stage }}</span>
              </div>
              <div class="overdue-detail">
                <span class="detail-label">设计师：</span>
                <span class="detail-value">{{ project.designerName }}</span>
              </div>
              <div class="overdue-detail">
                <span class="detail-label">原因：</span>
                <span class="detail-value reason">{{ project.reason }}</span>
              </div>
            </div>
            <div class="overdue-action">
              <span class="view-detail-text">查看详情 →</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 人效统计看板 -->
      <div class="efficiency-dashboard">
        <h3>📈 人效统计看板 - {{ getTimeDimensionText() }}</h3>
        
        <div class="efficiency-list">
          <div 
            class="efficiency-item" 
            *ngFor="let designer of designerEfficiencies()"
            (click)="viewDesignerDetail(designer.id)">
            
            <!-- 设计师基本信息 -->
            <div class="efficiency-header">
              <div class="designer-info">
                <div class="designer-name">{{ designer.name }}</div>
                <div class="designer-stats-summary">
                  <span class="stat-chip" [style.background-color]="getEfficiencyLevelColor(designer.avgCompletionTime)">
                    平均 {{ designer.avgCompletionTime }} 天
                  </span>
                  <span class="stat-chip overdue" *ngIf="designer.overdueProjectCount > 0">
                    逾期 {{ designer.overdueProjectCount }} 个
                  </span>
                  <span class="stat-chip idle" *ngIf="designer.idleDays > 0">
                    闲置 {{ designer.idleDays }} 天
                  </span>
                </div>
              </div>
            </div>

            <!-- 各阶段工时利用率 -->
            <div class="stage-utilization">
              <div class="utilization-item">
                <div class="utilization-header">
                  <span class="stage-label">需求深化</span>
                  <span class="utilization-value">{{ designer.stageUtilization.requirementDeepening }}%</span>
                </div>
                <div class="utilization-bar">
                  <div 
                    class="utilization-fill" 
                    [style.width.%]="designer.stageUtilization.requirementDeepening"
                    [style.background-color]="getUtilizationColor(designer.stageUtilization.requirementDeepening)">
                  </div>
                </div>
              </div>

              <div class="utilization-item">
                <div class="utilization-header">
                  <span class="stage-label">建模</span>
                  <span class="utilization-value">{{ designer.stageUtilization.modeling }}%</span>
                </div>
                <div class="utilization-bar">
                  <div 
                    class="utilization-fill" 
                    [style.width.%]="designer.stageUtilization.modeling"
                    [style.background-color]="getUtilizationColor(designer.stageUtilization.modeling)">
                  </div>
                </div>
              </div>

              <div class="utilization-item">
                <div class="utilization-header">
                  <span class="stage-label">渲染</span>
                  <span class="utilization-value">{{ designer.stageUtilization.rendering }}%</span>
                </div>
                <div class="utilization-bar">
                  <div 
                    class="utilization-fill" 
                    [style.width.%]="designer.stageUtilization.rendering"
                    [style.background-color]="getUtilizationColor(designer.stageUtilization.rendering)">
                  </div>
                </div>
              </div>

              <div class="utilization-item">
                <div class="utilization-header">
                  <span class="stage-label">后期</span>
                  <span class="utilization-value">{{ designer.stageUtilization.postProduction }}%</span>
                </div>
                <div class="utilization-bar">
                  <div 
                    class="utilization-fill" 
                    [style.width.%]="designer.stageUtilization.postProduction"
                    [style.background-color]="getUtilizationColor(designer.stageUtilization.postProduction)">
                  </div>
                </div>
              </div>
            </div>

            <!-- 决策建议 -->
            <div class="efficiency-suggestion">
              <div class="suggestion-icon">💡</div>
              <div class="suggestion-text">{{ designer.suggestion }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 绩效等级分布 -->
      <div class="performance-distribution" *ngIf="workHourDashboard()">
        <h3>🏆 绩效等级分布</h3>
        <div class="performance-chart">
          <div class="performance-item" *ngFor="let level of ['S', 'A', 'B', 'C']">
            <div class="level-indicator" [style.background-color]="getPerformanceLevelColor(level)">
              {{ level }}
            </div>
            <div class="level-info">
              <div class="level-count">{{ getPerformanceLevelCount(level) }}人</div>
              <div class="level-desc">{{ getPerformanceLevelDescription(level) }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 月度统计表格 -->
      <div class="monthly-stats" *ngIf="monthlyStats().length > 0">
        <h3>📅 设计师月度统计</h3>
        <div class="stats-table">
          <div class="table-header">
            <div class="header-cell">设计师</div>
            <div class="header-cell">实际工时</div>
            <div class="header-cell">有效工时</div>
            <div class="header-cell">完成项目</div>
            <div class="header-cell">客户满意度</div>
            <div class="header-cell">绩效等级</div>
          </div>
          <div class="table-body">
            <div class="table-row" *ngFor="let stat of monthlyStats()">
              <div class="table-cell">{{ stat.designerName }}</div>
              <div class="table-cell">{{ formatWorkHours(stat.totalActualHours) }}</div>
              <div class="table-cell">{{ formatWorkHours(stat.totalEffectiveHours) }}</div>
              <div class="table-cell">{{ stat.completedProjects }}个</div>
              <div class="table-cell">{{ stat.averageCustomerSatisfaction.toFixed(1) }}分</div>
              <div class="table-cell">
                <span class="performance-badge" [style.background-color]="getPerformanceLevelColor(stat.performanceLevel)">
                  {{ stat.performanceLevel }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据概览卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon orders"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M3 3h18v18H3V3zm6 6v2H7V9h2zm0 4v2H7v-2h2zm0 4v2H7v-2h2zm4-8v2h-2V9h2zm0 4v2h-2v-2h2zm0 4v2h-2v-2h2zm4-8v2h-2V9h2zm0 4v2h-2v-2h2zm0 4v2h-2v-2h2z"/></svg></div>
        <div class="stat-content">
          <div class="stat-value">{{ dashboardStats().todayOrders }}</div>
          <div class="stat-label">今日接单量</div>
        </div>
        <button class="view-detail-btn" (click)="handleQuickAction('generateReport')">查看详情</button>
      </div>

      <div class="stat-card">
        <div class="stat-icon payment"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 6h-2c0-1.654-1.346-3-3-3H9C7.346 3 6 4.346 6 6H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V8c0-1.103-.897-2-2-2zM9 6c0-.551.448-1 1-1h4c.552 0 1 .449 1 1v2H9V6zm10 12H4v-4h16v4z"/></svg></div>
        <div class="stat-content">
          <div class="stat-value" *ngIf="userRole() === 'teamLead'; else hiddenValue">{{ formatAmount(dashboardStats().pendingPayment) }}</div>
          <ng-template #hiddenValue><div class="stat-value">--</div></ng-template>
          <div class="stat-label">待收款金额</div>
        </div>
        <button class="view-detail-btn" (click)="handleQuickAction('recordPayment')">查看详情</button>
      </div>

      <div class="stat-card">
        <div class="stat-icon quotes"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M8 3v3a2 2 0 01-2 2H3m18 0h-3a2 2 0 01-2-2V3m0 18v-3a2 2 0 012-2h3M3 16h3a2 2 0 012 2v3"/></svg></div>
        <div class="stat-content">
          <div class="stat-value">{{ dashboardStats().quotedProjects }}</div>
          <div class="stat-label">已完成报价单数</div>
        </div>
        <button class="view-detail-btn" (click)="handleQuickAction('newQuote')">查看详情</button>
      </div>

      <div class="stat-card">
        <div class="stat-icon savings"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg></div>
        <div class="stat-content">
          <div class="stat-value" *ngIf="userRole() === 'teamLead'; else hiddenSavings">{{ formatAmount(dashboardStats().materialCostSaved) }}</div>
          <ng-template #hiddenSavings><div class="stat-value">--</div></ng-template>
          <div class="stat-label">素材成本节约金额</div>
        </div>
        <button class="view-detail-btn" (click)="handleQuickAction('recordPayment')">查看详情</button>
      </div>
    </div>

    <!-- 待办任务区域 -->
    <div class="todo-section">
      <div class="section-header">
        <h2>待办任务</h2>
        <div class="task-count">{{ todoTasks().length }} 项任务</div>
      </div>
      <div class="task-list">
        <div class="task-item" *ngFor="let task of todoTasks()" (click)="handleTaskClick(task)" [class.high-priority]="task.priority === 'high'" [class.medium-priority]="task.priority === 'medium'">
          <div class="task-priority-indicator"></div>
          <div class="task-content">
            <div class="task-title">{{ task.title }}</div>
            <div class="task-meta">
              <span class="due-time">截止时间: {{ task.dueTime }}</span>
            </div>
          </div>
          <div class="task-action">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 精美悬浮按钮 - 跳转到项目复盘 -->
  <button class="floating-review-btn" (click)="goToAftercare()" *ngIf="showFloatingButton()" title="查看项目复盘">
    <div class="floating-btn-icon">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M9 11l3 3L22 4"></path>
        <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"></path>
      </svg>
    </div>
    <span class="floating-btn-text">项目复盘</span>
    <div class="floating-btn-pulse"></div>
  </button>
</div>