Editing tabs and the months modal

resources/views/admin/show.blade.php

@@ -145,7 +145,9 @@ foreach ($data as $employee) {
             max-width: 350px;
             display: flex;
             gap: 0.35rem;
-            overflow-x: auto;
+            overflow: visible;
+            position: relative;
+            z-index: 50;
             padding: 0.45rem;
             border-radius: var(--radius-lg) var(--radius-lg) 0 0;
             background: var(--surface-tabs);
@@ -158,6 +160,40 @@ foreach ($data as $employee) {
             display: none;
         }
 
+        .ui-month-more {
+            position: relative;
+            flex-shrink: 0;
+            z-index: 60;
+        }
+
+        .ui-month-more-menu {
+            position: absolute;
+            top: calc(100% + 0.35rem);
+            right: 0;
+            left: auto;
+            z-index: 100;
+            min-width: 9rem;
+            max-height: 16rem;
+            overflow-y: auto;
+            padding: 0.35rem;
+            border-radius: 0.75rem;
+            background: var(--surface-panel, #fff);
+            border: 1px solid var(--border-glass, #e5e7eb);
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+            display: flex;
+            flex-direction: column;
+            gap: 0.15rem;
+        }
+
+        .ui-month-more-menu.hidden {
+            display: none !important;
+        }
+
+        .ui-month-more-item {
+            width: 100%;
+            text-align: right;
+        }
+
         .month-tab {
             flex-shrink: 0;
             padding: 0.5rem 0.85rem;
@@ -190,6 +226,8 @@ foreach ($data as $employee) {
             border-radius: 0 0 var(--radius-xl) var(--radius-xl);
             box-shadow: var(--shadow-soft);
             overflow: hidden;
+            position: relative;
+            z-index: 1;
         }
 
         .attendance-table {
@@ -283,27 +321,51 @@ foreach ($data as $employee) {
                             رکورد ترددی برای این شخص ثبت نشده است.
                         </div>
                     @else
-                        <div class="month-tabs">
+                        @php
-                            @foreach(array_keys($recordsGrouped) as $month)
+                            $allMonthKeys = array_keys($recordsGrouped);
-                                @php
+                            $recentMonthKeys = array_slice($allMonthKeys, 0, 3);
-                                    $monthLabel = $month;
+                            $olderMonthKeys = array_slice($allMonthKeys, 3);
-                                    if (preg_match('/^(\d{4})-(\d{2})$/', (string) $month, $mm)) {
+                            $monthLabelOf = function ($month) use ($currentJalaliYear) {
-                                        try {
+                                if (preg_match('/^(\d{4})-(\d{2})$/', (string) $month, $mm)) {
-                                            $jj = new Jalalian((int) $mm[1], (int) $mm[2], 1);
+                                    try {
-                                            $monthLabel = ((int) $mm[1] === (int) $currentJalaliYear)
+                                        $jj = new Jalalian((int) $mm[1], (int) $mm[2], 1);
-                                                ? $jj->format('%B')
+                                        return ((int) $mm[1] === (int) $currentJalaliYear)
-                                                : $jj->format('%B') . ' ' . $mm[1];
+                                            ? $jj->format('%B')
-                                        } catch (\Throwable $e) {
+                                            : $jj->format('%B') . ' ' . $mm[1];
-                                            $monthLabel = $month;
+                                    } catch (\Throwable $e) {
-                                        }
+                                        return $month;
                                     }
-                                @endphp
+                                }
+
+                                return $month;
+                            };
+                        @endphp
+                        <div class="month-tabs">
+                            @foreach($recentMonthKeys as $month)
                                 <button type="button"
                                         class="month-tab tablinks-{{ $employee->id }}"
                                         onclick="openMonth(event, 'month_{{ $employee->id }}_{{ $month }}', '{{ $employee->id }}')">
-                                    {{ $monthLabel }}
+                                    {{ $monthLabelOf($month) }}
                                 </button>
                             @endforeach
+
+                            @if(!empty($olderMonthKeys))
+                                <div class="ui-month-more">
+                                    <button type="button"
+                                            class="month-tab ui-month-more-btn"
+                                            onclick="toggleAdminMonthMore(event, 'month-more-{{ $employee->id }}')"
+                                            title="ماه‌های دیگر">⋯</button>
+                                    <div id="month-more-{{ $employee->id }}" class="ui-month-more-menu hidden">
+                                        @foreach($olderMonthKeys as $month)
+                                            <button type="button"
+                                                    class="month-tab tablinks-{{ $employee->id }} ui-month-more-item"
+                                                    onclick="openMonth(event, 'month_{{ $employee->id }}_{{ $month }}', '{{ $employee->id }}'); closeAdminMonthMore('month-more-{{ $employee->id }}');">
+                                                {{ $monthLabelOf($month) }}
+                                            </button>
+                                        @endforeach
+                                    </div>
+                                </div>
+                            @endif
                         </div>
 
                         @foreach($recordsGrouped as $month => $records)
@@ -382,6 +444,30 @@ foreach ($data as $employee) {
             }
         }
 
+        function toggleAdminMonthMore(evt, menuId) {
+            if (evt) evt.stopPropagation();
+            document.querySelectorAll('.ui-month-more-menu').forEach(menu => {
+                if (menu.id !== menuId) menu.classList.add('hidden');
+            });
+            const menu = document.getElementById(menuId);
+            if (menu) menu.classList.toggle('hidden');
+        }
+
+        function closeAdminMonthMore(menuId) {
+            const menu = document.getElementById(menuId);
+            if (menu) menu.classList.add('hidden');
+        }
+
+        document.addEventListener('click', function () {
+            document.querySelectorAll('.ui-month-more-menu').forEach(menu => menu.classList.add('hidden'));
+        });
+
+        document.querySelectorAll('.ui-month-more-menu').forEach(menu => {
+            menu.addEventListener('click', function (e) {
+                e.stopPropagation();
+            });
+        });
+
         document.addEventListener('DOMContentLoaded', function () {
             const firstEmployeeBtn = document.querySelector('.emp-btn');
             if (firstEmployeeBtn) {

resources/views/app.blade.php

@@ -932,7 +932,9 @@
         .ui-month-tabs {
             display: flex;
             gap: 0.35rem;
-            overflow-x: auto;
+            overflow: visible;
+            position: relative;
+            z-index: 50;
             max-width: 350px;
             width: 100%;
             padding: 0.45rem;
@@ -950,13 +952,15 @@
         .ui-month-more {
             position: relative;
             flex-shrink: 0;
+            z-index: 60;
         }
 
         .ui-month-more-menu {
             position: absolute;
             top: calc(100% + 0.35rem);
-            left: 0;
+            right: 0;
-            z-index: 40;
+            left: auto;
+            z-index: 100;
             min-width: 9rem;
             max-height: 16rem;
             overflow-y: auto;
@@ -964,14 +968,14 @@
             border-radius: 0.75rem;
             background: var(--surface-panel, #fff);
             border: 1px solid var(--border-glass, #e5e7eb);
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
             display: flex;
             flex-direction: column;
             gap: 0.15rem;
         }
 
         .ui-month-more-menu.hidden {
-            display: none;
+            display: none !important;
         }
 
         .ui-month-more-item {
@@ -1015,6 +1019,8 @@
             border-radius: 0 0 var(--radius-xl) var(--radius-xl);
             box-shadow: var(--shadow-soft);
             overflow: hidden;
+            position: relative;
+            z-index: 1;
             color: var(--text-primary);
         }
 

resources/views/attendance/index.blade.php

@@ -147,8 +147,8 @@ if (!empty($user->tasks)) {
 
 
         <div class="w-full flex justify-center mt-4 pb-20" style="">
-            <div class="overflow-hidden  rounded-[23px]  max-w-[350px]">
+            <div class="overflow-visible rounded-[23px] max-w-[350px] relative z-20">
-                <div class=" border-b border-gray-300 text-center w-full">
+                <div class="text-center w-full">
 
 
                     <!-- Your Table Code Here -->
@@ -815,6 +815,10 @@ if (!empty($user->tasks)) {
                         }
                     }
 
+                    document.getElementById('month-more-menu')?.addEventListener('click', function (e) {
+                        e.stopPropagation();
+                    });
+
                     document.addEventListener('click', function () {
                         closeMonthMore();
                     });