influence/pages/view/vendor/dashboard/index.vue

<template>
  <div>
    <div class="inner--headers">
      <h2>{{ pageId }}</h2>
      <div class="bread--crumbs--wrap">
        <span>홈</span>
        <span>{{ pageId }}</span>
      </div>
    </div>

    <!-- 필터링 섹션 -->
    <div class="dashboard--filters">
      <div class="filter--wrap">
        <div class="date--range">
          <VueDatePicker
            v-model="dateRange"
            range
            :format="dateFormat"
            placeholder="기간을 선택하세요"
            :auto-apply="true"
            @update:model-value="onDateRangeChange"
          />
        </div>
        <div class="quick--filters">
          <v-btn 
            :class="{ 'active': selectedPeriod === 'today' }"
            @click="setQuickPeriod('today')"
            size="small"
            elevation="0"
          >오늘</v-btn>
          <v-btn 
            :class="{ 'active': selectedPeriod === 'week' }"
            @click="setQuickPeriod('week')"
            size="small"
            elevation="0"
          >7일</v-btn>
          <v-btn 
            :class="{ 'active': selectedPeriod === 'month' }"
            @click="setQuickPeriod('month')"
            size="small"
            elevation="0"
          >1개월</v-btn>
          <v-btn 
            :class="{ 'active': selectedPeriod === 'quarter' }"
            @click="setQuickPeriod('quarter')"
            size="small"
            elevation="0"
          >3개월</v-btn>
        </div>
      </div>
    </div>

    <!-- KPI 카드 섹션 -->
    <div class="dashboard--kpi">
      <div class="kpi--cards">
        <div class="kpi--card">
          <div class="kpi--header">
            <h3>총 매출</h3>
            <i class="icon sales"></i>
          </div>
          <div class="kpi--value">{{ formatCurrency(metrics.totalSales) }}</div>
          <div class="kpi--change" :class="{ 'positive': metrics.salesChange >= 0, 'negative': metrics.salesChange < 0 }">
            {{ metrics.salesChange >= 0 ? '+' : '' }}{{ metrics.salesChange }}% 전월 대비
          </div>
        </div>
        <div class="kpi--card">
          <div class="kpi--header">
            <h3>총 주문</h3>
            <i class="icon orders"></i>
          </div>
          <div class="kpi--value">{{ metrics.totalOrders }}개</div>
          <div class="kpi--change" :class="{ 'positive': metrics.ordersChange >= 0, 'negative': metrics.ordersChange < 0 }">
            {{ metrics.ordersChange >= 0 ? '+' : '' }}{{ metrics.ordersChange }}% 전월 대비
          </div>
        </div>
        <div class="kpi--card">
          <div class="kpi--header">
            <h3>정산 완료율</h3>
            <i class="icon settlement"></i>
          </div>
          <div class="kpi--value">{{ metrics.settlementRate }}%</div>
          <div class="kpi--change" :class="{ 'positive': metrics.settlementChange >= 0, 'negative': metrics.settlementChange < 0 }">
            {{ metrics.settlementChange >= 0 ? '+' : '' }}{{ metrics.settlementChange }}%p 전월 대비
          </div>
        </div>
        <div class="kpi--card">
          <div class="kpi--header">
            <h3>평균 주문액</h3>
            <i class="icon avg"></i>
          </div>
          <div class="kpi--value">{{ formatCurrency(metrics.avgOrderValue) }}</div>
          <div class="kpi--change" :class="{ 'positive': metrics.avgOrderChange >= 0, 'negative': metrics.avgOrderChange < 0 }">
            {{ metrics.avgOrderChange >= 0 ? '+' : '' }}{{ metrics.avgOrderChange }}% 전월 대비
          </div>
        </div>
      </div>
    </div>

    <!-- 차트 섹션 -->
    <div class="dashboard--charts">
      <div class="chart--row">
        <div class="chart--container">
          <div class="chart--header">
            <h3>매출 추이</h3>
            <div class="chart--controls">
              <v-btn-toggle v-model="salesChartType" density="compact">
                <v-btn value="line" size="small">라인</v-btn>
                <v-btn value="bar" size="small">막대</v-btn>
              </v-btn-toggle>
            </div>
          </div>
          <div class="chart--content">
            <canvas ref="salesChart" :key="salesChartKey"></canvas>
          </div>
        </div>
        <div class="chart--container">
          <div class="chart--header">
            <h3>주문 현황</h3>
          </div>
          <div class="chart--content">
            <canvas ref="ordersChart" :key="ordersChartKey"></canvas>
          </div>
        </div>
      </div>
      <div class="chart--row">
        <div class="chart--container">
          <div class="chart--header">
            <h3>정산 현황</h3>
          </div>
          <div class="chart--content">
            <canvas ref="settlementChart" :key="settlementChartKey"></canvas>
          </div>
        </div>
        <div class="chart--container">
          <div class="chart--header">
            <h3>카테고리별 매출</h3>
          </div>
          <div class="chart--content">
            <canvas ref="categoryChart" :key="categoryChartKey"></canvas>
          </div>
        </div>
      </div>
    </div>

    <!-- 상세 데이터 테이블 -->
    <div class="dashboard--table">
      <div class="table--header">
        <h3>최근 주문 내역</h3>
        <v-btn 
          color="primary" 
          size="small"
          @click="exportData"
        >
          <i class="mdi mdi-download"></i>
          엑셀 다운로드
        </v-btn>
      </div>
      <div class="table--content">
        <v-data-table
          :headers="tableHeaders"
          :items="recentOrders"
          :loading="loading"
          class="elevation-1"
          items-per-page="10"
        >
          <template v-slot:item.amount="{ item }">
            {{ formatCurrency(item.amount) }}
          </template>
          <template v-slot:item.status="{ item }">
            <v-chip
              :color="getStatusColor(item.status)"
              size="small"
            >
              {{ getStatusText(item.status) }}
            </v-chip>
          </template>
          <template v-slot:item.actions="{ item }">
            <v-btn
              icon="mdi-eye"
              size="small"
              @click="viewOrder(item)"
            ></v-btn>
          </template>
        </v-data-table>
      </div>
    </div>
  </div>
