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.deliveryCompany="{ item }">
            {{ item.deliveryInfo?.company || '-' }}
          </template>
          <template v-slot:item.trackingNumber="{ item }">
            {{ item.deliveryInfo?.number || '-' }}
          </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: 'deliveryCompany', sortable: false },
    { title: '송장번호', key: 'trackingNumber', sortable: false },
    { title: '주문일', key: 'orderDate', sortable: true },
    { title: '상태', key: 'status', sortable: true },
    { title: '액션', key: 'actions', sortable: false }
  ]);

  const recentOrders = ref([]);

  /************************************************************************
|    함수(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 'delivered': return 'primary';
      case 'shipping': return 'info';
      case 'pending': return 'warning';
      case 'cancelled': return 'error';
      default: return 'grey';
    }
  };

  // 상태 텍스트
  const getStatusText = (status) => {
    switch (status) {
      case 'completed': return '정산완료';
      case 'delivered': 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');
    // 실제 데이터가 있으면 사용, 없으면 빈 차트
    const salesData = metrics.value.totalSales > 0 ? 
      [0, 0, 0, 0, 0, metrics.value.totalSales] : 
      [0, 0, 0, 0, 0, 0];
    
    new ChartJS(ctx, {
      type: salesChartType.value,
      data: {
        labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
        datasets: [{
          label: '매출',
          data: salesData,
          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');
    // 실제 주문 데이터 계산
    const totalOrders = metrics.value.totalOrders || 1;
    const completedRate = metrics.value.settlementRate || 0;
    const deliveredRate = Math.max(0, completedRate - 10); // 임시 계산
    const shippingRate = Math.max(0, 100 - completedRate - deliveredRate - 10);
    const pendingRate = Math.max(0, 100 - completedRate - deliveredRate - shippingRate);
    
    new ChartJS(ctx, {
      type: 'doughnut',
      data: {
        labels: ['신규 주문', '배송중', '배송완료', '정산완료'],
        datasets: [{
          data: [pendingRate, shippingRate, deliveredRate, completedRate],
          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');
    const settlementRate = metrics.value.settlementRate || 0;
    const pendingRate = 100 - settlementRate;
    
    new ChartJS(ctx, {
      type: 'bar',
      data: {
        labels: ['1주', '2주', '3주', '4주'],
        datasets: [{
          label: '정산 완료',
          data: [settlementRate, settlementRate, settlementRate, settlementRate],
          backgroundColor: '#4caf50'
        }, {
          label: '정산 대기',
          data: [pendingRate, pendingRate, pendingRate, pendingRate],
          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');
    // 실제 데이터가 없으므로 현재는 균등 분배로 표시
    const totalSales = metrics.value.totalSales || 1;
    new ChartJS(ctx, {
      type: 'pie',
      data: {
        labels: ['전체 상품'],
        datasets: [{
          data: [100],
          backgroundColor: ['#3f51b5']
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'right'
          }
        }
      }
    });
  };

  // 정산 데이터 가져오기
  const fetchSettlementData = async () => {
    try {
      const userInfo = useAuthStore().getUser;
      const _req = {
        MEMBER_TYPE: 'VENDOR',
        COMPANY_NUMBER: userInfo?.COMPANY_NUMBER
      };

      // 전체 정산 데이터 가져오기
      const allSettlementResponse = await useAxios().post("/deli/settlement", _req);
      const allSettlements = allSettlementResponse.data || [];

      // 정산완료된 데이터만 가져오기
      const completedSettlementResponse = await useAxios().post("/deli/settlement", {
        ..._req,
        SETTLEMENT_STATUS: 'COMPLETED'
      });
      const completedSettlements = completedSettlementResponse.data || [];

      // 정산 메트릭 계산
      const totalOrders = allSettlements.length;
      const completedOrders = completedSettlements.length;
      const settlementRate = totalOrders > 0 ? ((completedOrders / totalOrders) * 100).toFixed(1) : 0;
      
      const totalSales = completedSettlements.reduce((sum, item) => sum + (item.TOTAL || 0), 0);
      const avgOrderValue = totalOrders > 0 ? (totalSales / totalOrders) : 0;

      // 메트릭 업데이트 (변화율은 현재 데이터만으로는 계산 불가하므로 0으로 설정)
      metrics.value = {
        totalSales: totalSales,
        totalOrders: totalOrders,
        settlementRate: parseFloat(settlementRate),
        avgOrderValue: avgOrderValue,
        salesChange: 0,
        ordersChange: 0,
        settlementChange: 0,
        avgOrderChange: 0
      };

    } catch (error) {
      console.error('정산 데이터 조회 실패:', error);
    }
  };

  // 최근 주문 데이터 가져오기
  const fetchRecentOrders = async () => {
    try {
      const userInfo = useAuthStore().getUser;
      const _req = {
        MEMBER_TYPE: 'VENDOR',
        COMPANY_NUMBER: userInfo?.COMPANY_NUMBER
      };

      // 배송중 데이터
      const shippingResponse = await useAxios().post("/deli/shipping", _req);
      const shippingOrders = shippingResponse.data || [];

      // 배송완료 데이터
      const deliveredResponse = await useAxios().post("/deli/delivered", _req);
      const deliveredOrders = deliveredResponse.data || [];

      // 정산완료 데이터
      const settlementResponse = await useAxios().post("/deli/settlement", {
        ..._req,
        SETTLEMENT_STATUS: 'COMPLETED'
      });
      const settlementOrders = settlementResponse.data || [];

      // 모든 주문 데이터 통합 및 정렬
      const allOrders = [
        ...shippingOrders.map(order => ({ ...order, status: 'shipping' })),
        ...deliveredOrders.map(order => ({ ...order, status: 'delivered' })),
        ...settlementOrders.map(order => ({ ...order, status: 'completed' }))
      ];

      // 날짜순 정렬 (최신순)
      allOrders.sort((a, b) => {
        const dateA = new Date(a.DELIVERED_DATE || a.SHIPPING_DATE || a.REG_DATE || a.ORDER_DATE);
        const dateB = new Date(b.DELIVERED_DATE || b.SHIPPING_DATE || b.REG_DATE || b.ORDER_DATE);
        return dateB - dateA;
      });

      // 테이블 형식으로 변환 (최근 20개만)
      recentOrders.value = allOrders.slice(0, 20).map((order, index) => ({
        orderNo: `ORD-${order.SEQ || (Date.now() + index)}`,
        influencer: order.NICK_NAME || '알 수 없음',
        productName: order.ITEM_NAME || '상품명 없음',
        amount: order.TOTAL || 0,
        deliveryCompany: order.DELI_COMP || '-',
        trackingNumber: order.DELI_NUMB || '-',
        orderDate: $dayjs(order.ORDER_DATE || order.REG_DATE).format('YYYY-MM-DD'),
        status: order.status,
        deliveryInfo: {
          company: order.DELI_COMP,
          number: order.DELI_NUMB
        },
        originalData: order
      }));

    } catch (error) {
      console.error('최근 주문 데이터 조회 실패:', error);
      $toast.error('최근 주문 데이터를 불러오는데 실패했습니다.');
    }
  };

  // 대시보드 데이터 가져오기
  const fetchDashboardData = async () => {
    loading.value = true;
    
    try {
      await Promise.all([
        fetchSettlementData(),
        fetchRecentOrders()
      ]);
      
      // 데이터 로드 후 차트 업데이트
      nextTick(() => {
        createSalesChart();
        createOrdersChart();
        createSettlementChart();
        createCategoryChart();
      });
    } catch (error) {
      $toast.error('대시보드 데이터를 불러오는데 실패했습니다.');
    } finally {
      loading.value = false;
    }
  };

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

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

  onMounted(() => {
    // 기본 1개월 기간 설정
    setQuickPeriod('month');
    
    // 대시보드 데이터 로드
    fetchDashboardData();
    
    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>