diff --git a/AccountMangement.Infrastructure.EFCore/Repository/CameraAccountRepository.cs b/AccountMangement.Infrastructure.EFCore/Repository/CameraAccountRepository.cs
index a5a43ef6..1ab391e0 100644
--- a/AccountMangement.Infrastructure.EFCore/Repository/CameraAccountRepository.cs
+++ b/AccountMangement.Infrastructure.EFCore/Repository/CameraAccountRepository.cs
@@ -40,7 +40,8 @@ public class CameraAccountRepository : RepositoryBase<long, CameraAccount>, ICam
             WorkshopId = x.WorkshopId,
             WorkshopName = x.WorkshopName,
             AccountId = x.AccountId,
-            IsActiveString = x.IsActiveSting
+            IsActiveString = x.IsActiveSting,
+            Password = x.Password
 
         }).FirstOrDefault(x => x.Id == id);
     }
diff --git a/ServiceHost/Areas/Admin/Pages/Index.cshtml b/ServiceHost/Areas/Admin/Pages/Index.cshtml
index fefe13bf..e4d9c345 100644
--- a/ServiceHost/Areas/Admin/Pages/Index.cshtml
+++ b/ServiceHost/Areas/Admin/Pages/Index.cshtml
@@ -125,7 +125,7 @@
 						<path d="M8.47055 13.8673L6.22055 16.1173C6.07055 16.2673 5.88055 16.3373 5.69055 16.3373C5.50055 16.3373 5.30055 16.2673 5.16055 16.1173L4.41055 15.3673C4.11055 15.0773 4.11055 14.5973 4.41055 14.3073C4.70055 14.0173 5.17055 14.0173 5.47055 14.3073L5.69055 14.5273L7.41055 12.8073C7.70055 12.5173 8.17055 12.5173 8.47055 12.8073C8.76055 13.0973 8.76055 13.5773 8.47055 13.8673Z" fill="#23A8A8"/>
 					</svg>
 					<p class="btn-title text-nowrap" style="margin: 0 5px 0 0">وظایف</p>
-					<div class="showCount">
+					<div class="showCount" permission="901" style="visibility: @(Model.TaskRequestCount == 0 ? "hidden" : "visible")">
 						<span>@Model.TaskRequestCount</span>
 					</div>
 				    <div class="spinner-loading loading rounded-0" style="display: none;">
@@ -183,9 +183,12 @@
 						</defs>
 					</svg>
 					<p class="btn-title text-nowrap" style="margin: 0 5px 0 0">تیکت</p>
-					<div class="showCount">
-						<span>@Model.TicketCount</span>
-					</div>
+					@if (TicketAccessAccount.HasTicketAccess(authHelper.CurrentAccountId()))
+					{
+						<div class="showCount" style="visibility: @(Model.TicketCount == 0 ? "hidden" : "visible")">
+							<span>@Model.TicketCount</span>
+						</div>
+					}
 				    <div class="spinner-loading loading rounded-0" style="display: none;">
 					    <div class="spinner"></div>
 				    </div>
@@ -550,8 +553,8 @@
 
 @section Script
 {
-@* 	<script src="~/admintheme/js/slick.min.js"></script> *@
-@* 	<script src="~/AssetsAdminNew/report/js/index.js"></script> *@
+	<script src="~/admintheme/js/slick.min.js"></script>
+	<script src="~/AssetsAdminNew/report/js/index.js"></script>
 @* 	<script>
 		var antiForgeryToken = $(`@Html.AntiForgeryToken()`).val();
 		var ajaxDataReport = `@Url.Page("./Index", "ReportDataAjax")`;
diff --git a/ServiceHost/Areas/AdminNew/Pages/Company/Task/CreateModal.cshtml b/ServiceHost/Areas/AdminNew/Pages/Company/Task/CreateModal.cshtml
index 16a672e6..eae58f2c 100644
--- a/ServiceHost/Areas/AdminNew/Pages/Company/Task/CreateModal.cshtml
+++ b/ServiceHost/Areas/AdminNew/Pages/Company/Task/CreateModal.cshtml
@@ -333,4 +333,4 @@
 
 </script>
 
-<script src="~/assetsadminnew/tasks/js/create.js?ver=@adminVersion"></script>
\ No newline at end of file
+<script src="~/assetsadminnew/tasks/js/create.js"></script>
\ No newline at end of file
diff --git a/ServiceHost/Areas/AdminNew/Pages/Company/Ticket/Index.cshtml b/ServiceHost/Areas/AdminNew/Pages/Company/Ticket/Index.cshtml
index f267e4ab..b9e0a200 100644
--- a/ServiceHost/Areas/AdminNew/Pages/Company/Ticket/Index.cshtml
+++ b/ServiceHost/Areas/AdminNew/Pages/Company/Ticket/Index.cshtml
@@ -7,23 +7,33 @@
 
 
 @section Styles {
-	<link href="~/AssetsClient/css/table-style.css?ver=@Version.AdminVersion" rel="stylesheet" />
-	<link href="~/AssetsClient/css/table-responsive.css?ver=@Version.AdminVersion" rel="stylesheet" />
-	<link href="~/assetsclient/css/table-grid.css?ver=@Version.AdminVersion" rel="stylesheet" />
-	<link href="~/assetsclient/css/operation-button.css?ver=@Version.AdminVersion" rel="stylesheet" />
+	<link href="~/AssetsClient/css/table-style.css?ver=@Version.AdminVersion" rel="stylesheet"/>
+	<link href="~/AssetsClient/css/table-responsive.css?ver=@Version.AdminVersion" rel="stylesheet"/>
+	<link href="~/assetsclient/css/table-grid.css?ver=@Version.AdminVersion" rel="stylesheet"/>
+	<link href="~/assetsclient/css/operation-button.css?ver=@Version.AdminVersion" rel="stylesheet"/>
 
-	<link href="~/AssetsAdminNew/Ticket/css/ticket-list.css?ver=@Version.StyleVersion" rel="stylesheet" />
-	<link href="~/AssetsAdminNew/Ticket/css/ticket-create.css?ver=@Version.StyleVersion" rel="stylesheet" />
-	<link href="~/AssetsAdminNew/Ticket/css/ticket-message.css?ver=@Version.StyleVersion" rel="stylesheet" />
-	<link href="~/AssetsAdminNew/Ticket/css/Index.css?ver=@Version.StyleVersion" rel="stylesheet" />
+	<link href="~/AssetsAdminNew/Ticket/css/ticket-list.css?ver=@Version.StyleVersion" rel="stylesheet"/>
+	<link href="~/AssetsAdminNew/Ticket/css/ticket-create.css?ver=@Version.StyleVersion" rel="stylesheet"/>
+	<link href="~/AssetsAdminNew/Ticket/css/ticket-message.css?ver=@Version.StyleVersion" rel="stylesheet"/>
+	<link href="~/AssetsAdminNew/Ticket/css/Index.css?ver=@Version.StyleVersion" rel="stylesheet"/>
 
-	<link href="~/AssetsClient/css/select2.css?ver=@Version.AdminVersion" rel="stylesheet" />
-	<link href="~/AssetsClient/css/datetimepicker.css?ver=@Version.AdminVersion" rel="stylesheet" />
-	<link href="~/AssetsClient/css/dropdown.css?ver=@Version.AdminVersion" rel="stylesheet" />
-	<link href="~/AssetsClient/css/filter-search.css?ver=@Version.AdminVersion" rel="stylesheet" />
+	<link href="~/AssetsClient/css/select2.css?ver=@Version.AdminVersion" rel="stylesheet"/>
+	<link href="~/AssetsClient/css/datetimepicker.css?ver=@Version.AdminVersion" rel="stylesheet"/>
+	<link href="~/AssetsClient/css/dropdown.css?ver=@Version.AdminVersion" rel="stylesheet"/>
+	<link href="~/AssetsClient/css/filter-search.css?ver=@Version.AdminVersion" rel="stylesheet"/>
 
 	<!-- sweet alerts -->
 	<link href="~/AdminTheme/assets/sweet-alert/sweet-alert.min.css" rel="stylesheet">
+
+	<style>
+		@@media (max-width: 767px) {
+			.sticky {
+				position: sticky;
+				top: 3px;
+				z-index: 60;
+			}
+		}
+	</style>
 }
 
 	
@@ -31,9 +41,9 @@
 <div class="row pb-2">
 	<div class="col p-0 m-0 d-flex align-items-center justify-content-between">
 		<div class="col d-flex">
-			<img src="~/AssetsClient/images/rollcall-history.png" alt="" class="img-fluid me-2" style="width: 45px;object-fit: cover;" />
+			<img src="~/AssetsClient/images/icons/headphone.png" alt="" class="img-fluid me-2" style="width: 45px;object-fit: cover;" />
 			<div>
-				<h4 class="title d-flex align-items-center">مدیریت تسک</h4>
+				<h4 class="title d-flex align-items-center">مدیریت تیکت</h4>
 				<div class="title d-flex align-items-center">کارگاه نورداد مهر گستر کاسپین</div>
 			</div>
 		</div>
@@ -64,7 +74,7 @@
 
 				<div class="Rtable Rtable--collapse">
 
-					<div class="Rtable-row Rtable-row--head align-items-center d-flex sticky-div sticky">
+					<div class="Rtable-row Rtable-row--head align-items-center d-flex sticky">
 						<div class="Rtable-cell column-heading width1">
 							<span class="d-flex justify-content-start text-white align-items-center">
 								@* <input type="checkbox" class="form-check-input checkAll me-1" name="" id="checkAll2"> *@
@@ -118,11 +128,11 @@
 							<div class="Rtable-cell d-md-block d-none width3">
 								<div class="Rtable-cell--content" id="workshopName_@item.Id">@item.WorkshopName</div>
 							</div>
-							<div class="Rtable-cell d-md-block d-none width4">
-								<div class="Rtable-cell--content" id="contractingParting_@item.Id">@item.ContractingPartyName</div>
+							<div class="Rtable-cell width4">
+								<div class="Rtable-cell--content text-start" id="contractingParting_@item.Id">@item.ContractingPartyName</div>
 							</div>
 							<div class="Rtable-cell width5">
-								<div class="Rtable-cell--content" id="title_@item.Id">@item.Title</div>
+								<div class="Rtable-cell--content text-start" id="title_@item.Id">@item.Title</div>
 							</div>
 							<div class="Rtable-cell d-md-block d-none width6">
 								<div class="Rtable-cell--content">@item.CreationDateTime</div>
@@ -202,25 +212,23 @@
 
 						</div>
 						
-						<!-- Extra div tag is required for Background color -->
-						<div></div>
 
 						<div class="operation-div w-100">
 							<div class="operations-btns">
 								<div class="row p-0">
 									<div class="d-flex align-items-center justify-content-between">
 										<span class="span1">شماره پشتیبانی</span>
-										<span class="span1">#845784</span>
+										<span class="span1">@item.TicketNumber</span>
 									</div>
 									<div class="d-flex align-items-center justify-content-between">
-										<span class="span2">ساخت ساعات حضور و غیاب</span>
-										<span class="span2">1403/02/15</span>
+										<span class="span2">@item.Title</span>
+										<span class="span2">@item.CreationDateTime</span>
 									</div>
 									<div class="col-md-12 col-12 p-1">
-										<div class="badget badget-inprogress w-100 my-2">در حال بررسی</div>
+										<div class="badget @statusClass w-100 my-2">@item.Status</div>
 									</div>
 									<div class="col-md-12 col-12">
-										<button type="button" class="btn-ticket-detail position-relative d-md-none d-flex align-items-center justify-content-center w-100">
+										<button type="button" class="btn-ticket-detail position-relative d-md-none d-flex align-items-center justify-content-center w-100" onclick="DetailTicket(@item.Id)">
 											<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 												<path d="M4.58325 4.58333C4.58325 3.57081 5.40406 2.75 6.41659 2.75H10.7708C10.8973 2.75 10.9999 2.8526 10.9999 2.97917V7.33333C10.9999 8.34586 11.8207 9.16667 12.8333 9.16667H17.1874C17.314 9.16667 17.4166 9.26924 17.4166 9.39583V17.4167C17.4166 18.4292 16.5958 19.25 15.5833 19.25H6.41659C5.40406 19.25 4.58325 18.4292 4.58325 17.4167V4.58333Z" fill="#58E85B" />
 												<path d="M12.4167 7.33392V3.95768L16.2096 7.75058H12.8334C12.6033 7.75058 12.4167 7.56404 12.4167 7.33392Z" fill="#248826" stroke="#248826" />
@@ -470,7 +478,7 @@
 
 	<script>
 		if ($(window).width() < 768) {
-			$(".openAction").click(function() {
+			$(document).on("click", ".openAction", function () {
 				$(this).next().find(".operations-btns").slideToggle(500);
 				$(".operations-btns").not($(this).next().find(".operations-btns")).slideUp(500);
 			});
@@ -520,11 +528,11 @@
 
 			$(document).ready(function() {
 				setTimeout(function() {
-					$('#TicketId').val(ticketId);
-					$('#partyNameSearch').val(contractingPartyName);
-					$('#Command_Title').val(commandTitle);
-				},
-				1000);
+						$('#TicketId').val(ticketId);
+						$('#partyNameSearch').val(contractingPartyName);
+						$('#Command_Title').val(commandTitle);
+					},
+					1000);
 			});
 		}
 	</script>
diff --git a/ServiceHost/Areas/Camera/Pages/AddPasswordModal.cshtml b/ServiceHost/Areas/Camera/Pages/AddPasswordModal.cshtml
new file mode 100644
index 00000000..5cfd6ad5
--- /dev/null
+++ b/ServiceHost/Areas/Camera/Pages/AddPasswordModal.cshtml
@@ -0,0 +1,122 @@
+@Html.AntiForgeryToken()
+<style>
+    .modal-content {
+        background-color: #334155;
+        color: #fff;
+    }
+
+    .itemSection {
+        display: flex;
+        align-items: center;
+        /* justify-content: space-between; */
+        background-color: #253247;
+        padding: 7px 5px;
+        border-radius: 10px;
+        margin: 5px 0;
+        font-size: 13px;
+        gap: 10px;
+    }
+
+        .itemSection.header {
+            background-color: #212c3d;
+        }
+
+    .form-control {
+        border: none;
+        background-color: #475569;
+        color: #ffffff !important;
+    }
+
+        .form-control:focus {
+            background-color: #475569;
+            outline: none;
+            border: none;
+            border-color: transparent;
+            box-shadow: none;
+        }
+
+        .form-control:active {
+            outline: none;
+        }
+
+        .form-control::placeholder {
+            color: #eeeeee;
+        }
+
+    .stickyHeader {
+        position: sticky;
+        top: 0;
+    }
+
+    .btn-cancel {
+        background-color: #27272a;
+        width: 100%;
+        color: #ffffff;
+    }
+
+    .btn-logout {
+        background-color: #ef4444;
+        color: #fff;
+    }
+</style>
+
+
+
+<div class="modal fade" id="passwordModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="passwordModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header" style="border-color: #1e293b;">
+                <h6 class="modal-title w-100 fs-6 text-center" id="passwordModalLabel">گذرواژه</h6>
+                @* <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> *@
+            </div>
+            <div class="modal-body">
+                <p>برای خروج از این سامانه باید گذرواژه خود را وارد نمایید</p>
+            
+                    <div class="position-relative">
+                        <input name="password" id="password" class="form-control" type="password" placeholder="گذرواژه" autofocus autocomplete="new-password" style="direction: ltr" />
+                        <span class="position-absolute" id="toggle-password" style="cursor: pointer; top: 0; right: 5px; padding: 5px;">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="18" height="18">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                            </svg>
+                        </span>
+                    </div>
+             
+            </div>
+            <div class="modal-footer" style="border-color: #1e293b;">
+                <div class="d-flex align-items-center gap-2 w-100">
+                    <button type="button" class="btn btn-cancel w-50" data-bs-dismiss="modal">انصراف</button>
+                    <a id="logOut" onclick="logout()" type="button" class="btn btn-logout w-50">خروج</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    function logout() {
+
+        $.ajax({
+            async: false,
+            // contentType: 'application/json',
+            // dataType: 'data',
+            type: 'POST',
+            url: '@Url.Page("./Index", "CheckPassword")',
+            data: { "password": $('#password').val() },
+            headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
+            success: function (response) {
+                if (!response.isSuccess) {
+                    $('.alert-msg').show();
+                    $('.alert-msg p').text(response.errorMessage);
+                } else {
+           
+					window.location.href ='@Url.Page("/Camera/Index", "Logout")';
+                }
+            },
+            failure: function (response) {
+                console.log(5, response);
+            }
+        });
+    };
+</script>
+
diff --git a/ServiceHost/Areas/Camera/Pages/Index.cshtml b/ServiceHost/Areas/Camera/Pages/Index.cshtml
index 47936261..f6a4ab0f 100644
--- a/ServiceHost/Areas/Camera/Pages/Index.cshtml
+++ b/ServiceHost/Areas/Camera/Pages/Index.cshtml
@@ -8,7 +8,8 @@
  
     Layout = "Shared/_Layout";
     ViewData["Title"] = " - " + "حضور غیاب";
-    <link href="~/assetscamera/css/index.css" rel="stylesheet" />
+    // <link href="~/assetscamera/css/index.css" rel="stylesheet" />
+    <link href="~/assetscamera/css/index.min.css" rel="stylesheet" />
 }
 
 @section Styles
@@ -49,233 +50,254 @@
     </style>
 }
 
