antissoft / lvqianmeiye_ERP

<template>
  <div class="dashboard-page">
    <!-- 顶部：门店信息 + 快速会员搜索 -->
    <div class="top-bar">
      <div class="store-info">
        <div class="store-name">绿纤门店 · 工作台</div>
        <div class="store-subtitle">今日邀约 · 预约 · 开单，一眼总览</div>
      </div>
      <div class="member-search">
        <el-input
          v-model="memberKeyword"
          class="member-search-input"
          clearable
          placeholder="快速查询会员：手机号 / 姓名 / 会员卡号"
          prefix-icon="el-icon-search"
          @keyup.enter.native="handleMemberSearch"
        >
          <el-button slot="append" type="primary" @click="handleMemberSearch">查询</el-button>
        </el-input>
      </div>
      <div class="top-meta">
        <div class="today-text">{{ todayLabel }}</div>
        <div class="user-info">
          <div class="user-avatar">{{ userInitial }}</div>
          <span class="user-name">{{ userName }}</span>
        </div>
      </div>
    </div>

    <div class="layout-grid">
      <!-- 左侧：概览 + 六大板块 -->
      <div class="left-column">
        <!-- 今日概览 -->
        <div class="overview-row">
          <el-row :gutter="16">
            <el-col v-for="item in overviewStats" :key="item.key" :span="8">
              <el-card shadow="hover" class="overview-card">
                <div class="overview-meta">
                  <span class="label">{{ item.label }}</span>
                  <span class="tag" v-if="item.tag">{{ item.tag }}</span>
                </div>
                <div class="overview-value">{{ item.value }}</div>
                <div class="overview-sub">{{ item.subText }}</div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 六大业务板块 -->
        <div class="modules-grid">
          <el-row :gutter="16">
            <el-col
              v-for="module in modules"
              :key="module.key"
              :span="8"
            >
              <el-card
                shadow="hover"
                class="module-card"
                :body-style="{ padding: '18px 18px 16px' }"
                @click.native="goModule(module)"
              >
                <div class="module-header">
                  <div class="module-title-wrap">
                    <div class="module-title">{{ module.title }}</div>
                    <div class="module-subtitle">{{ module.subtitle }}</div>
                  </div>
                  <div class="module-icon" :style="{ background: module.iconBg }">
                    <i :class="module.icon"></i>
                  </div>
                </div>
                <div class="module-meta">
                  <div class="meta-value">{{ module.metricValue }}</div>
                  <div class="meta-label">{{ module.metricLabel }}</div>
                </div>
                <div class="module-actions">
                  <span
                    class="primary-action"
                    @click.stop="handleModulePrimary(module)"
                  >
                    {{ module.primaryAction }}
                  </span>
                  <span class="secondary-text">{{ module.secondaryText }}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- 右侧：今日邀约 / 预约 -->
      <div class="right-column">
        <el-card shadow="hover" class="today-card" :body-style="{ padding: '16px 16px 12px' }">
          <div slot="header" class="today-header">
            <div class="today-title">今日邀约 / 预约</div>
            <div class="today-badge">门店实时动态</div>
          </div>
          <el-tabs v-model="todayTab">
            <el-tab-pane label="今日邀约" name="invite">
              <div v-if="todayInvite.length" class="timeline-list">
                <div
                  v-for="item in todayInvite"
                  :key="item.id"
                  class="timeline-item"
                >
                  <div class="time">{{ item.time }}</div>
                  <div class="content">
                    <div class="line-main">
                      <span class="name">{{ item.name }}</span>
                      <span class="mobile">{{ item.mobile }}</span>
                    </div>
                    <div class="line-sub">
                      <span class="project">
                        电话是否有效：{{ item.dhsfyx }} · {{ item.lxjl }}
                      </span>
                      <button
                        type="button"
                        class="quick-book-btn"
                        @click="handleQuickBooking(item)"
                      >
                        快速预约
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="empty-tip">今日暂无邀约记录</div>
            </el-tab-pane>
            <el-tab-pane label="今日预约" name="booking">
              <div v-if="todayBooking.length" class="timeline-list">
                <div v-for="item in todayBooking" :key="item.id" class="timeline-item">
                  <div class="time">{{ item.time }}</div>
                  <div class="content">
                    <div class="line-main">
                      <span class="name">{{ item.name }}</span>
                      <span class="mobile">{{ item.mobile }}</span>
                    </div>
                    <div class="line-sub">
                      <span class="project">
                        预约项目：{{ item.project }} · 预约时间：{{ item.date }} {{ item.timeRange }}
                      </span>
                      <button
                        type="button"
                        class="quick-order-btn"
                        @click="handleQuickBilling(item)"
                      >
                        快速开单
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="empty-tip">今日暂无预约记录</div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </div>
    <member-profile-dialog
      :visible.sync="memberDialogVisible"
      :member="activeMember || {}"
    />
    <tuoke-lead-dialog
      :visible.sync="tuokeDialogVisible"
    />
    <invite-add-dialog
      :visible.sync="inviteDialogVisible"
    />
    <booking-dialog
      :visible.sync="bookingDialogVisible"
      :prefill="bookingPrefill"
    />
  </div>
