🎯 Creating Your First Dashboard #

Now that you have Admindek installed, let's create your first custom dashboard page. This tutorial will teach you the fundamentals of working with Admindek's templating system.

What You'll Build #

By the end of this tutorial, you'll have created a custom dashboard page with:

✅ Custom page title and breadcrumbs
✅ Revenue and user metrics cards
✅ Interactive sales chart
✅ Recent activity table
✅ Proper navigation integration

Understanding the Template System #

Admindek uses a template include system with the @@include() syntax:

@@include('../layouts/layout-vertical.html')
@@include('../layouts/breadcrumb.html', {'title': 'My Dashboard'})

This allows you to:

Reuse layout components
Pass dynamic variables
Maintain consistent structure

Step 1: Create Your Dashboard File #

Create a new file at src/html/dashboard/my-dashboard.html
Copy this starter template:

<!doctype html>
<html lang="en">
  <!-- [Head] start -->
  <head>
    @@include('../layouts/head-page-meta.html', {'title': 'My Custom Dashboard'})
    @@include('../layouts/head-css.html')
  </head>
  <!-- [Head] end -->
 
  <!-- [Body] Start -->
  <body @@bodySetup>
    @@include('../layouts/layout-vertical.html')
 
    <!-- [ Main Content ] start -->
    <div class="pc-container">
      <div class="pc-content">
        @@include('../layouts/breadcrumb.html', {
          'breadcrumb-item': 'Dashboard', 
          'breadcrumb-item-active': 'My Dashboard'
        })
        
        <!-- [ Main Content ] start -->
        <div class="row">
          <!-- We'll add content here -->
        </div>
        <!-- [ Main Content ] end -->
      </div>
    </div>
    <!-- [ Main Content ] end -->
 
    @@include('../layouts/footer-js.html')
  </body>
  <!-- [Body] end -->
</html>

Step 2: Add Metric Cards #

Add these metric cards inside the <div class="row">:

<!-- [ Metrics Cards ] start -->
<div class="col-md-6 col-xl-3">
  <div class="card">
    <div class="card-body">
      <div class="d-flex align-items-center">
        <div class="flex-grow-1">
          <h6 class="mb-2">Total Revenue</h6>
          <h3 class="mb-0 f-w-300">$125,000</h3>
          <p class="text-muted mb-0">
            <span class="text-success f-12 me-1">
              <i class="ph-duotone ph-trend-up me-1"></i>12.5%
            </span>
            from last month
          </p>
        </div>
        <div class="flex-shrink-0">
          <div class="avtar avtar-s bg-primary">
            <i class="ph-duotone ph-currency-dollar f-18"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
 
<div class="col-md-6 col-xl-3">
  <div class="card">
    <div class="card-body">
      <div class="d-flex align-items-center">
        <div class="flex-grow-1">
          <h6 class="mb-2">Active Users</h6>
          <h3 class="mb-0 f-w-300">8,549</h3>
          <p class="text-muted mb-0">
            <span class="text-success f-12 me-1">
              <i class="ph-duotone ph-trend-up me-1"></i>8.2%
            </span>
            from last week
          </p>
        </div>
        <div class="flex-shrink-0">
          <div class="avtar avtar-s bg-success">
            <i class="ph-duotone ph-users f-18"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
 
<div class="col-md-6 col-xl-3">
  <div class="card">
    <div class="card-body">
      <div class="d-flex align-items-center">
        <div class="flex-grow-1">
          <h6 class="mb-2">Orders</h6>
          <h3 class="mb-0 f-w-300">1,423</h3>
          <p class="text-muted mb-0">
            <span class="text-danger f-12 me-1">
              <i class="ph-duotone ph-trend-down me-1"></i>3.1%
            </span>
            from yesterday
          </p>
        </div>
        <div class="flex-shrink-0">
          <div class="avtar avtar-s bg-warning">
            <i class="ph-duotone ph-shopping-cart f-18"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
 
<div class="col-md-6 col-xl-3">
  <div class="card">
    <div class="card-body">
      <div class="d-flex align-items-center">
        <div class="flex-grow-1">
          <h6 class="mb-2">Conversion Rate</h6>
          <h3 class="mb-0 f-w-300">3.64%</h3>
          <p class="text-muted mb-0">
            <span class="text-success f-12 me-1">
              <i class="ph-duotone ph-trend-up me-1"></i>0.5%
            </span>
            from last month
          </p>
        </div>
        <div class="flex-shrink-0">
          <div class="avtar avtar-s bg-info">
            <i class="ph-duotone ph-chart-line f-18"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- [ Metrics Cards ] end -->

Step 3: Add a Sales Chart #

Add this chart section after the metric cards:

<!-- [ Sales Chart ] start -->
<div class="col-lg-8">
  <div class="card">
    <div class="card-header">
      <div class="d-flex align-items-center justify-content-between">
        <h5 class="mb-0">Sales Overview</h5>
        <div class="dropdown">
          <a class="avtar avtar-s btn-link-secondary dropdown-toggle arrow-none" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="ph-duotone ph-dots-three f-18"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-end">
            <a class="dropdown-item" href="#">Today</a>
            <a class="dropdown-item" href="#">Weekly</a>
            <a class="dropdown-item" href="#">Monthly</a>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <div id="my-dashboard-chart"></div>
    </div>
  </div>
</div>
<!-- [ Sales Chart ] end -->

Step 4: Add Recent Activity #

Add this activity section:

<!-- [ Recent Activity ] start -->
<div class="col-lg-4">
  <div class="card">
    <div class="card-header">
      <h5 class="mb-0">Recent Activity</h5>
    </div>
    <div class="card-body">
      <div class="d-flex align-items-center mb-3">
        <div class="flex-shrink-0">
          <div class="avtar avtar-s bg-light-primary">
            <i class="ph-duotone ph-user-plus f-16"></i>
          </div>
        </div>
        <div class="flex-grow-1 ms-3">
          <h6 class="mb-0 f-14">New user registered</h6>
          <p class="text-muted mb-0 f-12">2 minutes ago</p>
        </div>
      </div>
      
      <div class="d-flex align-items-center mb-3">
        <div class="flex-shrink-0">
          <div class="avtar avtar-s bg-light-success">
            <i class="ph-duotone ph-shopping-bag f-16"></i>
          </div>
        </div>
        <div class="flex-grow-1 ms-3">
          <h6 class="mb-0 f-14">Order completed</h6>
          <p class="text-muted mb-0 f-12">5 minutes ago</p>
        </div>
      </div>
      
      <div class="d-flex align-items-center mb-3">
        <div class="flex-shrink-0">
          <div class="avtar avtar-s bg-light-warning">
            <i class="ph-duotone ph-bell f-16"></i>
          </div>
        </div>
        <div class="flex-grow-1 ms-3">
          <h6 class="mb-0 f-14">New notification</h6>
          <p class="text-muted mb-0 f-12">8 minutes ago</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- [ Recent Activity ] end -->

Step 5: Add Chart JavaScript #

Create a JavaScript file at src/assets/js/dashboard/my-dashboard.js:

'use strict';
document.addEventListener('DOMContentLoaded', function () {
  // Sales Overview Chart (Chart.js via the shared AdmindekChart preset)
  AdmindekChart.create(
    '#my-dashboard-chart',
    {
      type: 'line',
      data: {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        datasets: [
          {
            label: 'Sales',
            data: [31, 40, 28, 51, 42, 109, 100],
            borderColor: '#4680ff',
            backgroundColor: AdmindekChart.gradient('#4680ff'), // fades to transparent
            fill: true
          },
          {
            label: 'Revenue',
            data: [11, 32, 45, 32, 34, 52, 41],
            borderColor: '#2ecc71',
            backgroundColor: AdmindekChart.gradient('#2ecc71'),
            fill: true
          }
        ]
      }
    },
    { height: 300 } // the container gets a fixed height; the canvas fills it
  );
});

AdmindekChart.create() adds a <canvas> inside #my-dashboard-chart. Fonts, grid lines, tooltips and the legend come from the template's theme preset, and the chart repaints itself when you switch dark mode, RTL or the preset colour in the customizer.

Step 6: Include the JavaScript #

Add these lines before the closing </body> tag in your HTML file. Order matters: Chart.js first, then the theme preset, then your page script.

<!-- Chart.js (MIT) + the Admindek chart theme -->
<script src="../assets/js/plugins/chart.umd.min.js"></script>
<script src="../assets/js/chart-theme.js"></script>
<!-- Custom Dashboard JS -->
<script src="../assets/js/dashboard/my-dashboard.js"></script>

Step 7: Build and Test #

Save all files
The development server will automatically rebuild
Visit your new dashboard: http://localhost:4173/dashboard/my-dashboard.html

To add your dashboard to the sidebar navigation:

Open src/html/layouts/menu-list.html
Find the Dashboard section
Add your menu item:

<li class="pc-item">
  <a href="../dashboard/my-dashboard.html" class="pc-link">
    <span class="pc-micon"><i class="ph-duotone ph-chart-pie"></i></span>
    <span class="pc-mtext">My Dashboard</span>
  </a>
</li>

Understanding What You Built #

Template Structure #

Head section: Page metadata and CSS includes
Body setup: Theme configuration via @@bodySetup
Layout include: Main sidebar and header structure
Breadcrumbs: Dynamic navigation path
Content area: Your custom dashboard content

Component Patterns #

Metric cards: Consistent structure for KPI display
Chart containers: A plain <div id="..."> that AdmindekChart.create() fills with a canvas
Activity feed: Timeline-style information display

JavaScript Integration #

Document ready: Ensures DOM is loaded before execution
Chart.js: MIT-licensed chart library, themed by assets/js/chart-theme.js
Responsive design: Charts adapt to container width (the height comes from the height option)

Next Steps #

🎉 Congratulations! You've created your first custom dashboard.

What's next?

Customize the Theme - Apply your branding
Learn Component Patterns - Build more complex widgets
Chart Integration - Add different visualizations

Common Customizations #

Change Colors #

// Per dataset
borderColor: '#your-primary-color',
backgroundColor: AdmindekChart.gradient('#your-primary-color'),
 
// Or follow the active preset colour from the customizer
borderColor: () => AdmindekChart.color('primary'),
backgroundColor: AdmindekChart.gradient('primary'),

Add More Metrics #

Copy the metric card pattern and update:

Icon class
Background color class
Values and labels

Modify Chart Type #

The example is a line chart with fill: true (an area chart). Change type: 'line' to:

'bar' for bar charts (drop fill and use a solid backgroundColor)
'doughnut' or 'pie' for doughnut/pie charts (one dataset, one colour per slice)

See the Chart Integration guide for more examples.

Ready to make it yours? Continue with Customizing Theme 👉

PreviousInstallation NextCustomizing Theme