📊 Dashboard Pages Reference #

Complete reference for all dashboard page templates included in Admindek.

Overview #

Admindek includes 10 dashboard variants designed for different use cases and industries. Each dashboard ships with its own widget set, chart configurations, and KPI cards — drop in the variant that matches your use case, then customize from there.

#	Dashboard	File	Use case
1	Analytics	`dashboard/index.html`	Default landing dashboard with traffic, revenue, geo
2	E-commerce	`dashboard/ecommerce.html`	Sales, orders, inventory, customer insights
3	CRM	`dashboard/crm.html`	Leads, deals, sales pipeline
4	Crypto	`dashboard/crypto.html`	Portfolio, candlestick charts, watchlists
5	Finance	`dashboard/finance.html`	Accounts, transactions, expense tracking
6	Project	`dashboard/project.html`	Tasks, milestones, resource allocation
7	SaaS	`dashboard/saas.html`	MRR, churn, LTV, subscription analytics
8	HR	`dashboard/hr.html`	Headcount, attendance, hiring pipeline
9	Marketing	`dashboard/marketing.html`	Campaign performance, channel attribution
10	Analytics (alt)	`dashboard/analytics.html`	Alternate analytics layout with secondary KPIs

Dashboard Variants #

1. Analytics Dashboard (`dashboard/index.html`) #

Primary Use Case: Website and application analytics, user behavior tracking.

Key Features:

✅ User Analytics - Active users, sessions, page views
✅ Revenue Tracking - Sales metrics, conversion rates
✅ Geographic Data - World map with user distribution
✅ Real-time Stats - Live visitor tracking
✅ Traffic Sources - Organic, social, direct traffic breakdown

Widgets Included:

Widget	Type	Description
Revenue Card	KPI Metric	Total revenue with trend indicator
Active Users	KPI Metric	Current active users count
Page Views	KPI Metric	Total page views with growth percentage
Bounce Rate	KPI Metric	Visitor bounce rate statistics
Traffic Sources	Donut Chart	Breakdown of traffic origins
User Growth	Area Chart	User acquisition over time
Geographic Distribution	World Map	Users by country/region
Recent Activity	Activity Feed	Latest user actions and events
Top Pages	Data Table	Most visited pages with metrics
Conversion Funnel	Funnel Chart	User journey conversion rates

Code Example:

<!-- Revenue Card Widget -->
<div class="col-md-6 col-xl-3">
  <div class="card bg-primary">
    <div class="card-body">
      <div class="d-flex align-items-center">
        <div class="flex-grow-1">
          <h6 class="mb-2 text-white">Total Revenue</h6>
          <h3 class="text-white mb-0 f-w-300">$847,290</h3>
          <p class="text-white mb-0 opacity-75">
            <span class="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-white bg-opacity-25">
            <i class="ph-duotone ph-currency-dollar f-18 text-white"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2. E-commerce Dashboard (`dashboard/ecommerce.html`) #

Primary Use Case: Online store management, sales tracking, inventory overview.

Key Features:

🛒 Sales Analytics - Revenue, orders, average order value
📦 Product Performance - Best sellers, category analysis
👥 Customer Insights - New vs returning customers
📈 Growth Metrics - Month-over-month comparisons
🎯 Conversion Tracking - Funnel analysis, cart abandonment

Widgets Included:

Widget	Type	Description
Total Sales	KPI Metric	Revenue with period comparison
Orders Count	KPI Metric	Number of orders placed
Average Order Value	KPI Metric	AOV with trend analysis
Customer Count	KPI Metric	Total customers registered
Sales Overview	Line Chart	Revenue trends over time
Top Products	Product Grid	Best-selling items with images
Customer Distribution	Pie Chart	New vs returning customers
Recent Orders	Data Table	Latest orders with status
Sales by Category	Bar Chart	Product category performance
Payment Methods	Donut Chart	Payment method distribution

Specialized Components:

<!-- Product Performance Widget -->
<div class="card">
  <div class="card-header">
    <h5 class="mb-0">Top Products</h5>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-sm-6 col-lg-4 mb-3">
        <div class="d-flex align-items-center">
          <div class="flex-shrink-0">
            <img src="../assets/images/application/img-prod-1.jpg" 
                 alt="Product" class="img-fluid wid-40 rounded">
          </div>
          <div class="flex-grow-1 ms-3">
            <h6 class="mb-0">Wireless Headphones</h6>
            <p class="text-muted mb-0 f-12">Electronics</p>
            <div class="d-flex align-items-center">
              <span class="text-success f-12 me-2">+15%</span>
              <span class="f-12">$2,890</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

3. CRM Dashboard (`dashboard/crm.html`) #

Primary Use Case: Customer relationship management, sales pipeline, lead tracking.

Key Features:

🤝 Lead Management - Pipeline visualization, conversion rates
📞 Sales Activity - Calls, meetings, follow-ups
👤 Customer Profiles - Contact management, interaction history
📊 Performance Metrics - Sales targets, team performance
📅 Task Management - Upcoming activities, deadlines

Widgets Included:

Widget	Type	Description
Total Leads	KPI Metric	Number of leads in pipeline
Conversion Rate	KPI Metric	Lead to customer conversion
Deal Value	KPI Metric	Total value of active deals
Activities Today	KPI Metric	Scheduled activities count
Sales Pipeline	Funnel Chart	Deal stages visualization
Lead Sources	Bar Chart	Where leads are coming from
Team Performance	Comparison Chart	Individual sales metrics
Recent Activities	Timeline	Latest customer interactions
Upcoming Tasks	Task List	Scheduled activities
Customer Distribution	Map	Customers by geographic region

4. Crypto Dashboard (`dashboard/crypto.html`) #

Primary Use Case: Cryptocurrency portfolio tracking, market analysis.

Key Features:

💰 Portfolio Value - Total holdings, profit/loss
📈 Market Data - Real-time prices, market cap
💱 Trading Activity - Buy/sell orders, transaction history
📊 Price Charts - Candlestick charts, technical indicators
🚨 Alerts - Price notifications, portfolio changes

Widgets Included:

Widget	Type	Description
Portfolio Value	KPI Metric	Total portfolio worth
24h Change	KPI Metric	Portfolio change in 24 hours
Active Trades	KPI Metric	Number of open positions
Profit/Loss	KPI Metric	Realized gains/losses
Bitcoin Chart	Candlestick Chart	BTC price movements
Top Cryptocurrencies	Crypto Table	Major coins with prices
Portfolio Distribution	Pie Chart	Holdings by cryptocurrency
Recent Transactions	Transaction List	Latest buy/sell orders
Market Trends	Line Chart	Market sentiment indicators
Watchlist	Coin List	Tracked cryptocurrencies

5. Finance Dashboard (`dashboard/finance.html`) #

Primary Use Case: Financial planning, expense tracking, budget management.

Key Features:

💳 Account Balances - Bank accounts, credit cards
📈 Investment Tracking - Stocks, bonds, mutual funds
💸 Expense Management - Categorized spending analysis
🎯 Budget Goals - Progress toward financial targets
📊 Cash Flow - Income vs expenses over time

Widgets Included:

Widget	Type	Description
Total Balance	KPI Metric	Sum of all accounts
Monthly Expenses	KPI Metric	Current month spending
Investment Value	KPI Metric	Portfolio market value
Savings Rate	KPI Metric	Percentage of income saved
Cash Flow	Area Chart	Income vs expenses trends
Expense Categories	Donut Chart	Spending by category
Account Balances	Account Cards	Individual account details
Investment Performance	Line Chart	Portfolio growth over time
Budget Progress	Progress Bars	Goal completion status
Recent Transactions	Transaction Table	Latest financial activities

6. Project Dashboard (`dashboard/project.html`) #

Primary Use Case: Project management, team collaboration, task tracking.

Key Features:

