append variables 
  -
    var tableItems = [
      {
        campaigns: 'Black Friday Sale',
        cost: 1304.28,
        revenue: 543217.65
      },
      {
        campaigns: 'Christmas Bundle',
        cost: 9876.56,
        revenue: 3904.00,
      },
      {
        campaigns: 'Halloween Party Started 🎃 👻',
        cost: 3267.84,
        revenue: 7654.80,
      },
      {
        campaigns: 'Grab your reward',
        cost: 87545.28,
        revenue: 68654.35
      },
      {
        campaigns: 'Black Friday Sale',
        cost: 1304.28,
        revenue: 3904.00,
      },
      {
        campaigns: 'Boxing Day offer',
        cost: 1200.5,
        revenue: 5004.87,
      },
    ]

mixin PerfomanceTableItem(row)
  tr
    td.text-truncate=row.campaigns
    td.text-truncate.text-end=`$${row.cost}`
    td.text-truncate.text-end=`$${row.revenue}`

mixin PerfomanceTable      
  .table-responsive.scrollbar
    table.table.fs-10.mb-0.overflow-hidden
      thead.bg-100
        tr
          th.text-800.text-nowrap Top Campaigns
          th.text-800.text-nowrap.text-end Cost
          th.text-800.text-nowrap.text-end Revenue  from Ads
      tbody
        each item in tableItems
          +PerfomanceTableItem(item)

mixin CampaignsPerformance
  .card&attributes(attributes).h-100
    .card-header.d-flex.flex-between-center.bg-body-tertiary.py-2
      h6.mb-0 Ad campaigns perfomance
      +DashboardDropdown('dropdown-campaign-perfomance')
    .card-body.pb-0
      .row
        .col-6
          +MiniChart({
            title:'Revenue',
            value:'$10.87k'
          })
          .w-100(style='min-height:50px;' data-echart-responsive="true" data-echarts!={ 
            series: [
              { 
                type: 'line',
                data: [101, 165, 140, 162, 121, 190, 139],
                symbol: 'none',
                color:'#f5803e',
                areaStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color:'rgba(245, 128, 62, .25)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(245, 128, 62, 0)',
                      },
                    ],
                  },
                },
              }
            ],
            xAxis:{
              boundaryGap: false
            },
            grid: { right: "20px", left: "0", bottom: "0", top: "20px" },
          })
        .col-6
          +MiniChart({
            title:'Clicks',
            value:'3.8k'
          })
          .w-100(style='min-height:50px;' data-echart-responsive="true" data-echarts!={ 
            series: [
              { 
                type: 'line',
                data: [119, 199, 195, 101, 155, 131, 180],
                symbol: 'none',
              }
            ],
            xAxis:{
              boundaryGap: false
            },
            grid: { right: "20px", left: "0", bottom: "0", top: "20px" },
          })
      .mx-nx1
        +PerfomanceTable
    .card-footer.bg-body-tertiary.py-2
      .row.flex-between-center
        .col-auto
          select.form-select.form-select-sm.audience-select-menu
            option(value='week' selected) Last 7 days
            option(value='month') Last month
            option(value='year') Last Year
        .col-auto
          a.btn.btn-link.btn-sm.px-0.fw-medium(href='#!') Ad campaigns
            span.fas.fa-chevron-right.ms-1.fs-11