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(animatedMetrics.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">{{ Math.round(animatedMetrics.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">{{ animatedMetrics.settlementRate.toFixed(1) }}%</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(animatedMetrics.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,
    LineController,
    BarController,
    DoughnutController,
    PieController,
  } from 'chart.js';
  
  ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    BarElement,
    Title,
    Tooltip,
    Legend,
    ArcElement,
    LineController,
    BarController,
    DoughnutController,
    PieController
  );

  /************************************************************************
|    레이아웃
************************************************************************/
  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);

  // 차트 인스턴스 저장
  let salesChartInstance = null;
  let ordersChartInstance = null;
  let settlementChartInstance = null;
  let categoryChartInstance = null;

  // 메트릭 데이터 (초기값은 0으로 설정)
  const metrics = ref({
    totalSales: 0,
    salesChange: 0,
    totalOrders: 0,
    ordersChange: 0,
    settlementRate: 0,
    settlementChange: 0,
    avgOrderValue: 0,
    avgOrderChange: 0
  });

  // 애니메이션용 메트릭 데이터
  const animatedMetrics = ref({
    totalSales: 0,
    totalOrders: 0,
    settlementRate: 0,
    avgOrderValue: 0
  });

  // 테이블 관련
  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 animateCountUp = (target, property, duration = 2000) => {
    const startValue = animatedMetrics.value[property];
    const endValue = target;
    const startTime = Date.now();
    
    const updateCount = () => {
      const now = Date.now();
      const elapsed = now - startTime;
      const progress = Math.min(elapsed / duration, 1);
      
      // easeOutQuart 이징 함수 사용
      const easedProgress = 1 - Math.pow(1 - progress, 4);
      
      const currentValue = startValue + (endValue - startValue) * easedProgress;
      animatedMetrics.value[property] = currentValue;
      
      if (progress < 1) {
        requestAnimationFrame(updateCount);
      }
    };
    
    requestAnimationFrame(updateCount);
  };

  // 모든 메트릭 애니메이션 시작
  const startMetricsAnimation = () => {
    animateCountUp(metrics.value.totalSales, 'totalSales', 1500);      // 금액: 1.5초로 단축
    animateCountUp(metrics.value.totalOrders, 'totalOrders', 2000);
    animateCountUp(metrics.value.settlementRate, 'settlementRate', 2200);
    animateCountUp(metrics.value.avgOrderValue, 'avgOrderValue', 1300); // 평균 주문액: 1.3초로 단축
  };

  // 날짜 범위 변경
  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) {
      console.log('salesChart ref가 없습니다');
      return;
    }
    
    try {
      // 기존 차트 인스턴스 삭제
      if (salesChartInstance) {
        salesChartInstance.destroy();
        salesChartInstance = null;
      }
      
      // Canvas 컨텍스트 직접 가져오기 (재생성 없이)
      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];
      
      salesChartInstance = 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);
                }
              }
            }
          }
        }
      });
    } catch (error) {
      console.error('Sales 차트 생성 오류:', error);
    }
  };

  const createOrdersChart = () => {
    if (!ordersChart.value) {
      console.log('ordersChart ref가 없습니다');
      return;
    }
    
    try {
      // 기존 차트 인스턴스 삭제
      if (ordersChartInstance) {
        ordersChartInstance.destroy();
        ordersChartInstance = null;
      }
      
      // Canvas 컨텍스트 직접 가져오기 (재생성 없이)
      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);
      
      ordersChartInstance = 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'
            }
          }
        }
      });
    } catch (error) {
      console.error('Orders 차트 생성 오류:', error);
    }
  };

  const createSettlementChart = () => {
    if (!settlementChart.value) {
      console.log('settlementChart ref가 없습니다');
      return;
    }
    
    try {
      // 기존 차트 인스턴스 삭제
      if (settlementChartInstance) {
        settlementChartInstance.destroy();
        settlementChartInstance = null;
      }
      
      // Canvas 컨텍스트 직접 가져오기 (재생성 없이)
      const ctx = settlementChart.value.getContext('2d');
      const settlementRate = metrics.value.settlementRate || 0;
      const pendingRate = 100 - settlementRate;
      
      settlementChartInstance = 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 + '%';
                }
              }
            }
          }
        }
      });
    } catch (error) {
      console.error('Settlement 차트 생성 오류:', error);
    }
  };

  const createCategoryChart = () => {
    if (!categoryChart.value) {
      console.log('categoryChart ref가 없습니다');
      return;
    }
    
    try {
      // 기존 차트 인스턴스 삭제
      if (categoryChartInstance) {
        categoryChartInstance.destroy();
        categoryChartInstance = null;
      }
      
      // Canvas 컨텍스트 직접 가져오기 (재생성 없이)
      const ctx = categoryChart.value.getContext('2d');
      categoryChartInstance = new ChartJS(ctx, {
        type: 'pie',
        data: {
          labels: ['전체 상품'],
          datasets: [{
            data: [100],
            backgroundColor: ['#3f51b5']
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'right'
            }
          }
        }
      });
    } catch (error) {
      console.error('Category 차트 생성 오류:', error);
    }
  };

  // 정산 데이터 가져오기
  const fetchSettlementData = async () => {
    try {
      const userInfo = useAuthStore().getSnsTempData?.user || JSON.parse(localStorage.getItem('authStore') || '{}')?.auth;
      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().getSnsTempData?.user || JSON.parse(localStorage.getItem('authStore') || '{}')?.auth;
      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(() => {
        startMetricsAnimation();
        
        // 차트 키를 업데이트하여 재렌더링 유도
        salesChartKey.value++;
        ordersChartKey.value++;
        settlementChartKey.value++;
        categoryChartKey.value++;
        
        // 차트 생성을 지연시켜 DOM이 완전히 렌더링된 후 실행
        setTimeout(() => {
          createSalesChart();
          createOrdersChart();
          createSettlementChart();
          createCategoryChart();
        }, 200);
      });
    } catch (error) {
      $toast.error('대시보드 데이터를 불러오는데 실패했습니다.');
    } finally {
      loading.value = false;
    }
  };

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

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

  onMounted(() => {
    // 기본 1개월 기간 설정
    setQuickPeriod('month');
    
    // 대시보드 데이터 로드 (차트는 데이터 로드 후에 생성됨)
    fetchDashboardData();
  });
</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>