📋 Project Overview - Active projects, completion status
👥 Team Management - Member assignments, workload
⏰ Timeline Tracking - Milestones, deadlines
📊 Progress Monitoring - Task completion, time tracking
🎯 Resource Allocation - Budget usage, resource planning

Widgets Included:

Widget	Type	Description
Active Projects	KPI Metric	Number of ongoing projects
Completed Tasks	KPI Metric	Tasks finished this period
Team Members	KPI Metric	Active team size
Budget Utilization	KPI Metric	Percentage of budget used
Project Timeline	Gantt Chart	Project schedules and dependencies
Task Distribution	Bar Chart	Tasks by team member
Project Status	Status Cards	Individual project overviews
Recent Activities	Activity Feed	Latest project updates
Resource Allocation	Resource Chart	Team workload distribution
Milestone Progress	Timeline	Key project milestones

7. SaaS Dashboard (`dashboard/saas.html`) #

Primary Use Case: Subscription business metrics, user growth, plan analytics.

Key Features:

💰 MRR & ARR — Monthly and annual recurring revenue trends
📉 Churn Analytics — Customer and revenue churn breakdowns
📈 LTV / CAC — Customer lifetime value vs. acquisition cost
🪜 Funnel Conversion — Trial → Paid → Renewal stages
📊 Plan Distribution — Active subscriptions by plan tier

Widgets Included:

Widget	Type	Description
MRR Trend	Area Chart	Monthly recurring revenue over time
Active Subscriptions	KPI Metric	Total active users with growth rate
Churn Rate	KPI Metric	Customer churn percentage
LTV / CAC Ratio	KPI Metric	Unit economics health indicator
Plan Distribution	Donut Chart	Subscriptions by plan tier
Cohort Retention	Heatmap	Retention by signup cohort
Recent Signups	Activity Feed	Latest customer acquisitions

8. HR Dashboard (`dashboard/hr.html`) #

Primary Use Case: People operations, headcount planning, hiring funnel tracking.

Key Features:

👥 Headcount — Employees by department, role, location
🗓️ Attendance — Daily attendance, time-off tracking
📋 Hiring Pipeline — Open positions, candidate stages
🎯 Performance — Review cycles, goal completion
💼 Onboarding — New hire progress tracking

Widgets Included:

Widget	Type	Description
Total Headcount	KPI Metric	Active employees with quarterly delta
Open Positions	KPI Metric	Currently hiring with time-to-fill
Department Breakdown	Donut Chart	Employees by department
Attendance Today	Donut Chart	Present / remote / on-leave breakdown
Hiring Funnel	Funnel Chart	Applicants → Phone → On-site → Offer → Hired
Upcoming Reviews	Data Table	Performance reviews due in next 30 days

9. Marketing Dashboard (`dashboard/marketing.html`) #

Primary Use Case: Multi-channel campaign performance, attribution, lead generation.

Key Features:

📣 Campaign Performance — Spend, impressions, clicks per campaign
🌐 Channel Analytics — Organic, paid, social, email breakdown
🎯 Conversion Tracking — Lead → MQL → SQL → Customer
💰 ROAS — Return on ad spend per channel
📨 Email Metrics — Send, open, click, unsubscribe rates

Widgets Included:

Widget	Type	Description
Total Spend	KPI Metric	Cross-channel advertising spend
CAC	KPI Metric	Customer acquisition cost trend
Conversion Rate	KPI Metric	Visitor → lead conversion percentage
Channel Mix	Donut Chart	Lead source attribution
Campaign Performance	Data Table	Active campaigns with spend, leads, ROAS
Email Engagement	Bar Chart	Open / click rates by campaign

10. Analytics (alt) Dashboard (`dashboard/analytics.html`) #

Primary Use Case: Alternate analytics layout when you want a different visual treatment than the default.

Key Features:

📊 Secondary KPIs — Different metric stack than index.html
🗺️ Geographic — Region-level breakdown
⏱️ Real-time — Live event stream
🔍 Behavior — Session depth, scroll, engagement events