</template>

<script>
import MemberProfileDialog from '@/components/MemberProfileDialog.vue'
import TuokeLeadDialog from '@/components/TuokeLeadDialog.vue'
import InviteAddDialog from '@/components/InviteAddDialog.vue'
import BookingDialog from '@/components/BookingDialog.vue'

export default {
  name: 'Dashboard',
  components: {
    MemberProfileDialog,
    TuokeLeadDialog,
    InviteAddDialog,
    BookingDialog
  },
  data() {
    return {
      memberKeyword: '',
      memberDialogVisible: false,
      activeMember: null,
      todayTab: 'invite',
      overviewStats: [
        {
          key: 'invite',
          label: '今日邀约',
          value: 0,
          subText: '待联系 0 · 已到店 0',
          tag: '潜客'
        },
        {
          key: 'booking',
          label: '今日预约',
          value: 0,
          subText: '进行中 0 · 已完成 0',
          tag: '到店'
        },
        {
          key: 'order',
          label: '今日业绩',
          value: '¥0',
          subText: '开单 0 · 客次 0',
          tag: '收银'
        }
      ],
      modules: [
        {
          key: 'tuoke',
          title: '拓客管理',
          subtitle: '',
          icon: 'el-icon-connection',
          iconBg: 'linear-gradient(135deg, #6366f1, #a855f7)',
          metricValue: 0,
          metricLabel: '今日新增潜客',
          primaryAction: '录入拓客信息',
          secondaryText: '查看拓客数据',
          route: '/tuoke'
        },
        {
          key: 'invite',
          title: '邀约管理',
          subtitle: '',
          icon: 'el-icon-phone-outline',
          iconBg: 'linear-gradient(135deg, #0ea5e9, #22c55e)',
          metricValue: 0,
          metricLabel: '待跟进邀约',
          primaryAction: '去邀约',
          secondaryText: '查看邀约记录',
          route: '/invite'
        },
        {
          key: 'booking',
          title: '预约管理',
          subtitle: '',
          icon: 'el-icon-date',
          iconBg: 'linear-gradient(135deg, #f97316, #facc15)',
          metricValue: 0,
          metricLabel: '今日预约',
          primaryAction: '新建预约',
          secondaryText: '打开预约日历',
          route: '/booking'
        },
        {
          key: 'order',
          title: '开单管理',
          subtitle: '',
          icon: 'el-icon-s-order',
          iconBg: 'linear-gradient(135deg, #3b82f6, #2563eb)',
          metricValue: 0,
          metricLabel: '今日开单',
          primaryAction: '快速开单',
          secondaryText: '查看开单记录',
          route: '/orders'
        },
        {
          key: 'consume',
          title: '消耗管理',
          subtitle: '',
          icon: 'el-icon-magic-stick',
          iconBg: 'linear-gradient(135deg, #22c55e, #16a34a)',
          metricValue: 0,
          metricLabel: '今日消耗人次',
          primaryAction: '记录消耗',
          secondaryText: '查看消耗记录',
          route: '/consume'
        },
        {
          key: 'refund',
          title: '退卡管理',
          subtitle: '',
          icon: 'el-icon-refresh-left',
          iconBg: 'linear-gradient(135deg, #f97316, #ef4444)',
          metricValue: 0,
          metricLabel: '今日退卡',
          primaryAction: '发起退卡',
          secondaryText: '查看售后记录',
          route: '/refund'
        }
      ],
      todayInvite: [
        {
          id: 'TI202603020001',
          time: '09:10',
          name: '林小纤',
          mobile: '13800138000',
          dhsfyx: '是',
          lxjl: '邀约周末面部深层护理体验，客户有兴趣。'
        },
        {
          id: 'TI202603020002',
          time: '09:35',
          name: '王丽',
          mobile: '13800138001',
          dhsfyx: '是',
          lxjl: '介绍肩颈调理活动，已确认可到店。'
        },
        {
          id: 'TI202603020003',
          time: '10:05',
          name: '张敏',
          mobile: '13800138002',
          dhsfyx: '否',
          lxjl: '电话无人接听，准备稍后再次联系。'
        },
        {
          id: 'TI202603020004',
          time: '10:40',
          name: '赵云',
          mobile: '13800138003',
          dhsfyx: '是',
          lxjl: '邀约身体舒缓护理体验，客户需与家人确认时间。'
        },
        {
          id: 'TI202603020005',
          time: '11:20',
          name: '刘芳',
          mobile: '13800138004',
          dhsfyx: '是',
          lxjl: '眼周护理体验回访，客户反馈效果不错。'
        },
        {
          id: 'TI202603020006',
          time: '13:15',
          name: '陈洁',
          mobile: '13800138005',
          dhsfyx: '是',
          lxjl: '面部护理加购邀约，客户考虑本周安排。'
        },
        {
          id: 'TI202603020007',
          time: '14:00',
          name: '周雪',
          mobile: '13800138006',
          dhsfyx: '否',
          lxjl: '电话为空号，准备核实客户信息。'
        },
        {
          id: 'TI202603020008',
          time: '15:10',
          name: '李楠',
          mobile: '13800138007',
          dhsfyx: '是',
          lxjl: '身体护理活动邀约，客户希望下班后再联系。'
        },
        {
          id: 'TI202603020009',
          time: '16:25',
          name: '何倩',
          mobile: '13800138008',
          dhsfyx: '是',
          lxjl: '生日关怀邀约，初步定周末到店。'
        },
        {
          id: 'TI202603020010',
          time: '17:40',
          name: '孙悦',
          mobile: '13800138009',
          dhsfyx: '是',
          lxjl: '眼周护理复查邀约，客户暂不方便到店。'
        }
      ],
      todayBooking: [
        {
          id: 'TB202603020001',
          time: '09:30',
          date: '2026-03-02',
          timeRange: '09:30-10:00',
          name: '林小纤',
          mobile: '13800138000',
          project: '面部深层护理',
          staffName: '小李',
          status: 'pending',
          statusText: '待服务'
        },
        {
          id: 'TB202603020002',
          time: '10:00',
          date: '2026-03-02',
          timeRange: '10:00-10:30',
          name: '王丽',
          mobile: '13800138001',
          project: '肩颈调理',
          staffName: '小王',
          status: 'pending',
          statusText: '待服务'
        },
        {
          id: 'TB202603020003',
          time: '10:45',
          date: '2026-03-02',
          timeRange: '10:45-11:15',
          name: '张敏',
          mobile: '13800138002',
          project: '春季补水套餐',
          staffName: '小李',
          status: 'done',
          statusText: '已完成'
        },
        {
          id: 'TB202603020004',
          time: '11:30',
          date: '2026-03-02',
          timeRange: '11:30-12:00',
          name: '赵云',
          mobile: '13800138003',
          project: '身体舒缓护理',
          staffName: '小王',
          status: 'pending',
          statusText: '待服务'
        },
        {
          id: 'TB202603020005',
          time: '13:00',
          date: '2026-03-02',
          timeRange: '13:00-13:30',
          name: '刘芳',
          mobile: '13800138004',
          project: '眼周护理套餐',
          staffName: '小李',
          status: 'cancel',
          statusText: '已取消'
        },
        {
          id: 'TB202603020006',
          time: '14:20',
          date: '2026-03-02',
          timeRange: '14:20-14:50',
          name: '陈洁',
          mobile: '13800138005',
          project: '面部深层护理',
          staffName: '小李',
          status: 'pending',
          statusText: '待服务'
        },
        {
          id: 'TB202603020007',
          time: '15:10',
          date: '2026-03-02',
          timeRange: '15:10-15:40',
          name: '周雪',
          mobile: '13800138006',
          project: '肩颈调理',
          staffName: '小王',
          status: 'done',
          statusText: '已完成'
        },
        {
          id: 'TB202603020008',
          time: '16:00',
          date: '2026-03-02',
          timeRange: '16:00-16:30',
          name: '李楠',
          mobile: '13800138007',
          project: '身体舒缓护理',
          staffName: '小王',
          status: 'pending',
          statusText: '待服务'
        },
        {
          id: 'TB202603020009',
          time: '16:45',
          date: '2026-03-02',
          timeRange: '16:45-17:15',
          name: '何倩',
          mobile: '13800138008',
          project: '眼周护理套餐',
          staffName: '小李',
          status: 'pending',
          statusText: '待服务'
        },
        {
          id: 'TB202603020010',
          time: '17:30',
          date: '2026-03-02',
          timeRange: '17:30-18:00',
          name: '孙悦',
          mobile: '13800138009',
          project: '面部深层护理',
          staffName: '小李',
          status: 'pending',
          statusText: '待服务'
        }
      ],
      tuokeDialogVisible: false,
      inviteDialogVisible: false,
      bookingDialogVisible: false,
      bookingPrefill: {
        name: '',
        phone: ''
      }
    }
  },
  computed: {
    todayLabel() {
      const d = new Date()
      const year = d.getFullYear()
      const month = `${d.getMonth() + 1}`.padStart(2, '0')
      const day = `${d.getDate()}`.padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    userName() {
      return (this.$store && this.$store.state && this.$store.state.user && this.$store.state.user.realName) || '门店前台'
    },
    userInitial() {
      return this.userName ? this.userName[0] : '店'
    }
  },
  methods: {
    handleModulePrimary(module) {
      if (module.key === 'tuoke') {
        this.tuokeDialogVisible = true
        return
      }
      if (module.key === 'invite') {
        this.inviteDialogVisible = true
        return
      }
      if (module.key === 'booking') {
        this.bookingPrefill = { name: '', phone: '' }
        this.bookingDialogVisible = true
        return
      }
      this.goModule(module)
    },
    handleMemberSearch() {
      const keyword = (this.memberKeyword || '').trim()
      if (!keyword) return
      this.activeMember = {
        id: '10001',
        dah: 'LX202603010001',
        khmc: '林小纤',
        sjh: keyword || '13800138000',
        xb: '女',
        gsmdName: this.$store.state.storeInfo?.storeName || '绿纤门店',
        khlxName: '散客',
        zcsj: '2024-08-15 15:32',
        jdqd: '小程序拓客',
        tjrName: '老客户-王女士',
        mainHealthUserName: '—',
        subHealthUserName: '赵美美',
        expandUserName: '—',
        lxdz: '杭州市 · 西湖区 · 文三路',
        bz: '偏好安静包间，对香味略敏感',
        totalConsumeAmount: 12000,
        totalBillingAmount: 15280,
        remainingRightsAmount: 3280,
        visitDays: 18,
        sleepDays: 5,
        lastVisitTime: '2026-03-02 16:20',
        lastConsumeTime: '2026-03-02 16:20',
        consumeLevelName: '金卡会员',
        yanglsr: '08-18',
        yinlsr: '七月初五',
        isBeautyMember: 1,
        isMedicalMember: 0,
        isTechMember: 0,
        isEducationMember: 0,
        RemainingItems: [
          { ItemName: '面部深层护理（次卡）', ItemPrice: 380, SourceType: '购买', TotalPurchased: 10, ConsumedCount: 4, RemainingCount: 6 },
          { ItemName: '肩颈调理（疗程）', ItemPrice: 268, SourceType: '购买', TotalPurchased: 5, ConsumedCount: 2, RemainingCount: 3 },
          { ItemName: '身体舒缓护理', ItemPrice: 498, SourceType: '购买', TotalPurchased: 3, ConsumedCount: 1, RemainingCount: 2 },
          { ItemName: '眼周护理套餐', ItemPrice: 198, SourceType: '赠送', TotalPurchased: 4, ConsumedCount: 1, RemainingCount: 3 },
          { ItemName: '颈肩放松体验', ItemPrice: 168, SourceType: '活动', TotalPurchased: 2, ConsumedCount: 0, RemainingCount: 2 }
        ],
        billingRecords: [
          { orderNo: 'BD202603020001', billingTime: '2026-03-02 14:30', productName: '面部深层护理（次卡）', amount: 2280, operator: '赵美美' },
          { orderNo: 'BD202602150002', billingTime: '2026-02-15 10:20', productName: '肩颈调理（疗程）', amount: 1340, operator: '赵美美' },
          { orderNo: 'BD202601300003', billingTime: '2026-01-30 16:05', productName: '身体舒缓护理', amount: 1494, operator: '李丽' },
          { orderNo: 'BD202601120004', billingTime: '2026-01-12 11:20', productName: '眼周护理套餐', amount: 792, operator: '李丽' },
          { orderNo: 'BD202512250005', billingTime: '2025-12-25 19:30', productName: '颈肩放松体验', amount: 336, operator: '王芳' }
        ],
        consumeRecords: [
          { consumeTime: '2026-03-02 16:20', itemName: '面部深层护理', count: 1, operator: '小李' },
          { consumeTime: '2026-02-28 15:00', itemName: '肩颈调理', count: 1, operator: '小李' },
          { consumeTime: '2026-02-20 18:30', itemName: '身体舒缓护理', count: 1, operator: '小王' },
          { consumeTime: '2026-02-10 13:40', itemName: '眼周护理套餐', count: 1, operator: '小王' },
          { consumeTime: '2026-01-30 10:15', itemName: '颈肩放松体验', count: 1, operator: '小李' }
        ],
        inviteRecords: [
          { inviteTime: '2026-03-01 09:00', inviteContent: '周末护理体验邀约', inviter: '赵美美', status: '已到店' },
          { inviteTime: '2026-02-25 14:00', inviteContent: '春季护肤专场', inviter: '赵美美', status: '已到店' },
          { inviteTime: '2026-02-18 10:30', inviteContent: '肩颈调理舒缓活动', inviter: '李丽', status: '待跟进' },
          { inviteTime: '2026-02-05 16:20', inviteContent: '身体舒缓护理体验', inviter: '李丽', status: '未接通' },
          { inviteTime: '2026-01-28 11:10', inviteContent: '生日关怀邀约', inviter: '王芳', status: '已到店' }
        ],
        bookingRecords: [
          { bookingTime: '2026-03-05 14:00', projectName: '面部深层护理', staffName: '小李', status: '待服务' },
          { bookingTime: '2026-03-02 16:00', projectName: '面部深层护理', staffName: '小李', status: '已完成' },
          { bookingTime: '2026-02-26 10:30', projectName: '肩颈调理', staffName: '小王', status: '已取消' },
          { bookingTime: '2026-02-15 19:00', projectName: '身体舒缓护理', staffName: '小王', status: '已完成' },
          { bookingTime: '2026-01-31 11:20', projectName: '眼周护理套餐', staffName: '小李', status: '待确认' }
        ],
        refundRecords: [
          { refundTime: '2026-02-20 11:30', orderNo: 'TK202602200001', projectName: '肩颈调理（疗程）', amount: 536, operator: '赵美美' },
          { refundTime: '2026-02-10 15:10', orderNo: 'TK202602100002', projectName: '面部深层护理（次卡）', amount: 760, operator: '赵美美' },
          { refundTime: '2026-01-28 17:40', orderNo: 'TK202601280003', projectName: '身体舒缓护理', amount: 498, operator: '李丽' },
          { refundTime: '2026-01-15 13:05', orderNo: 'TK202601150004', projectName: '眼周护理套餐', amount: 198, operator: '李丽' },
          { refundTime: '2025-12-30 16:25', orderNo: 'TK202512300005', projectName: '颈肩放松体验', amount: 168, operator: '王芳' }
        ]
      }
      this.memberDialogVisible = true
    },
    handleQuickBooking(item) {
      this.bookingPrefill = {
        name: item.name,
        phone: item.mobile
      }
      this.bookingDialogVisible = true
    },
    handleQuickBilling(item) {
      this.$router.push('/orders')
    },
    goModule(module) {
      if (module.route) {
        this.$router.push(module.route)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-page {
  min-height: 100%;
  padding: 20px 24px;
  background: radial-gradient(circle at 10% 20%, #eef2ff 0, #eef2ff 26%, #fdf2ff 60%, #fff7ed 100%);
  box-sizing: border-box;
}

.top-bar {
  display: grid;
  grid-template-columns: minmax(200px, 1.2fr) minmax(260px, 2fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.store-info {
  .store-name {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    letter-spacing: 0.5px;
  }
  .store-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
  }
}

.member-search-input {
  ::v-deep .el-input-group__append {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    padding: 0 20px;
    border-radius: 0 999px 999px 0;
  }
  ::v-deep .el-input__inner {
    border-radius: 999px 0 0 999px;
    padding-left: 40px;
  }
}

.top-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}

.today-text {
  font-size: 13px;
  color: #6b7280;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #22c55e);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.user-name {
  font-size: 13px;
  color: #374151;
}

.layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr);
  gap: 16px;
}

.left-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modules-grid {
  margin-top: 4px;
}

.modules-grid .el-col {
  margin-bottom: 16px;
}

.overview-row {
  .overview-card {
    border-radius: 16px;
    border: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  }
}

.overview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  .label {
    font-size: 13px;
    color: #6b7280;
  }
  .tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
  }
}

.overview-value {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
}

.overview-sub {
  margin-top: 4px;
  font-size: 12px;
  color: #9ca3af;
}

.modules-grid .module-card {
  border-radius: 18px;
  border: none;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.modules-grid .module-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.module-title-wrap {
  .module-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
  }
  .module-subtitle {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
  }
}

.module-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  i {
    font-size: 20px;
  }
}

.module-meta {
  margin-top: 8px;
  .meta-value {
    font-size: 22px;
    font-weight: 600;
    color: #111827;
  }
  .meta-label {
    margin-top: 2px;
    font-size: 12px;
    color: #9ca3af;
  }
}

.module-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
  }
  .secondary-text {
    font-size: 12px;
    color: #9ca3af;
  }
}

