feat: Finish the proposal dashboard
This commit is contained in:
Mahmoud-Emad
parent
8f1438dc01
commit
b606923102
@ -3,170 +3,181 @@
|
||||
{% block title %}Governance Dashboard{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Navigation Tabs -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/governance">Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/governance/proposals">All Proposals</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/governance/my-votes">My Votes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/governance/create">Create Proposal</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Navigation Tabs -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/governance">Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/governance/proposals">All Proposals</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/governance/my-votes">My Votes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/governance/create">Create Proposal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Alert -->
|
||||
<div class="row mb-2">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info alert-dismissible fade show">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
<h5><i class="bi bi-info-circle"></i> About Governance</h5>
|
||||
<p>The governance system allows token holders to participate in decision-making processes by voting on
|
||||
proposals that affect the platform's future. Create proposals, cast votes, and help shape the direction
|
||||
of our decentralized ecosystem.</p>
|
||||
<div class="mt-2">
|
||||
<a href="/governance/documentation" class="btn btn-sm btn-outline-primary"><i class="bi bi-book"></i>
|
||||
Read Documentation</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Alert -->
|
||||
<div class="row mb-2">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info alert-dismissible fade show">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
<h5><i class="bi bi-info-circle"></i> About Governance</h5>
|
||||
<p>The governance system allows token holders to participate in decision-making processes by voting on proposals that affect the platform's future. Create proposals, cast votes, and help shape the direction of our decentralized ecosystem.</p>
|
||||
<div class="mt-2">
|
||||
<a href="/governance/documentation" class="btn btn-sm btn-outline-primary"><i class="bi bi-book"></i> Read Documentation</a>
|
||||
</div>
|
||||
<!-- Dashboard Main Content -->
|
||||
<div class="row mb-3">
|
||||
<!-- Voting Pane for Nearest Deadline Proposal -->
|
||||
<div class="col-lg-8 mb-4 mb-lg-0">
|
||||
{% if nearest_proposal is defined %}
|
||||
<div class="card h-100">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Urgent: Voting Closes Soon</h5>
|
||||
<div>
|
||||
<span class="badge bg-warning text-dark me-2">Ends: {{ nearest_proposal.vote_end_date |
|
||||
date(format="%Y-%m-%d") }}</span>
|
||||
<a href="/governance/proposals/{{ nearest_proposal.base_data.id }}"
|
||||
class="btn btn-sm btn-outline-primary">View Full Proposal</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">{{ nearest_proposal.title }}</h4>
|
||||
<h6 class="card-subtitle mb-3 text-muted">Proposed by {{ nearest_proposal.creator_name }}</h6>
|
||||
|
||||
<div class="mb-4">
|
||||
<p>{{ nearest_proposal.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="progress mb-3" style="height: 25px;">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 65%" aria-valuenow="65"
|
||||
aria-valuemin="0" aria-valuemax="100">65% Yes</div>
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 35%" aria-valuenow="35"
|
||||
aria-valuemin="0" aria-valuemax="100">35% No</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between text-muted small mb-4">
|
||||
<span>26 votes cast</span>
|
||||
<span>Quorum: 75% reached</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<h5 class="mb-3">Cast Your Vote</h5>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<input type="text" class="form-control" placeholder="Optional comment on your vote"
|
||||
aria-label="Vote comment">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<button type="submit" name="vote" value="yes" class="btn btn-success">Vote Yes</button>
|
||||
<button type="submit" name="vote" value="no" class="btn btn-danger">Vote No</button>
|
||||
<button type="submit" name="vote" value="abstain" class="btn btn-secondary">Abstain</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard Main Content -->
|
||||
<div class="row mb-3">
|
||||
<!-- Voting Pane for Nearest Deadline Proposal -->
|
||||
<div class="col-lg-8 mb-4 mb-lg-0">
|
||||
{% if nearest_proposal is defined %}
|
||||
<div class="card h-100">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Urgent: Voting Closes Soon</h5>
|
||||
<div>
|
||||
<span class="badge bg-warning text-dark me-2">Ends: {{ nearest_proposal.voting_ends_at | date(format="%Y-%m-%d") }}</span>
|
||||
<a href="/governance/proposals/{{ nearest_proposal.id }}" class="btn btn-sm btn-outline-primary">View Full Proposal</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">{{ nearest_proposal.title }}</h4>
|
||||
<h6 class="card-subtitle mb-3 text-muted">Proposed by {{ nearest_proposal.creator_name }}</h6>
|
||||
|
||||
<div class="mb-4">
|
||||
<p>{{ nearest_proposal.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="progress mb-3" style="height: 25px;">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">65% Yes</div>
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">35% No</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between text-muted small mb-4">
|
||||
<span>26 votes cast</span>
|
||||
<span>Quorum: 75% reached</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<h5 class="mb-3">Cast Your Vote</h5>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<input type="text" class="form-control" placeholder="Optional comment on your vote" aria-label="Vote comment">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<button type="submit" name="vote" value="yes" class="btn btn-success">Vote Yes</button>
|
||||
<button type="submit" name="vote" value="no" class="btn btn-danger">Vote No</button>
|
||||
<button type="submit" name="vote" value="abstain" class="btn btn-secondary">Abstain</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card h-100">
|
||||
<div class="card-body text-center py-5">
|
||||
<i class="bi bi-clipboard-check fs-1 text-muted mb-3"></i>
|
||||
<h5>No active proposals requiring votes</h5>
|
||||
<p class="text-muted">When new proposals are created, they will appear here for voting.</p>
|
||||
<a href="/governance/create" class="btn btn-primary mt-3">Create Proposal</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card h-100">
|
||||
<div class="card-body text-center py-5">
|
||||
<i class="bi bi-clipboard-check fs-1 text-muted mb-3"></i>
|
||||
<h5>No active proposals requiring votes</h5>
|
||||
<p class="text-muted">When new proposals are created, they will appear here for voting.</p>
|
||||
<a href="/governance/create" class="btn btn-primary mt-3">Create Proposal</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity Timeline -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Recent Activity</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="list-group list-group-flush">
|
||||
{% for activity in recent_activity %}
|
||||
<div class="list-group-item border-start-0 border-end-0 py-3">
|
||||
<div class="d-flex">
|
||||
<div class="me-3">
|
||||
<i class="bi {{ activity.icon }} fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<strong>{{ activity.user }}</strong>
|
||||
<small class="text-muted">{{ activity.timestamp | date(format="%H:%M") }}</small>
|
||||
</div>
|
||||
<p class="mb-1">{{ activity.action }} on <a href="/governance/proposals/{{ activity.proposal_id }}">{{ activity.proposal_title }}</a></p>
|
||||
{% if activity.type == "comment" and activity.comment is defined %}
|
||||
<p class="mb-0 small text-muted">"{{ activity.comment }}"</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity Timeline -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Recent Activity</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="list-group list-group-flush">
|
||||
{% for activity in recent_activity %}
|
||||
<div class="list-group-item border-start-0 border-end-0 py-3">
|
||||
<div class="d-flex">
|
||||
<div class="me-3">
|
||||
<i class="bi {{ activity.icon }} fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<strong>{{ activity.user }}</strong>
|
||||
<small class="text-muted">{{ activity.timestamp | date(format="%H:%M") }}</small>
|
||||
</div>
|
||||
<p class="mb-1">{{ activity.action }} on <a
|
||||
href="/governance/proposals/{{ activity.proposal_id }}">{{
|
||||
activity.proposal_title }}</a></p>
|
||||
{% if activity.type == "comment" and activity.comment is defined %}
|
||||
<p class="mb-0 small text-muted">"{{ activity.comment }}"</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="card-footer text-center">
|
||||
<a href="/governance/proposals" class="btn btn-sm btn-outline-info">View All Activity</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-center">
|
||||
<a href="/governance/proposals" class="btn btn-sm btn-outline-info">View All Activity</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Proposals Section -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Active Proposals (Ending Soon)</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
{% set count = 0 %}
|
||||
{% for proposal in proposals %}
|
||||
{% if count < 3 %}
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{ proposal.title }}</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">By {{ proposal.creator_name }}</h6>
|
||||
<p class="card-text">{{ proposal.description | truncate(length=100) }}</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="badge {% if proposal.status == 'Active' %}bg-success{% elif proposal.status == 'Approved' %}bg-primary{% elif proposal.status == 'Rejected' %}bg-danger{% else %}bg-secondary{% endif %}">
|
||||
{{ proposal.status }}
|
||||
</span>
|
||||
<a href="/governance/proposals/{{ proposal.id }}" class="btn btn-sm btn-outline-primary">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-muted text-center">
|
||||
<span>Voting ends: {{ proposal.voting_ends_at | date(format="%Y-%m-%d") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Recent Proposals Section -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Active Proposals (Ending Soon)</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
{% set count = 0 %}
|
||||
{% for proposal in proposals %}
|
||||
{% if count < 3 %} <div class="col-md-4 mb-3">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{ proposal.title }}</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">By {{ proposal.creator_name }}</h6>
|
||||
<p class="card-text">{{ proposal.description | truncate(length=100) }}</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span
|
||||
class="badge {% if proposal.status == 'Active' %}bg-success{% elif proposal.status == 'Approved' %}bg-primary{% elif proposal.status == 'Rejected' %}bg-danger{% else %}bg-secondary{% endif %}">
|
||||
{{ proposal.status }}
|
||||
</span>
|
||||
<a href="/governance/proposals/{{ proposal.base_data.id }}"
|
||||
class="btn btn-sm btn-outline-primary">View Details</a>
|
||||
</div>
|
||||
{% set count = count + 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-muted text-center">
|
||||
<span>Voting ends: {{ proposal.vote_end_date | date(format="%Y-%m-%d") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% set count = count + 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue
Block a user