-<div class="keypad-section" id="keypadSection">
-	<div class="p-3">
-		<div class="row align-items-center">
-			<div class="col-2">
-				<div class="text-center">
-                    <button type="button" class="" onclick="openPersonnelModal()" style="border: 1px solid #373a3d;background-color: #2b333f;border-radius: 10px;">
-						<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-							<circle cx="7" cy="9" r="3" fill="#8FFAFA"/>
-							<circle cx="17" cy="9" r="3" fill="#8FFAFA"/>
-							<circle cx="12" cy="9" r="4" fill="#23A8A8"/>
-							<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5685 18H19.895C20.4867 18 20.9403 17.4901 20.7966 16.9162C20.4284 15.4458 19.448 13 17 13C16.114 13 15.4201 13.3205 14.8781 13.7991C16.3858 14.7773 17.1654 16.4902 17.5685 18Z" fill="#8FFAFA"/>
-							<path fill-rule="evenodd" clip-rule="evenodd" d="M9.12197 13.7991C8.57989 13.3205 7.88609 13 7 13C4.55208 13 3.57166 15.4458 3.20343 16.9162C3.05971 17.4901 3.51335 18 4.10498 18H6.43155C6.83464 16.4902 7.61422 14.7773 9.12197 13.7991Z" fill="#8FFAFA"/>
-							<path d="M12 14C15.7087 14 16.6665 17.301 16.9139 19.0061C16.9932 19.5526 16.5523 20 16 20H8C7.44772 20 7.00684 19.5526 7.08614 19.0061C7.33351 17.301 8.29134 14 12 14Z" fill="#23A8A8"/>
-						</svg>
-						<p class="m-0" style="font-size: 14px; color: #ffffff">جستجو</p>
-					</button>
-				</div>
-			</div>
-            <div class="col-8">
-	            <div class="text-center">
-		            <img src="~/assetsclient/images/gozareshgir-gr.svg" width="50px" />
-		            <h5 class="mt-1 title-logo title-logo-mobile">سامانه هوشمند گزارشگیر</h5>
-	            </div>
-            </div>
-            <div class="col-2">
-	            <div class="text-center">
-		            <a asp-area="" asp-page="/Index" asp-page-handler="Logout">
-			            <svg width="25" height="25" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-				            <ellipse cx="6" cy="6" rx="6" ry="6" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 20 18)" fill="#2dbbbb" fill-opacity="0.50" />
-				            <path d="M7.7 12C7.7 8.52061 10.5206 5.7 14 5.7C17.4794 5.7 20.3 8.52061 20.3 12C20.3 15.4794 17.4794 18.3 14 18.3C10.5206 18.3 7.7 15.4794 7.7 12Z" stroke="#2dbbbb" stroke-opacity="0.50" stroke-width="0.6" />
-				            <path d="M8 18.9282C9.21615 19.6303 10.5957 20 12 20C13.4043 20 14.7838 19.6303 16 18.9282C17.2162 18.2261 18.2261 17.2162 18.9282 16C19.6303 14.7838 20 13.4043 20 12C20 10.5957 19.6303 9.21615 18.9282 8C18.2261 6.78385 17.2162 5.77394 16 5.0718C14.7838 4.36965 13.4043 4 12 4C10.5957 4 9.21615 4.36965 8 5.0718" stroke="#ef4444" stroke-width="1.2" stroke-linecap="round" />
-				            <path d="M6 7L2 12M2 12L6 17M2 12H11" stroke="#ef4444" stroke-width="1.2" stroke-linecap="round" />
-			            </svg>
-			            <p class="m-0" style="font-size: 14px; color: #ffffff">خاموش</p>
-		            </a>
-	            </div>
-            </div>
-		</div>
-		<h4 class="text-center text-white mt-2">لطفا کد پرسنلی خود را وارد کنید</h4>
-		<p id="errorMessage" class="errorMessage mt-2"></p>
-	</div>
-	<div class="keypadContainer">
-            
-			<div class="keypad dark" tabindex="0"><div class="keypad-input-field">
-					<div class="entered-numbers-wrapper">
-						<input type="hidden" id="inputField" readonly>
-	                    <div class="entered-numbers">
-		                    <div class="num"></div>
-	                    </div>
-					</div>
-					<div class="backspace">
-						<div class="hover-dot backspace-icon">
-							<i class="fa fa-times"></i>
-						</div>
-					</div>
-				</div>
-				<div class="keypad-numbers"><div class="item-wrapper hover-dot">
-					<div class="item">
-						<h1>1</h1>
-					</div>
-				</div><div class="item-wrapper hover-dot">
-					<div class="item">
-						<h1>2</h1>
-					</div>
-				</div><div class="item-wrapper hover-dot">
-					<div class="item">
-						<h1>3</h1>
-					</div>
-				</div><div class="item-wrapper hover-dot">
-					<div class="item">
-						<h1>4</h1>
-					</div>
-				</div><div class="item-wrapper hover-dot">
-					<div class="item">
-						<h1>5</h1>
-					</div>
-				</div><div class="item-wrapper hover-dot">
-					<div class="item">
-						<h1>6</h1>
-					</div>
-				</div><div class="item-wrapper hover-dot">
-					<div class="item">
-						<h1>7</h1>
-					</div>
-				</div><div class="item-wrapper hover-dot">
-					<div class="item">
-						<h1>8</h1>
-					</div>
-				</div><div class="item-wrapper hover-dot">
-					<div class="item">
-						<h1>9</h1>
-					</div>
-				</div>
-                <div class="item-wrapper hover-dot" id="cleanBtn" style="border: 1px solid #ef4444;">
-	                <div class="item">
-		                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path fill-rule="evenodd" clip-rule="evenodd" d="M21.0001 6H3.00006V9C4.10463 9 5.00006 9.89543 5.00006 11V15C5.00006 17.8284 5.00006 19.2426 5.87874 20.1213C6.75742 21 8.17163 21 11.0001 21H13.0001C15.8285 21 17.2427 21 18.1214 20.1213C19.0001 19.2426 19.0001 17.8284 19.0001 15V11C19.0001 9.89543 19.8955 9 21.0001 9V6ZM10.5001 11C10.5001 10.4477 10.0523 10 9.50006 10C8.94778 10 8.50006 10.4477 8.50006 11V16C8.50006 16.5523 8.94778 17 9.50006 17C10.0523 17 10.5001 16.5523 10.5001 16V11ZM15.5001 11C15.5001 10.4477 15.0523 10 14.5001 10C13.9478 10 13.5001 10.4477 13.5001 11V16C13.5001 16.5523 13.9478 17 14.5001 17C15.0523 17 15.5001 16.5523 15.5001 16V11Z" fill="#ffffff" />
-			                <path d="M10.0681 3.37059C10.1821 3.26427 10.4332 3.17033 10.7825 3.10332C11.1318 3.03632 11.5597 3 12 3C12.4403 3 12.8682 3.03632 13.2175 3.10332C13.5668 3.17033 13.8179 3.26427 13.9319 3.37059" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
-		                </svg>
-	                </div>
-				</div>
-				<div class="item-wrapper hover-dot">
-					<div class="item">
-						<h1>0</h1>
-					</div>
-				</div><div class="item-wrapper hover-dot" onclick="enterPersonnelCode()" style="border: 1px solid #84cc16;">
-					<div class="item1">
-						تائید
-					</div>
-				</div></div>
-			</div>
-
+<div id="loader" class="loader-container">
+    <div class="loader">
+		<svg version="1.1" class="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 621.6 721.91" x="0px" y="0px" style="enable-background:new 0 0 97.4 71.4;" xml:space="preserve">
+			<defs>
+				<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
+					<stop offset="0%" style="stop-color:#30c1c1;stop-opacity:1" />
+					<stop offset="100%" style="stop-color:#087474;stop-opacity:1" />
+				</linearGradient>
+			</defs>
+	        <polygon class="cls-3 letter letter--gradient" points="0 328.82 129.91 244.95 129.91 453.87 310.8 562.4 488.4 453.87 488.4 355.2 310.8 355.2 488.4 241.73 621.6 241.73 621.6 541.02 310.8 721.91 0 541.02 0 328.82" />
+	        <polygon class="cls-1 letter letter--gradient" points="217.07 309.16 217.07 192.4 426.8 65.78 523.83 123.33 217.07 309.16" />
+	        <polyline class="cls-2 letter letter--gradient" points="308.61 0 395.56 47.69 1.3 293.19 1.3 184.66 308.61 0" />
+		</svg>
 	</div>
 </div>
 
-<div id="desktopDisplay">
-    <div class="d-flex flex-column justify-content-center vh-100 text-center">
-	    <div>
-		    <img src="~/assetsclient/images/gozareshgir-gr.svg" width="110px" />
-		    <h5 class="mt-2 title-logo">سامانه هوشمند گزارشگیر</h5>
-	    </div>
-        <div>
-	        <p class="text-white">برای ساعات حضور و غیاب میباست از گوشی استفاده نمایید!</p>
-	        <a class="logoutBtn" asp-page="/Index" asp-page-handler="Logout">خروج</a>
+<div id="content" style="display: none">
+    <div class="keypad-section" id="keypadSection">
+        <div class="p-3">
+            <div class="row align-items-center">
+                <div class="col-2">
+                    <div class="text-center">
+                        <button type="button" class="" onclick="openPersonnelModal()" style="border: 1px solid #373a3d;background-color: #2b333f;border-radius: 10px;">
+                            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <circle cx="7" cy="9" r="3" fill="#8FFAFA" />
+                                <circle cx="17" cy="9" r="3" fill="#8FFAFA" />
+                                <circle cx="12" cy="9" r="4" fill="#23A8A8" />
+                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5685 18H19.895C20.4867 18 20.9403 17.4901 20.7966 16.9162C20.4284 15.4458 19.448 13 17 13C16.114 13 15.4201 13.3205 14.8781 13.7991C16.3858 14.7773 17.1654 16.4902 17.5685 18Z" fill="#8FFAFA" />
+                                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.12197 13.7991C8.57989 13.3205 7.88609 13 7 13C4.55208 13 3.57166 15.4458 3.20343 16.9162C3.05971 17.4901 3.51335 18 4.10498 18H6.43155C6.83464 16.4902 7.61422 14.7773 9.12197 13.7991Z" fill="#8FFAFA" />
+                                <path d="M12 14C15.7087 14 16.6665 17.301 16.9139 19.0061C16.9932 19.5526 16.5523 20 16 20H8C7.44772 20 7.00684 19.5526 7.08614 19.0061C7.33351 17.301 8.29134 14 12 14Z" fill="#23A8A8" />
+                            </svg>
+                            <p class="m-0" style="font-size: 14px; color: #ffffff">جستجو</p>
+                        </button>
+                    </div>
+                </div>
+                <div class="col-8">
+                    <div class="text-center">
+                        <img src="~/assetsclient/images/gozareshgir-gr.svg" width="50px" />
+                        <h5 class="mt-1 title-logo title-logo-mobile">سامانه هوشمند گزارشگیر</h5>
+                    </div>
+                </div>
+                <div class="col-2">
+	                <div class="text-center">
+                        <a data-bs-toggle="modal" data-bs-target="#passwordModal">
+			                <svg width="25" height="25" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+				                <ellipse cx="6" cy="6" rx="6" ry="6" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 20 18)" fill="#2dbbbb" fill-opacity="0.50"/>
+				                <path d="M7.7 12C7.7 8.52061 10.5206 5.7 14 5.7C17.4794 5.7 20.3 8.52061 20.3 12C20.3 15.4794 17.4794 18.3 14 18.3C10.5206 18.3 7.7 15.4794 7.7 12Z" stroke="#2dbbbb" stroke-opacity="0.50" stroke-width="0.6"/>
+				                <path d="M8 18.9282C9.21615 19.6303 10.5957 20 12 20C13.4043 20 14.7838 19.6303 16 18.9282C17.2162 18.2261 18.2261 17.2162 18.9282 16C19.6303 14.7838 20 13.4043 20 12C20 10.5957 19.6303 9.21615 18.9282 8C18.2261 6.78385 17.2162 5.77394 16 5.0718C14.7838 4.36965 13.4043 4 12 4C10.5957 4 9.21615 4.36965 8 5.0718" stroke="#ef4444" stroke-width="1.2" stroke-linecap="round"/>
+				                <path d="M6 7L2 12M2 12L6 17M2 12H11" stroke="#ef4444" stroke-width="1.2" stroke-linecap="round"/>
+			                </svg>
+			                <p style="font-size: 14px; color: #ffffff">خاموش</p>
+		                </a>
+	                </div>
+                </div>
+            </div>
+            <h4 class="text-center text-white mt-2">لطفا کد پرسنلی خود را وارد کنید</h4>
+            <p id="errorMessage" class="errorMessage mt-2"></p>
+        </div>
+        <div class="keypadContainer">
+
+            <div class="keypad dark" tabindex="0">
+                <div class="keypad-input-field">
+                    <div class="entered-numbers-wrapper">
+                        <input type="hidden" id="inputField" readonly>
+                        <div class="entered-numbers">
+                            <div class="num"></div>
+                        </div>
+                    </div>
+                    <div class="backspace">
+                        <div class="hover-dot backspace-icon">
+                            <i class="fa fa-times"></i>
+                        </div>
+                    </div>
+                </div>
+                <div class="keypad-numbers">
+                    <div class="item-wrapper hover-dot">
+                        <div class="item">
+                            <h1>1</h1>
+                        </div>
+                    </div><div class="item-wrapper hover-dot">
+                        <div class="item">
+                            <h1>2</h1>
+                        </div>
+                    </div><div class="item-wrapper hover-dot">
+                        <div class="item">
+                            <h1>3</h1>
+                        </div>
+                    </div><div class="item-wrapper hover-dot">
+                        <div class="item">
+                            <h1>4</h1>
+                        </div>
+                    </div><div class="item-wrapper hover-dot">
+                        <div class="item">
+                            <h1>5</h1>
+                        </div>
+                    </div><div class="item-wrapper hover-dot">
+                        <div class="item">
+                            <h1>6</h1>
+                        </div>
+                    </div><div class="item-wrapper hover-dot">
+                        <div class="item">
+                            <h1>7</h1>
+                        </div>
+                    </div><div class="item-wrapper hover-dot">
+                        <div class="item">
+                            <h1>8</h1>
+                        </div>
+                    </div><div class="item-wrapper hover-dot">
+                        <div class="item">
+                            <h1>9</h1>
+                        </div>
+                    </div>
+                    <div class="item-wrapper hover-dot" id="cleanBtn" style="border: 1px solid #ef4444;">
+                        <div class="item">
+                            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd" clip-rule="evenodd" d="M21.0001 6H3.00006V9C4.10463 9 5.00006 9.89543 5.00006 11V15C5.00006 17.8284 5.00006 19.2426 5.87874 20.1213C6.75742 21 8.17163 21 11.0001 21H13.0001C15.8285 21 17.2427 21 18.1214 20.1213C19.0001 19.2426 19.0001 17.8284 19.0001 15V11C19.0001 9.89543 19.8955 9 21.0001 9V6ZM10.5001 11C10.5001 10.4477 10.0523 10 9.50006 10C8.94778 10 8.50006 10.4477 8.50006 11V16C8.50006 16.5523 8.94778 17 9.50006 17C10.0523 17 10.5001 16.5523 10.5001 16V11ZM15.5001 11C15.5001 10.4477 15.0523 10 14.5001 10C13.9478 10 13.5001 10.4477 13.5001 11V16C13.5001 16.5523 13.9478 17 14.5001 17C15.0523 17 15.5001 16.5523 15.5001 16V11Z" fill="#ffffff" />
+                                <path d="M10.0681 3.37059C10.1821 3.26427 10.4332 3.17033 10.7825 3.10332C11.1318 3.03632 11.5597 3 12 3C12.4403 3 12.8682 3.03632 13.2175 3.10332C13.5668 3.17033 13.8179 3.26427 13.9319 3.37059" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="item-wrapper hover-dot">
+                        <div class="item">
+                            <h1>0</h1>
+                        </div>
+                    </div><div class="item-wrapper hover-dot" onclick="enterPersonnelCode()" style="border: 1px solid #84cc16;">
+                        <div class="item1">
+                            تائید
+                        </div>
+                    </div>
+                </div>
+            </div>
+
         </div>
     </div>
-</div>
 
-<div id="mobileDisplay" class="container">
-    <div class="row text-center">
+    <div id="desktopDisplay">
+        <div class="d-flex flex-column justify-content-center vh-100 text-center">
+            <div>
+                <img src="~/assetsclient/images/gozareshgir-gr.svg" width="110px" />
+                <h5 class="mt-2 title-logo">سامانه هوشمند گزارشگیر</h5>
+            </div>
+            <div>
+                <p class="text-white">برای ساعات حضور و غیاب میباست از گوشی استفاده نمایید!</p>
+                <a class="logoutBtn" asp-page="/Index" asp-page-handler="Logout">خروج</a>
+            </div>
+        </div>
+    </div>
 
-	    <div class="col-12">
-		    <div class="row align-items-center mt-3">
-			    <div class="col-2">
-				</div>
-			    <div class="col-8">
-				    <div style="">
-					    <img src="~/assetsclient/images/gozareshgir-gr.svg" width="50px" />
-					    <h5 class="mt-1 title-logo title-logo-mobile">سامانه هوشمند گزارشگیر</h5>
-				    </div>
-			    </div>
-			    <div class="col-2">
-                    <div class="text-center">
-					    <a asp-area="" asp-page="/Index" asp-page-handler="Logout">
-						    <svg width="25" height="25" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-							    <ellipse cx="6" cy="6" rx="6" ry="6" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 20 18)" fill="#2dbbbb" fill-opacity="0.50" />
-							    <path d="M7.7 12C7.7 8.52061 10.5206 5.7 14 5.7C17.4794 5.7 20.3 8.52061 20.3 12C20.3 15.4794 17.4794 18.3 14 18.3C10.5206 18.3 7.7 15.4794 7.7 12Z" stroke="#2dbbbb" stroke-opacity="0.50" stroke-width="0.6" />
-							    <path d="M8 18.9282C9.21615 19.6303 10.5957 20 12 20C13.4043 20 14.7838 19.6303 16 18.9282C17.2162 18.2261 18.2261 17.2162 18.9282 16C19.6303 14.7838 20 13.4043 20 12C20 10.5957 19.6303 9.21615 18.9282 8C18.2261 6.78385 17.2162 5.77394 16 5.0718C14.7838 4.36965 13.4043 4 12 4C10.5957 4 9.21615 4.36965 8 5.0718" stroke="#ef4444" stroke-width="1.2" stroke-linecap="round" />
-							    <path d="M6 7L2 12M2 12L6 17M2 12H11" stroke="#ef4444" stroke-width="1.2" stroke-linecap="round" />
-						    </svg>
-						    <p style="font-size: 14px; color: #ffffff">خاموش</p>
-					    </a>
-				    </div>
-			    </div>
-		    </div>
-            
-		    <div class="row">
-			    <div class="col-12 text-center mx-auto p-0">
-				    <!--<div id="display" style="display: block; position: relative">
-					    <video style="object-fit: cover" id="video" width="340" height="340" autoplay></video>
-					    <img src="~/AssetsClient/images/face.png" style="position: absolute;top: 0;right: 0;width: 340px;  border-radius: 100%;" />
-				    </div> -->
-				    <div class="w-100 d-flex align-items-center justify-content-center">
-					    <div id="display" class="cameraSection">
-						    <video style="position: absolute; top: 0px; right: 0; object-fit: cover" id="video" width="360" height="360" autoplay></video>
-						    <img src="~/AssetsClient/images/face.png" class="faceImageCamera"/>
-					    </div>
-				    </div>
-				    @* <div id="display" style="position: relative;width: 1400px;height: 1400px;padding: 735px;display: flex;align-items: center;justify-content: center;">
-            <video style="object-fit: cover" id="video" width="1000" height="1000" autoplay></video>
-            <img src="~/AssetsClient/images/face.png" style="position: absolute;top: 35px;width: 1400px;border-radius: 1400px;transform: scale(1.006);" />
-            </div> *@
-				    <p id="notFound" class="mt-2 text-white" style="font-size: 16px; display: none;">شناسایی نشد!</p>
-                    <div id="users" class="mt-2 text-white" style="font-size: 16px;"></div>
-				    <!-- <img src="./images/mobile-rollcall.png" alt=""> -->
-			    </div>
-		    </div>
-	    </div>
+    <div id="mobileDisplay" class="container">
+        <div class="row text-center">
 
-        <div class="" style="margin: 10px 0 0 0;">
-            <div class="">
-                <input type="hidden" id="workshopId" asp-for="@Model.WorkshopId" value="@Model.WorkshopId" />
-                <div style="display: block;font-size: 16px;width: 100%;">
-                    <div class="mb-2" id="btnOutOrIn">
+            <div class="col-12">
+                <div class="row align-items-center mt-3">
+                    <div class="col-2">
                     </div>
-
-                    <div id="reAnalyz" class="row" style="position: fixed;bottom: 12px;right: 12px;display: flex;justify-content: center;width: 100%;padding: 0 20px;">
-                        <div class="col-6">
-                            <a id="reloadRec" class="btn-start mb-1">شناسایی مجدد</a>
+                    <div class="col-8">
+                        <div style="">
+                            <img src="~/assetsclient/images/gozareshgir-gr.svg" width="50px" />
+                            <h5 class="mt-1 title-logo title-logo-mobile">سامانه هوشمند گزارشگیر</h5>
                         </div>
-                        <div class="col-6">
-                            <a onclick="roloadAgain()" id="roloadAgain" class="btn-start mb-1 d-none">انصراف</a>
-                        </div>
-                        @* <a id="reEnterCodeBox" class="btn-start">تلاش مجدد</a> *@
-                        @* <a onclick="sendPersonelCodeToGetEmployeeId(86)" class="btn-start">تایید کد پرسنلی</a> *@
-                        <!--<a id="reloadRec" class="btn btn-primary" style="border-radius: 15px;display: none;">شروع شناسایی </a>
-                        <a id="notFound" class="btn btn-warning" style="border-radius: 15px;display: none;"> شناسایی نشد  </a>-->
                     </div>