.right-column .today-card {
  border-radius: 18px;
  border: none;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.today-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.today-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.today-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
}

.timeline-list {
}

.timeline-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 8px;
  padding: 6px 0;
  font-size: 12px;
}

.timeline-item + .timeline-item {
  border-top: 1px dashed #e5e7eb;
}

.timeline-item .time {
  color: #6b7280;
  padding-top: 2px;
}

.timeline-item .content {
  .line-main {
    display: flex;
    align-items: center;
    gap: 6px;
    .name {
      color: #111827;
      font-weight: 500;
    }
    .mobile {
      color: #6b7280;
    }
  }
  .line-sub {
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    .project {
      color: #6b7280;
      flex: 1;
    }
  }
}

.quick-book-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  padding: 0 12px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
  cursor: pointer;
}

.quick-book-btn:hover {
  background: #1d4ed8;
}

.quick-order-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  padding: 0 12px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  background: #f97316;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(248, 113, 22, 0.3);
  cursor: pointer;
}

.quick-order-btn:hover {
  background: #ea580c;
}

.status {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
}

.status--pending {
  background: #fef3c7;
  color: #92400e;
}

.status--done {
  background: #dcfce7;
  color: #166534;
}

.status--cancel {
  background: #fee2e2;
  color: #b91c1c;
}

.empty-tip {
  padding: 16px 0;
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
}

@media (max-width: 1024px) {
  .layout-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr);
  }
}

@media (max-width: 768px) {
  .dashboard-page {
    padding: 16px;
  }
  .top-bar {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }
  .layout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
</style>