912 lines
45 KiB
HTML
912 lines
45 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Dashboard Widgets - Hospital Management{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h4>Dashboard Widgets</h4>
|
|
<h6>Manage widgets for {{ dashboard.name|default:"Executive Overview" }}</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<a href="{% url 'analytics:dashboard_detail' dashboard.pk|default:1 %}" class="btn btn-secondary me-2">
|
|
<i class="fas fa-arrow-left me-1"></i>Back to Dashboard
|
|
</a>
|
|
<a href="{% url 'analytics:dashboard_widget_create' dashboard.pk|default:1 %}" class="btn btn-added">
|
|
<i class="fas fa-plus me-1"></i>Add Widget
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Widget Statistics -->
|
|
<div class="row">
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="dash-widget">
|
|
<div class="dash-widgetimg">
|
|
<span><i class="fas fa-th-large"></i></span>
|
|
</div>
|
|
<div class="dash-widgetcontent">
|
|
<h5>{{ stats.total_widgets|default:12 }}</h5>
|
|
<h6>Total Widgets</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="dash-widget">
|
|
<div class="dash-widgetimg">
|
|
<span><i class="fas fa-chart-line"></i></span>
|
|
</div>
|
|
<div class="dash-widgetcontent">
|
|
<h5>{{ stats.chart_widgets|default:6 }}</h5>
|
|
<h6>Chart Widgets</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="dash-widget">
|
|
<div class="dash-widgetimg">
|
|
<span><i class="fas fa-table"></i></span>
|
|
</div>
|
|
<div class="dash-widgetcontent">
|
|
<h5>{{ stats.table_widgets|default:3 }}</h5>
|
|
<h6>Table Widgets</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="dash-widget">
|
|
<div class="dash-widgetimg">
|
|
<span><i class="fas fa-calculator"></i></span>
|
|
</div>
|
|
<div class="dash-widgetcontent">
|
|
<h5>{{ stats.metric_widgets|default:3 }}</h5>
|
|
<h6>Metric Widgets</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Widget Management -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-top">
|
|
<div class="search-set">
|
|
<div class="search-input">
|
|
<a class="btn btn-searchset">
|
|
<i class="fas fa-search"></i>
|
|
</a>
|
|
<input type="text" id="searchInput" placeholder="Search widgets...">
|
|
</div>
|
|
</div>
|
|
<div class="wordset">
|
|
<ul>
|
|
<li>
|
|
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Filter" onclick="toggleFilters()">
|
|
<i class="fas fa-filter"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Grid View" onclick="toggleView('grid')" id="gridViewBtn" class="active">
|
|
<i class="fas fa-th"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-bs-toggle="tooltip" data-bs-placement="top" title="List View" onclick="toggleView('list')" id="listViewBtn">
|
|
<i class="fas fa-list"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters Panel -->
|
|
<div id="filtersPanel" class="filters-panel" style="display: none;">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label for="widgetType" class="form-label">Widget Type</label>
|
|
<select class="form-select" id="widgetType">
|
|
<option value="">All Types</option>
|
|
<option value="CHART">Chart</option>
|
|
<option value="TABLE">Table</option>
|
|
<option value="METRIC">Metric</option>
|
|
<option value="GAUGE">Gauge</option>
|
|
<option value="MAP">Map</option>
|
|
<option value="TEXT">Text</option>
|
|
<option value="CUSTOM">Custom</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label for="chartType" class="form-label">Chart Type</label>
|
|
<select class="form-select" id="chartType">
|
|
<option value="">All Charts</option>
|
|
<option value="LINE">Line Chart</option>
|
|
<option value="BAR">Bar Chart</option>
|
|
<option value="PIE">Pie Chart</option>
|
|
<option value="AREA">Area Chart</option>
|
|
<option value="SCATTER">Scatter Plot</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label for="statusFilter" class="form-label">Status</label>
|
|
<select class="form-select" id="statusFilter">
|
|
<option value="">All Status</option>
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label class="form-label"> </label>
|
|
<div class="d-flex gap-2">
|
|
<button type="button" class="btn btn-primary btn-sm" onclick="applyFilters()">
|
|
<i class="fas fa-check me-1"></i>Apply
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="clearFilters()">
|
|
<i class="fas fa-times me-1"></i>Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grid View -->
|
|
<div id="gridView" class="widget-grid">
|
|
<div class="row">
|
|
<!-- Revenue Chart Widget -->
|
|
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
|
|
<div class="widget-card">
|
|
<div class="widget-preview">
|
|
<div class="widget-type-badge">
|
|
<span class="badge bg-primary">Chart</span>
|
|
</div>
|
|
<div class="widget-preview-content">
|
|
<i class="fas fa-chart-line fa-3x text-primary"></i>
|
|
<h6 class="mt-2">Revenue Trends</h6>
|
|
</div>
|
|
</div>
|
|
<div class="widget-info">
|
|
<div class="widget-details">
|
|
<h6 class="widget-title">Revenue Trends</h6>
|
|
<p class="widget-description">Monthly revenue analysis with trend indicators</p>
|
|
<div class="widget-meta">
|
|
<span class="meta-item">
|
|
<i class="fas fa-chart-line me-1"></i>Line Chart
|
|
</span>
|
|
<span class="meta-item">
|
|
<i class="fas fa-database me-1"></i>Financial Data
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="widget-actions">
|
|
<div class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{% url 'analytics:dashboard_widget_detail' 1 %}"><i class="fas fa-eye me-2"></i>View</a></li>
|
|
<li><a class="dropdown-item" href="{% url 'analytics:dashboard_widget_update' 1 %}"><i class="fas fa-edit me-2"></i>Edit</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="duplicateWidget(1)"><i class="fas fa-copy me-2"></i>Duplicate</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="moveWidget(1)"><i class="fas fa-arrows-alt me-2"></i>Move</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item text-danger" href="{% url 'analytics:dashboard_widget_delete' 1 %}"><i class="fas fa-trash me-2"></i>Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="widget-footer">
|
|
<div class="widget-position">
|
|
<small class="text-muted">Position: Row 1, Col 1-8</small>
|
|
</div>
|
|
<div class="widget-status">
|
|
<span class="status-indicator active"></span>
|
|
<small class="text-muted">Active</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Patient Metrics Widget -->
|
|
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
|
|
<div class="widget-card">
|
|
<div class="widget-preview">
|
|
<div class="widget-type-badge">
|
|
<span class="badge bg-success">Metric</span>
|
|
</div>
|
|
<div class="widget-preview-content">
|
|
<i class="fas fa-users fa-3x text-success"></i>
|
|
<h6 class="mt-2">Patient Count</h6>
|
|
</div>
|
|
</div>
|
|
<div class="widget-info">
|
|
<div class="widget-details">
|
|
<h6 class="widget-title">Patient Count</h6>
|
|
<p class="widget-description">Total active patients with trend comparison</p>
|
|
<div class="widget-meta">
|
|
<span class="meta-item">
|
|
<i class="fas fa-calculator me-1"></i>KPI Metric
|
|
</span>
|
|
<span class="meta-item">
|
|
<i class="fas fa-database me-1"></i>Patient Data
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="widget-actions">
|
|
<div class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{% url 'analytics:dashboard_widget_detail' 2 %}"><i class="fas fa-eye me-2"></i>View</a></li>
|
|
<li><a class="dropdown-item" href="{% url 'analytics:dashboard_widget_update' 2 %}"><i class="fas fa-edit me-2"></i>Edit</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="duplicateWidget(2)"><i class="fas fa-copy me-2"></i>Duplicate</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="moveWidget(2)"><i class="fas fa-arrows-alt me-2"></i>Move</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item text-danger" href="{% url 'analytics:dashboard_widget_delete' 2 %}"><i class="fas fa-trash me-2"></i>Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="widget-footer">
|
|
<div class="widget-position">
|
|
<small class="text-muted">Position: Row 1, Col 9-12</small>
|
|
</div>
|
|
<div class="widget-status">
|
|
<span class="status-indicator active"></span>
|
|
<small class="text-muted">Active</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Department Performance Table -->
|
|
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
|
|
<div class="widget-card">
|
|
<div class="widget-preview">
|
|
<div class="widget-type-badge">
|
|
<span class="badge bg-info">Table</span>
|
|
</div>
|
|
<div class="widget-preview-content">
|
|
<i class="fas fa-table fa-3x text-info"></i>
|
|
<h6 class="mt-2">Department Performance</h6>
|
|
</div>
|
|
</div>
|
|
<div class="widget-info">
|
|
<div class="widget-details">
|
|
<h6 class="widget-title">Department Performance</h6>
|
|
<p class="widget-description">Top performing departments by revenue</p>
|
|
<div class="widget-meta">
|
|
<span class="meta-item">
|
|
<i class="fas fa-table me-1"></i>Data Table
|
|
</span>
|
|
<span class="meta-item">
|
|
<i class="fas fa-database me-1"></i>Operational Data
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="widget-actions">
|
|
<div class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{% url 'analytics:dashboard_widget_detail' 3 %}"><i class="fas fa-eye me-2"></i>View</a></li>
|
|
<li><a class="dropdown-item" href="{% url 'analytics:dashboard_widget_update' 3 %}"><i class="fas fa-edit me-2"></i>Edit</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="duplicateWidget(3)"><i class="fas fa-copy me-2"></i>Duplicate</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="moveWidget(3)"><i class="fas fa-arrows-alt me-2"></i>Move</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item text-danger" href="{% url 'analytics:dashboard_widget_delete' 3 %}"><i class="fas fa-trash me-2"></i>Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="widget-footer">
|
|
<div class="widget-position">
|
|
<small class="text-muted">Position: Row 2, Col 1-6</small>
|
|
</div>
|
|
<div class="widget-status">
|
|
<span class="status-indicator active"></span>
|
|
<small class="text-muted">Active</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quality Score Gauge -->
|
|
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
|
|
<div class="widget-card">
|
|
<div class="widget-preview">
|
|
<div class="widget-type-badge">
|
|
<span class="badge bg-warning">Gauge</span>
|
|
</div>
|
|
<div class="widget-preview-content">
|
|
<i class="fas fa-tachometer-alt fa-3x text-warning"></i>
|
|
<h6 class="mt-2">Quality Score</h6>
|
|
</div>
|
|
</div>
|
|
<div class="widget-info">
|
|
<div class="widget-details">
|
|
<h6 class="widget-title">Quality Score</h6>
|
|
<p class="widget-description">Overall quality performance indicator</p>
|
|
<div class="widget-meta">
|
|
<span class="meta-item">
|
|
<i class="fas fa-tachometer-alt me-1"></i>Gauge
|
|
</span>
|
|
<span class="meta-item">
|
|
<i class="fas fa-database me-1"></i>Quality Data
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="widget-actions">
|
|
<div class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{% url 'analytics:dashboard_widget_detail' 4 %}"><i class="fas fa-eye me-2"></i>View</a></li>
|
|
<li><a class="dropdown-item" href="{% url 'analytics:dashboard_widget_update' 4 %}"><i class="fas fa-edit me-2"></i>Edit</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="duplicateWidget(4)"><i class="fas fa-copy me-2"></i>Duplicate</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="moveWidget(4)"><i class="fas fa-arrows-alt me-2"></i>Move</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item text-danger" href="{% url 'analytics:dashboard_widget_delete' 4 %}"><i class="fas fa-trash me-2"></i>Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="widget-footer">
|
|
<div class="widget-position">
|
|
<small class="text-muted">Position: Row 2, Col 7-12</small>
|
|
</div>
|
|
<div class="widget-status">
|
|
<span class="status-indicator active"></span>
|
|
<small class="text-muted">Active</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bed Occupancy Chart -->
|
|
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
|
|
<div class="widget-card">
|
|
<div class="widget-preview">
|
|
<div class="widget-type-badge">
|
|
<span class="badge bg-primary">Chart</span>
|
|
</div>
|
|
<div class="widget-preview-content">
|
|
<i class="fas fa-chart-pie fa-3x text-primary"></i>
|
|
<h6 class="mt-2">Bed Occupancy</h6>
|
|
</div>
|
|
</div>
|
|
<div class="widget-info">
|
|
<div class="widget-details">
|
|
<h6 class="widget-title">Bed Occupancy</h6>
|
|
<p class="widget-description">Current bed utilization by department</p>
|
|
<div class="widget-meta">
|
|
<span class="meta-item">
|
|
<i class="fas fa-chart-pie me-1"></i>Pie Chart
|
|
</span>
|
|
<span class="meta-item">
|
|
<i class="fas fa-database me-1"></i>Operational Data
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="widget-actions">
|
|
<div class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{% url 'analytics:dashboard_widget_detail' 5 %}"><i class="fas fa-eye me-2"></i>View</a></li>
|
|
<li><a class="dropdown-item" href="{% url 'analytics:dashboard_widget_update' 5 %}"><i class="fas fa-edit me-2"></i>Edit</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="duplicateWidget(5)"><i class="fas fa-copy me-2"></i>Duplicate</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="moveWidget(5)"><i class="fas fa-arrows-alt me-2"></i>Move</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item text-danger" href="{% url 'analytics:dashboard_widget_delete' 5 %}"><i class="fas fa-trash me-2"></i>Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="widget-footer">
|
|
<div class="widget-position">
|
|
<small class="text-muted">Position: Row 3, Col 1-4</small>
|
|
</div>
|
|
<div class="widget-status">
|
|
<span class="status-indicator inactive"></span>
|
|
<small class="text-muted">Inactive</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Financial Summary -->
|
|
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
|
|
<div class="widget-card">
|
|
<div class="widget-preview">
|
|
<div class="widget-type-badge">
|
|
<span class="badge bg-success">Metric</span>
|
|
</div>
|
|
<div class="widget-preview-content">
|
|
<i class="fas fa-dollar-sign fa-3x text-success"></i>
|
|
<h6 class="mt-2">Financial Summary</h6>
|
|
</div>
|
|
</div>
|
|
<div class="widget-info">
|
|
<div class="widget-details">
|
|
<h6 class="widget-title">Financial Summary</h6>
|
|
<p class="widget-description">Key financial metrics and indicators</p>
|
|
<div class="widget-meta">
|
|
<span class="meta-item">
|
|
<i class="fas fa-calculator me-1"></i>Multi-Metric
|
|
</span>
|
|
<span class="meta-item">
|
|
<i class="fas fa-database me-1"></i>Financial Data
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="widget-actions">
|
|
<div class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{% url 'analytics:dashboard_widget_detail' 6 %}"><i class="fas fa-eye me-2"></i>View</a></li>
|
|
<li><a class="dropdown-item" href="{% url 'analytics:dashboard_widget_update' 6 %}"><i class="fas fa-edit me-2"></i>Edit</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="duplicateWidget(6)"><i class="fas fa-copy me-2"></i>Duplicate</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="moveWidget(6)"><i class="fas fa-arrows-alt me-2"></i>Move</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item text-danger" href="{% url 'analytics:dashboard_widget_delete' 6 %}"><i class="fas fa-trash me-2"></i>Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="widget-footer">
|
|
<div class="widget-position">
|
|
<small class="text-muted">Position: Row 3, Col 5-8</small>
|
|
</div>
|
|
<div class="widget-status">
|
|
<span class="status-indicator active"></span>
|
|
<small class="text-muted">Active</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- List View -->
|
|
<div id="listView" class="table-responsive" style="display: none;">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Widget</th>
|
|
<th>Type</th>
|
|
<th>Data Source</th>
|
|
<th>Position</th>
|
|
<th>Status</th>
|
|
<th>Last Updated</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="widget-icon me-3">
|
|
<i class="fas fa-chart-line text-primary"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-0">Revenue Trends</h6>
|
|
<small class="text-muted">Monthly revenue analysis</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge bg-primary">Line Chart</span></td>
|
|
<td>Financial Data</td>
|
|
<td>Row 1, Col 1-8</td>
|
|
<td><span class="badge bg-success">Active</span></td>
|
|
<td>2 hours ago</td>
|
|
<td>
|
|
<a class="me-3" href="{% url 'analytics:dashboard_widget_detail' 1 %}">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a class="me-3" href="{% url 'analytics:dashboard_widget_update' 1 %}">
|
|
<i class="fas fa-edit"></i>
|
|
</a>
|
|
<a class="text-danger" href="{% url 'analytics:dashboard_widget_delete' 1 %}">
|
|
<i class="fas fa-trash"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="widget-icon me-3">
|
|
<i class="fas fa-users text-success"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-0">Patient Count</h6>
|
|
<small class="text-muted">Total active patients</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge bg-success">KPI Metric</span></td>
|
|
<td>Patient Data</td>
|
|
<td>Row 1, Col 9-12</td>
|
|
<td><span class="badge bg-success">Active</span></td>
|
|
<td>1 hour ago</td>
|
|
<td>
|
|
<a class="me-3" href="{% url 'analytics:dashboard_widget_detail' 2 %}">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a class="me-3" href="{% url 'analytics:dashboard_widget_update' 2 %}">
|
|
<i class="fas fa-edit"></i>
|
|
</a>
|
|
<a class="text-danger" href="{% url 'analytics:dashboard_widget_delete' 2 %}">
|
|
<i class="fas fa-trash"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="widget-icon me-3">
|
|
<i class="fas fa-table text-info"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-0">Department Performance</h6>
|
|
<small class="text-muted">Top performing departments</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge bg-info">Data Table</span></td>
|
|
<td>Operational Data</td>
|
|
<td>Row 2, Col 1-6</td>
|
|
<td><span class="badge bg-success">Active</span></td>
|
|
<td>3 hours ago</td>
|
|
<td>
|
|
<a class="me-3" href="{% url 'analytics:dashboard_widget_detail' 3 %}">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a class="me-3" href="{% url 'analytics:dashboard_widget_update' 3 %}">
|
|
<i class="fas fa-edit"></i>
|
|
</a>
|
|
<a class="text-danger" href="{% url 'analytics:dashboard_widget_delete' 3 %}">
|
|
<i class="fas fa-trash"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
|
<div class="dataTables_info">
|
|
Showing 1 to 6 of 12 widgets
|
|
</div>
|
|
<nav aria-label="Widget pagination">
|
|
<ul class="pagination pagination-sm mb-0">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" tabindex="-1">Previous</a>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a class="page-link" href="#">1</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">Next</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize search functionality
|
|
const searchInput = document.getElementById('searchInput');
|
|
searchInput.addEventListener('keyup', function() {
|
|
filterWidgets();
|
|
});
|
|
|
|
// Initialize tooltips
|
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl);
|
|
});
|
|
});
|
|
|
|
function filterWidgets() {
|
|
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
|
const widgetCards = document.querySelectorAll('.widget-card');
|
|
|
|
widgetCards.forEach(card => {
|
|
const title = card.querySelector('.widget-title').textContent.toLowerCase();
|
|
const description = card.querySelector('.widget-description').textContent.toLowerCase();
|
|
const type = card.querySelector('.badge').textContent.toLowerCase();
|
|
|
|
if (title.includes(searchTerm) || description.includes(searchTerm) || type.includes(searchTerm)) {
|
|
card.closest('.col-lg-4').style.display = '';
|
|
} else {
|
|
card.closest('.col-lg-4').style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
function toggleFilters() {
|
|
const filtersPanel = document.getElementById('filtersPanel');
|
|
filtersPanel.style.display = filtersPanel.style.display === 'none' ? 'block' : 'none';
|
|
}
|
|
|
|
function toggleView(viewType) {
|
|
const gridView = document.getElementById('gridView');
|
|
const listView = document.getElementById('listView');
|
|
const gridBtn = document.getElementById('gridViewBtn');
|
|
const listBtn = document.getElementById('listViewBtn');
|
|
|
|
if (viewType === 'grid') {
|
|
gridView.style.display = 'block';
|
|
listView.style.display = 'none';
|
|
gridBtn.classList.add('active');
|
|
listBtn.classList.remove('active');
|
|
} else {
|
|
gridView.style.display = 'none';
|
|
listView.style.display = 'block';
|
|
listBtn.classList.add('active');
|
|
gridBtn.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
function applyFilters() {
|
|
const widgetType = document.getElementById('widgetType').value;
|
|
const chartType = document.getElementById('chartType').value;
|
|
const statusFilter = document.getElementById('statusFilter').value;
|
|
|
|
console.log('Applying filters:', { widgetType, chartType, statusFilter });
|
|
alert('Filters applied successfully!');
|
|
}
|
|
|
|
function clearFilters() {
|
|
document.getElementById('widgetType').value = '';
|
|
document.getElementById('chartType').value = '';
|
|
document.getElementById('statusFilter').value = '';
|
|
|
|
// Reset widget display
|
|
const widgetCards = document.querySelectorAll('.widget-card');
|
|
widgetCards.forEach(card => {
|
|
card.closest('.col-lg-4').style.display = '';
|
|
});
|
|
}
|
|
|
|
function duplicateWidget(widgetId) {
|
|
if (confirm('Create a copy of this widget?')) {
|
|
alert(`Widget ${widgetId} duplicated successfully!`);
|
|
}
|
|
}
|
|
|
|
function moveWidget(widgetId) {
|
|
alert(`Opening widget positioning tool for widget ${widgetId}...`);
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.dash-widget {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.dash-widget .dash-widgetimg span {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: white;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.dash-widget .dash-widgetcontent h5 {
|
|
color: white;
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
margin: 10px 0 5px 0;
|
|
}
|
|
|
|
.dash-widget .dash-widgetcontent h6 {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 14px;
|
|
margin: 0;
|
|
}
|
|
|
|
.filters-panel {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.widget-card {
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 12px;
|
|
background: white;
|
|
transition: all 0.3s ease;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.widget-card:hover {
|
|
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.widget-preview {
|
|
position: relative;
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
padding: 30px 20px;
|
|
text-align: center;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.widget-type-badge {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
|
|
.widget-preview-content {
|
|
color: #6c757d;
|
|
}
|
|
|
|
.widget-preview-content h6 {
|
|
margin: 0;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.widget-info {
|
|
padding: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.widget-details {
|
|
flex: 1;
|
|
}
|
|
|
|
.widget-title {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin: 0 0 5px 0;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.widget-description {
|
|
color: #6c757d;
|
|
font-size: 0.875rem;
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
.widget-meta {
|
|
display: flex;
|
|
gap: 15px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.meta-item {
|
|
font-size: 0.75rem;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.widget-actions .dropdown-toggle {
|
|
color: #6c757d;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.widget-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px 20px;
|
|
background: #f8f9fa;
|
|
border-top: 1px solid #e9ecef;
|
|
}
|
|
|
|
.widget-position {
|
|
flex: 1;
|
|
}
|
|
|
|
.widget-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.status-indicator {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.status-indicator.active {
|
|
background-color: #28a745;
|
|
}
|
|
|
|
.status-indicator.inactive {
|
|
background-color: #6c757d;
|
|
}
|
|
|
|
.widget-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
background: #f8f9fa;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.wordset ul li a.active {
|
|
background: #007bff;
|
|
color: white;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.widget-card {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.widget-info {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.widget-meta {
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.widget-footer {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.filters-panel .row {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.filters-panel .col-md-3 {
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|