300 lines
13 KiB
HTML
Executable File
300 lines
13 KiB
HTML
Executable File
{% load static %}
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OpenHRMS Dashboard</title>
|
|
<link rel="stylesheet" href="{% static 'build/css/style.min.css' %}" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="oh-wrapper-main" :class="!sidebarOpen ? 'oh-wrapper-main--closed' : ''" x-data="{sidebarOpen: true}"
|
|
@load.window="
|
|
width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
|
|
if (width < 575.98) {
|
|
sidebarOpen = false
|
|
}" @resize.window="
|
|
width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
|
|
if (width < 575.98) {
|
|
sidebarOpen = false
|
|
}">
|
|
<div id="sidebar" x-show="sidebarOpen" x-transition:enter="oh-sidebar__transition"
|
|
x-transition:enter-start="oh-sidebar__animation--enter-start"
|
|
x-transition:enter-end="oh-sidebar__animation--enter-end" x-transition:leave="oh-sidebar__transition"
|
|
x-transition:leave-start="oh-sidebar__animation--leave-start"
|
|
x-transition:leave-end="oh-sidebar__animation--leave-end">
|
|
{% include 'sidebar.html' %}
|
|
</div>
|
|
<div id="main">
|
|
<!-- Navigation -->
|
|
<nav class="oh-navbar">
|
|
<div class="oh-wrapper oh-navbar__wrapper">
|
|
<div class="oh-navbar__toggle-container">
|
|
<a href="#" class="oh-navbar__toggle-link oh-link__unstyled" @click="sidebarOpen = !sidebarOpen">
|
|
<img src="{% static 'images/ui/menu.svg' %}" width="24" height="24" class="oh-navbar__toggle-menu" />
|
|
<span class="oh-navbar__page-title">Attendances</span>
|
|
</a>
|
|
</div>
|
|
<div class="oh-navbar__systray">
|
|
<a href="#" class="oh-navbar__notification-link">
|
|
<ion-icon name="notifications-outline" class="oh-navbar__icon"></ion-icon>
|
|
|
|
</a>
|
|
|
|
<div class="oh-dropdown" x-data="{open: false}">
|
|
<div class="oh-navbar__user-info" @click="open = !open" @click.outside="open = false">
|
|
<div class="oh-navbar__user-photo">
|
|
<img src="{% static 'images/upload/userphoto.png' %}" class="oh-navbar__user-image" />
|
|
</div>
|
|
<span class="oh-navbar__user-name">Lizaveta Ivanovna</span>
|
|
</div>
|
|
<div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open">
|
|
<ul class="oh-dropdown__items">
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link">My Profile</a>
|
|
</li>
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link">Company Information</a>
|
|
</li>
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link">Notifications</a>
|
|
</li>
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link">Employees</a>
|
|
</li>
|
|
</ul>
|
|
<hr />
|
|
<ul class="oh-dropdown__items">
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link">Log out</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</nav>
|
|
<!-- End of Navigation -->
|
|
<main>
|
|
<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
|
|
<div class="oh-main__titlebar oh-main__titlebar--left">
|
|
<h1 class="oh-main__titlebar-title">All Attendances</h1>
|
|
<a class="oh-main__titlebar-search-toggle" @click="searchShow = !searchShow">
|
|
<ion-icon name="search-outline" class="oh-main__titlebar-serach-icon"></ion-icon>
|
|
</a>
|
|
</div>
|
|
<div class="oh-main__titlebar oh-main__titlebar--right">
|
|
<div class="oh-input-group oh-input__search-group"
|
|
:class="searchShow ? 'oh-input__search-group--show' : ''">
|
|
<ion-icon name="search-outline" class="oh-input-group__icon oh-input-group__icon--left"></ion-icon>
|
|
<input type="text" class="oh-input oh-input__icon" placeholder="Search" />
|
|
</div>
|
|
<div class="oh-main__titlebar-button-container">
|
|
<div class="oh-dropdown" x-data="{open: false}">
|
|
<button class="oh-btn ml-2" @click="open = !open"><ion-icon name="filter"
|
|
class="mr-1"></ion-icon>Filter</button>
|
|
<div class="oh-dropdown__menu" x-show="open" @click.outside="open = false">
|
|
<ul class="oh-dropdown__items">
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link">Today</a>
|
|
</li>
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link">Yesterday</a>
|
|
</li>
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link">This Weeek</a>
|
|
</li>
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link">This Month</a>
|
|
</li>
|
|
<hr />
|
|
<li class="oh-dropdown__item">
|
|
<select class="oh-select oh-select--dropdown">
|
|
<option value="1">Amount</option>
|
|
<option value="2">Analytic Account</option>
|
|
<option value="3">Billing Type</option>
|
|
</select>
|
|
<select class="oh-select oh-select--dropdown">
|
|
<option value="1">is equal to</option>
|
|
<option value="2">is not equal to</option>
|
|
<option value="3">great than</option>
|
|
<option value="4">less than</option>
|
|
<option value="5">greater than or equal to</option>
|
|
<option value="6">less than or equal to</option>
|
|
<option value="7">in set</option>
|
|
<option value="8">in not set</option>
|
|
</select>
|
|
<input type="text" class="oh-input oh-input--dropdown" placeholder="Value" />
|
|
</li>
|
|
<div class="oh-dropdown__footer">
|
|
<button class="oh-btn oh-btn--secondary oh-btn--small">Apply</button>
|
|
<button class="oh-btn oh-btn--small ml-1">Add More</button>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="oh-btn-group ml-2">
|
|
<div class="oh-dropdown" x-data="{open: false}">
|
|
<button class="oh-btn oh-btn--dropdown oh-btn--secondary oh-btn--shadow" @click="open = !open"
|
|
@click.outside="open = false">Actions</button>
|
|
<div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open">
|
|
<ul class="oh-dropdown__items">
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link">Arrange</a>
|
|
</li>
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link">Forward</a>
|
|
</li>
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link">Archive</a>
|
|
</li>
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link oh-dropdown__link--danger">Delete</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="oh-wrapper">
|
|
<table class="oh-table">
|
|
<thead>
|
|
<tr>
|
|
<th><input type="checkbox" class="oh-input oh-input__checkbox" /></th>
|
|
<th>Employee</th>
|
|
<th>Date</th>
|
|
<th>Day</th>
|
|
<th>Clock In</th>
|
|
<th>In Date</th>
|
|
<th>Clock Out</th>
|
|
<th>Out Date</th>
|
|
<th>Shift</th>
|
|
<th>Min Hour</th>
|
|
<th>At Work</th>
|
|
<th>Overtime</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr draggable="true">
|
|
<td><input type="checkbox" class="oh-input oh-input__checkbox" /></td>
|
|
<td>Raskolnikov</th>
|
|
<td>28 Dec 2022</td>
|
|
<td>Wednesday</td>
|
|
<td>11:28AM</td>
|
|
<td>28 Dec 2022</td>
|
|
<td>12:38PM</td>
|
|
<td>28 Dec 2022</td>
|
|
<td>Day</td>
|
|
<td>00:00</td>
|
|
<td>00:03</td>
|
|
<td>03:00</td>
|
|
</tr>
|
|
<tr draggable="true">
|
|
<td><input type="checkbox" class="oh-input oh-input__checkbox" /></td>
|
|
<td>Razmikhin</th>
|
|
<td>28 Dec 2022</td>
|
|
<td>Wednesday</td>
|
|
<td>11:28AM</td>
|
|
<td>28 Dec 2022</td>
|
|
<td>12:38PM</td>
|
|
<td>28 Dec 2022</td>
|
|
<td>Day</td>
|
|
<td>00:00</td>
|
|
<td>00:03</td>
|
|
<td>03:00</td>
|
|
</tr>
|
|
<tr draggable="true">
|
|
<td><input type="checkbox" class="oh-input oh-input__checkbox" /></td>
|
|
<td>Sonya</th>
|
|
<td>28 Dec 2022</td>
|
|
<td>Wednesday</td>
|
|
<td>11:28AM</td>
|
|
<td>28 Dec 2022</td>
|
|
<td>12:38PM</td>
|
|
<td>28 Dec 2022</td>
|
|
<td>Day</td>
|
|
<td>00:00</td>
|
|
<td>00:03</td>
|
|
<td>03:00</td>
|
|
</tr>
|
|
<tr draggable="true">
|
|
<td><input type="checkbox" class="oh-input oh-input__checkbox" /></td>
|
|
<td>Dunya</th>
|
|
<td>28 Dec 2022</td>
|
|
<td>Wednesday</td>
|
|
<td>11:28AM</td>
|
|
<td>28 Dec 2022</td>
|
|
<td>12:38PM</td>
|
|
<td>28 Dec 2022</td>
|
|
<td>Day</td>
|
|
<td>00:00</td>
|
|
<td>00:03</td>
|
|
<td>03:00</td>
|
|
</tr>
|
|
<tr draggable="true">
|
|
<td><input type="checkbox" class="oh-input oh-input__checkbox" /></td>
|
|
<td>Nastasya</th>
|
|
<td>28 Dec 2022</td>
|
|
<td>Wednesday</td>
|
|
<td>11:28AM</td>
|
|
<td>28 Dec 2022</td>
|
|
<td>12:38PM</td>
|
|
<td>28 Dec 2022</td>
|
|
<td>Day</td>
|
|
<td>00:00</td>
|
|
<td>00:03</td>
|
|
<td>03:00</td>
|
|
</tr>
|
|
<tr draggable="true">
|
|
<td><input type="checkbox" class="oh-input oh-input__checkbox" /></td>
|
|
<td>Katerina</th>
|
|
<td>28 Dec 2022</td>
|
|
<td>Wednesday</td>
|
|
<td>11:28AM</td>
|
|
<td>28 Dec 2022</td>
|
|
<td>12:38PM</td>
|
|
<td>28 Dec 2022</td>
|
|
<td>Day</td>
|
|
<td>00:00</td>
|
|
<td>00:03</td>
|
|
<td>03:00</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="oh-pagination">
|
|
<span class="oh-pagination__page">Page 1 of 5</span>
|
|
|
|
<nav class="oh-pagination__nav">
|
|
<ul class="oh-pagination__items">
|
|
<li class="oh-pagination__item"><a href="#"
|
|
class="oh-pagination__link oh-pagination__link--active">1</a></li>
|
|
<li class="oh-pagination__item"><a href="#" class="oh-pagination__link">2</a></li>
|
|
<li class="oh-pagination__item"><a href="#" class="oh-pagination__link">3</a></li>
|
|
<li class="oh-pagination__item"><a href="#" class="oh-pagination__link">4</a></li>
|
|
<li class="oh-pagination__item"><a href="#" class="oh-pagination__link">5</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{% static 'build/js/web.frontend.min.js' %}"></script>
|
|
|
|
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
|
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |