fix: poprawki date picker w grafik feat: alert icon w topbar

prototype/magico-pracownik/home.php

@@ -5,14 +5,67 @@ include 'header.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;">
+        <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 class="d-flex align-items-center gap-3">
+        <!-- Powiadomienia -->
+        <div class="dropdown">
+            <div class="position-relative" style="cursor: pointer;" data-bs-toggle="dropdown" aria-expanded="false">
+                <i class='bx bx-bell fs-4 text-muted'></i>
+                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger border border-white" style="font-size: 0.65rem; padding: 0.3em 0.45em;">
+                    1
+                </span>
+            </div>
+            
+            <div class="dropdown-menu dropdown-menu-end p-0 border-0 mt-2" style="border-radius: 16px; width: 340px; box-shadow: 0 0.5rem 1.5rem rgba(105, 108, 255, 0.15); overflow: hidden; z-index: 1050; margin-right: -40px;">
+                <div class="p-3 border-bottom d-flex justify-content-between align-items-center" style="background-color: #fcfcfd;">
+                    <h6 class="mb-0 fw-bold" style="color: #566A7F;">Powiadomienia</h6>
+                    <span class="badge bg-label-danger rounded-pill">1 nowe</span>
+                </div>
+                
+                <div class="list-group list-group-flush" style="max-height: 350px; overflow-y: auto;">
+                    
+                    <!-- Nieprzeczytane -->
+                    <a href="vacations.php" class="list-group-item list-group-item-action d-flex align-items-start p-3 border-0" style="background-color: rgba(105, 108, 255, 0.03); border-bottom: 1px solid rgba(0,0,0,0.03) !important;">
+                        <div class="d-flex justify-content-center align-items-center rounded-circle flex-shrink-0 me-3" style="width: 40px; height: 40px; background-color: rgba(255, 62, 29, 0.1); color: #ff3e1d;">
+                            <i class='bx bx-x-circle fs-5'></i>
+                        </div>
+                        <div class="flex-grow-1">
+                            <h6 class="mb-1 fw-bold" style="font-size: 0.9rem; color: #566A7F;">Wniosek odrzucony</h6>
+                            <p class="mb-1 small text-muted" style="line-height: 1.4;">Kierownik odrzucił Twój wniosek o urlop na żądanie (05 Wrz).</p>
+                            <small class="text-primary-custom fw-semibold" style="font-size: 0.75rem;">10 min temu</small>
+                        </div>
+                        <div class="flex-shrink-0 ms-2 mt-2">
+                            <div style="width: 8px; height: 8px; background-color: #696cff; border-radius: 50%;"></div>
+                        </div>
+                    </a>
+
+                    <!-- Przeczytane -->
+                    <a href="vacations.php" class="list-group-item list-group-item-action d-flex align-items-start p-3 border-0">
+                        <div class="d-flex justify-content-center align-items-center rounded-circle flex-shrink-0 me-3" style="width: 40px; height: 40px; background-color: rgba(113, 221, 55, 0.1); color: #71dd37;">
+                            <i class='bx bx-check-circle fs-5'></i>
+                        </div>
+                        <div class="flex-grow-1">
+                            <h6 class="mb-1 fw-semibold" style="font-size: 0.9rem; color: #566A7F;">Wniosek zaakceptowany</h6>
+                            <p class="mb-1 small text-muted" style="line-height: 1.4;">Twój urlop wypoczynkowy (12-16 Sie) został pomyślnie zatwierdzony.</p>
+                            <small class="text-muted" style="font-size: 0.75rem;">Wczoraj</small>
+                        </div>
+                    </a>
+                    
+                </div>
+                
+                <div class="p-3 border-top text-center" style="background-color: #fcfcfd;">
+                    <button class="btn btn-primary btn-sm w-100 fw-bold" style="border-radius: 8px;">Zobacz wszystkie</button>
+                </div>
+            </div>
+        </div>
+        
+        <div class="user-avatar shadow-sm">
+            <i class='bx bx-user'></i>
+        </div>
     </div>
 </div>
 

