n.moghbel2001/a.montask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve tasks UI, dark theme, performance fixes, and admin pages polish

Browse Source
This commit is contained in:
Mahdi
2026-06-02 18:45:01 +03:30
parent 54aa8f40dd
commit 300575930f
18 changed files with 2598 additions and 780 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/attendance/index.blade.php
+50 -78
View File
@@ -37,17 +37,7 @@ if (!empty($user->tasks)) {
return array_search($task->state, $state_order);
});
}
//dd(count($break = $user->attendanceBreaks));
if (count($user->attendanceBreaks) > 0) {
$break = $user->attendanceBreaks[0];
if ($break->break_end == null) {
$now = Carbon::now()->format('Y-m-d H:i:s');
$attendances = new Attendance();
$duration = $attendances->duration($break->break_start, $now);
}
}
//dd($now, $break->break_start, $duration);
// $duration for break timer is passed from AttendanceController
?>
@extends('app')
@@ -123,7 +113,7 @@ if (count($user->attendanceBreaks) > 0) {
@else
<div class="bg-white flex justify-flex p-4 rounded-xl max-w-[350px] flex-col items-center">
<div class="ui-panel flex p-4 rounded-xl max-w-[350px] flex-col items-center">
<label class="text-xl font-bold pb-2">
@@ -169,33 +159,27 @@ if (count($user->attendanceBreaks) > 0) {
</div>
@else
{{-- دکمه‌های تب (نام ماه‌ها) --}}
<div class="tab rounded-t-2xl max-w-[350px] mx-auto flex overflow-x-auto"
style="margin-top: 0px; max-width: 350px">
<div class="ui-month-tabs">
@foreach($groupedData->keys() as $month)
<button class="tablinks rounded-t-2xl cursor-pointer px-4 py-2 hover:bg-gray-200 transition flex-shrink-0"
<button type="button" class="tablinks"
onclick="openCity(event, '{{$month}}')">
{{$month}}
</button>
@endforeach
</div>
{{-- محتوای تب‌ها (جدول‌ها) --}}
@foreach($groupedData as $month => $records)
<div id="{{$month}}"
class="tabcontent w-[350px] bg-white rounded-b-xl rounded-tl-2xl cursor-default leading-7 shadow-md">
<table class="table-auto"
style="width:100%; border-collapse: collapse; text-align: center">
<div id="{{$month}}" class="tabcontent ui-attendance-card">
<table class="ui-attendance-table">
<thead>
<tr style="border-bottom: 1px solid #ddd; background: rgba(244,244,244,0.82);"
class="border-1 border-slate-300">
<tr>
@if($_COOKIE['user_identity'] == 1370)
<th style="border-right: 1px solid #ddd; padding: 8px;">نام</th>
<th>نام</th>
@endif
<th style="border-right: 1px solid #ddd; padding: 4px;">تاریخ</th>
<th style="border-right: 1px solid #ddd; padding: 4px;">ورود</th>
<th style="border-right: 1px solid #ddd; padding: 4px;">خروج</th>
<th style="border-right: 1px solid #ddd; padding: 4px;">مدت</th>
<th>تاریخ</th>
<th>ورود</th>
<th>خروج</th>
<th>مدت</th>
</tr>
</thead>
@@ -240,8 +224,7 @@ if (count($user->attendanceBreaks) > 0) {
{{-- ردیف جمع کل (اختیاری - چون متغیر آن موجود نبود کامنت کردم که خطا ندهد) --}}
<tr>
<td colspan="5" class="rounded-b-xl bg-gray-50 font-bold"
style="border-top: 1px solid #ddd; text-align: center; padding: 10px;">
<td colspan="5" class="table-summary">
تعداد رکورد: {{ count($records) }}
</td>
</tr>
@@ -265,10 +248,10 @@ if (count($user->attendanceBreaks) > 0) {
<!-- ATTENDANCE Modal -->
<div id="modal-container"
class="fixed inset-0 z-50 hidden bg-black bg-opacity-60 flex items-center justify-center p-4">
<div id="modal-content" class=" bg-white p-4 sm:p-6 rounded-lg shadow-lg max-w-sm w-full relative">
<h2 id="modal-title" class="text-xl sm:text-2xl font-semibold mb-4 text-center"></h2>
<p id="modal-body" class="text-gray-700 mb-4 text-center"></p>
class="ui-modal-backdrop centered hidden">
<div id="modal-content" class="ui-modal-panel max-w-sm w-full">
<h2 id="modal-title" class="ui-title"></h2>
<p id="modal-body" class="ui-subtitle"></p>
<div class="flex flex-col gap-4" style="align-items: center">
<div class="flex justify-center gap-2">
@@ -376,23 +359,18 @@ if (count($user->attendanceBreaks) > 0) {
{{-- START TASK MODAL --}}
<div id="taskModal"
class="hidden fixed inset-0 bg-black/40 items-start justify-center z-50 flex backdrop-blur-sm scroll-auto pt-10"
class="ui-modal-backdrop hidden"
onclick="closeOnOutsideClick(event)">
<div class="relative bg-white w-[350px] rounded-2xl shadow-lg p-5 text-center">
<button onclick="closeTaskModal()"
class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 transition">
<div class="ui-modal-panel">
<button type="button" onclick="closeTaskModal()" class="ui-modal-close" aria-label="بستن">
<i class="fa-solid fa-xmark"></i>
</button>
<h2 class="text-lg font-bold mb-3" id="modalTitle">انتخاب وظیفه</h2>
<p class="text-gray-600 mb-4" id="modalDesc">یکی از وظایف زیر را انتخاب کنید:</p>
<input class="h-12 w-full bg-transparent pl-11 pr-4 text-sm text-custom-text-100
placeholder:text-custom-text-400 focus:ring-0 rounded-3xl border-2 border-gray-300 py-2"
placeholder="جست و جو..." tabindex="1" id="headlessui-combobox-input-:r13m:" role="combobox"
aria-expanded="false" aria-autocomplete="list" data-headlessui-state="" type="text" value=""
aria-controls="headlessui-combobox-options-:r13n:"
aria-activedescendant="headlessui-combobox-option-:r13s:" data-sharkid="__4">
<h2 class="ui-title" id="modalTitle">انتخاب وظیفه</h2>
<p class="ui-subtitle" id="modalDesc">یکی از وظایف زیر را انتخاب کنید:</p>
<input class="ui-input mb-3"
placeholder="جست و جو..." type="text" value=""
id="taskSearchInput">
{{-- <div class="grid flex-col gap-2 grid-cols-2 pb-3 items-center justify-items-end">--}}
@if(isset($user->tasks) && count($user->tasks) >= 1)
@@ -400,11 +378,9 @@ if (count($user->attendanceBreaks) > 0) {
<form action="{{url("active_task")}}" method="POST" class=" ">@csrf
{{-- <input type="hidden" name="pid" value="{{ $user->tasks->pivot->id }}" class="">--}}
<input type="hidden" name="uid" value="{{ $user->id }}" class="">
<div class=" overflow-y-scroll"
style="max-height: calc(100vh - 300px);">
<div class="ui-task-list">
@foreach($user->tasks as $item)
<div class="inline-flex items-center bg-gray-300 hover:bg-cyan-600 rounded-lg m-2 p-2 justify-between"
style="display: flex">
<label class="ui-task-item">
@if($user->active_task)
@if( $user->active_task == $item->title )
<input type="radio" name="task_id" checked="true"
@@ -425,8 +401,7 @@ if (count($user->attendanceBreaks) > 0) {
<div class="px-2.5" style="direction: rtl">{{ $item->title }}</div>
<span class="block h-1.5 w-1.5 flex-shrink-0 rounded-full" style="background-color:
{!! array_key_exists($item->state,$state) ? $state[$item->state] : "" !!};"></span>
</div>
</label>
@endforeach
</div>
@@ -446,21 +421,17 @@ if (count($user->attendanceBreaks) > 0) {
</form>
@else
<div class="inline-flex justify-center items-center"
style="height: calc(100vh - 400px);">
<div class="flex justify-center items-center py-10">
<p class="font-bold text-gray-400">
وظیفه ای وجود ندارد
</p>
</div>
@endif
{{-- افزودن تسک--}}
<form>
<input class="h-12 w-[200px] bg-transparent pl-11 pr-4 text-sm text-custom-text-100
placeholder:text-custom-text-400 focus:ring-0 rounded-3xl border-2 border-gray-300 py-2"
placeholder="عنوان وظیفه" tabindex="1" id="taskTitle" role="combobox"
aria-expanded="false" aria-autocomplete="list" data-headlessui-state="" type="text" value=""
aria-controls="headlessui-combobox-options-:r13n:"
aria-activedescendant="headlessui-combobox-option-:r13s:" data-sharkid="__4">
<form class="mt-3 flex items-center justify-center gap-2 flex-wrap">
<input class="ui-input !w-[200px]"
placeholder="عنوان وظیفه" type="text" value=""
id="taskTitle">
<button id="createTask"
class="mt-4 inline-block bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-2.5 fa-notdog fa-solid fa-plus rounded-full">
</button>
@@ -468,10 +439,13 @@ if (count($user->attendanceBreaks) > 0) {
</form>
</div>
</div>
@endsection
</div>
@section('script')
@endsection
@section('script')
<script>
const existed = {{ $existed ? 'true' : 'false' }};
@@ -735,23 +709,21 @@ if (count($user->attendanceBreaks) > 0) {
}
//SEARCH BAR IN TASK MODAL
const searchInput = document.getElementById("headlessui-combobox-input-:r13m:");
const listItems = document.querySelectorAll('#taskModal .inline-flex.items-center');
const searchInput = document.getElementById("taskSearchInput");
const listItems = document.querySelectorAll('#taskModal .ui-task-item');
searchInput.addEventListener("input", function () {
const filter = searchInput.value.toLowerCase();
listItems.forEach(item => {
const nameDiv = item.querySelector('div');
if (nameDiv) {
const name = nameDiv.textContent.toLowerCase();
if (name.includes(filter)) {
item.style.display = 'flex';
} else {
item.style.display = 'none';
if (searchInput && listItems.length) {
searchInput.addEventListener("input", function () {
const filter = searchInput.value.toLowerCase();
listItems.forEach(item => {
const nameDiv = item.querySelector('div');
if (nameDiv) {
const name = nameDiv.textContent.toLowerCase();
item.style.display = name.includes(filter) ? 'flex' : 'none';
}
}
});
});
});
}
const taskTitle = document.getElementById('taskTitle');