Use this when you want a "secondary" analytics view that complements the primary index.html dashboard, or as a starting point for a custom layout.

Common Dashboard Components #

KPI Metric Cards #

All dashboards use consistent KPI card structure:

<!-- Standard KPI Card -->
<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">[Metric Name]</h6>
          <h3 class="mb-0 f-w-300">[Value]</h3>
          <p class="text-muted mb-0">
            <span class="text-[success|danger] f-12 me-1">
              <i class="ph-duotone ph-trend-[up|down] me-1"></i>[Change %]
            </span>
            [Period Description]
          </p>
        </div>
        <div class="flex-shrink-0">
          <div class="avtar avtar-s bg-[color]">
            <i class="ph-duotone ph-[icon] f-18"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Available Variants:

Primary Card: bg-primary with white text
Success Card: bg-success for positive metrics
Warning Card: bg-warning for attention metrics
Info Card: bg-info for informational data
Danger Card: bg-danger for critical alerts

Chart Integration #

Standard chart containers used across dashboards:

<!-- Chart Container -->
<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">[Chart Title]</h5>
        <div class="dropdown">
          <!-- Chart options dropdown -->
        </div>
      </div>
    </div>
    <div class="card-body">
      <div id="[chart-id]"></div>
    </div>
  </div>
</div>

Chart Types Available:

Line Charts: Trend analysis, time-series data
Area Charts: Cumulative data, filled regions
Bar Charts: Comparative data, categories
Donut/Pie Charts: Part-to-whole relationships
Candlestick Charts: Financial data (crypto dashboard)
Funnel Charts: Process conversion (CRM dashboard)

Data Tables #

Consistent table structure across dashboards:

<!-- Data Table Container -->
<div class="card">
  <div class="card-header">
    <h5 class="mb-0">[Table Title]</h5>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>[Column 1]</th>
            <th>[Column 2]</th>
            <th class="text-end">[Actions]</th>
          </tr>
        </thead>
        <tbody>
          <!-- Dynamic table rows -->
        </tbody>
      </table>
    </div>
  </div>
</div>

Customization Options #

Dashboard Layout Variants #

Full Width Layout:

<!-- Remove container constraints -->
<div class="pc-content">
  <div class="row">
    <!-- Widgets span full width -->
  </div>
</div>

Boxed Layout:

// In vite.config.js
const box_container = 'true' // Enable boxed layout

Custom Grid Layouts:

<!-- 2-column layout -->
<div class="row">
  <div class="col-lg-6"><!-- Left column --></div>
  <div class="col-lg-6"><!-- Right column --></div>
</div>
 
<!-- 3-column layout -->
<div class="row">
  <div class="col-lg-4"><!-- Left --></div>
  <div class="col-lg-4"><!-- Center --></div>
  <div class="col-lg-4"><!-- Right --></div>
</div>
 
<!-- Mixed layout -->
<div class="row">
  <div class="col-lg-8"><!-- Main content --></div>
  <div class="col-lg-4"><!-- Sidebar --></div>
</div>

Color Variants:

<!-- Primary theme -->
<div class="card bg-primary text-white">
 
<!-- Custom gradient -->
<div class="card bg-gradient-primary">
 
<!-- Light variant -->
<div class="card bg-light-primary">

Size Variants:

