CasperSecurity
<div class="row">
<div class="card z-auto p-[25px]" style="min-height: 690px;">
<div class="card-header">
<div class="flex justify-between items-center mb-2">
<h1 class="heading text-[1.8rem] font-medium uppercase">Monthly Attendance Details</h1>
<div class="flex items-center">
<a class="btn btn-primary duration-500 hover:bg-hover-primary py-[5px] px-3 text-[13px] rounded text-white bg-primary leading-[18px] inline-block border border-primary ml-2 cursor-pointer"
wire:click="getMonthlyAttendance">+Calculate</a>
</div>
</div>
</div>
<div class="card-body">
<div class="p-[1.563rem]">
<div class="flex justify-between">
<div class="w-full px-1">
<div class="row flex justify-between">
<div class="w-1/6 px-2 py-2 justify-end">
<h6 class="heading text-[0.8rem] font-medium">filter</h6>
<select name="orderBy" wire:model="filter"
class="form-select w-full rounded-md style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-dark text-dark h-[2.813rem] leading-[1.813rem]">
<option value="Choose Filter">Choose Filter</option>
<option value="By userID">By userID</option>
<option value="By Gender">By Gender</option>
{{-- <option value="By blood Group">By blood Group</option>
<option value="By department">By department</option> --}}
<option value="By Name">By Name</option>
{{-- <option value="By Location">By Location</option>
<option value="By Birthday">By Birthday</option>
<option value="By Salary Group">By Salary Group</option> --}}
</select>
</div>
<div class="w-1/6 px-2 py-2 justify-end">
<h6 class="heading text-[0.8rem] font-medium">Search</h6>
<input wire:model.debounce.0ms="search_data" type="text"
class="form-control relative text-[13px] text-dark h-[2.813rem] border border-dark block rounded-md py-1.5 px-3 duration-500 dark:hover:border-b-color outline-none w-full"
id="search" placeholder="Search ..." autocomplete="off"/>
</div>
<div class="w-1/6 px-2 py-2 justify-end">
<h6 class="heading text-[0.8rem] font-medium">Start Date</h6>
<input wire:model.debounce.0ms="start_date" type="month"
class="form-control relative text-[13px] text-dark h-[2.813rem] border border-dark block rounded-md py-1.5 px-3 duration-500 dark:hover:border-b-color outline-none w-full"
id="search" placeholder="Search ..." autocomplete="off"/>
</div>
<div class="w-1/6 px-2 py-2 justify-end">
<h6 class="heading text-[0.8rem] font-medium">Report</h6>
<select name="perPage" wire:model="according"
class="form-select w-full rounded-md style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-dark text-dark h-[2.813rem] leading-[1.813rem]">
<option value="General Report">General Report</option>
<option value="By date">By date</option>
<option value="By employee">By employee</option>
</select>
</div>
<div class="w-1/6 px-2 py-2 justify-end mt-4">
<p class="heading text-[0.8rem] font-bold">Last Generated :</p>
<span>2024-05-31</span> to <span>2024-06-30</span>
</div>
</div>
</div>
{{-- <div class="w-1/2 px-4">--}}
{{-- <div class="row flex justify-between">--}}
{{-- </div>--}}
{{-- </div>--}}
</div>
<div class="overflow-x-auto table-scroll">
<table id="dept_datatable" class="display table w-full">
<thead>
<tr class="bg-transparent">
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
EMP. ID
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
NAME
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
START DATE
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
END DATE
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
TOTAL PAID DAYS
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
PUNCH DAYS
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
PUNCH DAYS
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
OD /TRAVEL/WFH
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
LATE DAYS
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
WORKING DAYS
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
TOTAL ATTENDANCE
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
TOTAL HOURS
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
TOTAL WORKING HOURS
</th>
</tr>
</thead>
<tbody>
<tr class="bg-transparent">
<td colspan="13"
class="text-danger border-2 border-solid border-[#E6E6E6] dark:border-[#444444] bg-transparent xl:py-2 py-2 xl:px-[0.9375rem] px-[0.9375rem] capitalize whitespace-nowrap xl:text-[15px] text-[15px] font-bold text-center">
No Data Available
</td>
</tr>
</tbody>
</table>
</div>
<div class="w-full" wire:ignore.self>
{{-- {{$dataTables->links('livewire.pagination-livewire')}}--}}
</div>
</div>
</div>
</div>
</div>
@section('externaljs')
@endsection