prototype/magico-pracownik/schedule.php

@@ -11,8 +11,62 @@ include 'header.php';
         </div>
         <h1 class="app-title">Acme Corp</h1>
     </div>
-    <div class="user-avatar shadow-sm">
-        <i class='bx bx-user'></i>
+    <div class="d-flex align-items-center gap-3">
+        <!-- Powiadomienia -->
+        <div class="dropdown">
+            <div class="position-relative" style="cursor: pointer;" data-bs-toggle="dropdown" aria-expanded="false">
+                <i class='bx bx-bell fs-4 text-muted'></i>
+                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger border border-white" style="font-size: 0.65rem; padding: 0.3em 0.45em;">
+                    1
+                </span>
+            </div>
+            
+            <div class="dropdown-menu dropdown-menu-end p-0 border-0 mt-2" style="border-radius: 16px; width: 340px; box-shadow: 0 0.5rem 1.5rem rgba(105, 108, 255, 0.15); overflow: hidden; z-index: 1050; margin-right: -40px;">
+                <div class="p-3 border-bottom d-flex justify-content-between align-items-center" style="background-color: #fcfcfd;">
+                    <h6 class="mb-0 fw-bold" style="color: #566A7F;">Powiadomienia</h6>
+                    <span class="badge bg-label-danger rounded-pill">1 nowe</span>
+                </div>
+                
+                <div class="list-group list-group-flush" style="max-height: 350px; overflow-y: auto;">
+                    
+                    <!-- Nieprzeczytane -->
+                    <a href="vacations.php" class="list-group-item list-group-item-action d-flex align-items-start p-3 border-0" style="background-color: rgba(105, 108, 255, 0.03); border-bottom: 1px solid rgba(0,0,0,0.03) !important;">
+                        <div class="d-flex justify-content-center align-items-center rounded-circle flex-shrink-0 me-3" style="width: 40px; height: 40px; background-color: rgba(255, 62, 29, 0.1); color: #ff3e1d;">
+                            <i class='bx bx-x-circle fs-5'></i>
+                        </div>
+                        <div class="flex-grow-1">
+                            <h6 class="mb-1 fw-bold" style="font-size: 0.9rem; color: #566A7F;">Wniosek odrzucony</h6>
+                            <p class="mb-1 small text-muted" style="line-height: 1.4;">Kierownik odrzucił Twój wniosek o urlop na żądanie (05 Wrz).</p>
+                            <small class="text-primary-custom fw-semibold" style="font-size: 0.75rem;">10 min temu</small>
+                        </div>
+                        <div class="flex-shrink-0 ms-2 mt-2">
+                            <div style="width: 8px; height: 8px; background-color: #696cff; border-radius: 50%;"></div>
+                        </div>
+                    </a>
+
+                    <!-- Przeczytane -->
+                    <a href="vacations.php" class="list-group-item list-group-item-action d-flex align-items-start p-3 border-0">
+                        <div class="d-flex justify-content-center align-items-center rounded-circle flex-shrink-0 me-3" style="width: 40px; height: 40px; background-color: rgba(113, 221, 55, 0.1); color: #71dd37;">
+                            <i class='bx bx-check-circle fs-5'></i>
+                        </div>
+                        <div class="flex-grow-1">
+                            <h6 class="mb-1 fw-semibold" style="font-size: 0.9rem; color: #566A7F;">Wniosek zaakceptowany</h6>
+                            <p class="mb-1 small text-muted" style="line-height: 1.4;">Twój urlop wypoczynkowy (12-16 Sie) został pomyślnie zatwierdzony.</p>
+                            <small class="text-muted" style="font-size: 0.75rem;">Wczoraj</small>
+                        </div>
+                    </a>
+                    
+                </div>
+                
+                <div class="p-3 border-top text-center" style="background-color: #fcfcfd;">
+                    <button class="btn btn-primary btn-sm w-100 fw-bold" style="border-radius: 8px;">Zobacz wszystkie</button>
+                </div>
+            </div>
+        </div>
+        
+        <div class="user-avatar shadow-sm">
+            <i class='bx bx-user'></i>
+        </div>
     </div>
 </div>
 
