user
235 lines
22 KiB
PHP
235 lines
22 KiB
PHP
<?php
|
|
$enablePrototypeComments = true;
|
|
include 'header.php';
|
|
?>
|
|
|
|
<!-- Główny Topbar (taki sam jak w home.php) -->
|
|
<div class="app-topbar">
|
|
<div class="d-flex align-items-center">
|
|
<div class="d-flex justify-content-center align-items-center bg-primary-custom rounded-circle me-2" style="width: 32px; height: 32px;">
|
|
<i class='bx bx-cube-alt text-white'></i>
|
|
</div>
|
|
<h1 class="app-title">Acme Corp</h1>
|
|
</div>
|
|
<div class="user-avatar shadow-sm">
|
|
<i class='bx bx-user'></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pasek tytułowy sekcji -->
|
|
<div class="container pt-4">
|
|
<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>
|
|
</a>
|
|
<h2 class="fw-bold mb-0" style="font-size: 1.25rem;">Mój Grafik</h2>
|
|
</div>
|
|
<a href="schedule-calendar.php" class="text-primary-custom d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; background: rgba(105, 108, 255, 0.1); border-radius: 8px;">
|
|
<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">
|
|
<!-- Dzień: Poniedziałek -->
|
|
<div class="schedule-day mb-3">
|
|
<h6 class="fw-bold mb-2 text-muted text-uppercase" style="font-size: 0.7rem;">Poniedziałek, 12 Sierpnia</h6>
|
|
|
|
<div class="card-custom shift-card" style="border-left: 4px solid var(--primary-color);">
|
|
<div class="p-2 px-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h5 class="fw-bold mb-0" style="font-size: 1.1rem;">08:00 - 16:00</h5>
|
|
<span class="text-primary-custom fw-semibold" style="font-size: 0.75rem;">Specjalista ds. Obsługi</span>
|
|
</div>
|
|
<span class="badge bg-label-primary">8h</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dzień: Wtorek -->
|
|
<div class="schedule-day mb-3">
|
|
<h6 class="fw-bold mb-2 text-muted text-uppercase" style="font-size: 0.7rem;">Wtorek, 13 Sierpnia</h6>
|
|
|
|
<div class="card-custom shift-card" style="border-left: 4px solid #71dd37;">
|
|
<div class="p-2 px-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<div>
|
|
<h5 class="fw-bold mb-0" style="font-size: 1.1rem;">10:00 - 18:00</h5>
|
|
<span class="text-success fw-semibold" style="font-size: 0.75rem;">Zastępca Kierownika</span>
|
|
</div>
|
|
<span class="badge bg-label-success" style="background: rgba(113, 221, 55, 0.1); color: #71dd37;">8h</span>
|
|
</div>
|
|
|
|
<!-- Notatka od managera (bardzo kompaktowa) -->
|
|
<div class="bg-light p-2 rounded text-muted d-flex align-items-start gap-2" style="font-size: 0.75rem;">
|
|
<i class='bx bx-message-square-detail text-warning mt-1'></i>
|
|
<div>
|
|
<strong class="text-dark">Anna M.:</strong> Pamiętaj o odbiorze dużej dostawy przed południem.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dzień: Środa -->
|
|
<div class="schedule-day mb-3">
|
|
<h6 class="fw-bold mb-2 text-muted text-uppercase" style="font-size: 0.7rem;">Środa, 14 Sierpnia</h6>
|
|
|
|
<div class="card-custom bg-transparent border border-dashed border-secondary opacity-50" style="box-shadow: none;">
|
|
<div class="p-2 text-center">
|
|
<span class="text-muted fw-semibold" style="font-size: 0.8rem;">Dzień wolny</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dzień: Czwartek -->
|
|
<div class="schedule-day mb-3">
|
|
<h6 class="fw-bold mb-2 text-muted text-uppercase" style="font-size: 0.7rem;">Czwartek, 15 Sierpnia</h6>
|
|
|
|
<div class="card-custom shift-card" style="border-left: 4px solid var(--primary-color);">
|
|
<div class="p-2 px-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h5 class="fw-bold mb-0" style="font-size: 1.1rem;">08:00 - 16:00</h5>
|
|
<span class="text-primary-custom fw-semibold" style="font-size: 0.75rem;">Specjalista ds. Obsługi</span>
|
|
</div>
|
|
<span class="badge bg-label-primary">8h</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php include 'footer.php'; ?>
|