<template>
  <div class="calllog-dashboard-page">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
      <div>
        <h2 class="mb-0">Dashboard CallLog</h2>
        <p class="text-muted mb-0">Tổng quan và thống kê cuộc gọi tổng đài</p>
      </div>
      <div class="d-flex gap-2">
        <router-link 
          to="/call-log" 
          class="btn btn-outline-primary"
        >
          <i class="fas fa-list me-2"></i>
          Danh sách CallLog
        </router-link>
        <button 
          class="btn btn-primary"
          @click="refreshDashboard"
        >
          <i class="fas fa-sync-alt me-2"></i>
          Làm mới
        </button>
      </div>
    </div>

    <!-- Dashboard Content -->
    <CallLogDashboard ref="dashboard" />
  </div>
</template>

<script>
import CallLogDashboard from "./components/CallLogDashboard.vue";

export default {
  name: "CallLogDashboardPage",
  components: {
    CallLogDashboard
  },
  methods: {
    refreshDashboard() {
      this.$refs.dashboard?.refreshStatistics();
    }
  }
};
</script>

<style scoped>
.calllog-dashboard-page {
  padding: 20px;
}
</style>