@@ -25,36 +79,47 @@ include 'header.php';
             </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 class="d-flex align-items-center gap-2">
+            <!-- Ikona filtrowania (Toggle zaawansowanych) -->
+            <button class="btn btn-sm text-primary-custom d-flex align-items-center justify-content-center p-0" style="width: 36px; height: 36px; background: rgba(105, 108, 255, 0.1); border-radius: 8px; border: none;" data-bs-toggle="collapse" data-bs-target="#advancedFilters" aria-expanded="false">
+                <i class='bx bx-filter fs-4'></i>
+            </button>
+            <a href="schedule-calendar.php" class="text-primary-custom d-flex align-items-center justify-content-center p-0 text-decoration-none" 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>
     </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 &rarr; 18 Sie 2024</span>
-                    </div>
-                </div>
-            </div>
-            <i class='bx bx-chevron-down fs-4 text-muted'></i>
-        </div>
+    <!-- Szybki wybór okresu pod spodem -->
+    <div class="mb-4 pt-3 d-flex justify-content-between align-items-center">
+        <h6 class="mb-0 text-muted small text-uppercase fw-bold">Wybierz okres</h6>
+        <select class="form-select form-select-sm border-0 bg-white shadow-sm fw-semibold text-primary-custom" style="border-radius: 8px; cursor: pointer; width: auto; padding: 0.4rem 2rem 0.4rem 0.8rem; box-shadow: 0 0.125rem 0.25rem rgba(161, 172, 184, 0.15) !important;">
+            <optgroup label="Tygodnie">
+                <option value="week_current">Bieżący tydzień</option>
+                <option value="week_next">Następny tydzień</option>
+                <option value="week_prev">Poprzedni tydzień</option>
+            </optgroup>
+            <optgroup label="Miesiące">
+                <option value="month_current" selected>Bieżący miesiąc</option>
+                <option value="month_next">Następny miesiąc</option>
+                <option value="month_prev">Poprzedni miesiąc</option>
+            </optgroup>
+        </select>
+    </div>
 
-        <!-- Body (Expanded) -->
-        <div id="filterBody" class="collapse">
-            <div class="card-body pt-0 px-3 pb-3">
+    <!-- Zaawansowane filtry (ukryte domyślnie, otwierane przez ikonkę filtra) -->
+    <div class="collapse mb-4" id="advancedFilters">
+        <div class="card border-0 shadow-sm" style="border-radius: 16px; border: 1px solid rgba(105, 108, 255, 0.2) !important;">
+            <div class="card-body p-3 pb-1">
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <h6 class="mb-0 fw-bold d-flex align-items-center" style="color: #696cff; font-size: 0.95rem;">
+                        <i class='bx bx-slider-alt me-1 fs-5'></i> Własny zakres dat
+                    </h6>
+                    <button type="button" class="btn-close" style="font-size: 0.7rem; box-shadow: none;" data-bs-toggle="collapse" data-bs-target="#advancedFilters" aria-label="Zamknij"></button>
+                </div>
                 
                 <!-- Data od -->
-                <label class="form-label fw-medium" style="font-size: 0.85rem; color: #566A7F; margin-top: 10px;">Data od</label>
+                <label class="form-label fw-medium" style="font-size: 0.85rem; color: #566A7F;">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;">

prototype/magico-pracownik/vacations.php

@@ -11,8 +11,62 @@ include 'header.php';
         </div>
         <h1 class="app-title">Acme Corp</h1>
     </div>