-                    <div id="waiting" class="d-none" style=" display: none;  color: #ffffff;">
-                        <i class="ion-loading-a"> </i>  آماده سازی...
+                    <div class="col-2">
+	                    <div class="text-center">
+		                    <a data-bs-toggle="modal" data-bs-target="#passwordModal">
+			                    <svg width="25" height="25" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+				                    <ellipse cx="6" cy="6" rx="6" ry="6" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 20 18)" fill="#2dbbbb" fill-opacity="0.50"/>
+				                    <path d="M7.7 12C7.7 8.52061 10.5206 5.7 14 5.7C17.4794 5.7 20.3 8.52061 20.3 12C20.3 15.4794 17.4794 18.3 14 18.3C10.5206 18.3 7.7 15.4794 7.7 12Z" stroke="#2dbbbb" stroke-opacity="0.50" stroke-width="0.6"/>
+				                    <path d="M8 18.9282C9.21615 19.6303 10.5957 20 12 20C13.4043 20 14.7838 19.6303 16 18.9282C17.2162 18.2261 18.2261 17.2162 18.9282 16C19.6303 14.7838 20 13.4043 20 12C20 10.5957 19.6303 9.21615 18.9282 8C18.2261 6.78385 17.2162 5.77394 16 5.0718C14.7838 4.36965 13.4043 4 12 4C10.5957 4 9.21615 4.36965 8 5.0718" stroke="#ef4444" stroke-width="1.2" stroke-linecap="round"/>
+				                    <path d="M6 7L2 12M2 12L6 17M2 12H11" stroke="#ef4444" stroke-width="1.2" stroke-linecap="round"/>
+			                    </svg>
+			                    <p style="font-size: 14px; color: #ffffff">خاموش</p>
+		                    </a>
+	                    </div>
                     </div>
-                    <div id="recognizing" style="display: none;  color: #ffffff;">
-                        <i class="ion-loading-a"> </i> در حال شناسایی...
-                    </div>
-                    
-                    @*                     <div id="users" style="">
-                    </div> *@
                 </div>
 
-                <!--
-                <div id="btn1">
-                    <button id="detect" class="btn-start w-100">شروع شناسایی</button>
+                <div class="row">
+                    <div class="col-12 text-center mx-auto p-0">
+                        <!--<div id="display" style="display: block; position: relative">
+                            <video style="object-fit: cover" id="video" width="340" height="340" autoplay></video>
+                            <img src="~/AssetsClient/images/face.png" style="position: absolute;top: 0;right: 0;width: 340px;  border-radius: 100%;" />
+                        </div> -->
+                        <div class="w-100 d-flex align-items-center justify-content-center">
+                            <div id="display" class="cameraSection">
+                                <video style="position: absolute; top: 0px; right: 0; object-fit: cover" id="video" width="360" height="360" autoplay></video>
+                                <img src="~/AssetsClient/images/face.png" class="faceImageCamera" />
+                            </div>
+                        </div>
+                        @* <div id="display" style="position: relative;width: 1400px;height: 1400px;padding: 735px;display: flex;align-items: center;justify-content: center;">
+                        <video style="object-fit: cover" id="video" width="1000" height="1000" autoplay></video>
+                        <img src="~/AssetsClient/images/face.png" style="position: absolute;top: 35px;width: 1400px;border-radius: 1400px;transform: scale(1.006);" />
+                        </div> *@
+                        <p id="notFound" class="mt-2 text-white" style="font-size: 16px; display: none;">شناسایی نشد!</p>
+                        <div id="users" class="mt-2 text-white" style="font-size: 16px;"></div>
+                        <!-- <img src="./images/mobile-rollcall.png" alt=""> -->
+                    </div>
                 </div>
-                <div id="btn2" style="display: none;">
-                    <button id="enter" class="btn-enter w-100">ثبت ورود</button>
+            </div>
+
+            <div class="" style="margin: 10px 0 0 0;">
+                <div class="">
+                    <input type="hidden" id="workshopId" asp-for="@Model.WorkshopId" value="@Model.WorkshopId" />
+                    <div style="display: block;font-size: 16px;width: 100%;">
+                        <div class="mb-2" id="btnOutOrIn">
+                        </div>
+
+                        <div id="reAnalyz" class="row" style="position: fixed;bottom: 12px;right: 12px;display: flex;justify-content: center;width: 100%;padding: 0 20px;">
+                            <div class="col-6">
+                                <a id="reloadRec" class="btn-start mb-1">شناسایی مجدد</a>
+                            </div>
+                            <div class="col-6">
+                                <a onclick="roloadAgain()" id="roloadAgain" class="btn-start mb-1 d-none">انصراف</a>
+                            </div>
+                            @* <a id="reEnterCodeBox" class="btn-start">تلاش مجدد</a> *@
+                            @* <a onclick="sendPersonelCodeToGetEmployeeId(86)" class="btn-start">تایید کد پرسنلی</a> *@
+                            <!--<a id="reloadRec" class="btn btn-primary" style="border-radius: 15px;display: none;">شروع شناسایی </a>
+                            <a id="notFound" class="btn btn-warning" style="border-radius: 15px;display: none;"> شناسایی نشد  </a>-->
+                        </div>
+                        <div id="waiting" class="d-none" style=" display: none;  color: #ffffff;">
+                            <i class="ion-loading-a"> </i>  آماده سازی...
+                        </div>
+                        <div id="recognizing" style="display: none;  color: #ffffff;">
+                            <i class="ion-loading-a"> </i> در حال شناسایی...
+                        </div>
+
+                        @*                     <div id="users" style="">
+                        </div> *@
+                    </div>
+
+                    <!--
+                    <div id="btn1">
+                        <button id="detect" class="btn-start w-100">شروع شناسایی</button>
+                    </div>
+                    <div id="btn2" style="display: none;">
+                        <button id="enter" class="btn-enter w-100">ثبت ورود</button>
+                    </div>
+                    <div id="btn3" style="display: none;">
+                        <button id="leaveStartTime" class="btn-enter w-50 mx-1">ثبت شروع مرخصی ساعتی</button>
+                        <button id="exit1" class="btn-exit w-50 mx-1">ثبت خروج</button>
+                    </div>
+                    <div id="btn4" style="display: none;">
+                        <button id="leaveEndTime" class="btn-start w-100">ثبت پایان مرخصی ساعتی</button>
+                    </div>
+                    <div id="btn5" style="display: none;">
+                        <button id="exit2" class="btn-exit w-100">ثبت خروج</button>
+                    </div>
+                    -->
                 </div>
-                <div id="btn3" style="display: none;">
-                    <button id="leaveStartTime" class="btn-enter w-50 mx-1">ثبت شروع مرخصی ساعتی</button>
-                    <button id="exit1" class="btn-exit w-50 mx-1">ثبت خروج</button>
-                </div>
-                <div id="btn4" style="display: none;">
-                    <button id="leaveEndTime" class="btn-start w-100">ثبت پایان مرخصی ساعتی</button>
-                </div>
-                <div id="btn5" style="display: none;">
-                    <button id="exit2" class="btn-exit w-100">ثبت خروج</button>
-                </div>
-                -->
             </div>
         </div>
     </div>
@@ -302,6 +324,10 @@
 	</div>
 </div>
 
+
+<!-- Modal -->
+<partial name="AddPasswordModal" />
+
 @section Script
 {
 
@@ -312,423 +338,64 @@
     <script src="~/weights/face-api.js"></script>
 
     <script>
-        const video = document.getElementById("video");
+		const video = document.getElementById("video");
 
-        const waiting = document.getElementById("waiting");
-        const recognizing = document.getElementById("recognizing");
-        const reloadRec = document.getElementById("reloadRec");
-        const notFound = document.getElementById("notFound");
-        const workshopId = Number('@Model.WorkshopId');
-        const urlPath = "@Model.UrlPath";
+		const waiting = document.getElementById("waiting");
+		const recognizing = document.getElementById("recognizing");
+		const reloadRec = document.getElementById("reloadRec");
+		const notFound = document.getElementById("notFound");
+		const workshopId = Number('@Model.WorkshopId');
+		const urlPath = "@Model.UrlPath";
 
-        var antiForgeryToken = $(`@Html.AntiForgeryToken()`).val();
-        var AjaxSendPersonelCodeToGetEmployeeId = `@Url.Page("./Index", "SendPersonelCodeToGetEmployeeId")`;
-        var AjaxEmployeeFlag = `@Url.Page("./Index", "EmployeeFlag")`;
-        var AjaxOut = `@Url.Page("./Index", "Out")`;
-        var AjaxInCom = `@Url.Page("./Index", "InCom")`;
-    </script>
+		var antiForgeryToken = $(`@Html.AntiForgeryToken()`).val();
+		var AjaxSendPersonelCodeToGetEmployeeId = `@Url.Page("./Index", "SendPersonelCodeToGetEmployeeId")`;
+		var AjaxEmployeeFlag = `@Url.Page("./Index", "EmployeeFlag")`;
+		var AjaxOut = `@Url.Page("./Index", "Out")`;
+		var AjaxInCom = `@Url.Page("./Index", "InCom")`;
+        
+	</script>
 
-    <script src="~/assetscamera/js/index.js"></script>
-
-	@* <script>
-        const video = document.getElementById("video");
-        const waiting = document.getElementById("waiting");
-        const recognizing = document.getElementById("recognizing");
-        const reloadRec = document.getElementById("reloadRec");
-        const notFound = document.getElementById("notFound");
-        const workshopId = Number('@Model.WorkshopId');
-        const urlPath = "@Model.UrlPath";
-       
+    @* <script src="~/assetscamera/js/index.js"></script> *@
+    <script src="~/assetscamera/js/index.min.js"></script>
     
-                // let modelsUrl = "https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/";
+    
+    <script>
+	    $(document).ready(function () {
+		    $('#form').attr('autocomplete', 'off');
+		    $('#password').attr('autocomplete', 'new-password');
 
-        const run = async () => {
+		    $('#password').on('keypress', function (e) {
+			    var persianLetters = /[\u0600-\u06FF]/;
+			    if (persianLetters.test(String.fromCharCode(e.which))) {
+				    e.preventDefault();
+			    }
+		    });
 
-            await Promise.all([
-                //api
-                // faceapi.nets.ssdMobilenetv1.loadFromUri(modelsUrl + 'ssd_mobilenetv1_model-weights_manifest.json'),
-                // faceapi.nets.faceRecognitionNet.loadFromUri(modelsUrl + 'face_recognition_model-weights_manifest.json'),
-                // faceapi.nets.faceLandmark68Net.loadFromUri(modelsUrl + 'face_landmark_68_model-weights_manifest.json')
-
-                //local source
-                faceapi.nets.ssdMobilenetv1.loadFromUri("\\weights\\"),
-                faceapi.nets.faceRecognitionNet.loadFromUri("\\weights\\"),
-                faceapi.nets.faceLandmark68Net.loadFromUri("\\weights\\")
-
-                // faceapi.nets.ssdMobilenetv1.loadFromDisk(modelPath),
-                // faceapi.nets.faceRecognitionNet.loadFromDisk(modelPath),
-                // faceapi.nets.faceLandmark68Net.loadFromDisk(modelPath)
-            ]);
-
-       
-        }
-        run();
-       
-        var personIds = [];
-        var urls = [];
-        function addPic() {
-            for (let i = 0; i < personIds.length; i++) {
-                urls.push({ id: personIds[i], listUrls: [] })
-                for (let j = 1; j <= 2; j++) {
-                    const a = `${urlPath}/Camera?handler=ShowPicture&index=${j}&workshopId=${workshopId}&label=${personIds[i]}`;
-                    urls[i].listUrls.push(a);
-                }
-
-            }
-            startWebcam();
-        }
-        function startWebcam() {
-            navigator.mediaDevices
-                .getUserMedia({
-                    video: true,
-                    audio: false,
-                })
-                .then((stream) => {
-                    video.srcObject = stream;
-                    waiting.style.display = "block";
-                })
-                .catch((error) => {
-                    console.error(error);
-                });
-        }
-        function stopWebcam() {
-            window.location.reload();
-              
-        }
-
-
-       
-       
-        var stop = false;
-        // var getImages = document.getElementById("imageData");
-        function getLabeledFaceDescriptions() {
-            return Promise.all(
-                urls.map(async (url) => {
-                    let startDate = new Date().getTime();
-                    let descriptions = [];
-                    url.listUrls.forEach(async function (path) {
-
-                        // var a = `\\Faces\\${workshopId}\\${label}\\${i}.jpg`;
-
-                        // var mix = `${label}${i}`;
-                        // let img = getImages.querySelector(".imageData[data-imageId='" + mix + "']");
-                        console.log(`${url.id} ${path}`)
-                        const img = await faceapi.fetchImage(path);
-
-                        const detections = await faceapi.detectSingleFace(img).withFaceLandmarks().withFaceDescriptor();
-
-
-                        descriptions.push(detections.descriptor);
-
-                    });
-                    let endDate = new Date().getTime();
-                    let elapsed = (endDate - startDate) / 1000;
-                    console.log(`time forloop elapsed is ${elapsed}`);
-                    console.log(url.id);
-                    console.log(descriptions);
-                    return new faceapi.LabeledFaceDescriptors(url.id, descriptions);
-                })
-            );
-        }
-
-
-        var cacheName = [];
-        var unknown = [];
-        var endOfRecognition = true;
-        let display = document.getElementById("display");
-        var reloadActionControl = false;
-        // //شناسایی مجدد
-        // function reset() {
-        //     let oldName = document.getElementById("btnName");
-        //     if (oldName != null) {
-        //         oldName.remove(); // حذف نام قبلی
-        //     }
-
-        //     endOfRecognition = false; //   خاموشی پایان شناسایی
-        //     stop = false; //خاموشی استاپ شناسایی
-        //     recognizing.style.display = "block"; // نمایش آیکون درحال شناسایی
-        //     reloadRec.style.display = "none"; // مخفی شدن دکمه شناسایی مجدد
-        //     cacheName = []; // خالی کردن لیست شناسایی شده ها
-
-        // }
-        reloadRec.style.display = "none";
-        reloadRec.addEventListener("click",
-            function () {
-                // let oldName = document.getElementById("btnName");
-                // if (oldName != null) {
-                //     oldName.remove(); // حذف نام قبلی
-                // }
-
-                $('#users').html('');
-                //$('#testDistance').html('');
-                endOfRecognition = false; //   خاموشی پایان شناسایی
-                stop = false; //خاموشی استاپ شناسایی
-                recognizing.style.display = "block"; // نمایش آیکون درحال شناسایی
-                reloadActionControl = true;
-                reloadRec.style.display = "none"; // مخفی شدن دکمه شناسایی
-                notFound.style.display = "none"; // مخفی شدن دکمه شناسایی
-                cacheName = []; // خالی کردن لیست شناسایی شده ها
-                unknown = [];
-             
-            });
-        var interId;
-
-
-
-       
-
-        video.addEventListener("play",
-            async () => {
-       
-                  const  labeledFaceDescriptors = await getLabeledFaceDescriptions();
-
-                  const  faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors);
-                
-              
-                const canvas = faceapi.createCanvasFromMedia(video);
-                display.append(canvas);
-
-                const displaySize = { width: video.width, height: video.height };
-                faceapi.matchDimensions(canvas, displaySize);
-                interId = setInterval(async () => {
-                    if (!stop) {
-                      
-                        waiting.style.display = "none";
-                        if (!reloadActionControl) {
-                            reloadRec.style.display = "block";
-                        }
-                        if (endOfRecognition === false) {
-                          
-                            waiting.style.display = "none";
-                            reloadActionControl = true;
-                            recognizing.style.display = "block";
-                            const detections = await faceapi
-                                .detectAllFaces(video)
-                                .withFaceLandmarks()
-                                .withFaceDescriptors();
-
-                            const resizedDetections = faceapi.resizeResults(detections, displaySize);
-
-                            canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
-
-                            const results = resizedDetections.map((d) => {
-                                return faceMatcher.findBestMatch(d.descriptor);
-                            });
-
-                            results.forEach((result, i) => {
-                                // reloadRec.style.display = "none";
-                                const box = resizedDetections[i].detection.box;
-                                const drawBox = new faceapi.draw.DrawBox(box,
-                                    {
-                                        label: "آنالیز چهره",
-                                    });
-
-                                drawBox.draw(canvas);
-
-                                let userId = result.label;
-                                let userDistance = result.distance;
-
-                                // console.log(cacheName.length);
-
-                                // 0.38
-                                if (userId != "unknown" && userDistance <= 0.45) {
-                                    cacheName.push(userId);
-                                    let res = "[ user : " + result.label + " - distance : " + userDistance + " ]";
-                                    let testUser = `<h1 style="color:green;">${res}</h1>`;
-                                    //$('#testDistance').append(testUser);
-                                } else {
-                                    let res2 = "[ user : " + result.label + " - distance : " + userDistance + " ]";
-                                    let testUser = `<h1 style="color:red;">${res2}</h1>`;
-                                    // $('#testDistance').append(testUser);
-                                    unknown.push("unknown");
-                                }
-                                // var t = $('#display').find;
-                                // cacheName.push(userId);
-                                if (cacheName.length > 7) {
-
-                                    recognizing.style.display = "none";
-
-                                    reloadRec.style.display = "none";
-
-                                    // t.addClass('.hiddenCanvas');
-                                  
-                                    getPersonel(result.label);
-                                    endOfRecognition = true;
-                                    stop = true;
-
-                                } else if (unknown.length > 30) {
-                                    recognizing.style.display = "none";
-                                    reloadActionControl = false;
-                                    reloadRec.style.display = "block";
-                                    endOfRecognition = true;
-                                    stop = true;
-                                    notFound.style.display = "block";
-                                    // t.addClass('.hiddenCanvas');
-                                }
-                            });
-                        }
-                    }
-                }, 100);
-            });
-
-        //// AjAx to get EmployeeId with personnel code
-        function sendPersonelCodeToGetEmployeeId(personelCode) {
-            const workshopId = $('#workshopId').val();
-            $.ajax({
-                async: false,
-                // contentType: 'application/json',
-                // dataType: 'data',
-                type: 'GET',
-                url: '@Url.Page("./Index", "SendPersonelCodeToGetEmployeeId")',
-                data: { "personelCode": Number(personelCode), "workshopId": Number(workshopId) },
-                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
-                success: function (response) {
-                    if (response.isSuccess) {
-                        personIds = [];
-                        personIds.push(response.personId);
-                        addPic();
-                       
-                        endOfRecognition = false;
-                    } else {
-
-
-                        alert(response.message);
-
-                    }
-                },
-                failure: function (response) {
-                    console.log(5, response);
+            $('#passwordModal').on('shown.bs.modal', function () {
+			    $('#password').focus();
+		    });
+	     
+		    $('#toggle-password').on('click', function () {
+                var passwordInput = $('#password');
+                var passwordFieldType = passwordInput.attr('type');
 
+                if (passwordFieldType === 'password') {
+                    passwordInput.attr('type', 'text');
+                    $(this).html(`
+						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="18" height="18">
+						  <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
+						</svg>
+                    `);
+                } else {
+                    passwordInput.attr('type', 'password');
+                    $(this).html(`
+						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="18" height="18">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+							<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+						</svg>
+                    `);
                 }
             });
-        }
-
-         function getPersonel(employeeId) {
-            const workshopId = $('#workshopId').val();
-            let users = document.getElementById("users");
-            let user1 = $('#users');
-            let btnOutOrIn = $('#btnOutOrIn')
-            let employeeIdNumber = Number(employeeId)
-            if (employeeIdNumber > 0) {
-                $.ajax({
-                    async: false,
-                    //contentType: 'application/json',
-                    //dataType: 'data',
-                    type: 'GET',
-                    url: '@Url.Page("./Index", "EmployeeFlag")',
-                    data: { "employeeId": employeeIdNumber, "workshopId": Number(workshopId) },
-                    headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
-                    success: function (response) {
-                        console.log(response)
-                        if (response.flag > 0) {
-
-                            let e = document.createElement('span');
-                            e.innerHTML = response.employeeName;
-                            // e.id = "btnName";
-                            // e.className += "btn ";
-                            // e.className += "btn-primary";
-
-
-                            // const out = `<button type="button" id="out" class="btn btn-warning btnAction" onclick="out(${response.flag})">ثبت خروج</button>`;
-                            const out = `<button type="button" id="out" class="btn-exit" onclick="out(${response.flag})">ثبت خروج</button>`;
-                            user1.html('');
-                            btnOutOrIn.html('');
-                            users.append(e);
-                            btnOutOrIn.append(out);
-                        } else {
-
-                            let e = document.createElement('span');
-                            e.innerHTML = response.employeeName;
-                            // e.id = "btnName";
-                            // e.className += "btn ";
-                            // e.className += "btn-primary";
-
-
-                            // const incom = `<button type="button" id="incom" class="btn btn-info btnAction" onclick="inCom(${employeeId})">ثبت ورود</button>`;
-                            const incom = `<button type="button" id="incom" class="btn-incom" onclick="inCom(${employeeId})">ثبت ورود</button>`;
-                            user1.html('');
-                            btnOutOrIn.html('');
-                            users.appendChild(e);
-                            btnOutOrIn.append(incom);
-
-                        }
-                    },
-                    failure: function (response) {
-                        console.log(5, response);
-
-                    }
-                });
-            }
-         
-        }
-        //ثبت خروج
-        function out(flagId) {
-
-            $.ajax({
-                async: false,
-                // contentType: 'application/json',
-                // dataType: 'data',
-                type: 'GET',
-                url: '@Url.Page("./Index", "Out")',
-                data: { "flagId": Number(flagId) },
-                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
-                success: function (response) {
-                    if (response.isSuccess) {
-                        // $.Notification.autoHideNotify('success', 'top center', 'پیام سیستم ', "خروج شما ثبت شد");
-                        alert("خروج شما ثبت شد");
-                        $('#users').html('');
-                        $('#btnOutOrIn').html('');
-                        reloadRec.style.display = "block";
-                        reloadActionControl = false;
-                        endOfRecognition = true;
-                        stopWebcam();
-
-                    } else {
-                        // $.Notification.autoHideNotify('error', 'top center', 'پیام سیستم ', "خطا در ثبت اطلاعات");
-                        alert("خطا در ثبت اطلاعات");
-                    }
-                },
-                failure: function (response) {
-                    console.log(5, response);
-
-                }
-            });
-        }
-        //ثبت ورود
-        function inCom(employeeId) {
-            const workshopId = $('#workshopId').val();
-            $.ajax({
-                async: false,
-                // contentType: 'application/json',
-                // dataType: 'data',
-                type: 'GET',
-                url: '@Url.Page("./Index", "InCom")',
-                data: { "employeeId": Number(employeeId), "workshopId": Number(workshopId) },
-                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
-                success: function (response) {
-                    if (response.isSuccess) {
-                        // $.Notification.autoHideNotify('success', 'top center', 'پیام سیستم ', "ورود شما ثبت شد");
-                        alert("ورود شما ثبت شد");
-                        $('#users').html('');
-                        $('#btnOutOrIn').html('');
-                        reloadRec.style.display = "block";
-                        reloadActionControl = false;
-                        endOfRecognition = true;
-                        stopWebcam();
-                    } else {
-
-                        // $.Notification.autoHideNotify('error', 'top center', 'پیام سیستم ', "خطا در ثبت اطلاعات");
-                        alert("خطا در ثبت اطلاعات");
-
-                    }
-                },
-                failure: function (response) {
-                    console.log(5, response);
-
-                }
-            });
-        }
-
-    </script> *@
-
+        });
+    </script>
 }
\ No newline at end of file
diff --git a/ServiceHost/Areas/Camera/Pages/Index.cshtml.cs b/ServiceHost/Areas/Camera/Pages/Index.cshtml.cs
index 48fc7131..57253a81 100644
--- a/ServiceHost/Areas/Camera/Pages/Index.cshtml.cs
+++ b/ServiceHost/Areas/Camera/Pages/Index.cshtml.cs
@@ -7,10 +7,13 @@ using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.RazorPages;
 using System.IO;
 using AccountManagement.Application.Contracts.Account;
+using AccountManagement.Application.Contracts.CameraAccount;
 using AccountManagement.Domain.TaskAgg;
 using CompanyManagment.App.Contracts.PersonnleCode;
 using CompanyManagment.App.Contracts.RollCallEmployee;
 using CompanyManagment.App.Contracts.RollCallService;
+using AccountManagement.Domain.AccountAgg;
+using static Microsoft.EntityFrameworkCore.DbLoggerCategory.Database;
 
 namespace ServiceHost.Areas.Camera.Pages;
 
@@ -26,13 +29,15 @@ public class IndexModel : PageModel
     private readonly IAuthHelper _authHelper;
     private readonly IPersonnelCodeApplication _personnelCodeApplication;
     private readonly IAccountApplication _accountApplication;
+    private readonly IPasswordHasher _passwordHasher;
+    private readonly ICameraAccountApplication _cameraAccountApplication;
 
     public long WorkshopId;
     public string UrlPath { get; set; }
     public List<ImageData> ImageDataList;
     public List<long> PersonelIds;
 
-    public IndexModel(IWebHostEnvironment webHostEnvironment, IConfiguration configuration, IEmployeeApplication employeeApplication, IRollCallApplication rollCallApplication, IAuthHelper authHelper, IRollCallServiceApplication rollCallServiceApplication, IRollCallEmployeeApplication rollCallEmployeeApplication, IPersonnelCodeApplication personnelCodeApplication, IAccountApplication accountApplication)
+    public IndexModel(IWebHostEnvironment webHostEnvironment, IConfiguration configuration, IEmployeeApplication employeeApplication, IRollCallApplication rollCallApplication, IAuthHelper authHelper, IRollCallServiceApplication rollCallServiceApplication, IRollCallEmployeeApplication rollCallEmployeeApplication, IPersonnelCodeApplication personnelCodeApplication, IAccountApplication accountApplication, IPasswordHasher passwordHasher, ICameraAccountApplication cameraAccountApplication)
     {
         _webHostEnvironment = webHostEnvironment;
         _configuration = configuration;
@@ -43,6 +48,8 @@ public class IndexModel : PageModel
         _rollCallEmployeeApplication = rollCallEmployeeApplication;
         _personnelCodeApplication = personnelCodeApplication;
         _accountApplication = accountApplication;
+        _passwordHasher = passwordHasher;
+        _cameraAccountApplication = cameraAccountApplication;
     }
 
     public IActionResult OnGet()
@@ -235,11 +242,38 @@ public class IndexModel : PageModel
         }
     }
 