</template>

<script setup>
  import VueDatePicker from "@vuepic/vue-datepicker";
  import "@vuepic/vue-datepicker/dist/main.css";
  import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    BarElement,
    Title,
    Tooltip,
    Legend,
    ArcElement,
  } from 'chart.js';
  
  ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    BarElement,
    Title,
    Tooltip,
    Legend,
    ArcElement
  );

  /************************************************************************
|    레이아웃
************************************************************************/
  definePageMeta({
    layout: "default",
  });

  /************************************************************************
|    스토어
 ************************************************************************/
  const useDtStore = useDetailStore();

  /************************************************************************
|    전역 변수
 ************************************************************************/
  const { $toast, $log, $dayjs } = useNuxtApp();
  const router = useRouter();
  const pageId = ref("대시보드");
  const dateFormat = "yyyy-MM-dd";
  const loading = ref(false);

  // 필터링 관련
  const dateRange = ref([]);
  const selectedPeriod = ref('month');

  // 차트 관련
  const salesChart = ref(null);
  const ordersChart = ref(null);
  const settlementChart = ref(null);
  const categoryChart = ref(null);
  const salesChartType = ref('line');
  const salesChartKey = ref(0);
  const ordersChartKey = ref(0);
  const settlementChartKey = ref(0);
  const categoryChartKey = ref(0);

  // 메트릭 데이터
  const metrics = ref({
    totalSales: 125000000,
    salesChange: 12.5,
    totalOrders: 1250,
    ordersChange: 8.3,
    settlementRate: 95.2,
    settlementChange: 2.1,
    avgOrderValue: 100000,
    avgOrderChange: 5.7
  });

  // 테이블 관련
  const tableHeaders = ref([
    { title: '주문번호', key: 'orderNo', sortable: true },
    { title: '인플루언서', key: 'influencer', sortable: true },
    { title: '상품명', key: 'productName', sortable: false },
    { title: '주문금액', key: 'amount', sortable: true },
    { title: '주문일', key: 'orderDate', sortable: true },
    { title: '상태', key: 'status', sortable: true },
    { title: '액션', key: 'actions', sortable: false }
  ]);

  const recentOrders = ref([
    {
      orderNo: 'ORD-2025001',
      influencer: '김인플루',
      productName: '프리미엄 화장품 세트',
      amount: 150000,
      orderDate: '2025-01-15',
      status: 'completed'
    },
    {
      orderNo: 'ORD-2025002',
      influencer: '박유튜버',
      productName: '건강기능식품',
      amount: 85000,
      orderDate: '2025-01-14',
      status: 'shipping'
    },
    {
      orderNo: 'ORD-2025003',
      influencer: '이인스타',
      productName: '패션 액세서리',
      amount: 65000,
      orderDate: '2025-01-13',
      status: 'pending'
    }
  ]);

  /************************************************************************
|    함수(METHODS)
************************************************************************/

  // 통화 포맷팅
  const formatCurrency = (amount) => {
    return new Intl.NumberFormat('ko-KR', {
      style: 'currency',
      currency: 'KRW'
    }).format(amount);
  };

  // 날짜 범위 변경
  const onDateRangeChange = (range) => {
    selectedPeriod.value = 'custom';
    fetchDashboardData();
  };

  // 빠른 기간 선택
  const setQuickPeriod = (period) => {
    selectedPeriod.value = period;
    const today = new Date();
    
    switch (period) {
      case 'today':
        dateRange.value = [today, today];
        break;
      case 'week':
        const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
        dateRange.value = [weekAgo, today];
        break;
      case 'month':
        const monthAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);
        dateRange.value = [monthAgo, today];
        break;
      case 'quarter':
        const quarterAgo = new Date(today.getTime() - 90 * 24 * 60 * 60 * 1000);
        dateRange.value = [quarterAgo, today];
        break;
    }
    fetchDashboardData();
  };

  // 상태 색상
  const getStatusColor = (status) => {
    switch (status) {
      case 'completed': return 'success';
      case 'shipping': return 'info';
      case 'pending': return 'warning';
      case 'cancelled': return 'error';
      default: return 'grey';
    }
  };

  // 상태 텍스트
  const getStatusText = (status) => {
    switch (status) {
      case 'completed': return '완료';
      case 'shipping': return '배송중';
      case 'pending': return '대기';
      case 'cancelled': return '취소';
      default: return '알 수 없음';
    }
  };

  // 주문 상세 보기
  const viewOrder = (order) => {
    router.push({
      path: `/view/order/detail/${order.orderNo}`
    });
  };

  // 엑셀 다운로드
  const exportData = () => {
    // 엑셀 다운로드 로직
    $toast.success('데이터 다운로드를 시작합니다.');
  };

  // 차트 생성
  const createSalesChart = () => {
    if (!salesChart.value) return;
    
    const ctx = salesChart.value.getContext('2d');
    new ChartJS(ctx, {
      type: salesChartType.value,
      data: {
        labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
        datasets: [{
          label: '매출',
          data: [12000000, 15000000, 13000000, 18000000, 16000000, 20000000],
          borderColor: '#3f51b5',
          backgroundColor: salesChartType.value === 'bar' ? '#3f51b5' : 'rgba(63, 81, 181, 0.1)',
          borderWidth: 2,
          fill: salesChartType.value === 'line'
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            ticks: {
              callback: function(value) {
                return formatCurrency(value);
              }
            }
          }
        }
      }
    });
  };

  const createOrdersChart = () => {
    if (!ordersChart.value) return;
    
    const ctx = ordersChart.value.getContext('2d');
    new ChartJS(ctx, {
      type: 'doughnut',
      data: {
        labels: ['신규 주문', '처리중', '배송중', '완료'],
        datasets: [{
          data: [45, 25, 20, 10],
          backgroundColor: ['#4caf50', '#ff9800', '#2196f3', '#9c27b0'],
          borderWidth: 0
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'bottom'
          }
        }
      }
    });
  };

  const createSettlementChart = () => {
    if (!settlementChart.value) return;
    
    const ctx = settlementChart.value.getContext('2d');
    new ChartJS(ctx, {
      type: 'bar',
      data: {
        labels: ['1주', '2주', '3주', '4주'],
        datasets: [{
          label: '정산 완료',
          data: [95, 92, 98, 94],
          backgroundColor: '#4caf50'
        }, {
          label: '정산 대기',
          data: [5, 8, 2, 6],
          backgroundColor: '#ff9800'
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          x: {
            stacked: true
          },
          y: {
            stacked: true,
            beginAtZero: true,
            max: 100,
            ticks: {
              callback: function(value) {
                return value + '%';
              }
            }
          }
        }
      }
    });
  };

  const createCategoryChart = () => {
    if (!categoryChart.value) return;
    
    const ctx = categoryChart.value.getContext('2d');
    new ChartJS(ctx, {
      type: 'pie',
      data: {
        labels: ['화장품', '패션', '건강식품', '전자제품', '기타'],
        datasets: [{
          data: [35, 25, 20, 15, 5],
          backgroundColor: ['#e91e63', '#9c27b0', '#3f51b5', '#009688', '#ff5722']
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'right'
          }
        }
      }
    });
  };

  // 대시보드 데이터 가져오기
  const fetchDashboardData = async () => {
    loading.value = true;
    
    try {
      const _req = {
        compId: useAuthStore().getCompanyId,
        startDate: dateRange.value[0],
        endDate: dateRange.value[1]
      };

      await useAxios()
        .post("/dashboard/metrics", _req)
        .then((res) => {
          if (res.data) {
            metrics.value = res.data;
          }
        });
    } catch (error) {
      $toast.error('대시보드 데이터를 불러오는데 실패했습니다.');
    } finally {
      loading.value = false;
    }
  };

  // 차트 타입 변경 감지
  watch(salesChartType, () => {
    salesChartKey.value++;
    nextTick(() => {
      createSalesChart();
    });
  });

  /************************************************************************
|    라이프사이클
************************************************************************/

  onMounted(() => {
    // 기본 1개월 기간 설정
    setQuickPeriod('month');
    
    nextTick(() => {
      createSalesChart();
      createOrdersChart();
      createSettlementChart();
      createCategoryChart();
    });
  });
</script>

<style scoped>
/* 대시보드 필터 스타일 */
.dashboard--filters {
  margin: 20px 0;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.filter--wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.date--range {
  min-width: 300px;
}

.quick--filters {
  display: flex;
  gap: 8px;
}

.quick--filters .v-btn {
  background: white;
  color: #666;
  border: 1px solid #ddd;
}

.quick--filters .v-btn.active {
  background: #3f51b5;
  color: white;
  border-color: #3f51b5;
}

/* KPI 카드 스타일 */
.dashboard--kpi {
  margin: 20px 0;
}

.kpi--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.kpi--card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid #e0e0e0;
}

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

.kpi--header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  margin: 0;
}

.kpi--header .icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon.sales {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.icon.orders {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.icon.settlement {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.icon.avg {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.kpi--value {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}

.kpi--change {
  font-size: 12px;
  font-weight: 500;
}

.kpi--change.positive {
  color: #4caf50;
}

.kpi--change.negative {
  color: #f44336;
}

/* 차트 스타일 */
.dashboard--charts {
  margin: 30px 0;
}

.chart--row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.chart--container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid #e0e0e0;
}

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

.chart--header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.chart--content {
  height: 300px;
  position: relative;
}

.chart--content canvas {
  max-height: 100%;
}

/* 테이블 스타일 */
.dashboard--table {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid #e0e0e0;
  margin: 20px 0;
}

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

.table--header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* 반응형 */
@media (max-width: 768px) {
  .filter--wrap {
    flex-direction: column;
    align-items: stretch;
  }
  
  .date--range {
    min-width: auto;
  }
  
  .quick--filters {
    justify-content: center;
  }
  
  .kpi--cards {
    grid-template-columns: 1fr;
  }
  
  .chart--row {
    grid-template-columns: 1fr;
  }
}
</style>