​

    <div class="container my-4">

      <p>

        <strong>Admin dashboard templates enable you to quickly create admin panels. Copy & paste examples straight into

          your code.</strong>

      </p>

​

      <p>Click the red <button href="https://mdbootstrap.com/docs/standard/templates/admin-dashboard/"

          class="btn btn-danger btn-sm">DOCS</button>

        button in the upper left corner, in order to find more examples of Admin Dashboards, or go directly to:</p>

​

      <ul>

        <li><a href="https://mdbootstrap.com/docs/standard/design-blocks/admin/">Premium Admin Design Blocks</a></li>

        <li><a href="https://mdbootstrap.com/docs/standard/templates/admin-dashboard/">Premium Admin Templates</a></li>

      </ul>

​

      <p><strong>You will find the link to FREE ADMIN TEMPLATE DOWNLOAD at the bottom of this snippet.</strong></p>

​

      <hr />

​

      <h5 class="font-weight-bold mt-5">Basic example of Admin eCommerce Section for Bootstrap 5 </h5>

      <p>Admin Design Blocks & Templates for Bootstrap 5 are included in the <a

          href="https://mdbootstrap.com/docs/standard/pro/">MDB

          PRO UI Kit</a> - use code <code>admin</code> to get <strong>30% OFF</strong> and start using the most

        efficient Admin components for bootstrap.</p>

      <div class="border p-5 mb-5">

        <!-- Copy this code to have a working example -->

        <!--Section: Product & date-->

        <section>

          <div class="row">

            <div class="col-md-4 mb-4">

              <div class="card">

                <div class="card-body">

                  <select class="select">

                    <option value="1">Product 1</option>

                    <option value="2">Product 2</option>

                    <option value="3">Product 3</option>

                    <option value="4">Product 4</option>

                    <option value="5">Product 5</option>

                  </select>

                  <label class="form-label select-label">Product</label>

                </div>

              </div>

            </div>

​

            <div class="col-md-8 mb-4">

              <div class="card">

                <div class="card-body">

                  <div class="row">

                    <div class="col-md-6 mb-4 mb-md-0">

                      <select class="select">

                        <option value="1">Today</option>

                        <option value="2">Yesterday</option>

                        <option value="3" selected>Last 7 days</option>

                        <option value="4">Last 28 days</option>

                        <option value="5">Last 90 days</option>

                      </select>

                      <label class="form-label select-label">Date</label>

                    </div>

​

                    <div class="col-md-6">

                      <div class="form-outline datepicker">

                        <input type="text" class="form-control" id="exampleDatepicker1" value="Custom date"

                          data-toggle="datepicker" />

                        <label for="exampleDatepicker1" class="form-label">Date</label>

                      </div>

                    </div>

                  </div>

                </div>

              </div>

            </div>

          </div>

        </section>

        <!--Section: Product & date-->

​

        <!--Section: Sales Performance KPIs-->

        <section class="mb-4">

          <div class="card">

            <div class="card-header text-center py-3 bg-light border-0">

              <strong>Sales Performance KPIs</strong>

            </div>

            <div class="card-body">

              <div class="table-responsive">

                <table class="table table-hover text-nowrap">

                  <thead>

                    <tr>

                      <th scope="col"></th>

                      <th scope="col">Product Detail Views</th>

                      <th scope="col">Unique Purchases</th>

                      <th scope="col">Quantity</th>

                      <th scope="col">Product Revenue</th>

                      <th scope="col">Avg. Price</th>

                    </tr>

                  </thead>

                  <tbody>

                    <tr>

                      <th scope="row">Value</th>

                      <td>18,492</td>

                      <td>228</td>

                      <td>350</td>

                      <td>$4,787.64</td>

                      <td>$13.68</td>

                    </tr>

                    <tr>

                      <th scope="row">Percentage change</th>

                      <td>

                        <span class="text-danger">

                          <i class="fas fa-caret-down me-1"></i><span>-48.8%%</span>

                        </span>

                      </td>

                      <td>

                        <span class="text-success">

                          <i class="fas fa-caret-up me-1"></i><span>14.0%</span>

                        </span>

                      </td>

                      <td>

                        <span class="text-success">

                          <i class="fas fa-caret-up me-1"></i><span>46.4%</span>

                        </span>

                      </td>

                      <td>

                        <span class="text-success">

                          <i class="fas fa-caret-up me-1"></i><span>29.6%</span>

                        </span>

                      </td>

                      <td>

                        <span class="text-danger">

                          <i class="fas fa-caret-down me-1"></i><span>-11.5%</span>

                        </span>

                      </td>

                    </tr>

                    <tr>

                      <th scope="row">Absolute change</th>

                      <td>

                        <span class="text-danger">

                          <i class="fas fa-caret-down me-1"></i><span>-17,654</span>

                        </span>

                      </td>

                      <td>

                        <span class="text-success">

                          <i class="fas fa-caret-up me-1"></i><span>28</span>

                        </span>

                      </td>

                      <td>

                        <span class="text-success">

                          <i class="fas fa-caret-up me-1"></i><span>111</span>

                        </span>

                      </td>

                      <td>

                        <span class="text-success">

                          <i class="fas fa-caret-up me-1"></i><span>$1,092.72</span>

                        </span>

                      </td>

                      <td>

                        <span class="text-danger">

                          <i class="fas fa-caret-down me-1"></i><span>$-1.78</span>

                        </span>

                      </td>

                    </tr>

                  </tbody>

                </table>

              </div>

            </div>

          </div>

        </section>

        <!--Section: Sales Performance KPIs-->