+    public IActionResult OnPostCheckPassword(string password)
+    {
+        var cameraAccount = _authHelper.CameraAccountInfo();
+        var cameraPassword = _cameraAccountApplication.GetDetails(cameraAccount.Id).Password;
+        (bool Verified, bool NeedUpgrade) result = _passwordHasher.Check(cameraPassword, password);
+        if (result.Verified)
+        {
+            _accountApplication.Logout();
+            return new JsonResult(new
+            {
+                isSuccess = true,
+      
+            });
+        }
+	      
+		return new JsonResult(new
+            {
+                isSuccess = false,
+                errorMessage = "گذرواژه اشتباه است",
+            });
+      
+        
+    }
+
     public IActionResult OnGetLogout()
     {
         _accountApplication.Logout();
         return RedirectToPage("/Index");
     }
+
+
+
 }
 
 public class ImageData
diff --git a/ServiceHost/Areas/Client/Pages/Company/Employees/CreateLeave.cshtml b/ServiceHost/Areas/Client/Pages/Company/Employees/CreateLeave.cshtml
index 1b860c5d..dd1fc1d4 100644
--- a/ServiceHost/Areas/Client/Pages/Company/Employees/CreateLeave.cshtml
+++ b/ServiceHost/Areas/Client/Pages/Company/Employees/CreateLeave.cshtml
@@ -1,6 +1,8 @@
 @model CompanyManagment.App.Contracts.Leave.CreateLeave
 
 @{
+	<link href="~/AssetsClient/css/select2.css" rel="stylesheet" />
+
     <style>
         .errored {
             color: #FF3A3A !important;
@@ -10,6 +12,10 @@
         #printSection {
             display: none;
         }
+
+        .blackSelect {
+	        background-color: #cbd5e1;
+        }
     </style>
 }
 
@@ -20,7 +26,6 @@
         data-action="ReloadLeave">
 
     <input type="hidden" asp-for="@Model.WorkshopId" />
-    <input type="hidden" asp-for="@Model.EmployeeId" />
 
 <div class="modal-content">
     <div class="modal-header d-block text-center position-relative">
@@ -33,102 +38,112 @@
 
             <div class="row form-morakhasi-estehghaghi">
                 <div class="container-fluid">
+                    
+	                <div class="row mb-3">
+		                <div class="col-12 my-1">
+			                <select class="form-select select2Option" aria-label="انتخاب پرسنل ..." asp-for="@Model.EmployeeId" id="employeeSelectList">
+				                <option value="">پرسنل را انتخاب کنید ...</option>
+			                </select>
+		                </div>
+	                </div>
 
-                    <div class="row my-3">
+	                <div id="cardSectionLeave" class="card px-2 border blur">
+
+                        <div class="row my-3">
                             <div class="col-12 d-block d-sm-flex">
-                            <div class="d-flex align-items-center mb-2">
-                                <label class="d-flex justify-content-center align-items-center">نوع مرخصی:</label>
-                                <div class="inputGroup-morakhasi-type d-flex flex-sm-column">
-                                    <div class="d-flex align-items-center my-1">
-                                        <div class="d-flex align-items-center">
-                                            <input class="form-check-input LeaveType" type="radio" asp-for="LeaveType" id="paid" value="استحقاقی" checked>
-                                            <label class="form-check-label" for="paid">
-                                                استحقاقی
+                                <div class="d-flex align-items-center mb-2">
+                                    <label class="d-flex justify-content-center align-items-center">نوع مرخصی:</label>
+                                    <div class="inputGroup-morakhasi-type d-flex flex-sm-column">
+                                        <div class="d-flex align-items-center my-1">
+                                            <div class="d-flex align-items-center">
+                                                <input class="form-check-input LeaveType" type="radio" asp-for="LeaveType" id="paid" value="استحقاقی" checked>
+                                                <label class="form-check-label" for="paid">
+                                                    استحقاقی
+                                                </label>
+                                            </div>
+                                        </div>
+
+                                        <div class="my-1">
+                                            <input class="form-check-input LeaveType" type="radio" asp-for="LeaveType" id="sick" value="استعلاجی">
+                                            <label class="form-check-label" for="sick">
+                                                استعلاجی
                                             </label>
                                         </div>
                                     </div>
-                                            
-                                    <div class="my-1">
-                                        <input class="form-check-input LeaveType" type="radio" asp-for="LeaveType" id="sick" value="استعلاجی">
-                                        <label class="form-check-label" for="sick">
-                                            استعلاجی
-                                        </label>
-                                    </div>
                                 </div>
-                            </div>
-                            <div class="ms-sm-4" id="dailyType">
-                                <div class="d-flex align-items-center">
-                                    <label class="d-block d-sm-flex justify-content-center align-items-center" for="inputGroup-morakhasi-time">مدت مرخصی:</label>
-                                    <div class="inputGroup-morakhasi-time d-flex align-items-center">
-                                        <input class="form-check-input LeaveTime" type="radio" asp-for="PaidLeaveType" id="daily" value="روزانه" checked>
-                                        <label class="form-check-label" for="daily">
-                                            روزانه
-                                        </label>
+                                <div class="ms-sm-4" id="dailyType">
+                                    <div class="d-flex align-items-center">
+                                        <label class="d-block d-sm-flex justify-content-center align-items-center" for="inputGroup-morakhasi-time">مدت مرخصی:</label>
+                                        <div class="inputGroup-morakhasi-time d-flex align-items-center">
+                                            <input class="form-check-input LeaveTime" type="radio" asp-for="PaidLeaveType" id="daily" value="روزانه" checked>
+                                            <label class="form-check-label" for="daily">
+                                                روزانه
+                                            </label>
 
-                                        <input class="form-check-input LeaveTime" type="radio" asp-for="PaidLeaveType" id="hourly" value="ساعتی">
-                                        <label class="form-check-label" for="hourly">
-                                            ساعتی
-                                        </label>
+                                            <input class="form-check-input LeaveTime" type="radio" asp-for="PaidLeaveType" id="hourly" value="ساعتی">
+                                            <label class="form-check-label" for="hourly">
+                                                ساعتی
+                                            </label>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
 
-                    <div class="row">
-                        <div class="col-lg-6 col-12 my-1">
-                            <div class="input-group">
-                                <label class="input-group-text" for="StartLeave">تاریخ شروع</label>
-                                <input type="text" asp-for="StartLeave" class="form-control d-flex justify-content-center align-items-center text-center date" id="StartLeave">
+                        <div class="row">
+                            <div class="col-lg-6 col-12 my-1">
+                                <div class="input-group">
+                                    <label class="input-group-text" for="StartLeave">تاریخ شروع</label>
+                                    <input type="text" asp-for="StartLeave" class="form-control d-flex justify-content-center align-items-center text-center date" id="StartLeave">
+                                </div>
                             </div>
-                        </div>
-                        <div class="col-lg-6 col-12 my-1" id="end_date_estehghaghi">
-                            <div class="input-group">
-                                <label class="input-group-text" for="EndLeave">تاریخ پایان</label>
-                                <input type="text" asp-for="EndLeave" class="form-control d-flex justify-content-center align-items-center text-center date" id="EndLeave">
+                            <div class="col-lg-6 col-12 my-1" id="end_date_estehghaghi">
+                                <div class="input-group">
+                                    <label class="input-group-text" for="EndLeave">تاریخ پایان</label>
+                                    <input type="text" asp-for="EndLeave" class="form-control d-flex justify-content-center align-items-center text-center date" id="EndLeave">
+                                </div>
                             </div>
-                        </div>
-                        <div class="col-lg-3 col-6 my-1 time_paid" style="display:none;">
-                            <div class="input-group">
+                            <div class="col-lg-3 col-6 my-1 time_paid" style="display:none;">
+                                <div class="input-group">
                                     <label class="input-group-text" for="start_time">ساعت شروع</label>
-                                <input type="text" asp-for="StartHoures" class="form-control d-flex justify-content-center align-items-center text-center" id="StartHoures">
+                                    <input type="text" asp-for="StartHoures" class="form-control d-flex justify-content-center align-items-center text-center" id="StartHoures">
+                                </div>
+                            </div>
+
+                            <div class="col-lg-3 col-6 my-1 time_paid" style="display:none;">
+                                <div class="input-group">
+                                    <label class="input-group-text" for="end_time">ساعت پایان</label>
+                                    <input type="text" asp-for="EndHours" class="form-control d-flex justify-content-center align-items-center text-center" id="EndHours">
+                                </div>
+                            </div>
+
+
+                            <p class="mt-2">
+                                <span>مدت مرخصی: </span>
+                                <span class="sumHours sumHourseDiv"></span>
+                                <span class="sumDaysDiv sumDays"></span>
+                            </p>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="form-check form-switch d-flex align-items-center">
+                                    <label class="form-check-label me-2" for="IsAccepted">عدم موافقت</label>
+                                    <input type="checkbox" asp-for="IsAccepted" id="IsAccepted" class="form-check-input" checked>
+                                    <label class="form-check-label" for="IsAccepted">موافقت</label>
+                                </div>
                             </div>
                         </div>
 
-                        <div class="col-lg-3 col-6 my-1 time_paid" style="display:none;">
-                            <div class="input-group">
-                                <label class="input-group-text" for="end_time">ساعت پایان</label>
-                                <input type="text" asp-for="EndHours" class="form-control d-flex justify-content-center align-items-center text-center" id="EndHours">
-                            </div>
-                        </div>
-
-                        
-
-                        <p class="mt-2">
-                            <span>مدت مرخصی: </span>
-                            <span class="sumHours sumHourseDiv"></span>
-                            <span class="sumDaysDiv sumDays"></span>
-                        </p>
-                    </div>
-
-                    <div class="row">
-                        <div class="col-12">
-                            <div class="form-check form-switch d-flex align-items-center">
-                                <label class="form-check-label me-2" for="IsAccepted">عدم موافقت</label>
-                                <input type="checkbox" asp-for="IsAccepted" id="IsAccepted" class="form-check-input" checked>
-                                <label class="form-check-label" for="IsAccepted">موافقت</label>
-                            </div>
-                        </div>
-                    </div>
-
-
-                    <div class="row">
-                        <div class="col-12">
-                            <div class="position-relative blur" id="blur-div">
-                                <div class="position-absolute title-legend">دلیل عدم موافقت:</div>
-                                <textarea asp-for="Decription" disabled="disabled" id="descriptionAcceptedCheck" class="w-100 my-3 p-2" cols="10" rows="5"></textarea>
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="position-relative blur" id="blur-div">
+                                    <div class="position-absolute title-legend">دلیل عدم موافقت:</div>
+                                    <textarea asp-for="Decription" disabled="disabled" id="descriptionAcceptedCheck" class="w-100 my-3 p-2" cols="10" rows="5"></textarea>
+                                </div>
                             </div>
                         </div>
+            
                     </div>
                 </div>
             </div>
@@ -153,500 +168,23 @@
 
 </form>
 
-@section Script {
 
-}
 <script src="~/admintheme/js/jquery.mask_1.14.16.min.js"></script>
 <style>
-    .validTime {
-        color: #4d7c0f !important;
-    }
+	.validTime {
+		color: #4d7c0f !important;
+	}
 
-    .invalidTime {
-        color: #b91c1c !important;
-    }
+	.invalidTime {
+		color: #b91c1c !important;
+	}
 </style>
+
 <script>
