feat: date selector w Grafik pracy, Tab historii oraz statystyki w Urlopy
This commit is contained in:
user
@@ -295,3 +295,48 @@ html {
|
||||
color: #8592a3 !important;
|
||||
}
|
||||
|
||||
/* Custom Nav Pills */
|
||||
.nav-pills .nav-link {
|
||||
background-color: var(--white);
|
||||
color: var(--text-muted);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
|
||||
background-color: var(--primary-color) !important;
|
||||
color: var(--white) !important;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(105, 108, 255, 0.4) !important;
|
||||
}
|
||||
|
||||
/* Floating Action Button (FAB) */
|
||||
.fab-wrapper {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
max-width: 500px; /* same as body max-width */
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 20px;
|
||||
z-index: 1050;
|
||||
pointer-events: none; /* Allows clicking through the wrapper */
|
||||
}
|
||||
|
||||
.fab-btn {
|
||||
pointer-events: auto;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
box-shadow: 0 0.5rem 1rem rgba(105, 108, 255, 0.4);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fab-btn:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ include 'header.php';
|
||||
|
||||
<!-- Pasek tytułowy sekcji -->
|
||||
<div class="container pt-4">
|
||||
<div class="d-flex justify-content-between align-items-center pb-3 mb-4" style="border-bottom: 1px solid var(--border-color);">
|
||||
<div class="d-flex justify-content-between align-items-center pb-3" style="border-bottom: 1px solid var(--border-color);">
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="home.php" class="text-dark me-2 d-flex align-items-center justify-content-center" style="width: 32px; height: 32px; background: rgba(0,0,0,0.05); border-radius: 50%;">
|
||||
<i class='bx bx-arrow-back fs-4'></i>
|
||||
@@ -29,6 +29,134 @@ include 'header.php';
|
||||
<i class='bx bx-calendar fs-4'></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Filter Bar (Zwijany picker zakresu dat w stylu aplikacji) -->
|
||||
<div class="card border-0 shadow-sm mb-4" style="border-radius: 16px;">
|
||||
<!-- Header (Collapsed view) -->
|
||||
<div class="card-header bg-white border-0 p-3 d-flex justify-content-between align-items-center" style="border-radius: 16px; cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#filterBody" aria-expanded="false">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="d-flex justify-content-center align-items-center me-3" style="width: 44px; height: 44px; border-radius: 12px; background-color: rgba(105, 108, 255, 0.1);">
|
||||
<i class='bx bx-search fs-5' style="color: #696cff;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-0 fw-semibold" style="color: #566A7F; font-size: 1.1rem;">Okres grafiku</h6>
|
||||
<div class="d-flex align-items-center mt-1">
|
||||
<i class='bx bx-calendar-event me-1' style="color: #696cff; font-size: 0.8rem;"></i>
|
||||
<span style="font-size: 0.85rem; color: #696cff;">12 Sie 2024 → 18 Sie 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<i class='bx bx-chevron-down fs-4 text-muted'></i>
|
||||
</div>
|
||||
|
||||
<!-- Body (Expanded) -->
|
||||
<div id="filterBody" class="collapse">
|
||||
<div class="card-body pt-0 px-3 pb-3">
|
||||
|
||||
<!-- Data od -->
|
||||
<label class="form-label fw-medium" style="font-size: 0.85rem; color: #566A7F; margin-top: 10px;">Data od</label>
|
||||
<div class="input-group mb-3 dropdown">
|
||||
<span class="input-group-text bg-white text-muted" style="border-radius: 8px 0 0 8px; border-color: #d9dee3;"><i class='bx bx-calendar'></i></span>
|
||||
<input type="text" class="form-control bg-white dropdown-toggle" value="2024-08-12" readonly data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" style="border-radius: 0 8px 8px 0; border-color: #d9dee3; cursor: pointer;">
|
||||
|
||||
<!-- SneatDatePicker Mock -->
|
||||
<div class="dropdown-menu p-3 shadow border-0" style="border-radius: 8px; min-width: 300px; z-index: 1050; margin-top: 4px !important;">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<a href="#" class="btn btn-sm btn-icon text-secondary" style="padding: 4px;"><i class='bx bx-chevron-left fs-4'></i></a>
|
||||
<div class="fw-bold d-flex align-items-center gap-1" style="color: #566A7F; font-size: 1rem;">
|
||||
Sierpień 2024
|
||||
<div class="d-flex flex-column ms-1">
|
||||
<i class='bx bx-chevron-up' style="font-size: 1rem; line-height: 0.5; cursor: pointer; color: #566a7f;"></i>
|
||||
<i class='bx bx-chevron-down' style="font-size: 1rem; line-height: 0.5; cursor: pointer; color: #566a7f;"></i>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="btn btn-sm btn-icon text-secondary" style="padding: 4px;"><i class='bx bx-chevron-right fs-4'></i></a>
|
||||
</div>
|
||||
<div class="d-flex mb-2">
|
||||
<div class="text-center fw-semibold" style="width: 14.28%; font-size: 0.75rem; color: #a1acb8;">Pn</div><div class="text-center fw-semibold" style="width: 14.28%; font-size: 0.75rem; color: #a1acb8;">Wt</div><div class="text-center fw-semibold" style="width: 14.28%; font-size: 0.75rem; color: #a1acb8;">Śr</div><div class="text-center fw-semibold" style="width: 14.28%; font-size: 0.75rem; color: #a1acb8;">Cz</div><div class="text-center fw-semibold" style="width: 14.28%; font-size: 0.75rem; color: #a1acb8;">Pt</div><div class="text-center fw-semibold" style="width: 14.28%; font-size: 0.75rem; color: #a1acb8;">Sb</div><div class="text-center fw-semibold" style="width: 14.28%; font-size: 0.75rem; color: #a1acb8;">Nd</div>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap" style="row-gap: 8px;">
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #c7cdd4; text-align: center;">29</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #c7cdd4; text-align: center;">30</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #c7cdd4; text-align: center;">31</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">1</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">2</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">3</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">4</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">5</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">6</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">7</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">8</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">9</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">10</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">11</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; background-color: #696cff; color: #fff; text-align: center; border-radius: 6px; font-weight: 600; box-shadow: 0 2px 4px rgba(105, 108, 255, 0.4);">12</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 30px; border: 1px solid #696cff; color: #566A7F; text-align: center; border-radius: 6px;">13</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">14</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">15</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">16</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">17</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">18</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data do -->
|
||||
<label class="form-label fw-medium" style="font-size: 0.85rem; color: #566A7F;">Data do</label>
|
||||
<div class="input-group mb-4 dropdown">
|
||||
<span class="input-group-text bg-white text-muted" style="border-radius: 8px 0 0 8px; border-color: #d9dee3;"><i class='bx bx-calendar'></i></span>
|
||||
<input type="text" class="form-control bg-white dropdown-toggle" value="2024-08-18" readonly data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" style="border-radius: 0 8px 8px 0; border-color: #d9dee3; cursor: pointer;">
|
||||
|
||||
<!-- SneatDatePicker Mock -->
|
||||
<div class="dropdown-menu p-3 shadow border-0" style="border-radius: 8px; min-width: 300px; z-index: 1050; margin-top: 4px !important;">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<a href="#" class="btn btn-sm btn-icon text-secondary" style="padding: 4px;"><i class='bx bx-chevron-left fs-4'></i></a>
|
||||
<div class="fw-bold d-flex align-items-center gap-1" style="color: #566A7F; font-size: 1rem;">
|
||||
Sierpień 2024
|
||||
<div class="d-flex flex-column ms-1">
|
||||
<i class='bx bx-chevron-up' style="font-size: 1rem; line-height: 0.5; cursor: pointer; color: #566a7f;"></i>
|
||||
<i class='bx bx-chevron-down' style="font-size: 1rem; line-height: 0.5; cursor: pointer; color: #566a7f;"></i>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="btn btn-sm btn-icon text-secondary" style="padding: 4px;"><i class='bx bx-chevron-right fs-4'></i></a>
|
||||
</div>
|
||||
<div class="d-flex mb-2">
|
||||
<div class="text-center fw-semibold" style="width: 14.28%; font-size: 0.75rem; color: #a1acb8;">Pn</div><div class="text-center fw-semibold" style="width: 14.28%; font-size: 0.75rem; color: #a1acb8;">Wt</div><div class="text-center fw-semibold" style="width: 14.28%; font-size: 0.75rem; color: #a1acb8;">Śr</div><div class="text-center fw-semibold" style="width: 14.28%; font-size: 0.75rem; color: #a1acb8;">Cz</div><div class="text-center fw-semibold" style="width: 14.28%; font-size: 0.75rem; color: #a1acb8;">Pt</div><div class="text-center fw-semibold" style="width: 14.28%; font-size: 0.75rem; color: #a1acb8;">Sb</div><div class="text-center fw-semibold" style="width: 14.28%; font-size: 0.75rem; color: #a1acb8;">Nd</div>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap" style="row-gap: 8px;">
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #c7cdd4; text-align: center;">29</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #c7cdd4; text-align: center;">30</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #c7cdd4; text-align: center;">31</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">1</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">2</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">3</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">4</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">5</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">6</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">7</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">8</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">9</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">10</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">11</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">12</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 30px; border: 1px solid #696cff; color: #566A7F; text-align: center; border-radius: 6px;">13</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">14</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">15</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">16</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; color: #566A7F; text-align: center;">17</div></div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="width: 14.28%;"><div style="width: 32px; height: 32px; line-height: 32px; background-color: #696cff; color: #fff; text-align: center; border-radius: 6px; font-weight: 600; box-shadow: 0 2px 4px rgba(105, 108, 255, 0.4);">18</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn w-100 mb-3 fw-medium text-white" style="border-radius: 8px; background-color: #696cff; border-color: #696cff;">Szukaj</button>
|
||||
|
||||
<div class="text-start">
|
||||
<a href="#" class="text-decoration-none fw-medium" style="font-size: 0.85rem; color: #566A7F;">Wyczyść filtry i daty</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container pb-4">
|
||||
|
||||
@@ -30,83 +30,186 @@ include 'header.php';
|
||||
|
||||
<div class="container pb-4">
|
||||
|
||||
<!-- Akcja Główna: Wniosek o urlop -->
|
||||
<div class="mb-4">
|
||||
<button class="btn btn-primary w-100 py-3 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#vacationModal" style="border-radius: var(--radius-md);">
|
||||
<i class='bx bx-plus-circle fs-5 me-1 align-middle'></i> Nowy wniosek o urlop
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Lista Nadchodzących Urlopów -->
|
||||
<h6 class="fw-bold mb-3 text-muted text-uppercase small">Nadchodzące wnioski</h6>
|
||||
|
||||
<!-- Wniosek 1: Zaakceptowany -->
|
||||
<div class="card-custom mb-3 border-0 shadow-sm" style="border-left: 4px solid #71dd37 !important;">
|
||||
<div class="p-3">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<span class="badge bg-label-success mb-1">Zaakceptowany</span>
|
||||
<h5 class="fw-bold mb-0" style="font-size: 1.1rem;">Urlop wypoczynkowy</h5>
|
||||
<!-- Statystyki Urlopowe (Dashboard Widget) -->
|
||||
<div class="card border-0 shadow-sm mb-4" style="border-radius: 16px;">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="d-flex justify-content-center align-items-center me-2" style="width: 32px; height: 32px; border-radius: 8px; background-color: rgba(105, 108, 255, 0.1);">
|
||||
<i class='bx bx-pie-chart-alt-2' style="color: #696cff; font-size: 1.2rem;"></i>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-0" style="color: #566A7F; font-size: 1.05rem;">Pula urlopowa</h6>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<span class="fw-bold text-dark fs-5">5</span>
|
||||
<span class="text-muted small d-block" style="margin-top: -5px;">dni</span>
|
||||
<select class="form-select form-select-sm border-0 bg-light text-muted fw-semibold" style="width: auto; border-radius: 8px; cursor: pointer;">
|
||||
<option value="2024" selected>Rok: 2024</option>
|
||||
<option value="2023">Rok: 2023</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-end mb-2 mt-1">
|
||||
<div>
|
||||
<span class="text-muted small d-block mb-1">Dostępne do wykorzystania</span>
|
||||
<h3 class="mb-0 fw-bold" style="color: #696cff;">14 <span class="fs-6 fw-semibold text-muted">z 26 dni</span></h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center text-muted small mt-3">
|
||||
<i class='bx bx-calendar me-2 fs-5 text-primary-custom'></i>
|
||||
<span class="fw-semibold">12 Sierpnia 2026 - 16 Sierpnia 2026</span>
|
||||
<!-- Progress Bar -->
|
||||
<div class="progress mb-2 mt-3" style="height: 10px; border-radius: 10px; background-color: rgba(105, 108, 255, 0.15);">
|
||||
<div class="progress-bar" role="progressbar" style="width: 46%; background-color: #696cff; border-radius: 10px;" aria-valuenow="12" aria-valuemin="0" aria-valuemax="26"></div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between text-muted" style="font-size: 0.8rem;">
|
||||
<span class="fw-medium">Wykorzystano: 12 dni</span>
|
||||
<span class="fw-medium">Zaległy: 0 dni</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wniosek 2: Oczekujący -->
|
||||
<div class="card-custom mb-3 border-0 shadow-sm" style="border-left: 4px solid #8592a3 !important;">
|
||||
<div class="p-3">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<span class="badge bg-label-secondary mb-1">Oczekuje na akceptację</span>
|
||||
<h5 class="fw-bold mb-0" style="font-size: 1.1rem;">Urlop wypoczynkowy</h5>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<span class="fw-bold text-dark fs-5">2</span>
|
||||
<span class="text-muted small d-block" style="margin-top: -5px;">dni</span>
|
||||
|
||||
<!-- Tabs: Nadchodzące / Historia -->
|
||||
<ul class="nav nav-pills nav-justified mb-4" id="vacationTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active fw-bold shadow-sm" id="upcoming-tab" data-bs-toggle="pill" data-bs-target="#upcoming" type="button" role="tab" aria-controls="upcoming" aria-selected="true" style="border-radius: 8px;">Nadchodzące</button>
|
||||
</li>
|
||||
<li class="nav-item ms-2" role="presentation">
|
||||
<button class="nav-link fw-bold shadow-sm" id="history-tab" data-bs-toggle="pill" data-bs-target="#history" type="button" role="tab" aria-controls="history" aria-selected="false" style="border-radius: 8px;">Historia</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content p-0 m-0 border-0" id="vacationTabsContent">
|
||||
<!-- ZAKŁADKA 1: Nadchodzące -->
|
||||
<div class="tab-pane fade show active" id="upcoming" role="tabpanel" aria-labelledby="upcoming-tab">
|
||||
|
||||
<!-- Wniosek 1: Zaakceptowany -->
|
||||
<div class="card-custom mb-3 border-0 shadow-sm" style="border-left: 4px solid #71dd37 !important;">
|
||||
<div class="p-3">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<span class="badge bg-label-success mb-1">Zaakceptowany</span>
|
||||
<h5 class="fw-bold mb-0" style="font-size: 1.1rem;">Urlop wypoczynkowy</h5>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<span class="fw-bold text-dark fs-5">5</span>
|
||||
<span class="text-muted small d-block" style="margin-top: -5px;">dni</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center text-muted small mt-3">
|
||||
<i class='bx bx-calendar me-2 fs-5 text-primary-custom'></i>
|
||||
<span class="fw-semibold">12 Sierpnia 2026 - 16 Sierpnia 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center text-muted small mt-3">
|
||||
<i class='bx bx-calendar me-2 fs-5 text-primary-custom'></i>
|
||||
<span class="fw-semibold">27 Sierpnia 2026 - 28 Sierpnia 2026</span>
|
||||
|
||||
<!-- Wniosek 2: Oczekujący -->
|
||||
<div class="card-custom mb-3 border-0 shadow-sm" style="border-left: 4px solid #8592a3 !important;">
|
||||
<div class="p-3">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<span class="badge bg-label-secondary mb-1">Oczekuje na akceptację</span>
|
||||
<h5 class="fw-bold mb-0" style="font-size: 1.1rem;">Urlop wypoczynkowy</h5>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<span class="fw-bold text-dark fs-5">2</span>
|
||||
<span class="text-muted small d-block" style="margin-top: -5px;">dni</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center text-muted small mt-3">
|
||||
<i class='bx bx-calendar me-2 fs-5 text-primary-custom'></i>
|
||||
<span class="fw-semibold">27 Sierpnia 2026 - 28 Sierpnia 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wniosek 3: Odrzucony -->
|
||||
<div class="card-custom mb-3 border-0 shadow-sm" style="border-left: 4px solid #ff3e1d !important;">
|
||||
<div class="p-3">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<span class="badge bg-label-danger mb-1">Odrzucony</span>
|
||||
<h5 class="fw-bold mb-0" style="font-size: 1.1rem;">Urlop na żądanie</h5>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<span class="fw-bold text-dark fs-5">1</span>
|
||||
<span class="text-muted small d-block" style="margin-top: -5px;">dzień</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center text-muted small mt-3 mb-2">
|
||||
<i class='bx bx-calendar me-2 fs-5 text-primary-custom'></i>
|
||||
<span class="fw-semibold">05 Września 2026</span>
|
||||
</div>
|
||||
|
||||
<div class="bg-light p-2 rounded text-muted small d-flex align-items-start gap-2 mt-2">
|
||||
<i class='bx bx-info-circle text-danger mt-1'></i>
|
||||
<div>
|
||||
<strong class="text-dark">Kierownik:</strong> Niestety w tym terminie mamy inwentaryzację, brak możliwości udzielenia urlopu.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wniosek 3: Odrzucony -->
|
||||
<div class="card-custom mb-3 border-0 shadow-sm" style="border-left: 4px solid #ff3e1d !important;">
|
||||
<div class="p-3">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<span class="badge bg-label-danger mb-1">Odrzucony</span>
|
||||
<h5 class="fw-bold mb-0" style="font-size: 1.1rem;">Urlop na żądanie</h5>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<span class="fw-bold text-dark fs-5">1</span>
|
||||
<span class="text-muted small d-block" style="margin-top: -5px;">dzień</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ZAKŁADKA 2: Historia -->
|
||||
<div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history-tab">
|
||||
|
||||
<div class="d-flex align-items-center text-muted small mt-3 mb-2">
|
||||
<i class='bx bx-calendar me-2 fs-5 text-primary-custom'></i>
|
||||
<span class="fw-semibold">05 Września 2026</span>
|
||||
<!-- FILTRY HISTORII -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4 gap-2">
|
||||
<select class="form-select bg-white shadow-sm border-0" style="border-radius: 8px; color: #566A7F; font-weight: 500;">
|
||||
<option value="2024" selected>Rok: 2024</option>
|
||||
<option value="2023">Rok: 2023</option>
|
||||
<option value="2022">Rok: 2022</option>
|
||||
</select>
|
||||
<select class="form-select bg-white shadow-sm border-0" style="border-radius: 8px; color: #566A7F; font-weight: 500;">
|
||||
<option value="all" selected>Status: Wszystkie</option>
|
||||
<option value="accepted">Wykorzystane</option>
|
||||
<option value="rejected">Odrzucone</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="bg-light p-2 rounded text-muted small d-flex align-items-start gap-2 mt-2">
|
||||
<i class='bx bx-info-circle text-danger mt-1'></i>
|
||||
<div>
|
||||
<strong class="text-dark">Kierownik:</strong> Niestety w tym terminie mamy inwentaryzację, brak możliwości udzielenia urlopu.
|
||||
|
||||
<!-- Historia: Wykorzystany -->
|
||||
<div class="card-custom mb-3 border-0 shadow-sm" style="border-left: 4px solid #d9dee3 !important;">
|
||||
<div class="p-3">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<span class="badge bg-label-secondary mb-1">Wykorzystany</span>
|
||||
<h5 class="fw-bold mb-0 text-muted" style="font-size: 1.1rem;">Urlop wypoczynkowy</h5>
|
||||
</div>
|
||||
<div class="text-end text-muted">
|
||||
<span class="fw-bold fs-5">14</span>
|
||||
<span class="small d-block" style="margin-top: -5px;">dni</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center text-muted small mt-3">
|
||||
<i class='bx bx-calendar me-2 fs-5'></i>
|
||||
<span>01 Lipca 2024 - 14 Lipca 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Historia: Odrzucony -->
|
||||
<div class="card-custom mb-3 border-0 shadow-sm" style="border-left: 4px solid #d9dee3 !important; opacity: 0.8;">
|
||||
<div class="p-3">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<span class="badge bg-label-danger mb-1 opacity-75">Odrzucony</span>
|
||||
<h5 class="fw-bold mb-0 text-muted" style="font-size: 1.1rem;">Urlop na żądanie</h5>
|
||||
</div>
|
||||
<div class="text-end text-muted">
|
||||
<span class="fw-bold fs-5">1</span>
|
||||
<span class="small d-block" style="margin-top: -5px;">dzień</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center text-muted small mt-3">
|
||||
<i class='bx bx-calendar me-2 fs-5'></i>
|
||||
<span>15 Maja 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -171,6 +274,13 @@ include 'header.php';
|
||||
<!-- Flatpickr Theme (optional, fits well) -->
|
||||
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css">
|
||||
|
||||
<!-- Floating Action Button (FAB) dla nowego wniosku -->
|
||||
<div class="fab-wrapper">
|
||||
<button class="btn btn-primary fab-btn" data-bs-toggle="modal" data-bs-target="#vacationModal" aria-label="Nowy wniosek o urlop">
|
||||
<i class='bx bx-plus'></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<?php include 'footer.php'; ?>
|
||||
|
||||
<!-- Flatpickr JS -->
|
||||
|
||||
Reference in New Issue
Block a user