<script setup lang="ts">
import { CalendarClock, CloudCog, RefreshCw } from "@lucide/vue";
</script>

<template>
  <div class="view-stack">
    <header class="page-header">
      <div>
        <h1>实时考勤</h1>
        <p>查看今日打卡状态，并预估本月薪资进度。</p>
      </div>
      <div class="header-actions">
        <button class="secondary-button" type="button" disabled>
          <RefreshCw :size="18" aria-hidden="true" />
          <span>刷新</span>
        </button>
        <button class="primary-button" type="button" disabled>
          <CloudCog :size="18" aria-hidden="true" />
          <span>同步钉钉</span>
        </button>
      </div>
    </header>

    <section class="panel">
      <div class="panel-header">
        <div>
          <h2>今日考勤与薪资预估</h2>
          <p>预估金额，最终以月度核算锁定结果为准。</p>
        </div>
        <span class="status-chip neutral">待接入</span>
      </div>
      <div class="empty-state">
        <CalendarClock :size="38" aria-hidden="true" />
        <p>实时考勤看板已接入菜单，下一阶段接入钉钉同步和薪资预估数据。</p>
      </div>
    </section>
  </div>
</template>