-    $(document).ready(function () {
-
-        document.getElementById("MainModal").style.visibility = "visible";
-
-
-        //******************** شرط استحقاقی و استعلاجی ********************
-        $(document).on("change", ".LeaveType", function () {
-            if ($('#paid').is(':checked')) {
-                $('#dailyType').css('visibility', 'visible');
-            }
-
-            if ($('#sick').is(':checked')) {
-                $('#dailyType').css('visibility', 'hidden');
-                $('#daily').prop('checked', true);
-                if ($('#daily').is(':checked')) {
-                    $('#end_date_estehghaghi').show();
-                    $('.time_paid').hide();
-                }
-            }
-        });
-
-        // شرط ساعتی و روزانه
-        $(document).on("change", ".LeaveTime", function () {
-            if ($('#daily').is(':checked')) {
-                $('#end_date_estehghaghi').show();
-                $('.time_paid').hide();
-            }
-
-            if ($('#hourly').is(':checked')) {
-                $('#end_date_estehghaghi').hide();
-                $('.time_paid').show();
-            }
-        });
-        //******************** شرط استحقاقی و استعلاجی ********************
-
-
-        //******************** بلور کردن باکس ********************
-        $('#IsAccepted').on('change', function () {
-            if ($(this).is(':checked')) {
-                $('#blur-div').addClass('blur');
-                $('#textArea').text('');
-                $('#textArea').attr('disabled', true);
-
-            } else {
-                $('#blur-div').removeClass('blur');
-                $('#textArea').attr('disabled', false);
-            }
-        });
-
-
-        if ($('#IsAccepted').is(':checked')) {
-            $('#blur-div').addClass('blur');
-            $('#textArea').text('');
-            $('#textArea').attr('disabled', true);
-        } else {
-            $('#blur-div').removeClass('blur');
-            $('#textArea').attr('disabled', false);
-        }
-        //******************** بلور کردن باکس ********************
-
-
-
-
-
-
-
-
-
-
-
-        $(document).ready(function () {
-            $(document).on("change", "#IsAccepted", function () {
-                var IsAcceptedCheck = $('#IsAccepted').is(':checked');
-                if (IsAcceptedCheck) {
-                    $('#descriptionAcceptedCheck').removeClass('errored');
-                    $('#descriptionAcceptedCheck').addClass('disable-input');
-                    $("#descriptionAcceptedCheck").prop('disabled', true);
-                } else {
-                    $('#descriptionAcceptedCheck').removeClass('disable-input');
-                    $("#descriptionAcceptedCheck").prop('disabled', false);
-                }
-            })
-        });
-
-        $('#save').on('click', function () {
-
-            $("#descriptionAcceptedCheck").on("change", function () {
-                $('#descriptionAcceptedCheck').removeClass('errored');
-            });
-
-            var IsAcceptedCheck = $('#IsAccepted').is(':checked');
-            var descriptionAcceptedCheck = $('#descriptionAcceptedCheck').val();
-
-            if (!IsAcceptedCheck && descriptionAcceptedCheck.length === 0) {
-                $('#descriptionAcceptedCheck').addClass('errored');
-                $('.alert-msg').show();
-                $('.alert-msg p').text('لطفا توضیحات در صورت عدم موافقت را پر کنید.');
-                setTimeout(function () {
-                    $('.alert-msg').hide();
-                    $('.alert-msg p').text('');
-                }, 3500);
-                return false;
-            }
-
-            if ($('.errored').length < 1) {
-                $('#saveFinaly').click();
-            } else {
-                $('.alert-msg').show();
-                $('.alert-msg p').text('لطفا خطاها را برطرف کنید.');
-                setTimeout(function () {
-                    $('.alert-msg').hide();
-                    $('.alert-msg p').text('');
-                }, 3500);
-            }
-        });
-        // $(".date").mask("0000/00/00");
-        $(".date").on('input', function () {
-	        var value = $(this).val();
-	        $(this).val(convertPersianNumbersToEnglish(value));
-        }).mask("0000/00/00");
-        $('.date').on('input',
-            function () {
-                let startDate = this.value;
-                if (startDate.length == 10) {
-                    let submitcheck = dateValidcheck(this);
-                    if (submitcheck) {
-
-                        $(this).removeClass('errored');
-                        if ($('#StartLeave').val() != '' && $('#EndLeave').val() != '') {
-                            computeDays();
-                        }
-
-
-                    } else {
-                        $(this).addClass('errored');
-
-                    }
-
-                } else {
-                    $(this).addClass('errored');
-                }
-            });
-
-        function dateValidcheck(inputField1) {
-
-            let persianNumbers = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g],
-                arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g],
-                fixNumbers = function (str) {
-                    if (typeof str === 'string') {
-                        for (var i = 0; i < 10; i++) {
-                            str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i);
-                        }
-                    }
-                    return str;
-                };
-            let getdate = inputField1.value;
-
-            let m1, m2;
-            let y1, y2, y3, y4;
-            let d1, d2;
-            let s1, s2;
-            for (var i = 0; i < getdate.length; i++) {
-                if (i === 0) {
-                    y1 = fixNumbers(getdate[i]);
-                }
-                if (i === 1) {
-                    y2 = fixNumbers(getdate[i]);
-                }
-                if (i === 2) {
-                    y3 = fixNumbers(getdate[i]);
-                }
-                if (i === 3) {
-                    y4 = fixNumbers(getdate[i]);
-                }
-                if (i === 4) {
-                    s1 = fixNumbers(getdate[i]);
-                }
-                if (i === 5) {
-                    m1 = fixNumbers(getdate[i]);
-                }
-                if (i === 6) {
-                    m2 = fixNumbers(getdate[i]);
-                }
-                if (i === 7) {
-                    s2 = fixNumbers(getdate[i]);
-                }
-                if (i === 8) {
-                    d1 = fixNumbers(getdate[i]);
-                }
-                if (i === 9) {
-                    d2 = fixNumbers(getdate[i]);
-                }
-
-            }
-            let yRes = y1 + y2 + y3 + y4;
-            let year = parseInt(yRes);
-            let mRes = m1 + m2;
-            let month = parseInt(mRes);
-            let dRes = d1 + d2;
-            let day = parseInt(dRes);
-            let fixResult = yRes + s1 + mRes + s2 + dRes;
-            let test1 = checkEnValid(inputField1.value);
-
-            let isValid = /^([1][3-4][0-9][0-9][/])([0][1-9]|[1][0-2])([/])([0][1-9]|[1-2][0-9]|[3][0-1])$/.test(fixResult);
-
-
-            if (isValid && test1) {
-                // inputField1.style.backgroundColor = '#a6e9a6';
-                start1valid = true;
-
-
-            } else {
-
-                if (inputField1.value != "") {
-                    // inputField1.style.backgroundColor = '#f94c4c';
-                    $.Notification.autoHideNotify('error', 'top center', 'پیام سیستم ', "لطفا تاریخ را بصورت صحیح وارد کنید");
-                    start1valid = false;
-                }
-
-
-            }
-            return start1valid;
-
-        }
-
-        function checkEnValid(fixDate1) {
-
-            let persianNumbers = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g],
-                arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g],
-                fixNumbers = function (str) {
-                    if (typeof str === 'string') {
-                        for (var i = 0; i < 10; i++) {
-                            str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i);
-                        }
-                    }
-                    return str;
-                };
-            let getdate = fixDate1;
-
-            let m1, m2;
-            let y1, y2, y3, y4;
-            let d1, d2;
-            for (let i = 0; i < getdate.length; i++) {
-                if (i === 0) {
-                    y1 = fixNumbers(getdate[i]);
-                }
-                if (i === 1) {
-                    y2 = fixNumbers(getdate[i]);
-                }
-                if (i === 2) {
-                    y3 = fixNumbers(getdate[i]);
-                }
-                if (i === 3) {
-                    y4 = fixNumbers(getdate[i]);
-                }
-                if (i === 5) {
-                    m1 = fixNumbers(getdate[i]);
-                }
-                if (i === 6) {
-                    m2 = fixNumbers(getdate[i]);
-                }
-                if (i === 8) {
-                    d1 = fixNumbers(getdate[i]);
-                }
-                if (i === 9) {
-                    d2 = fixNumbers(getdate[i]);
-                }
-            }
-            let yRes = y1 + y2 + y3 + y4;
-            let year = parseInt(yRes);
-            let mRes = m1 + m2;
-            let month = parseInt(mRes);
-            let dRes = d1 + d2;
-            let day = parseInt(dRes);
-            let kabiseh = false;
-            if (month <= 6 && day > 31) {
-                return false;
-            } else if (month > 6 && month < 12 && day > 30) {
-                return false;
-            } else if (month === 12) {
-
-                switch (year) {
-                    case 1346:
-                        kabiseh = true;
-                        break;
-                    case 1350:
-                        kabiseh = true;
-                        break;
-                    case 1354:
-                        kabiseh = true;
-                        break;
-                    case 1358:
-                        kabiseh = true;
-                        break;
-                    case 1362:
-                        kabiseh = true;
-                        break;
-                    case 1366:
-                        kabiseh = true;
-                        break;
-                    case 1370:
-                        kabiseh = true;
-                        break;
-                    case 1375:
-                        kabiseh = true;
-                        break;
-                    case 1379:
-                        kabiseh = true;
-                        break;
-                    case 1383:
-                        kabiseh = true;
-                        break;
-                    case 1387:
-                        kabiseh = true;
-                        break;
-                    case 1391:
-                        kabiseh = true;
-                        break;
-                    case 1395:
-                        kabiseh = true;
-                        break;
-                    case 1399:
-                        kabiseh = true;
-                        break;
-                    case 1403:
-                        kabiseh = true;
-                        break;
-                    case 1408:
-                        kabiseh = true;
-                        break;
-                    case 1412:
-                        kabiseh = true;
-                        break;
-                    case 1416:
-                        kabiseh = true;
-                        break;
-                    case 1420:
-                        kabiseh = true;
-                        break;
-                    case 1424:
-                        kabiseh = true;
-                        break;
-                    case 1428:
-                        kabiseh = true;
-                        break;
-                    case 1432:
-                        kabiseh = true;
-                        break;
-                    case 1436:
-                        kabiseh = true;
-                        break;
-                    case 1441:
-                        kabiseh = true;
-                        break;
-                    case 1445:
-                        kabiseh = true;
-                        break;
-                    default:
-                        kabiseh = false;
-
-                }
-                if (kabiseh == true && day > 30) {
-                    return false;
-                } else if (kabiseh == false && day > 29) {
-                    return false;
-                } else {
-                    return true;
-                }
-            } else {
-                return true;
-            }
-        }
-
-
-
-
-
-
-
-
-
-        $('input:radio[name="PaidLeaveType"]').change(function () {
-            if ($(this).is(':checked') && $(this).val() == 'روزانه') {
-                $("#hours").val('');
-                $("#hours").attr("disabled", "disabled");
-                $("#endLeave").removeAttr("disabled");
-                $('.endLeaveLabal').show();
-                $('#StartHoures').removeClass("invalidTime");
-                $('#StartHoures').val('');
-                $('#EndHours').removeClass("invalidTime");
-                $('#EndHours').val('');
-                $("#endLeave").show();
-                $('.res').remove();
-                $('.validTime').removeClass("validTime");
-                $('.sumHourseDiv').hide();
-                $('.sumDaysDiv').show();
-            } else if ($(this).is(':checked') && $(this).val() == 'ساعتی') {
-                $("#endLeave").val('');
-                $("#endLeave").attr("disabled", "disabled");
-                $("#endLeave").hide();
-                $('.endLeaveLabal').hide();
-                $("#hours").removeAttr("disabled");
-                $('.sumHourseDiv').show();
-                $('.sumDaysDiv').hide();
-            }
-        });
-        /////////////////Time Input Validatet/////////////////
-
-        $('#StartHoures').on("keyup",
-            function () {
-                var isValid = /^([2][0-3]|[1][0-9]|[0-9]|[0][0-9])([:][0-5][0-9])$/.test($(this).val());
-                if (isValid) {
-                    $(this).addClass("validTime");
-                    $(this).removeClass("invalidTime");
-                    if ($('#EndHours').hasClass('validTime') && $('#EndHours').val() != null) {
-                        computeHourse();
-                    }
-                } else {
-                    $(this).removeClass("validTime");
-                    $(this).addClass("invalidTime");
-                }
-            });
-        $('#EndHours').on("keyup",
-            function () {
-                var isValid = /^([2][0-3]|[1][0-9]|[0-9]|[0][0-9])([:][0-5][0-9])$/.test($(this).val());
-                if (isValid) {
-                    $(this).addClass("validTime");
-                    $(this).removeClass("invalidTime");
-                    if ($('#StartHoures').hasClass('validTime') && $('#StartHoures').val() != null) {
-                        computeHourse();
-                    }
-                } else {
-                    $(this).removeClass("validTime");
-                    $(this).addClass("invalidTime");
-                }
-            });
-
-        function computeHourse() {
-            $('.res').remove();
-            $.ajax({
-                /* contentType: 'charset=utf-8',*/
-                async: false,
-                dataType: 'json',
-                type: 'GET',
-                url: '@Url.Page("/Company/Employees/Leave", "ComputeLeaveHourly")',
-                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
-                data: { "startHours": $('#StartHoures').val(), "endHours": $('#EndHours').val() },
-                success: function (response) {
-                    let res = `<span class="res">${response.res}</span>`;
-                    $('.sumHours').append(res);
-                },
-                failure: function (response) {
-                    console.log(5, response);
-                }
-            });
-        }
-
-        function computeDays() {
-            $('.resultDays').remove();
-            $.ajax({
-                /* contentType: 'charset=utf-8',*/
-                async: false,
-                dataType: 'json',
-                type: 'GET',
-                url: '@Url.Page("/Company/Employees/Leave", "ComputeLeaveDaily")',
-                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
-                data: { "startDay": $('#StartLeave').val(), "endDay": $('#EndLeave').val() },
-                success: function (response) {
-                    if (response.status == false) {
-                        $('.sumDays').addClass("note");
-                    } else {
-                        $('.sumDays').removeClass("note");
-                    }
-                    let res = `<span class="resultDays">${response.res}</span>`;
-                    $('.sumDays').append(res);
-                },
-                failure: function (response) {
-                    console.log(5, response);
-                }
-            });
-        }
-    });
+	var antiForgeryToken = $('@Html.AntiForgeryToken()').val();
+	var computeLeaveHourlyAjax = `@Url.Page("/Company/Employees/Leave", "ComputeLeaveHourly")`;
+	var computeLeaveDailyAjax = `@Url.Page("/Company/Employees/Leave", "ComputeLeaveDaily")`;
+	var employeeListAjax = `@Url.Page("Index", "EmployeeList")`;
 </script>
+
+<script src="~/assetsclient/pages/employees/js/createleave.js"></script>
diff --git a/ServiceHost/Areas/Client/Pages/Company/Employees/Leave.cshtml b/ServiceHost/Areas/Client/Pages/Company/Employees/Leave.cshtml
index da93054e..af1144dc 100644
--- a/ServiceHost/Areas/Client/Pages/Company/Employees/Leave.cshtml
+++ b/ServiceHost/Areas/Client/Pages/Company/Employees/Leave.cshtml
@@ -334,7 +334,7 @@
                 <!-- Advance Search Box -->
                 <div class="container-fluid d-block d-lg-none">
                     <div class="row d-flex align-items-center justify-content-between">
-                        <div class="@(Model.EmployeeId == 0 ? "col-12" : "col-6")">
+                        <div class="col-6">
 		                    <button class="btn-search w-100 py-2" type="button" data-bs-toggle="modal" data-bs-target="#searchModal">
 			                    <span>جستجو پیشرفته</span>
 			                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
@@ -343,66 +343,64 @@
 			                    </svg>
 		                    </button>
 	                    </div>
-                        
-						@if (Model.EmployeeId != 0)
-	                    {
-		                    <div class="col-6">
-			                    <button class="register-btn w-100 py-2" onclick="location.href='#showmodal=@Url.Page("./Leave", "CreateLeave", new { employeeId = Model.EmployeeId, workshopId = Model.WorkshopId})';">
-				                    @* <button class="register-btn w-100 py-2" type="button" data-bs-toggle="modal" data-bs-target="#morakhasiEstehghaghiModal"> *@
-				                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 25 25" fill="none">
-					                    <circle cx="12.5" cy="12.5" r="8.775" stroke="white" stroke-width="2" stroke-opacity="0.84" />
-					                    <path d="M12.5 8.3335L12.5 16.6668" stroke="white" stroke-width="2" stroke-linecap="round" />
-					                    <path d="M16.6667 12.5L8.33342 12.5" stroke="white" stroke-width="2" stroke-linecap="round" />
-				                    </svg>
-				                    <span>ثبت مرخصی</span>
-			                    </button>
-		                    </div>
-	                    }
+
+	                    <div class="col-6">
+		                    <button class="register-btn w-100 py-2" onclick="location.href='#showmodal=@Url.Page("./Leave", "CreateLeave", new { employeeId = Model.EmployeeId, workshopId = Model.WorkshopId})';">
+			                    @* <button class="register-btn w-100 py-2" type="button" data-bs-toggle="modal" data-bs-target="#morakhasiEstehghaghiModal"> *@
+			                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 25 25" fill="none">
+				                    <circle cx="12.5" cy="12.5" r="8.775" stroke="white" stroke-width="2" stroke-opacity="0.84" />
+				                    <path d="M12.5 8.3335L12.5 16.6668" stroke="white" stroke-width="2" stroke-linecap="round" />
+				                    <path d="M16.6667 12.5L8.33342 12.5" stroke="white" stroke-width="2" stroke-linecap="round" />
+			                    </svg>
+			                    <span>ثبت مرخصی</span>
+		                    </button>
+	                    </div>
 
                     </div>
                 </div>
                 <!-- End Advance Search Box -->
 
