144 lines
7.2 KiB
HTML
144 lines
7.2 KiB
HTML
{% extends 'index.html' %}
|
|
{% block content %}
|
|
{% load static i18n %}
|
|
{% load i18n %}
|
|
|
|
<main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
|
|
<div class="oh-wrapper">
|
|
<div class="oh-dashboard row">
|
|
<div class="oh-dashboard__left col-12 col-sm-12 col-md-12 col-lg-9">
|
|
<div class="oh-dashboard__cards row">
|
|
<!-- column -->
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
|
|
<div class="oh-card-dashboard oh-card-dashboard oh-card-dashboard--success">
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title">{% trans "Total Projects" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<a href="{% url 'project-view' %}" style="text-decoration: none;" class="oh-card-dashboard__counts">
|
|
<span class="oh-card-dashboard__count">{{total_projects}}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- column -->
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
|
|
<div class="oh-card-dashboard oh-card-dashboard oh-card-dashboard--neutral">
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title">{% trans "New Projects" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<a href="{% url 'project-view' %}?{{request.GET.urlencode}}&status=new" style="text-decoration: none;" class="oh-card-dashboard__counts">
|
|
<span class="oh-card-dashboard__count">{{new_projects}}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- column -->
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
|
|
<div class="oh-card-dashboard oh-card-dashboard oh-card-dashboard--warning">
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title">{% trans "Projects in progress" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<a href="{% url 'project-view' %}?{{request.GET.urlencode}}&status=in_progress" style="text-decoration: none;" class="oh-card-dashboard__counts">
|
|
<span class="oh-card-dashboard__count">{{projects_in_progress}}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- movable cards for charts -->
|
|
<div class="oh-dashboard__movable-cards row mt-4">
|
|
<!-- chart -->
|
|
<div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable">
|
|
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
|
|
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
|
|
<span class="oh-card-dashboard__title">{% trans "Project Status" %}</span>
|
|
<span class="oh-card-dashboard__title float-end" id="projectStatusForward"><ion-icon name="caret-forward"></ion-icon></span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<canvas id="projectStatusCanvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- chart -->
|
|
<div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable">
|
|
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
|
|
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
|
|
<span class="oh-card-dashboard__title">{% trans "Task Status" %}</span>
|
|
<span class="oh-card-dashboard__title float-end" id="taskStatusForward"><ion-icon name="caret-forward"></ion-icon></span>
|
|
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<canvas id="taskStatusCanvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right end column -->
|
|
<div class="oh-dashboard__right col-12 col-sm-12 col-md-12 col-lg-3">
|
|
<!-- Dashboard events -->
|
|
<div class="oh-dashboard__events">
|
|
<ul class="oh-dashboard__events-nav">
|
|
<li class="oh-dashboard__events-nav-item oh-dabdshboard__events-nav-item--active" data-target="0">
|
|
</li>
|
|
<li class="oh-dashboard__events-nav-item" data-target="1"></li>
|
|
<li class="oh-dashboard__events-nav-item" data-target="2"></li>
|
|
</ul>
|
|
</div>
|
|
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mt-3">
|
|
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
|
|
<span class="oh-card-dashboard__title"> {% trans "Projects due in this month" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-sticky-table h-100" hx-get="{% url 'projects-due-in-this-month' %}" hx-trigger="load" style="border: none;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="oh-modal"
|
|
id="ProjectModal"
|
|
role="dialog"
|
|
aria-labelledby="ProjectModal"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
class="oh-modal__dialog"
|
|
id="ProjectFormTarget"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="oh-modal"
|
|
id="ProjectModalShow"
|
|
role="dialog"
|
|
aria-labelledby="ProjectModalShow"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
class="oh-modal__dialog"
|
|
|
|
>
|
|
<div class="oh-modal__dialog-header">
|
|
<h2 class="oh-modal__dialog-title">{% trans 'Projects' %}</h2>
|
|
<button type="button" class="oh-modal__close--custom" onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show');">
|
|
<ion-icon name="close-outline" role="img" aria-label="close outline"></ion-icon>
|
|
</button>
|
|
|
|
</div>
|
|
<div class="oh-modal__dialog-body" id="ProjectModalShowTarget">
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Java script -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="{% static 'dashboard/projectChart.js' %}"></script>
|
|
|
|
{% endblock content %}
|