// Compact widgets
.widget-compact {
  .card-body {
    padding: 1rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
}
 
// Large widgets
.widget-large {
  .card-body {
    padding: 2rem;
  }
  
  h3 {
    font-size: 2.5rem;
  }
}

Adding Custom Dashboards #

Step 1: Create HTML File

<!-- src/html/dashboard/custom-dashboard.html -->
<!doctype html>
<html lang="en">
  <head>
    @@include('../layouts/head-page-meta.html', {'title': 'Custom Dashboard'})
    @@include('../layouts/head-css.html')
  </head>
  
  <body @@bodySetup>
    @@include('../layouts/layout-vertical.html')
    
    <div class="pc-container">
      <div class="pc-content">
        @@include('../layouts/breadcrumb.html', {
          'breadcrumb-item': 'Dashboard', 
          'breadcrumb-item-active': 'Custom'
        })
        
        <!-- Your custom widgets here -->
      </div>
    </div>
    
    @@include('../layouts/footer-js.html')
  </body>
</html>

Step 2: Add Navigation

<!-- In layouts/menu-list.html -->
<li class="pc-item">
  <a href="../dashboard/custom-dashboard.html" class="pc-link">
    <span class="pc-micon"><i class="ph-duotone ph-chart-pie"></i></span>
    <span class="pc-mtext">Custom Dashboard</span>
  </a>
</li>

Step 3: Create Custom Widgets

// src/assets/js/dashboard/custom-dashboard.js
document.addEventListener('DOMContentLoaded', function() {
  // Initialize custom charts and widgets
  initCustomCharts();
  loadCustomData();
});

Performance Considerations #

Lazy Loading #

// Lazy load dashboard widgets
const observerOptions = {
  root: null,
  threshold: 0.1
};
 
const widgetObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadWidget(entry.target);
      widgetObserver.unobserve(entry.target);
    }
  });
}, observerOptions);
 
// Observe all widget containers
document.querySelectorAll('.widget-container').forEach(widget => {
  widgetObserver.observe(widget);
});

Data Loading Optimization #

// Batch API calls for dashboard data
async function loadDashboardData() {
  const [metrics, chartData, tableData] = await Promise.all([
    fetch('/api/metrics'),
    fetch('/api/chart-data'),
    fetch('/api/table-data')
  ]);
  
  // Update widgets with loaded data
  updateMetrics(await metrics.json());
  updateCharts(await chartData.json());
  updateTables(await tableData.json());
}

Memory Management #

// Clean up chart instances when switching dashboards
let chartInstances = [];
 
function destroyCharts() {
  chartInstances.forEach(chart => {
    if (chart && chart.destroy) {
      chart.destroy();
    }
  });
  chartInstances = [];
}
 
// Call when navigating away from dashboard
window.addEventListener('beforeunload', destroyCharts);

Dashboard Widgets - Detailed widget documentation
Chart Components - Chart configuration options
Theme Variables - Customization variables

PreviousDashboard Widgets NextOverview

📊 Dashboard Pages Reference #

Overview #

Dashboard Variants #

1. Analytics Dashboard (dashboard/index.html) #

2. E-commerce Dashboard (dashboard/ecommerce.html) #

3. CRM Dashboard (dashboard/crm.html) #

4. Crypto Dashboard (dashboard/crypto.html) #

5. Finance Dashboard (dashboard/finance.html) #

6. Project Dashboard (dashboard/project.html) #

7. SaaS Dashboard (dashboard/saas.html) #

8. HR Dashboard (dashboard/hr.html) #

9. Marketing Dashboard (dashboard/marketing.html) #

10. Analytics (alt) Dashboard (dashboard/analytics.html) #

Common Dashboard Components #

KPI Metric Cards #

Chart Integration #

Data Tables #

Customization Options #

Dashboard Layout Variants #

Widget Customization #

Adding Custom Dashboards #

Performance Considerations #

Lazy Loading #

Data Loading Optimization #

Memory Management #

Related References #

1. Analytics Dashboard (`dashboard/index.html`) #

2. E-commerce Dashboard (`dashboard/ecommerce.html`) #

3. CRM Dashboard (`dashboard/crm.html`) #

4. Crypto Dashboard (`dashboard/crypto.html`) #

5. Finance Dashboard (`dashboard/finance.html`) #

6. Project Dashboard (`dashboard/project.html`) #

7. SaaS Dashboard (`dashboard/saas.html`) #

8. HR Dashboard (`dashboard/hr.html`) #

9. Marketing Dashboard (`dashboard/marketing.html`) #

10. Analytics (alt) Dashboard (`dashboard/analytics.html`) #