-    <div class="user-avatar shadow-sm">
-        <i class='bx bx-user'></i>
+    <div class="d-flex align-items-center gap-3">
+        <!-- Powiadomienia -->
+        <div class="dropdown">
+            <div class="position-relative" style="cursor: pointer;" data-bs-toggle="dropdown" aria-expanded="false">
+                <i class='bx bx-bell fs-4 text-muted'></i>
+                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger border border-white" style="font-size: 0.65rem; padding: 0.3em 0.45em;">
+                    1
+                </span>
+            </div>
+            
+            <div class="dropdown-menu dropdown-menu-end p-0 border-0 mt-2" style="border-radius: 16px; width: 340px; box-shadow: 0 0.5rem 1.5rem rgba(105, 108, 255, 0.15); overflow: hidden; z-index: 1050; margin-right: -40px;">
+                <div class="p-3 border-bottom d-flex justify-content-between align-items-center" style="background-color: #fcfcfd;">
+                    <h6 class="mb-0 fw-bold" style="color: #566A7F;">Powiadomienia</h6>
+                    <span class="badge bg-label-danger rounded-pill">1 nowe</span>
+                </div>
+                
+                <div class="list-group list-group-flush" style="max-height: 350px; overflow-y: auto;">
+                    
+                    <!-- Nieprzeczytane -->
+                    <a href="vacations.php" class="list-group-item list-group-item-action d-flex align-items-start p-3 border-0" style="background-color: rgba(105, 108, 255, 0.03); border-bottom: 1px solid rgba(0,0,0,0.03) !important;">
+                        <div class="d-flex justify-content-center align-items-center rounded-circle flex-shrink-0 me-3" style="width: 40px; height: 40px; background-color: rgba(255, 62, 29, 0.1); color: #ff3e1d;">
+                            <i class='bx bx-x-circle fs-5'></i>
+                        </div>
+                        <div class="flex-grow-1">
+                            <h6 class="mb-1 fw-bold" style="font-size: 0.9rem; color: #566A7F;">Wniosek odrzucony</h6>
+                            <p class="mb-1 small text-muted" style="line-height: 1.4;">Kierownik odrzucił Twój wniosek o urlop na żądanie (05 Wrz).</p>
+                            <small class="text-primary-custom fw-semibold" style="font-size: 0.75rem;">10 min temu</small>
+                        </div>
+                        <div class="flex-shrink-0 ms-2 mt-2">
+                            <div style="width: 8px; height: 8px; background-color: #696cff; border-radius: 50%;"></div>
+                        </div>
+                    </a>
+
+                    <!-- Przeczytane -->
+                    <a href="vacations.php" class="list-group-item list-group-item-action d-flex align-items-start p-3 border-0">
+                        <div class="d-flex justify-content-center align-items-center rounded-circle flex-shrink-0 me-3" style="width: 40px; height: 40px; background-color: rgba(113, 221, 55, 0.1); color: #71dd37;">
+                            <i class='bx bx-check-circle fs-5'></i>
+                        </div>
+                        <div class="flex-grow-1">
+                            <h6 class="mb-1 fw-semibold" style="font-size: 0.9rem; color: #566A7F;">Wniosek zaakceptowany</h6>
+                            <p class="mb-1 small text-muted" style="line-height: 1.4;">Twój urlop wypoczynkowy (12-16 Sie) został pomyślnie zatwierdzony.</p>
+                            <small class="text-muted" style="font-size: 0.75rem;">Wczoraj</small>
+                        </div>
+                    </a>
+                    
+                </div>
+                
+                <div class="p-3 border-top text-center" style="background-color: #fcfcfd;">
+                    <button class="btn btn-primary btn-sm w-100 fw-bold" style="border-radius: 8px;">Zobacz wszystkie</button>
+                </div>
+            </div>
+        </div>
+        
+        <div class="user-avatar shadow-sm">
+            <i class='bx bx-user'></i>
+        </div>
     </div>
 </div>