-            <div class="d-flex justify-content-between align-items-center my-1 d-none d-lg-flex">
-                <div class="d-flex align-items-center">
-	                <div class="title">لیست مرخصی</div>
-                    @if(Model.EmployeeId != 0)
-                    {
-	                    <button class="btn-search ms-3" onclick="location.href='#showmodal=@Url.Page("./Leave", "CreateLeave", new { employeeId = Model.EmployeeId, workshopId = Model.WorkshopId })';" id="btnNewLeaveIntro">
-		                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 25 25" fill="none">
-			                    <circle cx="12.5" cy="12.5" r="8.775" stroke="white" stroke-width="2" stroke-opacity="0.84"/>
-			                    <path d="M12.5 8.3335L12.5 16.6668" stroke="white" stroke-width="2" stroke-linecap="round"/>
-			                    <path d="M16.6667 12.5L8.33342 12.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
-		                    </svg>
-		                    <span>ثبت مرخصی</span>
-	                    </button>
-                    }
-                </div>
-                <div>
-                @if (@Model.LeaveSearch.Count > 0)
-                    {
-                    <button onclick="printAll()" class="btn-print-all" type="button">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                            <path d="M15.0001 11.2493H15.139C16.0279 11.2493 16.4723 11.2493 16.759 10.9866C16.7805 10.967 16.801 10.9464 16.8207 10.9249C17.0834 10.6382 17.0834 10.1938 17.0834 9.3049V9.3049C17.0834 7.52714 17.0834 6.63826 16.558 6.06484C16.5187 6.02194 16.4775 5.98077 16.4346 5.94146C15.8612 5.41602 14.9723 5.41602 13.1945 5.41602H6.91675C5.03113 5.41602 4.08832 5.41602 3.50253 6.0018C2.91675 6.58759 2.91675 7.5304 2.91675 9.41602V10.2493C2.91675 10.7208 2.91675 10.9565 3.06319 11.1029C3.20964 11.2493 3.44534 11.2493 3.91675 11.2493H5.00008" stroke="#1E293B"/>
-                            <path d="M5.41675 16.3903L5.41675 9.91732C5.41675 8.97451 5.41675 8.5031 5.70964 8.21021C6.00253 7.91732 6.47394 7.91732 7.41675 7.91732L12.5834 7.91732C13.5262 7.91732 13.9976 7.91732 14.2905 8.21021C14.5834 8.5031 14.5834 8.97451 14.5834 9.91732L14.5834 16.3903C14.5834 16.7068 14.5834 16.8651 14.4796 16.9399C14.3758 17.0148 14.2256 16.9647 13.9253 16.8646L12.2572 16.3086C12.1712 16.2799 12.1282 16.2656 12.0839 16.2669C12.0396 16.2682 11.9975 16.285 11.9134 16.3187L10.1858 17.0097C10.0941 17.0464 10.0482 17.0647 10.0001 17.0647C9.95194 17.0647 9.90609 17.0464 9.81439 17.0097L8.0868 16.3187C8.00267 16.285 7.9606 16.2682 7.91627 16.2669C7.87194 16.2656 7.82896 16.2799 7.74299 16.3086L6.07486 16.8646C5.77455 16.9647 5.62439 17.0148 5.52057 16.9399C5.41675 16.8651 5.41675 16.7068 5.41675 16.3903Z" stroke="#1E293B"/>
-                            <path d="M7.91675 11.25L11.2501 11.25" stroke="#1E293B" stroke-linecap="round"/>
-                            <path d="M7.91675 13.75L12.0834 13.75" stroke="#1E293B" stroke-linecap="round"/>
-                            <path d="M14.5834 5.41732V5.41732C14.5834 3.97799 14.5834 3.25833 14.1954 2.76756C14.1087 2.65791 14.0095 2.55874 13.8998 2.47204C13.4091 2.08398 12.6894 2.08398 11.2501 2.08398H8.75008C7.31076 2.08398 6.5911 2.08398 6.10032 2.47204C5.99068 2.55874 5.8915 2.65791 5.8048 2.76756C5.41675 3.25833 5.41675 3.97799 5.41675 5.41732V5.41732" stroke="#1E293B"/>
-                        </svg>
-                        <span>پرینت گروهی</span>
-                    </button>
-                    <button onclick="printAllList()" class="btn-print-all" type="button">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                            <path d="M15.0001 11.2493H15.139C16.0279 11.2493 16.4723 11.2493 16.759 10.9866C16.7805 10.967 16.801 10.9464 16.8207 10.9249C17.0834 10.6382 17.0834 10.1938 17.0834 9.3049V9.3049C17.0834 7.52714 17.0834 6.63826 16.558 6.06484C16.5187 6.02194 16.4775 5.98077 16.4346 5.94146C15.8612 5.41602 14.9723 5.41602 13.1945 5.41602H6.91675C5.03113 5.41602 4.08832 5.41602 3.50253 6.0018C2.91675 6.58759 2.91675 7.5304 2.91675 9.41602V10.2493C2.91675 10.7208 2.91675 10.9565 3.06319 11.1029C3.20964 11.2493 3.44534 11.2493 3.91675 11.2493H5.00008" stroke="#1E293B"/>
-                            <path d="M5.41675 16.3903L5.41675 9.91732C5.41675 8.97451 5.41675 8.5031 5.70964 8.21021C6.00253 7.91732 6.47394 7.91732 7.41675 7.91732L12.5834 7.91732C13.5262 7.91732 13.9976 7.91732 14.2905 8.21021C14.5834 8.5031 14.5834 8.97451 14.5834 9.91732L14.5834 16.3903C14.5834 16.7068 14.5834 16.8651 14.4796 16.9399C14.3758 17.0148 14.2256 16.9647 13.9253 16.8646L12.2572 16.3086C12.1712 16.2799 12.1282 16.2656 12.0839 16.2669C12.0396 16.2682 11.9975 16.285 11.9134 16.3187L10.1858 17.0097C10.0941 17.0464 10.0482 17.0647 10.0001 17.0647C9.95194 17.0647 9.90609 17.0464 9.81439 17.0097L8.0868 16.3187C8.00267 16.285 7.9606 16.2682 7.91627 16.2669C7.87194 16.2656 7.82896 16.2799 7.74299 16.3086L6.07486 16.8646C5.77455 16.9647 5.62439 17.0148 5.52057 16.9399C5.41675 16.8651 5.41675 16.7068 5.41675 16.3903Z" stroke="#1E293B"/>
-                            <path d="M7.91675 11.25L11.2501 11.25" stroke="#1E293B" stroke-linecap="round"/>
-                            <path d="M7.91675 13.75L12.0834 13.75" stroke="#1E293B" stroke-linecap="round"/>
-                            <path d="M14.5834 5.41732V5.41732C14.5834 3.97799 14.5834 3.25833 14.1954 2.76756C14.1087 2.65791 14.0095 2.55874 13.8998 2.47204C13.4091 2.08398 12.6894 2.08398 11.2501 2.08398H8.75008C7.31076 2.08398 6.5911 2.08398 6.10032 2.47204C5.99068 2.55874 5.8915 2.65791 5.8048 2.76756C5.41675 3.25833 5.41675 3.97799 5.41675 5.41732V5.41732" stroke="#1E293B"/>
-                        </svg>
-                        <span>پرینت لیستی</span>
-                    </button> 
-                    }  
-                </div>
+            <div class="d-flex justify-content-center align-items-center my-1 d-none d-lg-flex">
+	            <div class="row w-100">
+		            <div class="col-4 p-0">
+			            <button class="btn-search" onclick="location.href = '#showmodal=@Url.Page("./Leave", "CreateLeave", new { employeeId = Model.EmployeeId, workshopId = Model.WorkshopId })';" id="btnNewLeaveIntro">
+				            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 25 25" fill="none">
+					            <circle cx="12.5" cy="12.5" r="8.775" stroke="white" stroke-width="2" stroke-opacity="0.84"/>
+					            <path d="M12.5 8.3335L12.5 16.6668" stroke="white" stroke-width="2" stroke-linecap="round"/>
+					            <path d="M16.6667 12.5L8.33342 12.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
+				            </svg>
+				            <span>ثبت مرخصی</span>
+			            </button>
+		            </div>
+                    <div class="col-4 p-0">
+	                    <div class="title text-center">لیست مرخصی</div>
+                    </div>
+		            <div class="col-4 text-end p-0">
+                        @if (@Model.LeaveSearch.Count > 0)
+                        {
+                            <button onclick="printAll()" class="btn-print-all" type="button">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                    <path d="M15.0001 11.2493H15.139C16.0279 11.2493 16.4723 11.2493 16.759 10.9866C16.7805 10.967 16.801 10.9464 16.8207 10.9249C17.0834 10.6382 17.0834 10.1938 17.0834 9.3049V9.3049C17.0834 7.52714 17.0834 6.63826 16.558 6.06484C16.5187 6.02194 16.4775 5.98077 16.4346 5.94146C15.8612 5.41602 14.9723 5.41602 13.1945 5.41602H6.91675C5.03113 5.41602 4.08832 5.41602 3.50253 6.0018C2.91675 6.58759 2.91675 7.5304 2.91675 9.41602V10.2493C2.91675 10.7208 2.91675 10.9565 3.06319 11.1029C3.20964 11.2493 3.44534 11.2493 3.91675 11.2493H5.00008" stroke="#1E293B" />
+                                    <path d="M5.41675 16.3903L5.41675 9.91732C5.41675 8.97451 5.41675 8.5031 5.70964 8.21021C6.00253 7.91732 6.47394 7.91732 7.41675 7.91732L12.5834 7.91732C13.5262 7.91732 13.9976 7.91732 14.2905 8.21021C14.5834 8.5031 14.5834 8.97451 14.5834 9.91732L14.5834 16.3903C14.5834 16.7068 14.5834 16.8651 14.4796 16.9399C14.3758 17.0148 14.2256 16.9647 13.9253 16.8646L12.2572 16.3086C12.1712 16.2799 12.1282 16.2656 12.0839 16.2669C12.0396 16.2682 11.9975 16.285 11.9134 16.3187L10.1858 17.0097C10.0941 17.0464 10.0482 17.0647 10.0001 17.0647C9.95194 17.0647 9.90609 17.0464 9.81439 17.0097L8.0868 16.3187C8.00267 16.285 7.9606 16.2682 7.91627 16.2669C7.87194 16.2656 7.82896 16.2799 7.74299 16.3086L6.07486 16.8646C5.77455 16.9647 5.62439 17.0148 5.52057 16.9399C5.41675 16.8651 5.41675 16.7068 5.41675 16.3903Z" stroke="#1E293B" />
+                                    <path d="M7.91675 11.25L11.2501 11.25" stroke="#1E293B" stroke-linecap="round" />
+                                    <path d="M7.91675 13.75L12.0834 13.75" stroke="#1E293B" stroke-linecap="round" />
+                                    <path d="M14.5834 5.41732V5.41732C14.5834 3.97799 14.5834 3.25833 14.1954 2.76756C14.1087 2.65791 14.0095 2.55874 13.8998 2.47204C13.4091 2.08398 12.6894 2.08398 11.2501 2.08398H8.75008C7.31076 2.08398 6.5911 2.08398 6.10032 2.47204C5.99068 2.55874 5.8915 2.65791 5.8048 2.76756C5.41675 3.25833 5.41675 3.97799 5.41675 5.41732V5.41732" stroke="#1E293B" />
+                                </svg>
+                                <span>پرینت گروهی</span>
+                            </button>
+                            <button onclick="printAllList()" class="btn-print-all" type="button">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                    <path d="M15.0001 11.2493H15.139C16.0279 11.2493 16.4723 11.2493 16.759 10.9866C16.7805 10.967 16.801 10.9464 16.8207 10.9249C17.0834 10.6382 17.0834 10.1938 17.0834 9.3049V9.3049C17.0834 7.52714 17.0834 6.63826 16.558 6.06484C16.5187 6.02194 16.4775 5.98077 16.4346 5.94146C15.8612 5.41602 14.9723 5.41602 13.1945 5.41602H6.91675C5.03113 5.41602 4.08832 5.41602 3.50253 6.0018C2.91675 6.58759 2.91675 7.5304 2.91675 9.41602V10.2493C2.91675 10.7208 2.91675 10.9565 3.06319 11.1029C3.20964 11.2493 3.44534 11.2493 3.91675 11.2493H5.00008" stroke="#1E293B" />
+                                    <path d="M5.41675 16.3903L5.41675 9.91732C5.41675 8.97451 5.41675 8.5031 5.70964 8.21021C6.00253 7.91732 6.47394 7.91732 7.41675 7.91732L12.5834 7.91732C13.5262 7.91732 13.9976 7.91732 14.2905 8.21021C14.5834 8.5031 14.5834 8.97451 14.5834 9.91732L14.5834 16.3903C14.5834 16.7068 14.5834 16.8651 14.4796 16.9399C14.3758 17.0148 14.2256 16.9647 13.9253 16.8646L12.2572 16.3086C12.1712 16.2799 12.1282 16.2656 12.0839 16.2669C12.0396 16.2682 11.9975 16.285 11.9134 16.3187L10.1858 17.0097C10.0941 17.0464 10.0482 17.0647 10.0001 17.0647C9.95194 17.0647 9.90609 17.0464 9.81439 17.0097L8.0868 16.3187C8.00267 16.285 7.9606 16.2682 7.91627 16.2669C7.87194 16.2656 7.82896 16.2799 7.74299 16.3086L6.07486 16.8646C5.77455 16.9647 5.62439 17.0148 5.52057 16.9399C5.41675 16.8651 5.41675 16.7068 5.41675 16.3903Z" stroke="#1E293B" />
+                                    <path d="M7.91675 11.25L11.2501 11.25" stroke="#1E293B" stroke-linecap="round" />
+                                    <path d="M7.91675 13.75L12.0834 13.75" stroke="#1E293B" stroke-linecap="round" />
+                                    <path d="M14.5834 5.41732V5.41732C14.5834 3.97799 14.5834 3.25833 14.1954 2.76756C14.1087 2.65791 14.0095 2.55874 13.8998 2.47204C13.4091 2.08398 12.6894 2.08398 11.2501 2.08398H8.75008C7.31076 2.08398 6.5911 2.08398 6.10032 2.47204C5.99068 2.55874 5.8915 2.65791 5.8048 2.76756C5.41675 3.25833 5.41675 3.97799 5.41675 5.41732V5.41732" stroke="#1E293B" />
+                                </svg>
+                                <span>پرینت لیستی</span>
+                            </button>
+                        }
+		            </div>
+	            </div>
             </div>
 
             @if(Model.IsEmployeeActive) 
@@ -2496,7 +2494,7 @@
             });
 
             var workshopId = $('#WorkshopId').val();