​

        <!--Section: Shopping Funnel & Product revenue-->

        <section class="mb-4">

          <div class="row">

            <div class="col-md-5 mb-4">

              <div class="card">

                <div class="card-header text-center border-0 bg-light py-3">

                  <strong>Shopping Funnel</strong>

                </div>

                <div class="card-body">

                  <div id="chart-shopping-funnel"></div>

                </div>

              </div>

            </div>

​

            <div class="col-md-7 mb-4">

              <div class="card">

                <div class="card-body">

                  <div id="chart-product-revenue"></div>

                </div>

              </div>

            </div>

          </div>

        </section>

        <!--Section: Shopping Funnel & Product revenue-->

        <!--/ Copy this code to have a working example -->

      </div>

​

      <h5 class="font-weight-bold mt-5">Free templates</h5>

      <p>We have released the Admin Templates Pack for the previous Bootstrap 4 version for free.</p>

      <p>We also invite you to checkt out the Free Bootstrap 5 templates.</p>

      <a href="https://mdbootstrap.com/freebies/" class="btn btn-danger btn-block"><i

          class="fas fa-download me-2"></i>Free Bootstrap 5 templates - no registration required</a>

      <a href="https://mdbootstrap.com/freebies/jquery/admin-dashboard/" class="btn btn-info btn-block"><i

          class="fas fa-download me-2"></i>Free Admin Template for Bootstrap 4 - registration required</a>

​

    </div>

@media (min-width: 1400px) {

  main,

  header,

  #main-navbar {

    padding-left: 240px;

  }

}

​

/* To remove */

.table > thead > tr > th {

  border-bottom-width: 2px;

}

.table > :not(:last-child) > :last-child > * {

  border-bottom-color: inherit;

}

​

<!-- Funnel chart -->

<script>

  const optionsFunnelChart = {

    dataLabelsPlugin: true,

    options: {

      scales: {

        xAxes: [

          {

            gridLines: {

              offsetGridLines: true,

            },

          },

        ],

      },

      legend: {

        display: false,

      },

      plugins: {

        datalabels: {

          formatter: (value, ctx) => {

            let sum = 0;

            let dataArr = dataBarHorizontal.data.datasets[0].data;

            dataArr.map((data) => {

              sum += data;

            });

            let percentage = ((value * 100) / sum).toFixed(2) + "%";

            return percentage;

          },

          color: "#4f4f4f",

          labels: {

            title: {

              font: {

                size: "13",

              },

              anchor: "end",

              align: "right",

            },

          },

        },

      },

    },

  };

​

  // Chart

  const dataBarHorizontal = {

    type: "horizontalBar",

    data: {

      labels: ["Product views", "Checkout", "Purchases"],

      datasets: [

        {

          data: [2112, 343, 45],

          barPercentage: 1.24,

        },

      ],

    },

  };

​

  new mdb.Chart(

    document.getElementById("chart-shopping-funnel"),

    dataBarHorizontal,

    optionsFunnelChart

  );

</script>

​

<!-- Chart product revenue -->

<script>

  const optionsRevenueChart = {

    options: {

      scales: {

        yAxes: [

          {

            display: true,

            position: "left",

            id: "y-axis-1",

            ticks: {

              beginAtZero: true,

              callback: function (value, index, values) {

                return "$" + value;

              },

            },

          },

          {

            display: true,

            position: "right",

            id: "y-axis-2",

            gridLines: {

              drawOnChartArea: false,

            },

            ticks: {

              beginAtZero: true,

            },

          },

        ],

      },

    },

  };

​

  const dataProductRevenueChart = {

    type: "bar",

    data: {

      labels: [

        "Monday",

        "Tuesday",

        "Wednesday",

        "Thursday",

        "Friday",

        "Saturday",

        "Sunday ",

      ],

      datasets: [

        {

          label: "Product revenue $",

          yAxisID: "y-axis-1",

          data: [211, 234, 254, 342, 236, 198, 98],

          order: 2,

        },

        {

          label: "Unique purchases",

          yAxisID: "y-axis-2",

          data: [52, 42, 69, 60, 45, 23, 89],

          type: "line",

          order: 1,

          backgroundColor: "rgba(66, 133, 244, 0.0)",

          borderColor: "#94DFD7",

          borderWidth: 2,

          pointBorderColor: "#94DFD7",

          pointBackgroundColor: "#94DFD7",

          lineTension: 0.0,

        },

      ],

    },

  };

​

  new mdb.Chart(

    document.getElementById("chart-product-revenue"),

    dataProductRevenueChart,

    optionsRevenueChart

  );

</script>

​

​