feat: makieta mobilna pilota TravelLeader z profilem, opiniami i kalendarzem
This commit is contained in:
oskarn
@@ -0,0 +1,188 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
$pageTitle = 'TravelLeader - Kalendarz Dostępności';
|
||||
include 'header.php';
|
||||
?>
|
||||
|
||||
<div class="app-content">
|
||||
|
||||
<!-- Nagłówek widoku dostępności -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<h5 class="fw-bold mb-0" style="color: var(--dark-navy);">Dostępność Pilota</h5>
|
||||
<small class="text-muted" style="font-size: 0.78rem;">Zarządzaj terminami dla biur podróży</small>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-primary-custom py-1 px-3" style="width: auto; font-size: 0.8rem;" data-bs-toggle="modal" data-bs-target="#addUnavailableModal">
|
||||
<i class='bx bx-plus'></i> Dodaj blokadę
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Główna karta kalendarza -->
|
||||
<div class="section-card">
|
||||
<div class="calendar-month-header">
|
||||
<button class="btn btn-sm btn-light rounded-circle p-2 d-flex align-items-center"><i class='bx bx-chevron-left fs-5'></i></button>
|
||||
<h6 class="fw-bold mb-0" style="color: var(--dark-navy); font-size: 1rem;">Wrzesień 2027</h6>
|
||||
<button class="btn btn-sm btn-light rounded-circle p-2 d-flex align-items-center"><i class='bx bx-chevron-right fs-5'></i></button>
|
||||
</div>
|
||||
|
||||
<!-- Siatka kalendarza -->
|
||||
<div class="calendar-grid mb-2">
|
||||
<div class="calendar-day-header">Pn</div>
|
||||
<div class="calendar-day-header">Wt</div>
|
||||
<div class="calendar-day-header">Śr</div>
|
||||
<div class="calendar-day-header">Cz</div>
|
||||
<div class="calendar-day-header">Pt</div>
|
||||
<div class="calendar-day-header">Sb</div>
|
||||
<div class="calendar-day-header">Nd</div>
|
||||
|
||||
<!-- Dni poprzedniego miesiąca -->
|
||||
<div class="calendar-day-cell other-month">30</div>
|
||||
<div class="calendar-day-cell other-month">31</div>
|
||||
|
||||
<!-- Dni września -->
|
||||
<div class="calendar-day-cell blocked-day" title="Urlop prywatny">1</div>
|
||||
<div class="calendar-day-cell blocked-day" title="Urlop prywatny">2</div>
|
||||
<div class="calendar-day-cell blocked-day" title="Urlop prywatny">3</div>
|
||||
<div class="calendar-day-cell blocked-day" title="Urlop prywatny">4</div>
|
||||
<div class="calendar-day-cell free-day">5 <span class="calendar-day-dot bg-success"></span></div>
|
||||
|
||||
<div class="calendar-day-cell free-day">6 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">7 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">8 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">9 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">10 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">11 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">12 <span class="calendar-day-dot bg-success"></span></div>
|
||||
|
||||
<div class="calendar-day-cell free-day">13 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">14 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">15 <span class="calendar-day-dot bg-success"></span></div>
|
||||
|
||||
<!-- Wycieczka z systemu: 16-24.09.2027 -->
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">16 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">17 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">18 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">19 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">20 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">21 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">22 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">23 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
<div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">24 <span class="calendar-day-dot bg-primary"></span></div>
|
||||
|
||||
<div class="calendar-day-cell free-day">25 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">26 <span class="calendar-day-dot bg-success"></span></div>
|
||||
|
||||
<div class="calendar-day-cell free-day">27 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">28 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">29 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell free-day">30 <span class="calendar-day-dot bg-success"></span></div>
|
||||
<div class="calendar-day-cell other-month">1</div>
|
||||
<div class="calendar-day-cell other-month">2</div>
|
||||
<div class="calendar-day-cell other-month">3</div>
|
||||
</div>
|
||||
|
||||
<!-- Legenda -->
|
||||
<div class="calendar-legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-color-box" style="background-color: var(--primary);"></div>
|
||||
<span>Wycieczka potwierdzona</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color-box" style="background-color: #ef4444;"></div>
|
||||
<span>Niedostępny / Urlop</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color-box" style="background-color: #22c55e;"></div>
|
||||
<span>Dostępny dla biur</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lista wpisów w wybranym miesiącu -->
|
||||
<h6 class="fw-bold mb-2 mt-3" style="color: var(--dark-navy); font-size: 0.9rem;">Wydarzenia we Wrześniu 2027</h6>
|
||||
|
||||
<!-- Wycieczka potwierdzona -->
|
||||
<div class="card border-0 rounded-4 p-3 mb-2 shadow-sm" style="background: #ffffff; border-left: 4px solid var(--primary) !important;">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<span class="badge mb-1" style="background: #eff0fe; color: var(--primary); font-size: 0.72rem;">Wycieczka przypisana</span>
|
||||
<h6 class="fw-bold mb-1" style="font-size: 0.92rem; color: var(--dark-navy);">12 oskar prod (Włochy)</h6>
|
||||
<small class="text-muted d-block" style="font-size: 0.76rem;"><i class='bx bx-time-five'></i> 16 - 24 Września 2027 (9 dni)</small>
|
||||
</div>
|
||||
<a href="index.php" class="btn btn-sm btn-outline-primary py-1 px-2" style="font-size: 0.75rem;">Wycieczka ></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prywatna niedostępność -->
|
||||
<div class="card border-0 rounded-4 p-3 mb-3 shadow-sm" style="background: #ffffff; border-left: 4px solid #ef4444 !important;">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<span class="badge mb-1" style="background: #fee2e2; color: #ef4444; font-size: 0.72rem;">Niedostępność pilota</span>
|
||||
<h6 class="fw-bold mb-1" style="font-size: 0.92rem; color: var(--dark-navy);">Urlop prywatny / sprawy rodzinne</h6>
|
||||
<small class="text-muted d-block" style="font-size: 0.76rem;"><i class='bx bx-time-five'></i> 01 - 04 Września 2027 (4 dni)</small>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-danger py-1 px-2" style="font-size: 0.75rem;" onclick="confirm('Czy chcesz usunąć tę blokadę terminu?')"><i class='bx bx-trash'></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Informacja o integracji z bazą biur -->
|
||||
<div class="p-3 rounded-4" style="background-color: #f1f3fa;">
|
||||
<div class="d-flex align-items-center gap-2 mb-1">
|
||||
<i class='bx bx-info-circle text-primary fs-5'></i>
|
||||
<span class="fw-bold" style="font-size: 0.82rem; color: var(--dark-navy);">Jak działa to dla biur podróży?</span>
|
||||
</div>
|
||||
<p class="text-muted mb-0" style="font-size: 0.75rem; line-height: 1.4;">
|
||||
Wyszukiwarka w aplikacji webowej pozwala pracownikowi biura wybrać np. „Termin: 05-15 Wrz 2027 + Kraj: Włochy”. Twój profil pojawi się na szczycie wyników, ponieważ zaznaczyłeś te dni jako wolne!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div><!-- /.app-content -->
|
||||
|
||||
<!-- Modal dodawania niedostępności -->
|
||||
<div class="modal fade" id="addUnavailableModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content rounded-4 border-0">
|
||||
<div class="modal-header border-bottom">
|
||||
<h6 class="modal-title fw-bold" style="color: var(--dark-navy);">Zgłoś niedostępność / Urlop</h6>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
|
||||
</div>
|
||||
<div class="modal-body p-3">
|
||||
<div class="mb-3">
|
||||
<label class="form-label-custom">Powód niedostępności</label>
|
||||
<select class="form-select form-control-custom">
|
||||
<option selected>Urlop prywatny</option>
|
||||
<option>Zlecenie poza systemem</option>
|
||||
<option>Szkolenie / Egzamin</option>
|
||||
<option>Sprawy zdrowotne</option>
|
||||
<option>Inny powód</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-6">
|
||||
<label class="form-label-custom">Data od</label>
|
||||
<input type="date" class="form-control-custom" value="2027-10-01">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label-custom">Data do</label>
|
||||
<input type="date" class="form-control-custom" value="2027-10-08">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label-custom">Notatka prywatna (opcjonalnie)</label>
|
||||
<textarea class="form-control-custom" rows="2" placeholder="Widoczna tylko dla Ciebie..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer border-top p-2">
|
||||
<button type="button" class="btn btn-secondary-custom py-2 flex-grow-1" data-bs-dismiss="modal">Anuluj</button>
|
||||
<button type="button" class="btn-primary-custom py-2 flex-grow-1" data-bs-dismiss="modal" onclick="alert('Pomyślnie zablokowano termin w kalendarzu. Biura nie będą wysyłać zapytań na ten okres.');">
|
||||
Zapisz termin
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include 'footer.php'; ?>
|
||||
Reference in New Issue
Block a user