-            var employeeIdSelected = $('#EmployeeIdSearch').val();
+            var employeeIdSelected = $('#employeeSelect').val();
             if (workshopId) {
                 $.ajax({
                     url: '@Url.Page("/Company/Employees/Leave", "EmployeeList")',
diff --git a/ServiceHost/Pages/Index.cshtml.cs b/ServiceHost/Pages/Index.cshtml.cs
index 9f15ed44..7d6f1bb3 100644
--- a/ServiceHost/Pages/Index.cshtml.cs
+++ b/ServiceHost/Pages/Index.cshtml.cs
@@ -107,8 +107,10 @@ namespace ServiceHost.Pages
                             return Redirect("/Client");
                             break;
                         case 3:
-                            return Redirect("/Camera");
-                            break;
+							return Redirect("/Camera");
+							//return 
+							//                     var verfiyResult = _accountApplication.GetByVerifyCode(code);
+							break;
                         case 0:
                             result.Message = "امکان ورود با این حساب کاربری وجود ندارد";
                             break;
diff --git a/ServiceHost/ServiceHost.csproj b/ServiceHost/ServiceHost.csproj
index 273a34bf..d51b04b7 100644
--- a/ServiceHost/ServiceHost.csproj
+++ b/ServiceHost/ServiceHost.csproj
@@ -553,6 +553,7 @@
     <None Include="wwwroot\AssetsClient\libs\select2\js\select2.js" />
     <None Include="wwwroot\AssetsClient\libs\select2\js\select2.min.js" />
     <None Include="wwwroot\AssetsClient\pages\Checkouts\js\PrintOneRollCall.js" />
+    <None Include="wwwroot\AssetsClient\pages\Employees\js\createleave.js" />
     <None Include="wwwroot\AssetsClient\pages\Index\js\LeaveCreate.js" />
     <None Include="wwwroot\AssetsClient\pages\Index\js\LeaveList.js" />
     <None Include="wwwroot\AssetsClient\pages\Profile\js\ChangePassword.js" />
diff --git a/ServiceHost/wwwroot/AssetsAdminNew/Tasks/css/DetailModal.css b/ServiceHost/wwwroot/AssetsAdminNew/Tasks/css/DetailModal.css
index 6d6d6253..b359f034 100644
--- a/ServiceHost/wwwroot/AssetsAdminNew/Tasks/css/DetailModal.css
+++ b/ServiceHost/wwwroot/AssetsAdminNew/Tasks/css/DetailModal.css
@@ -500,7 +500,9 @@
 }
 
 #ajaxChatSection .chat-card-receiver .date-time {
-    font-size: 10px;
+    font-size: 9px;
+    color: #6C6C6C;
+    margin: 0 0 -4px 0 !important;
 }
 
 #ajaxChatSection .chat-card-receiver.red {
diff --git a/ServiceHost/wwwroot/AssetsAdminNew/Tasks/js/create.js b/ServiceHost/wwwroot/AssetsAdminNew/Tasks/js/create.js
index 3310d732..45e0ff32 100644
--- a/ServiceHost/wwwroot/AssetsAdminNew/Tasks/js/create.js
+++ b/ServiceHost/wwwroot/AssetsAdminNew/Tasks/js/create.js
@@ -778,8 +778,8 @@ $('.cancelAndRefresh').on('click', function () {
         success: function (response) {
             if (response.isSuccedded) {
                 // showAlertMessage('.alert-success-msg', response.message, 1500);
-                //$('#MainModal').modal('toggle');
-                window.location.replace('/AdminNew/Company/Task');
+                $('#MainModal').modal('toggle');
+                //window.location.replace('/AdminNew/Company/Task');
             } else {
                 showAlertMessage('.alert-msg', response.message, 3500);
             }
diff --git a/ServiceHost/wwwroot/AssetsAdminNew/Ticket/js/detailTicketModal.js b/ServiceHost/wwwroot/AssetsAdminNew/Ticket/js/detailTicketModal.js
index 4253649c..cbc46d41 100644
--- a/ServiceHost/wwwroot/AssetsAdminNew/Ticket/js/detailTicketModal.js
+++ b/ServiceHost/wwwroot/AssetsAdminNew/Ticket/js/detailTicketModal.js
@@ -173,7 +173,7 @@ function loadMessages()   {
 
 
 			var inBox = "inBox";
-			html += `<div class="footer-message-attachment ${inBox}">`;
+			html += `<div class="footer-message-attachment d-block ${inBox}">`;
 			$.each(responseTickets.mediaViewModels, function (i, item) {
 				if (item.category === "صوت") {
 					var voiceId = `waveform${item.id}`;
@@ -652,7 +652,8 @@ $('#cancelSendTicket').on('click', function () {
 		success: function (response) {
 			if (response.isSuccedded) {
 				// showAlertMessage('.alert-success-msg', response.message, 1500);
-				window.location.reload();
+				//window.location.reload();
+                $('#MainModal').modal('toggle');
 			} else {
 				showAlertMessage('.alert-msg', response.message, 3500);
 			}
diff --git a/ServiceHost/wwwroot/AssetsCamera/css/Index.css b/ServiceHost/wwwroot/AssetsCamera/css/Index.css
index 34a885b7..dff84dc1 100644
--- a/ServiceHost/wwwroot/AssetsCamera/css/Index.css
+++ b/ServiceHost/wwwroot/AssetsCamera/css/Index.css
@@ -190,25 +190,19 @@ canvas {
 
 .keypad {
     background-color: #ccc;
-    /*margin: 5em auto;*/
-   /* -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 3px rgba(255, 255, 255, 0.25), 0 3px 9px rgba(0, 0, 0, 0.5);
-    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 3px rgba(255, 255, 255, 0.25), 0 3px 9px rgba(0, 0, 0, 0.5);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 3px rgba(255, 255, 255, 0.25), 0 3px 9px rgba(0, 0, 0, 0.5);*/
 }
 
 .keypad.dark {
     background-color: #222831;
-    /*border-top: 1px solid #0f172a;*/
 }
 
 .keypad {
-    /*overflow: hidden;*/
     position: relative;
     width: 100%;
     margin: 0 0 18px 0;
     display: flex;
     flex-direction: column;
-    justify-content: space-between; /* Space out the keypad elements */
+    justify-content: space-between;
     height: 100%;
 }
 
@@ -217,19 +211,12 @@ canvas {
     left: 0;
     width: 100%;
     bottom: 0;
-    height: 60%; /* Fill the entire height of the keypad-section */
+    height: 60%;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
-/*.keypad:focus {
-    outline: 0;
-    -webkit-box-shadow: inset 0 0 0 1px rgba(51, 153, 255, 1), 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 5px rgba(51, 153, 255, 0.75);
-    -moz-box-shadow: inset 0 0 0 1px rgba(51, 153, 255, 1), 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 5px rgba(51, 153, 255, 0.75);
-    box-shadow: inset 0 0 0 1px rgba(51, 153, 255, 1), 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 5px rgba(51, 153, 255, 0.75);
-}*/
-
 .keypad .keypad-input-field {
     height: 55px;
     margin: 0 auto;
@@ -240,7 +227,6 @@ canvas {
 }
 
 .keypad .keypad-input-field:after {
-    /*background-color: rgba(0, 0, 0, 0.2);*/
     bottom: 0px;
     content: '';
     height: 1px;
@@ -249,10 +235,6 @@ canvas {
     width: 100%;
 }
 
-/*.keypad.dark .keypad-input-field:after {
-    background-color: rgba(255, 255, 255, 0.2);
-}*/
-
 .keypad .entered-numbers-wrapper {
     height: 45px;
     left: 0px;
@@ -300,11 +282,7 @@ canvas {
     direction: ltr;
 }
 
-.keypad .num.hidden {
-    /*font-size: 0;*/
-}
-
-.keypad .num.hidden:after {
+/*.keypad .num.hidden:after {
     opacity: 1;
     transform: translateX(-50%) translateY(-50%) scale(1);
 }
@@ -312,7 +290,7 @@ canvas {
 .keypad .num.erased:after {
     opacity: 1;
     transform: translateX(-50%) translateY(-50%) scale(0.25);
-}
+}*/
 
 .keypad .num:after {
     background-color: black;
@@ -478,11 +456,6 @@ canvas {
     color: rgba(255, 255, 255, 0.8);
 }
 
-/*.keypad .hover-dot:hover:before {
-    opacity: 0.1;
-    transform: translateX(-50%) translateY(-50%) scale(1);
-}
-*/
 .keypad .hover-dot:active:before {
     opacity: 0.2;
     transform: translateX(-50%) translateY(-50%) scale(1.2);
@@ -518,6 +491,204 @@ canvas {
     }
 }
 
+/* ---------------------------------------------------------------- loading splash screen */
+.loader-container {
+    background-color: #222831;
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    z-index: 9999;
+    opacity: 1;
+    transition: opacity 1s ease;
+}
+
+.loader-container.hidden {
+    opacity: 0;
+    transition: opacity 1s ease;
+}
+
+.loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 116px;
+    transform: translate(-50%, -50%);
+}
+
+    .loader:after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        transform: translate(-50%, -50%) scale(0);
+    }
+
+    .loader .logo {
+        transform: scale(0.8);
+        transform-origin: center;
+        -webkit-animation: scale-loader 2500ms linear forwards infinite;
+        animation: scale-loader 2500ms linear forwards infinite;
+    }
+
+    .loader .letter {
+        fill-opacity: 0;
+        stroke-dasharray: 288;
+        stroke-dashoffset: -288;
+        -webkit-animation: draw-outline 2500ms linear forwards infinite;
+        animation: draw-outline 2500ms linear forwards infinite;
+    }
+
+    .loader .letter--gradient {
+        fill: url(#gradient1);
+        stroke: url(#gradient1);
+        stroke-width: 4px;
+        -webkit-animation: draw-outline 2500ms linear forwards infinite, animate-stroke-width 2500ms linear infinite;
+        animation: draw-outline 2500ms linear forwards infinite, animate-stroke-width 2500ms linear infinite;
+    }
+
+.loader--complete .logo {
+    -webkit-animation: none;
+    animation: none;
+}
+
+.loader--complete:after {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0;
+    transition: all 500ms ease;
+}
+
+.loader--complete .letter {
+    -webkit-animation: none;
+    animation: none;
+}
+
+
+@-webkit-keyframes scale-loader {
+    45% {
+        transform: scale(0.85);
+    }
+
+    50% {
+        transform: scale(1);
+    }
+
+    55% {
+        transform: scale(0.85);
+    }
+}
+
+@keyframes scale-loader {
+    45% {
+        transform: scale(0.85);
+    }
+
+    50% {
+        transform: scale(1);
+    }
+
+    55% {
+        transform: scale(0.85);
+    }
+}
+
+@-webkit-keyframes draw-outline {
+    40% {
+        stroke-dashoffset: 0;
+        fill-opacity: 0;
+    }
+
+    50% {
+        fill-opacity: 1;
+    }
+
+    60% {
+        stroke-dashoffset: 0;
+        fill-opacity: 0;
+    }
+
+    100% {
+        stroke-dashoffset: 288;
+    }
+}
+
+@-webkit-keyframes draw-outline--mobile {
+    40% {
+        stroke-dashoffset: 0;
+        fill-opacity: 0;
+    }
+
+    50% {
+        fill-opacity: 0;
+    }
+
+    60% {
+        stroke-dashoffset: 0;
+        fill-opacity: 0;
+    }
+
+    100% {
+        stroke-dashoffset: 0;
+    }
+}
+
+@keyframes draw-outline--mobile {
+    40% {
+        stroke-dashoffset: 0;
+        fill-opacity: 0;
+    }
+
+    50% {
+        fill-opacity: 0;
+    }
+
+    60% {
+        stroke-dashoffset: 0;
+        fill-opacity: 0;
+    }
+
+    100% {
+        stroke-dashoffset: 0;
+    }
+}
+
+@keyframes animate-stroke-width {
+    0% {
+        stroke-width: 4px;
+    }
+
+    50% {
+        stroke-width: 8px;
+    }
+
+    100% {
+        stroke-width: 4px;
+    }
+}
+
+@keyframes draw-outline {
+    40% {
+        stroke-dashoffset: 0;
+        fill-opacity: 0;
+    }
+
+    50% {
+        fill-opacity: 1;
+    }
+
+    60% {
+        stroke-dashoffset: 0;
+        fill-opacity: 0;
+    }
+
+    100% {
+        stroke-dashoffset: 288;
+    }
+}
+
 /* ----------------------------------------------------------------------------------------- Responsive */
 @media (min-width: 680px) {
     .cameraSection {
diff --git a/ServiceHost/wwwroot/AssetsCamera/css/Index.min.css b/ServiceHost/wwwroot/AssetsCamera/css/Index.min.css
new file mode 100644
index 00000000..09302709
--- /dev/null
+++ b/ServiceHost/wwwroot/AssetsCamera/css/Index.min.css
@@ -0,0 +1 @@
+body{max-width:100%;background-color:#222831}#btnName{font-size:14px;border-radius:13px;background-color:#37ad4f;border-color:#339380;margin:7px;color:#fff;display:inline-block;padding:6px 12px;margin-bottom:0;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-moz-user-select:none;-ms-user-select:none;user-select:none}.btnAction{font-size:14px;border-radius:13px;margin:7px;color:#fff;display:inline-block;padding:6px 12px;margin-bottom:0;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-moz-user-select:none;-ms-user-select:none;user-select:none}canvas{position:absolute;right:0;display:inline-block;direction:ltr;width:360px;height:360px}.hiddenCanvas{position:unset}#video{border-radius:100%;display:inline-block;width:360px;height:360px}.cameraSection{display:block;position:relative;width:360px;height:360px}.faceImageCamera{position:absolute;top:0;right:0;width:360px;transform:scale(1.006);border-radius:100%}.btn-start{font-size:14px;width:100%!important;display:block}.btn-reEnterCode{font-size:14px;width:100%!important;display:block;background-color:#e87c2d;color:#FFFFFF!important;border-radius:7px;font-size:12px;font-weight:700;padding:10px 5px}.btn-incom{font-size:14px;width:100%!important;display:block}.btn-exit{font-size:14px;width:100%!important;display:block}#btnOutOrIn{display:flex;justify-content:center}#reAnalyz{position:relative;display:flex;justify-content:center}@media only screen and (max-width :992px){canvas{position:absolute;top:0;right:0;display:inline-block;direction:ltr;width:360px;height:360px}}.div-logout{position:fixed;left:10px;top:50px}.keypad-section{position:fixed;top:0;width:100%;background-color:#222831;left:0;max-width:100%;z-index:10;height:50vh}.keypad-section .errorMessage{color:#fca5a5}.keypad{background-color:#ccc}.keypad.dark{background-color:#222831}.keypad{position:relative;width:100%;margin:0 0 18px 0;display:flex;flex-direction:column;justify-content:space-between;height:100%}.keypadContainer{position:fixed;left:0;width:100%;bottom:0;height:60%;display:flex;flex-direction:column;justify-content:center}.keypad .keypad-input-field{height:55px;margin:0 auto;position:relative;transition:all 0.25s;transition-delay:0.1s;width:90%}.keypad .keypad-input-field:after{bottom:0;content:'';height:1px;left:0;position:absolute;width:100%}.keypad .entered-numbers-wrapper{height:45px;left:0;overflow:hidden;position:absolute;top:5px;width:100%;background-color:#171717;border-radius:10px}.keypad .entered-numbers{height:45px;left:50%;overflow:hidden;position:absolute;text-align:center;transform:translateX(-50%);white-space:nowrap;direction:ltr;width:100%}.keypad .num{color:#000;animation:fade-in-num 0.1s linear;backface-visibility:hidden;display:inline-block;font-weight:300;height:45px;line-height:45px;overflow:hidden;position:relative;text-align:center;transition:all 0.25s;width:12px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.keypad.dark .num{color:#fff;width:100%;direction:ltr}.keypad .num:after{background-color:#000;border-radius:8px;height:8px;left:50%;opacity:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%) scale(.25);transition:all 0.25s;width:8px}.keypad.dark .num:after{background-color:#fff}.keypad .backspace{cursor:pointer;height:55px;line-height:40px;position:absolute;right:0;top:0;width:30px}.keypad .backspace .backspace-icon{background-color:#000;color:#fff;border-bottom-right-radius:2px;border-top-right-radius:2px;display:inline-block;height:14px;position:absolute;right:5px;top:50%;transform:translateY(-50%);user-select:none;width:14px}.keypad.dark .backspace .backspace-icon{background-color:#fff;color:#000}.keypad .backspace .backspace-icon:after{border:0 solid #fff0;border-bottom-width:7px;border-right:6px solid #000;border-top-width:7px;content:'';height:0;left:-6px;position:absolute;width:0}.keypad.dark .backspace .backspace-icon:after{border-right:6px solid #fff}.keypad .backspace .backspace-icon i{font-size:.75em;height:14px;line-height:14px;position:absolute;right:0;text-align:center;top:0;width:14px}.keypad .keypad-numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 auto;margin-top:10px;position:relative;width:90%;height:100%;direction:ltr;gap:10px}.keypad .item-wrapper{cursor:pointer;display:inline-block;transition:all 0.25s;position:relative;vertical-align:top;transition:all 0.25s;width:100%;border:1px solid #3f454c;border-radius:10px;background:#2b333f}.keypad .item-wrapper .item,.keypad .item-wrapper .item1{position:relative;z-index:20;height:100%;text-align:center;display:flex;align-items:center;justify-content:center;color:#fff;-webkit-user-select:none;-ms-user-select:none;user-select:none}.keypad .item-wrapper .item i{color:#000}.keypad.dark .item-wrapper .item i{color:#fff}.keypad .item-wrapper .item h1,.keypad .item-wrapper .item h2{margin:0;text-align:center}.keypad .item-wrapper .item h1{color:#000;font-size:26px;font-weight:500;height:20px;line-height:20px}.keypad.dark .item-wrapper .item h1{color:#fff;height:100%;display:flex;align-items:center;justify-content:center}.keypad .item-wrapper .item h2{color:rgb(0 0 0 / .8);font-size:.6em;font-weight:300;height:10px;line-height:10px}.keypad.dark .item-wrapper .item h2{color:rgb(255 255 255 / .8)}.keypad .hover-dot:active:before{opacity:.2;transform:translateX(-50%) translateY(-50%) scale(1.2)}.keypad .hover-dot:before{background-color:#000;border-radius:30px;content:'';height:60px;left:50%;opacity:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%) scale(.3);transition:all 0.25s;width:60px}.keypad.dark .hover-dot:before{background-color:#fff}@keyframes fade-in-num{0%{opacity:0;transform:translateY(50%) scale(0)}100%{opacity:1;transform:translateY(0%) scale(1)}}.loader-container{background-color:#222831;width:100%;height:100vh;position:fixed;z-index:9999;opacity:1;transition:opacity 1s ease}.loader-container.hidden{opacity:0;transition:opacity 1s ease}.loader{position:absolute;top:50%;left:50%;width:100px;height:116px;transform:translate(-50%,-50%)}.loader:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%) scale(0)}.loader .logo{transform:scale(.8);transform-origin:center;-webkit-animation:scale-loader 2500ms linear forwards infinite;animation:scale-loader 2500ms linear forwards infinite}.loader .letter{fill-opacity:0;stroke-dasharray:288;stroke-dashoffset:-288;-webkit-animation:draw-outline 2500ms linear forwards infinite;animation:draw-outline 2500ms linear forwards infinite}.loader .letter--gradient{fill:url(#gradient1);stroke:url(#gradient1);stroke-width:4px;-webkit-animation:draw-outline 2500ms linear forwards infinite,animate-stroke-width 2500ms linear infinite;animation:draw-outline 2500ms linear forwards infinite,animate-stroke-width 2500ms linear infinite}.loader--complete .logo{-webkit-animation:none;animation:none}.loader--complete:after{transform:translate(-50%,-50%) scale(1);opacity:0;transition:all 500ms ease}.loader--complete .letter{-webkit-animation:none;animation:none}@-webkit-keyframes scale-loader{45%{transform:scale(.85)}50%{transform:scale(1)}55%{transform:scale(.85)}}@keyframes scale-loader{45%{transform:scale(.85)}50%{transform:scale(1)}55%{transform:scale(.85)}}@-webkit-keyframes draw-outline{40%{stroke-dashoffset:0;fill-opacity:0}50%{fill-opacity:1}60%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:288}}@-webkit-keyframes draw-outline--mobile{40%{stroke-dashoffset:0;fill-opacity:0}50%{fill-opacity:0}60%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:0}}@keyframes draw-outline--mobile{40%{stroke-dashoffset:0;fill-opacity:0}50%{fill-opacity:0}60%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:0}}@keyframes animate-stroke-width{0%{stroke-width:4px}50%{stroke-width:8px}100%{stroke-width:4px}}@keyframes draw-outline{40%{stroke-dashoffset:0;fill-opacity:0}50%{fill-opacity:1}60%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:288}}@media (min-width:680px){.cameraSection{width:650px;height:650px}.faceImageCamera{width:650px}#video{width:650px;height:650px}canvas{width:650px;height:650px}}
\ No newline at end of file
diff --git a/ServiceHost/wwwroot/AssetsCamera/js/Index.js b/ServiceHost/wwwroot/AssetsCamera/js/Index.js
index c4ab4081..fc0a6576 100644
--- a/ServiceHost/wwwroot/AssetsCamera/js/Index.js
+++ b/ServiceHost/wwwroot/AssetsCamera/js/Index.js
@@ -1,4 +1,23 @@
-$(document).ready(function () {
+window.onload = function () {
+    setTimeout(function () {
+        const loader = document.getElementById("loader");
+        loader.classList.add("hidden");
+    }, 3000);
+
+    setTimeout(function () {
+        loader.style.display = "none";
+    }, 3500);
+
+
+    document.getElementById("content").style.display = "block";
+
+    setTimeout(function () {
+        document.getElementById("content").style.opacity = 1;
+    }, 100);
+};
+
+// ------------------------------------------------------------- start camera
+$(document).ready(function () {
     if ($(window).width() > 992) {
         $('#desktopDisplay').show();
         $('#mobileDisplay').hide();
@@ -74,8 +93,6 @@
 //};
 
 
-
-
 /*var personIds = [];*/
 var empId = -1;
 /*var urls = [];*/
@@ -560,8 +577,7 @@ function inCom(employeeId) {
 }
 
 
-// ------------------------------------------------------------- keyboard number
-
+// ------------------------------------------------------------- keyboard number start
 $(document).ready(function () {
     $('.keypad-numbers .item').click(function () {
         let number = $(this).text().trim();
@@ -584,8 +600,7 @@ $(document).ready(function () {
         $('.entered-numbers .num').text(updatedInput);
     });
 });
-
-
+// ------------------------------------------------------------- keyboard number end
 function enterPersonnelCode() {
     var code = $('#inputField').val();
     if (code === "") {
@@ -599,4 +614,4 @@ function enterPersonnelCode() {
 function openPersonnelModal() {
     var goTo = `#showmodal=/Camera/Index?handler=PersonnelWorkshopAjax`;
     window.location.href = goTo;
-}
+}
\ No newline at end of file
diff --git a/ServiceHost/wwwroot/AssetsCamera/js/Index.min.js b/ServiceHost/wwwroot/AssetsCamera/js/Index.min.js
new file mode 100644
index 00000000..536d192c
--- /dev/null
+++ b/ServiceHost/wwwroot/AssetsCamera/js/Index.min.js
@@ -0,0 +1,17 @@
+window.onload=function(){setTimeout(function(){const loader=document.getElementById("loader");loader.classList.add("hidden")},3000);setTimeout(function(){loader.style.display="none"},3500);document.getElementById("content").style.display="block";setTimeout(function(){document.getElementById("content").style.opacity=1},100)};$(document).ready(function(){if($(window).width()>992){$('#desktopDisplay').show();$('#mobileDisplay').hide();$('#keypadSection').hide();$('#mobileDisplay').html('');$('#keypadSection').html('')}
+if($(window).width()<=992){$('#desktopDisplay').html('');$('#desktopDisplay').hide();$('#mobileDisplay').show();let display=document.getElementById("display");const run=async()=>{await Promise.all([faceapi.nets.ssdMobilenetv1.loadFromUri("\\weights\\"),faceapi.nets.faceRecognitionNet.loadFromUri("\\weights\\"),faceapi.nets.faceLandmark68Net.loadFromUri("\\weights\\")])}
+run();startWebcam()}});var empId=-1;var stop=!1;async function startWebcam(){await navigator.mediaDevices.getUserMedia({video:!0,audio:!1,}).then((stream)=>{video.srcObject=stream;waiting.style.display="block"}).catch((error)=>{console.error(error)})}
+function stopWebcam(){window.location.reload()}
+async function firstLoad(){const path1=await `${urlPath}/Camera?handler=ShowPicture&index=${1}&workshopId=${11}&label=${1}`;const path2=await `${urlPath}/Camera?handler=ShowPicture&index=${2}&workshopId=${11}&label=${1}`;const img1=await faceapi.fetchImage(path1);await faceapi.detectSingleFace(img1).withFaceLandmarks().withFaceDescriptor();const img2=await faceapi.fetchImage(path2);await faceapi.detectSingleFace(img2).withFaceLandmarks().withFaceDescriptor()}
+async function getLabeledFaceDescriptions(){let descriptions=[];const path1=await `${urlPath}/Camera?handler=ShowPicture&index=${1}&workshopId=${workshopId}&label=${empId}`;const path2=await `${urlPath}/Camera?handler=ShowPicture&index=${2}&workshopId=${workshopId}&label=${empId}`;const img1=await faceapi.fetchImage(path1);const detections1=await faceapi.detectSingleFace(img1).withFaceLandmarks().withFaceDescriptor();const img2=await faceapi.fetchImage(path2);const detections2=await faceapi.detectSingleFace(img2).withFaceLandmarks().withFaceDescriptor();await descriptions.push(detections1.descriptor);await descriptions.push(detections2.descriptor);return new faceapi.LabeledFaceDescriptors(empId,descriptions)}
+var reloadActionControl=!1;reloadRec.style.display="none";endOfRecognition=!0;reloadRec.addEventListener("click",function(){$("#display canvas").remove();$('#users').html('');$('#btnOutOrIn').html('');endOfRecognition=!1;stop=!1;recognizing.style.display="block";reloadActionControl=!0;reloadRec.style.display="none";notFound.style.display="none";startWebcam()});video.addEventListener("play",async()=>{let startDate=new Date().getTime();if(empId==-1){const labeledFaceDescriptors=await firstLoad()}else{const labeledFaceDescriptors=await getLabeledFaceDescriptions();const faceMatcher=await new faceapi.FaceMatcher(labeledFaceDescriptors);const canvas=await faceapi.createCanvasFromMedia(video);await display.append(canvas);const displaySize=await{width:video.width,height:video.height};await faceapi.matchDimensions(canvas,displaySize);var recogSuccess=await!1;let endDate=new Date().getTime();let elapsed=(endDate-startDate)/1000;console.log(`time forloop elapsed is ${elapsed}`);for(let c=0;c<10;c++){if(endOfRecognition===!1){waiting.style.display="none";reloadActionControl=!0;recognizing.style.display="block";console.log("start recog");const detections=await faceapi.detectSingleFace(video).withFaceLandmarks().withFaceDescriptor();if(typeof detections!=='undefined'){const resizedDetections=await faceapi.resizeResults(detections,displaySize);await canvas.getContext("2d").clearRect(0,0,canvas.width,canvas.height);const results=await faceMatcher.findBestMatch(resizedDetections.descriptor);console.log("end recog");const box=resizedDetections.detection.box;const drawBox=new faceapi.draw.DrawBox(box,{label:"آنالیز چهره",});await drawBox.draw(canvas);let userId=results.label;let userDistance=results.distance;if(userId==empId&&userDistance<=0.45){endOfRecognition=!0;stop=!0;notFound.style.display="none";recognizing.style.display="none";recogSuccess=!0;await getPersonel(results.label)}}}}
+if(!recogSuccess){notFound.style.display="block";recognizing.style.display="none";reloadActionControl=!1;endOfRecognition=!0;stop=!0}
+reloadRec.style.display="block";$('#roloadAgain').removeClass("d-none")}});function roloadAgain(){$('.keypad-section').show();$("#display canvas").remove();$('#users').html('');$('#btnOutOrIn').html('');$('#inputField').val('');$('.entered-numbers .num').text('');$('#notFound').hide();recognizing.style.display="block";reloadActionControl=!0;reloadRec.style.display="none";$('#roloadAgain').addClass("d-none")}
+function sendPersonelCodeToGetEmployeeId(personelCode){const workshopId=$('#workshopId').val();$.ajax({async:!1,type:'GET',url:AjaxSendPersonelCodeToGetEmployeeId,data:{"personelCode":Number(personelCode),"workshopId":Number(workshopId)},headers:{"RequestVerificationToken":antiForgeryToken},success:function(response){if(response.isSuccess){empId=response.personId;endOfRecognition=!1;startWebcam();$('.keypad-section').hide()}else{$('#errorMessage').text(response.message);return}},failure:function(response){console.log(5,response)}})}
+function getPersonel(employeeId){const workshopId=$('#workshopId').val();let users=document.getElementById("users");let user1=$('#users');let btnOutOrIn=$('#btnOutOrIn')
+let employeeIdNumber=Number(employeeId)
+if(employeeIdNumber>0){$.ajax({async:!1,type:'GET',url:AjaxEmployeeFlag,data:{"employeeId":employeeIdNumber,"workshopId":Number(workshopId)},headers:{"RequestVerificationToken":antiForgeryToken},success:function(response){if(response.flag>0){let e=document.createElement('span');e.innerHTML=response.employeeName;const out=`<button type="button" id="out" class="btn-exit" onclick="out(${response.flag})">ثبت خروج</button>`;user1.html('');btnOutOrIn.html('');users.append(e);btnOutOrIn.append(out)}else{let e=document.createElement('span');e.innerHTML=response.employeeName;const incom=`<button type="button" id="incom" class="btn-incom" onclick="inCom(${employeeId})">ثبت ورود</button>`;user1.html('');btnOutOrIn.html('');users.appendChild(e);btnOutOrIn.append(incom)}},failure:function(response){console.log(5,response)}})}}
+function out(flagId){$.ajax({async:!1,type:'GET',url:AjaxOut,data:{"flagId":Number(flagId)},headers:{"RequestVerificationToken":antiForgeryToken},success:function(response){if(response.isSuccess){$('.alert-success-msg').show();$('.alert-success-msg p').text('خروج شما ثبت شد');setTimeout(function(){$('.alert-success-msg').hide();$('.alert-success-msg p').text('')},1500);roloadAgain()}else{$('.alert-msg').show();$('.alert-msg p').text('خطا در ثبت اطلاعات');setTimeout(function(){$('.alert-msg').hide();$('.alert-msg p').text('')},1500)}},failure:function(response){console.log(5,response)}})}
+function inCom(employeeId){const workshopId=$('#workshopId').val();$.ajax({async:!1,type:'GET',url:AjaxInCom,data:{"employeeId":Number(employeeId),"workshopId":Number(workshopId)},headers:{"RequestVerificationToken":antiForgeryToken},success:function(response){if(response.isSuccess){$('.alert-success-msg').show();$('.alert-success-msg p').text('ورود شما ثبت شد');setTimeout(function(){$('.alert-success-msg').hide();$('.alert-success-msg p').text('')},1500);roloadAgain()}else{$('.alert-msg').show();$('.alert-msg p').text('خطا در ثبت اطلاعات');setTimeout(function(){$('.alert-msg').hide();$('.alert-msg p').text('')},1500)}},failure:function(response){console.log(5,response)}})}
+$(document).ready(function(){$('.keypad-numbers .item').click(function(){let number=$(this).text().trim();let currentInput=$('#inputField').val();$('#inputField').val(currentInput+number);$('.entered-numbers .num').text(currentInput+number)});$('#cleanBtn').click(function(){$('#inputField').val('');$('.entered-numbers .num').text('')});$('.backspace-icon').click(function(){let currentInput=$('#inputField').val();let updatedInput=currentInput.slice(0,-1);$('#inputField').val(updatedInput);$('.entered-numbers .num').text(updatedInput)})});function enterPersonnelCode(){var code=$('#inputField').val();if(code===""){$('#errorMessage').text('کد پرسنلی خود را وارد کنید.')}else{$('#errorMessage').text('');sendPersonelCodeToGetEmployeeId(code)}}
+function openPersonnelModal(){var goTo=`#showmodal=/Camera/Index?handler=PersonnelWorkshopAjax`;window.location.href=goTo}
\ No newline at end of file
diff --git a/ServiceHost/wwwroot/AssetsClient/images/icons/headphone.png b/ServiceHost/wwwroot/AssetsClient/images/icons/headphone.png
new file mode 100644
index 00000000..5ea58238
Binary files /dev/null and b/ServiceHost/wwwroot/AssetsClient/images/icons/headphone.png differ
diff --git a/ServiceHost/wwwroot/AssetsClient/pages/Employees/js/createleave.js b/ServiceHost/wwwroot/AssetsClient/pages/Employees/js/createleave.js
new file mode 100644
index 00000000..ed3ebb9f
--- /dev/null
+++ b/ServiceHost/wwwroot/AssetsClient/pages/Employees/js/createleave.js
@@ -0,0 +1,521 @@
+$(document).ready(function () {
+	ajaxPersonals();
+    $("#cardSectionLeave div *").prop('disabled', true);
+
+	document.getElementById("MainModal").style.visibility = "visible";
+
+	$(".select2Option").select2({
+		language: "fa",
+		dir: "rtl",
+		dropdownParent: $('#MainModal'),
+		templateResult: function (data, container) {
+			if (data.element) {
+				$(container).addClass($(data.element).attr("class"));
+			}
+			return data.text;
+		}
+	});
+
+	$('#employeeSelectList').change(function () {
+        var selectValue = $('#employeeSelectList').val();
+
+        if (selectValue === '') {
+            $('#cardSectionLeave').addClass('blur');
+            $("#cardSectionLeave div *").prop('disabled', true);
+        } else {
+            $('#cardSectionLeave').removeClass('blur');
+            $("#cardSectionLeave div *").prop('disabled', false);
+            $('#descriptionAcceptedCheck').attr('disabled', true);
+        }
+    });
+
+	//******************** شرط استحقاقی و استعلاجی ********************
+	$(document).on("change", ".LeaveType", function () {
+		if ($('#paid').is(':checked')) {
+			$('#dailyType').css('visibility', 'visible');
+		}
+
+		if ($('#sick').is(':checked')) {
+			$('#dailyType').css('visibility', 'hidden');
+			$('#daily').prop('checked', true);
+			if ($('#daily').is(':checked')) {
+				$('#end_date_estehghaghi').show();
+				$('.time_paid').hide();
+			}
+		}
+	});
+
+	// شرط ساعتی و روزانه
+	$(document).on("change", ".LeaveTime", function () {
+		if ($('#daily').is(':checked')) {
+			$('#end_date_estehghaghi').show();
+			$('.time_paid').hide();
+		}
+
+		if ($('#hourly').is(':checked')) {
+			$('#end_date_estehghaghi').hide();
+			$('.time_paid').show();
+		}
+	});
+	//******************** شرط استحقاقی و استعلاجی ********************
+
+
+	//******************** بلور کردن باکس ********************
+	$('#IsAccepted').on('change', function () {
+		if ($(this).is(':checked')) {
+			$('#blur-div').addClass('blur');
+			$('#textArea').text('');
+			$('#textArea').attr('disabled', true);
+
+		} else {
+			$('#blur-div').removeClass('blur');
+			$('#textArea').attr('disabled', false);
+		}
+	});
+
+
+	if ($('#IsAccepted').is(':checked')) {
+		$('#blur-div').addClass('blur');
+		$('#textArea').text('');
+		$('#textArea').attr('disabled', true);
+	} else {
+		$('#blur-div').removeClass('blur');
+		$('#textArea').attr('disabled', false);
+	}
+	//******************** بلور کردن باکس ********************
+
+    $(document).on("change", "#IsAccepted", function () {
+        var IsAcceptedCheck = $('#IsAccepted').is(':checked');
+        if (IsAcceptedCheck) {
+            $('#descriptionAcceptedCheck').removeClass('errored');
+            $('#descriptionAcceptedCheck').addClass('disable-input');
+            $("#descriptionAcceptedCheck").prop('disabled', true);
+        } else {
+            $('#descriptionAcceptedCheck').removeClass('disable-input');
+            $("#descriptionAcceptedCheck").prop('disabled', false);
+        }
+    });
+
+	$('#save').on('click', function () {
+
+		$("#descriptionAcceptedCheck").on("change", function () {
+			$('#descriptionAcceptedCheck').removeClass('errored');
+		});
+
+		var IsAcceptedCheck = $('#IsAccepted').is(':checked');
+		var descriptionAcceptedCheck = $('#descriptionAcceptedCheck').val();
+
+		if (!IsAcceptedCheck && descriptionAcceptedCheck.length === 0) {
+			$('#descriptionAcceptedCheck').addClass('errored');
+			$('.alert-msg').show();
+			$('.alert-msg p').text('لطفا توضیحات در صورت عدم موافقت را پر کنید.');
+			setTimeout(function () {
+				$('.alert-msg').hide();
+				$('.alert-msg p').text('');
+			}, 3500);
+			return false;
+		}
+
+		if ($('.errored').length < 1) {
+			$('#saveFinaly').click();
+		} else {
+			$('.alert-msg').show();
+			$('.alert-msg p').text('لطفا خطاها را برطرف کنید.');
+			setTimeout(function () {
+				$('.alert-msg').hide();
+				$('.alert-msg p').text('');
+			}, 3500);
+		}
+	});
+
+	$(".date").on('input', function () {
+		var value = $(this).val();
+		$(this).val(convertPersianNumbersToEnglish(value));
+	}).mask("0000/00/00");
+	$('.date').on('input', function () {
+		let startDate = this.value;
+		if (startDate.length === 10) {
+			let submitcheck = dateValidcheck(this);
+			if (submitcheck) {
+
+				$(this).removeClass('errored');
+				if ($('#StartLeave').val() != '' && $('#EndLeave').val() != '') {
+					computeDays();
+				}
+
+
+			} else {
+				$(this).addClass('errored');
+
+			}
+
+		} else {
+			$(this).addClass('errored');
+		}
+	});
+
+	$('input:radio[name="PaidLeaveType"]').change(function () {
+		if ($(this).is(':checked') && $(this).val() == 'روزانه') {
+			$("#hours").val('');
+			$("#hours").attr("disabled", "disabled");
+			$("#endLeave").removeAttr("disabled");
+			$('.endLeaveLabal').show();
+			$('#StartHoures').removeClass("invalidTime");
+			$('#StartHoures').val('');
+			$('#EndHours').removeClass("invalidTime");
+			$('#EndHours').val('');
+			$("#endLeave").show();
+			$('.res').remove();
+			$('.validTime').removeClass("validTime");
+			$('.sumHourseDiv').hide();
+			$('.sumDaysDiv').show();
+		} else if ($(this).is(':checked') && $(this).val() == 'ساعتی') {
+			$("#endLeave").val('');
+			$("#endLeave").attr("disabled", "disabled");
+			$("#endLeave").hide();
+			$('.endLeaveLabal').hide();
+			$("#hours").removeAttr("disabled");
+			$('.sumHourseDiv').show();
+			$('.sumDaysDiv').hide();
+		}
+	});
+	/////////////////Time Input Validatet/////////////////
+
+	$('#StartHoures').on("keyup", function () {
+			var isValid = /^([2][0-3]|[1][0-9]|[0-9]|[0][0-9])([:][0-5][0-9])$/.test($(this).val());
+			if (isValid) {
+				$(this).addClass("validTime");
+				$(this).removeClass("invalidTime");
+				if ($('#EndHours').hasClass('validTime') && $('#EndHours').val() != null) {
+					computeHourse();
+				}
+			} else {
+				$(this).removeClass("validTime");
+				$(this).addClass("invalidTime");
+			}
+		});
+	$('#EndHours').on("keyup", function () {
+			var isValid = /^([2][0-3]|[1][0-9]|[0-9]|[0][0-9])([:][0-5][0-9])$/.test($(this).val());
+			if (isValid) {
+				$(this).addClass("validTime");
+				$(this).removeClass("invalidTime");
+				if ($('#StartHoures').hasClass('validTime') && $('#StartHoures').val() != null) {
+					computeHourse();
+				}
+			} else {
+				$(this).removeClass("validTime");
+				$(this).addClass("invalidTime");
+			}
+		});
+
+		
+	$('#employeeSelect').change(function () {
+		var selectValue = $('#employeeSelect').val();
+
+		if (selectValue == '') {
+			$('#cardSectionLeave').addClass('blur');
+			$("#cardSectionLeave div *").prop('disabled', true);
+		} else {
+			$('#cardSectionLeave').removeClass('blur');
+			$("#cardSectionLeave div *").prop('disabled', false);
+			$('#descriptionAcceptedCheck').attr('disabled', true);
+		}
+	});
+
+});
+function dateValidcheck(inputField1) {
+
+	let persianNumbers = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g],
+		arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g],
+		fixNumbers = function (str) {
+			if (typeof str === 'string') {
+				for (var i = 0; i < 10; i++) {
+					str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i);
+				}
+			}
+			return str;
+		};
+	let getdate = inputField1.value;
+
+	let m1, m2;
+	let y1, y2, y3, y4;
+	let d1, d2;
+	let s1, s2;
+	for (var i = 0; i < getdate.length; i++) {
+		if (i === 0) {
+			y1 = fixNumbers(getdate[i]);
+		}
+		if (i === 1) {
+			y2 = fixNumbers(getdate[i]);
+		}
+		if (i === 2) {
+			y3 = fixNumbers(getdate[i]);
+		}
+		if (i === 3) {
+			y4 = fixNumbers(getdate[i]);
+		}
+		if (i === 4) {
+			s1 = fixNumbers(getdate[i]);
+		}
+		if (i === 5) {
+			m1 = fixNumbers(getdate[i]);
+		}
+		if (i === 6) {
+			m2 = fixNumbers(getdate[i]);
+		}
+		if (i === 7) {
+			s2 = fixNumbers(getdate[i]);
+		}
+		if (i === 8) {
+			d1 = fixNumbers(getdate[i]);
+		}
+		if (i === 9) {
+			d2 = fixNumbers(getdate[i]);
+		}
+
+	}
+	let yRes = y1 + y2 + y3 + y4;
+	let year = parseInt(yRes);
+	let mRes = m1 + m2;
+	let month = parseInt(mRes);
+	let dRes = d1 + d2;
+	let day = parseInt(dRes);
+	let fixResult = yRes + s1 + mRes + s2 + dRes;
+	let test1 = checkEnValid(inputField1.value);
+
+	let isValid = /^([1][3-4][0-9][0-9][/])([0][1-9]|[1][0-2])([/])([0][1-9]|[1-2][0-9]|[3][0-1])$/.test(fixResult);
+
+
+	if (isValid && test1) {
+		// inputField1.style.backgroundColor = '#a6e9a6';
+		start1valid = true;
+
+
+	} else {
+
+		if (inputField1.value != "") {
+			// inputField1.style.backgroundColor = '#f94c4c';
+			$.Notification.autoHideNotify('error', 'top center', 'پیام سیستم ', "لطفا تاریخ را بصورت صحیح وارد کنید");
+			start1valid = false;
+		}
+
+
+	}
+	return start1valid;
+
+}
+
+function checkEnValid(fixDate1) {
+
+	let persianNumbers = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g],
+		arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g],
+		fixNumbers = function (str) {
+			if (typeof str === 'string') {
+				for (var i = 0; i < 10; i++) {
+					str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i);
+				}
+			}
+			return str;
+		};
+	let getdate = fixDate1;
+
+	let m1, m2;
+	let y1, y2, y3, y4;
+	let d1, d2;
+	for (let i = 0; i < getdate.length; i++) {
+		if (i === 0) {
+			y1 = fixNumbers(getdate[i]);
+		}
+		if (i === 1) {
+			y2 = fixNumbers(getdate[i]);
+		}
+		if (i === 2) {
+			y3 = fixNumbers(getdate[i]);
+		}
+		if (i === 3) {
+			y4 = fixNumbers(getdate[i]);
+		}
+		if (i === 5) {
+			m1 = fixNumbers(getdate[i]);
+		}
+		if (i === 6) {
+			m2 = fixNumbers(getdate[i]);
+		}
+		if (i === 8) {
+			d1 = fixNumbers(getdate[i]);
+		}
+		if (i === 9) {
+			d2 = fixNumbers(getdate[i]);
+		}
+	}
+	let yRes = y1 + y2 + y3 + y4;
+	let year = parseInt(yRes);
+	let mRes = m1 + m2;
+	let month = parseInt(mRes);
+	let dRes = d1 + d2;
+	let day = parseInt(dRes);
+	let kabiseh = false;
+	if (month <= 6 && day > 31) {
+		return false;
+	} else if (month > 6 && month < 12 && day > 30) {
+		return false;
+	} else if (month === 12) {
+
+		switch (year) {
+			case 1346:
+				kabiseh = true;
+				break;
+			case 1350:
+				kabiseh = true;
+				break;
+			case 1354:
+				kabiseh = true;
+				break;
+			case 1358:
+				kabiseh = true;
+				break;
+			case 1362:
+				kabiseh = true;
+				break;
+			case 1366:
+				kabiseh = true;
+				break;
+			case 1370:
+				kabiseh = true;
+				break;
+			case 1375:
+				kabiseh = true;
+				break;
+			case 1379:
+				kabiseh = true;
+				break;
+			case 1383:
+				kabiseh = true;
+				break;
+			case 1387:
+				kabiseh = true;
+				break;
+			case 1391:
+				kabiseh = true;
+				break;
+			case 1395:
+				kabiseh = true;
+				break;
+			case 1399:
+				kabiseh = true;
+				break;
+			case 1403:
+				kabiseh = true;
+				break;
+			case 1408:
+				kabiseh = true;
+				break;
+			case 1412:
+				kabiseh = true;
+				break;
+			case 1416:
+				kabiseh = true;
+				break;
+			case 1420:
+				kabiseh = true;
+				break;
+			case 1424:
+				kabiseh = true;
+				break;
+			case 1428:
+				kabiseh = true;
+				break;
+			case 1432:
+				kabiseh = true;
+				break;
+			case 1436:
+				kabiseh = true;
+				break;
+			case 1441:
+				kabiseh = true;
+				break;
+			case 1445:
+				kabiseh = true;
+				break;
+			default:
+				kabiseh = false;
+
+		}
+		if (kabiseh == true && day > 30) {
+			return false;
+		} else if (kabiseh == false && day > 29) {
+			return false;
+		} else {
+			return true;
+		}
+	} else {
+		return true;
+	}
+}
+
+function computeHourse() {
+    $('.res').remove();
+    $.ajax({
+        /* contentType: 'charset=utf-8',*/
+        async: false,
+        dataType: 'json',
+        type: 'GET',
+		url: computeLeaveHourlyAjax,
+		headers: { "RequestVerificationToken": antiForgeryToken },
+        data: { "startHours": $('#StartHoures').val(), "endHours": $('#EndHours').val() },
+        success: function (response) {
+            let res = `<span class="res">${response.res}</span>`;
+            $('.sumHours').append(res);
+        },
+        failure: function (response) {
+            console.log(5, response);
+        }
+    });
+}
+
+function computeDays() {
+    $('.resultDays').remove();
+    $.ajax({
+        /* contentType: 'charset=utf-8',*/
+        async: false,
+        dataType: 'json',
+        type: 'GET',
+		url: computeLeaveDailyAjax,
+		headers: { "RequestVerificationToken": antiForgeryToken },
+        data: { "startDay": $('#StartLeave').val(), "endDay": $('#EndLeave').val() },
+        success: function (response) {
+            if (response.status == false) {
+                $('.sumDays').addClass("note");
+            } else {
+                $('.sumDays').removeClass("note");
+            }
+            let res = `<span class="resultDays">${response.res}</span>`;
+            $('.sumDays').append(res);
+        },
+        failure: function (response) {
+            console.log(5, response);
+        }
+    });
+}
+
+function ajaxPersonals() {
+    $.ajax({
+        url: employeeListAjax,
+        type: 'GET',
+        success: function (response) {
+            $('#cardSectionLeave').addClass('blur');
+            $("#cardSectionLeave div *").prop('disabled', true);
+			var employees = response.connectedPersonnel.connectedPersonnelViewModels;
+
+            var employeeOptionsHtml = '<option value="">انتخاب پرسنل ...</option>';
+            employees.forEach(function (employee) {
+                var black = employee.black ? "blackSelect" : "";
+				employeeOptionsHtml += `<option class="${black}" value="${employee.employeeId}">${employee.personName}</option>`;
+            });
+			$('#employeeSelectList').html(employeeOptionsHtml);
+        },
+        error: function (xhr, status, error) {
+            console.error(xhr.responseText);
+        }
+    });
+}
\ No newline at end of file