feat: date selector w Grafik pracy, Tab historii oraz statystyki w Urlopy
This commit is contained in:
user
@@ -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