From 39bc95731e22d3d5e13aef3c477a89972d90a924 Mon Sep 17 00:00:00 2001
From: SamSys <f0604741@gmail.com>
Date: Mon, 26 May 2025 21:28:51 +0330
Subject: [PATCH] front chang amo

---
 .../Company/MonthlyOverview/Index.cshtml      |  21 +-
 .../MonthlyOverview/css/style.css             |  81 +-
 .../MonthlyOverview/js/Index.js               | 776 +++++++++---------
 ServiceHost/wwwroot/AssetsTailwind/main.css   |   2 +-
 4 files changed, 463 insertions(+), 417 deletions(-)

diff --git a/ServiceHost/Areas/AdminNew/Pages/Company/MonthlyOverview/Index.cshtml b/ServiceHost/Areas/AdminNew/Pages/Company/MonthlyOverview/Index.cshtml
index a4b69ed6..ee398fe8 100644
--- a/ServiceHost/Areas/AdminNew/Pages/Company/MonthlyOverview/Index.cshtml
+++ b/ServiceHost/Areas/AdminNew/Pages/Company/MonthlyOverview/Index.cshtml
@@ -7,9 +7,6 @@
 	string clientVersion = _0_Framework.Application.Version.StyleVersion;
 	ViewData["Title"] = " - " + "کارگاه";
 
-
-
-
     var hasNextPermission = AuthHelper.GetPermissions().Any(x => x == 501);
 	var hasPrevPermission = AuthHelper.GetPermissions().Any(x => x == 502);
 }
@@ -212,7 +209,7 @@
 <div class="card-container tw-hidden md:tw-block" id="overviewSteps">
 	@* Monthly Table Desktop *@
 	<div class="monthly-table">
-		<div class="monthly-table__head tw-font-[600] tw-mb-1 tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-bg-[#3B73D0] tw-px-2 tw-text-white tw-text-[14px]">
+		<div class="monthly-table__head tw-font-[500] tw-mb-1 tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-bg-[linear-gradient(180deg,_#41D1D1_0%,_#2CD0D0_100%)] tw-px-2 tw-text-white tw-text-[13px]">
 			<div class="monthly-table__head-cell tw-w-[2%]">ردیف</div>
 			<div class="monthly-table__head-cell tw-w-[7%] tw-text-center">ش بایگانی</div>
 			<div class="monthly-table__head-cell tw-w-[15%] tw-text-right">نام کارگاه</div>
@@ -251,8 +248,8 @@
 
 @* The whole workshop Desktop *@
 <div class="card-container tw-hidden md:tw-block" id="overviewAll" style="display: none">
-	<div class="monthly-table  ">
-		<div class="monthly-table__head tw-font-[600] tw-mb-1 tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-bg-[#3B73D0] tw-px-2 tw-text-white tw-text-[14px]">
+	<div class="monthly-table">
+		<div class="monthly-table__head tw-font-[500] tw-mb-1 tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-rounded-[5px] tw-bg-[linear-gradient(180deg,_#41D1D1_0%,_#2CD0D0_100%)]  tw-px-2 tw-text-white tw-text-[13px]">
 			<div class="monthly-table__head-cell tw-w-[2%]">ردیف</div>
 			<div class="monthly-table__head-cell tw-w-[7%] tw-text-center">ش بایگانی</div>
 			<div class="monthly-table__head-cell tw-w-[18%] tw-text-start">نام کارگاه</div>
@@ -262,7 +259,7 @@
 			<div class="monthly-table__head-cell tw-w-[35%] tw-text-start">جزئیات نشانی </div>
 			<div class="monthly-table__head-cell tw-w-[10%] tw-text-center">وضعیت</div>
 		</div>
-		<div class="monthly-table__body tw-whitespace-nowrap"  id="load-data-html-stepAll">
+		<div class="monthly-table__body tw-whitespace-nowrap" id="load-data-html-stepAll">
 		</div>
 	</div>
 </div>
@@ -272,13 +269,18 @@
 @* Monthly Table Mobile *@
 <div class="monthly-card-mobile tw-block md:tw-hidden " id="overviewSteps-mobile">
 	<div class="monthly-table monthly-table--striped">
-		<div class="monthly-table__head tw-font-[500] tw-mb-[3px] tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-bg-[#3B73D0] tw-px-2 tw-text-white tw-text-[8px] md:tw-font-[600] md:tw-text-[14px]">
+		<div class="monthly-table__head tw-font-[500] tw-mb-[3px] tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-rounded-[5px] tw-bg-[linear-gradient(180deg,_#41D1D1_0%,_#2CD0D0_100%)]  tw-px-2 tw-text-white tw-text-[8px] md:tw-font-[600] md:tw-text-[14px]">
 			<div class="monthly-table__head-cell tw-w-[5%] tw-text tw-text-center">ردیف</div>
 			<div class="monthly-table__head-cell tw-w-[20%] tw-text-center">ش بایگانی</div>
 			<div class="monthly-table__head-cell tw-w-[25%] tw-text-right">نام کارگاه</div>
 			<div class="monthly-table__head-cell tw-w-[40%] tw-text-center">شماره تماس نماینده</div>
 			<div class="monthly-table__head-cell tw-w-[10%] tw-text-end">عملیات</div>
 		</div>
+		@* <div class="monthly-table__head tw-font-[500] tw-mb-[3px] tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-bg-[linear-gradient(180deg,_#41D1D1_0%,_#2CD0D0_100%)] tw-px-2 tw-text-white tw-text-[8px] md:tw-font-[600] md:tw-text-[13px]">
+			<div class="monthly-table__head-cell tw-w-[10%] tw-text-right  ">ردیف</div>
+			<div class="monthly-table__head-cell tw-w-[20%] tw-text-center">نام کارگاه</div>
+			<div class="monthly-table__head-cell tw-w-[70%] tw-text-end">عملیات</div>
+		</div> *@
 
 		<div class="monthly-table__body tw-whitespace-nowrap" id="load-data-html-step0-mobile">
 		</div>
@@ -301,7 +303,7 @@
 @* The whole workshop Mobile *@
 <div class="monthly-card-mobile tw-block md:tw-hidden"  id="overviewAll-mobile" style="display: none">
 	<div class="monthly-table monthly-table--striped ">
-		<div class="monthly-table__head tw-font-[500] tw-mb-[3px] tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-bg-[#3B73D0] tw-px-2 tw-text-white tw-text-[8px] md:tw-font-[600] md:tw-text-[14px]">
+		<div class="monthly-table__head tw-font-[500] tw-mb-[3px] tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-rounded-[5px] tw-bg-[linear-gradient(180deg,_#41D1D1_0%,_#2CD0D0_100%)] tw-px-2 tw-text-white tw-text-[8px] md:tw-font-[600] md:tw-text-[14px]">
 			<div class="monthly-table__head-cell tw-w-[10%] tw-text tw-text-right">ردیف</div>
 			<div class="monthly-table__head-cell tw-w-[20%] tw-text-right">نام کارگاه</div>
 
@@ -409,7 +411,6 @@
 
 		var nextPermission = @(hasNextPermission ? "false" : "true");
 		var prevPermission = @(hasPrevPermission ? "false" : "true");
-		
 	</script>
 	<script src="~/AssetsAdminNew/monthlyoverview/js/Index.js?ver=@adminVersion"></script>
 }
\ No newline at end of file
diff --git a/ServiceHost/wwwroot/AssetsAdminNew/MonthlyOverview/css/style.css b/ServiceHost/wwwroot/AssetsAdminNew/MonthlyOverview/css/style.css
index 24a57bbc..f67975f0 100644
--- a/ServiceHost/wwwroot/AssetsAdminNew/MonthlyOverview/css/style.css
+++ b/ServiceHost/wwwroot/AssetsAdminNew/MonthlyOverview/css/style.css
@@ -1,7 +1,7 @@
 
 
 .custom-scrollbar-x::-webkit-scrollbar {
-    height: 6px; 
+    height: 6px;
 }
 
 .custom-scrollbar-x::-webkit-scrollbar-track {
@@ -9,9 +9,10 @@
 }
 
 .custom-scrollbar-x::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.3); 
+    background-color: rgba(0, 0, 0, 0.3);
     border-radius: 4px;
 }
+
 .tab-bar {
     padding: 0 20px;
 }
@@ -19,33 +20,31 @@
 .tab-bar__tab {
     width: 128px;
     height: 33px;
-    background-color: #275197;
+    background-color: #23bab9;
     color: white;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding:0 6px;
-    
+    padding: 0 6px;
     border-radius: 7px 7px 0 0;
-   
 }
- 
 
-    .tab-bar__tab--active {
-        background-color: #FFFFFF;
-        color: #1A3E7B;
-        border-top: 1px solid #2A5398
-    }
+
+.tab-bar__tab--active {
+    background-color: #FFFFFF;
+    color: #1A3E7B;
+    border-top: 1px solid #23bab9
+}
 
 .tab-bar__tab-label {
-    font-weight: 600;
+    font-weight: 500;
     font-size: 11px;
 }
 
 
-@media(min-width:768px){
+@media(min-width:768px) {
     .tab-bar__tab-label {
-        font-weight: 600;
+        font-weight: 500;
         font-size: 12px;
     }
 }
@@ -53,23 +52,23 @@
 .tab-bar__tab-badge {
     background-color: #FF6363;
     color: white;
-    width: 16px;
-    height: 16px;
+    width: 22px;
+    height: 18px;
     border-radius: 30px;
-    font-size: 9px;
+    font-size: 11px;
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
-    line-height: 16px;
+    line-height: 18px;
 }
+
 .card-container {
     border-radius: 10px;
     padding: 10px 10px 20px;
     width: 100%;
     margin: 0 auto;
-    background-color:white;
-    
+    background-color: white;
 }
 
 
@@ -93,9 +92,9 @@
     transition: opacity 300ms ease-in-out;
 }
 
-.u-tactile:hover {
-    opacity: 0.8;
-}
+    .u-tactile:hover {
+        opacity: 0.8;
+    }
 
 .monthly-table__cell-title {
     width: 96%;
@@ -112,11 +111,11 @@
 }
 
 .monthly-table__cell-card--small {
-    background-color: #28529833;
+    background-color: #BCF0F0;
     color: #0B5959;
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
+    width: 26px;
+    height: 26px;
+    line-height: 26px;
 }
 
 
@@ -206,8 +205,8 @@
     width: 71px;
     height: 27px;
     border-radius: 5px;
-    background-color: #275197;
-    color:white
+    background-color: #23bab9;
+    color: white
 }
 
 
@@ -237,15 +236,16 @@
     white-space: nowrap
 }
 
- /* The whole workshop  */
+/* The whole workshop  */
 .monthly-table__status-button {
     width: 88px;
-    height:32px;
-    
-    font-weight: 600;
+    font-weight: 500;
     font-size: 12px;
-    border-radius:0
+    border-radius: 0;
+    border-radius: 30px;
+    padding: 3px 4px;
 }
+
 .monthly-table__status-button--documents-setup {
     background-color: #C8C8C8 !important;
 }
@@ -268,10 +268,9 @@
 
 
 
-@media(min-width:768px){
+@media(min-width:768px) {
     .monthly-table__status-button {
-        width: 166px;
-        height: 35px;
+        width: 116px;
     }
 
     .monthly-table__status-button--documents-setup {
@@ -283,4 +282,8 @@
     .monthly-table__toggle-value {
         white-space: break-spaces;
     }
-}
\ No newline at end of file
+
+    .monthly-table__status-button {
+        font-size: 10px;
+    }
+}
diff --git a/ServiceHost/wwwroot/AssetsAdminNew/MonthlyOverview/js/Index.js b/ServiceHost/wwwroot/AssetsAdminNew/MonthlyOverview/js/Index.js
index 9748252e..0f605cc0 100644
--- a/ServiceHost/wwwroot/AssetsAdminNew/MonthlyOverview/js/Index.js
+++ b/ServiceHost/wwwroot/AssetsAdminNew/MonthlyOverview/js/Index.js
@@ -1,13 +1,13 @@
 $(document).ready(async function () {
-	/* سلکت شدن ماه جاری */
-	const monthSelect = document.getElementById('month-select');
-	monthSelect.value = currentMonth;
+    /* سلکت شدن ماه جاری */
+    const monthSelect = document.getElementById('month-select');
+    monthSelect.value = currentMonth;
 	/* سلکت شدن ماه جاری */
 
 	const { year, month, employer, employerName, workshopAndArchive, workshopAndArchiveName, adminPersonnel, status } = getSearchParamsFromUrl();
-	$('#year-select').val(year !== "0" ? year : Number($('#year-select').val()));
-	$("#month-select").val(month !== "0" ? month : currentMonth);
-	$("#employer-select").val(employer);
+    $('#year-select').val(year !== "0" ? year : Number($('#year-select').val()));
+    $("#month-select").val(month !== "0" ? month : currentMonth);
+    $("#employer-select").val(employer);
 	$("#workshop-select").val(workshopAndArchive);
 
     $('#year-select-mobile').val(year !== "0" ? year : Number($('#year-select').val()));
@@ -33,10 +33,10 @@
 	$("#status-select-mobile").val(status !== "" ? status : 2);
 
 	if (year !== "0" || month !== '0' || employer !== '0' || workshopAndArchive !== '0' || adminPersonnel !== '0' || status !== '') {
-		$('.btn-clear-filter').removeClass('disable');
-	} else {
-		$('.btn-clear-filter').addClass('disable');
-	}
+        $('.btn-clear-filter').removeClass('disable');
+    } else {
+        $('.btn-clear-filter').addClass('disable');
+    }
 
     $(".EmployerSelect2Option").select2({
         language: "fa",
@@ -56,11 +56,11 @@
                     text: item.name
                 }));
 
-				const manualItems = [
-					{ id: 0, text: 'انتخاب کارفرما ...' }
-				];
+                const manualItems = [
+                    { id: 0, text: 'انتخاب کارفرما ...' }
+                ];
 
-				const finalList = manualItems.concat(originalList);
+                const finalList = manualItems.concat(originalList);
 
                 return {
                     results: finalList
@@ -119,19 +119,19 @@
                 };
             },
 			processResults: function (response) {
-				const originalList = response.data.map(item => ({
-					id: item.id,
+                const originalList = response.data.map(item => ({
+                    id: item.id,
 					text: item.name + " - " + item.archiveCode
 				}));
 
-				const manualItems = [
+                const manualItems = [
 					{ id: 0, text: 'انتخاب نام کارگاه /شماره بایگانی ...' }
 				];
 
-				const finalList = manualItems.concat(originalList);
+                const finalList = manualItems.concat(originalList);
 
-				return {
-					results: finalList
+                return {
+                    results: finalList
 				};
             },
             cache: false
@@ -175,9 +175,9 @@
     });
 
 	$(".AdminPersonnelNameSelect2Option").select2({
-		language: "fa",
-		dir: "rtl"
-		//dropdownParent: $('#MainModal')
+        language: "fa",
+        dir: "rtl"
+        //dropdownParent: $('#MainModal')
 	});
 	
 	$(".AdminPersonnelNameSelect2OptionMobile").select2({
@@ -210,9 +210,9 @@
     });
 
 	$("#month-select").select2({
-		language: "fa",
-		dir: "rtl"
-		//dropdownParent: $('#MainModal')
+        language: "fa",
+        dir: "rtl"
+        //dropdownParent: $('#MainModal')
 	});
 	$("#month-select-mobile").select2({
         language: "fa",
@@ -220,23 +220,23 @@
         dropdownParent: $('#searchModal')
 	});
 
-	await ajaxAdminPersonnel();
-	await loadMonthlyOverviewData();
+    await ajaxAdminPersonnel();
+    await loadMonthlyOverviewData();
 });
 
 // Open Div Mobile
-$(document).on('click', '.monthly-table__row', function () {
-	var container = $(this).closest('.monthly-table__container');
-	var toggleDiv = container.find('.monthly-table__toggle');
-	var isOpen = toggleDiv.hasClass('show');
+$(document).on('click', '.monthly-table__row' ,function () {
+    var container = $(this).closest('.monthly-table__container');
+    var toggleDiv = container.find('.monthly-table__toggle');
+    var isOpen = toggleDiv.hasClass('show');
 
-	// Close all
-	$('.monthly-table__toggle.show').removeClass('show');
+    // Close all
+    $('.monthly-table__toggle.show').removeClass('show');
 
-	// Open this one only if it wasn't already open
-	if (!isOpen) {
-		toggleDiv.addClass('show');
-	}
+    // Open this one only if it wasn't already open
+    if (!isOpen) {
+        toggleDiv.addClass('show');
+    }
 });
 
 $(document).on('click', '.btn-search-click, .btn-search-click-mobile', function () {
@@ -273,10 +273,10 @@ $(document).on('click', '.btn-search-click, .btn-search-click-mobile', function
     }
 
 	if (filterYear !== "0" || filterMonth !== '0' || filterEmployer !== '0' || filterWorkshopAndArchive !== '0' || filterAdminPersonnel !== '0' || filterStatus !== '') {
-		$('.btn-clear-filter').removeClass('disable');
-	} else {
-		$('.btn-clear-filter').addClass('disable');
-	}
+        $('.btn-clear-filter').removeClass('disable');
+    } else {
+        $('.btn-clear-filter').addClass('disable');
+    }
 
 	paramsUrl(filterYear, filterMonth, filterEmployer, filterEmployerName, filterWorkshopAndArchive, filterWorkshopAndArchiveName, filterAdminPersonnel, filterStatus);
 
@@ -289,20 +289,20 @@ $(document).on('click', '.btn-search-click, .btn-search-click-mobile', function
 });
 
 $(document).on('click', '.btn-clear-filter', function () {
-	$('.btn-clear-filter').addClass('disable');
-	//$('.employeeName').val('');
-	$('#searchModal').modal('hide');
-	loadMonthlyOverviewData();
+    $('.btn-clear-filter').addClass('disable');
+    //$('.employeeName').val('');
+    $('#searchModal').modal('hide');
+    loadMonthlyOverviewData();
 });
 
 $(document).on('click', '.js-document-click', function () {
 	$('.js-document-click').removeClass('tab-bar__tab--active');
-	$(this).addClass('tab-bar__tab--active');
-	var statusValue = $(this).prop('value');
+    $(this).addClass('tab-bar__tab--active');
+    var statusValue = $(this).prop('value');
 
-	var isMobile = window.matchMedia('(max-width: 767px)').matches;
+    var isMobile = window.matchMedia('(max-width: 767px)').matches;
 
-	$(".monthly-table__body").hide();
+    $(".monthly-table__body").hide();
 	$(".card-container").hide();
 	switch (statusValue) {
 		case "0":
@@ -310,33 +310,33 @@ $(document).on('click', '.js-document-click', function () {
 			!isMobile ? $('#overviewSteps').show() : $('#overviewSteps-mobile').show();
 			!isMobile ? $('#overviewAll').hide() : $('#overviewAll-mobile').hide();
 			break;
-		case "1":
+        case "1":
 			!isMobile ? $('#load-data-html-step1').show() : $('#load-data-html-step1-mobile').show();
-			!isMobile ? $('#overviewSteps').show() : $('#overviewSteps-mobile').show();
+            !isMobile ? $('#overviewSteps').show() : $('#overviewSteps-mobile').show();
 			!isMobile ? $('#overviewAll').hide() : $('#overviewAll-mobile').hide();
 			break;
-		case "2":
+        case "2":
 			!isMobile ? $('#load-data-html-step2').show() : $('#load-data-html-step2-mobile').show();
-			!isMobile ? $('#overviewSteps').show() : $('#overviewSteps-mobile').show();
+            !isMobile ? $('#overviewSteps').show() : $('#overviewSteps-mobile').show();
 			!isMobile ? $('#overviewAll').hide() : $('#overviewAll-mobile').hide();
 			break;
-		case "3":
+        case "3":
 			!isMobile ? $('#load-data-html-step3').show() : $('#load-data-html-step3-mobile').show();
-			!isMobile ? $('#overviewSteps').show() : $('#overviewSteps-mobile').show();
+            !isMobile ? $('#overviewSteps').show() : $('#overviewSteps-mobile').show();
 			!isMobile ? $('#overviewAll').hide() : $('#overviewAll-mobile').hide();
 			break;
-		case "4":
+        case "4":
 			!isMobile ? $('#load-data-html-step4').show() : $('#load-data-html-step4-mobile').show();
 			!isMobile ? $('#overviewSteps').show() : $('#overviewSteps-mobile').show();
 			!isMobile ? $('#overviewAll').hide() : $('#overviewAll-mobile').hide();
-			break;
+            break;
 		case "5":
 			!isMobile ? $('#load-data-html-stepAll').show() : $('#load-data-html-stepAll-mobile').show();
 			!isMobile ? $('#overviewAll').show() : $('#overviewAll-mobile').show();
 			!isMobile ? $('#overviewSteps').hide() : $('#overviewSteps-mobile').hide();
-			break;
-		default:
-	}
+            break;
+    default:
+    }
 });
 
 async function loadMonthlyOverviewData() {
@@ -351,37 +351,37 @@ async function loadMonthlyOverviewData() {
     var html = '';
 
 	const { year, month, employer, employerName, workshopAndArchive, workshopAndArchiveName, adminPersonnel, status } = getSearchParamsFromUrl();
-
-	var searchModel = {
+    
+    var searchModel = {
 		'Year': year !== "0" ? year : Number($('#year-select').val()),
 		'Month': month !== "0" ? month : Number($('#month-select').val()),
 		'WorkshopId': workshopAndArchive,
 		'EmployerId': employer,
 		'AdminAccountId': adminPersonnel !== "0" ? adminPersonnel : adminAccountId,
 		'ActivationStatus': status !== "" ? Number(status) : 2
-	};
+    };
 
-	try {
-		const response = await ajax.get(loadMonthlyOverviewDataUrl, searchModel, true);
-		var responseData = response.data;
+    try {
+        const response = await ajax.get(loadMonthlyOverviewDataUrl, searchModel, true);
+        var responseData = response.data;
 
-		var countStatusStep0 = responseData.filter(x => x.status === 0).length;
-		$("#step0-badge").text(countStatusStep0).toggle(countStatusStep0 > 0);
+        var countStatusStep0 = responseData.filter(x => x.status === 0).length;
+        $("#step0-badge").text(countStatusStep0).toggle(countStatusStep0 > 0);
 
-		var countStatusStep1 = responseData.filter(x => x.status === 1).length;
-		$("#step1-badge").text(countStatusStep1).toggle(countStatusStep1 > 0);
+        var countStatusStep1 = responseData.filter(x => x.status === 1).length;
+        $("#step1-badge").text(countStatusStep1).toggle(countStatusStep1 > 0);
 
-		var countStatusStep2 = responseData.filter(x => x.status === 2).length;
-		$("#step2-badge").text(countStatusStep2).toggle(countStatusStep2 > 0);
+        var countStatusStep2 = responseData.filter(x => x.status === 2).length;
+        $("#step2-badge").text(countStatusStep2).toggle(countStatusStep2 > 0);
 
-		var countStatusStep3 = responseData.filter(x => x.status === 3).length;
-		$("#step3-badge").text(countStatusStep3).toggle(countStatusStep3 > 0);
+        var countStatusStep3 = responseData.filter(x => x.status === 3).length;
+        $("#step3-badge").text(countStatusStep3).toggle(countStatusStep3 > 0);
 
-		var countStatusStep4 = responseData.filter(x => x.status === 4).length;
-		$("#step4-badge").text(countStatusStep4).toggle(countStatusStep4 > 0);
+        var countStatusStep4 = responseData.filter(x => x.status === 4).length;
+        $("#step4-badge").text(countStatusStep4).toggle(countStatusStep4 > 0);
 
-		var countStatusStep5 = responseData.length;
-		$("#step5-badge").text(countStatusStep5).toggle(countStatusStep5 > 0);
+        var countStatusStep5 = responseData.length;
+        $("#step5-badge").text(countStatusStep5).toggle(countStatusStep5 > 0);
 
 		if (responseData.length > 0) {
 			initialDocument(responseData);
@@ -394,11 +394,11 @@ async function loadMonthlyOverviewData() {
 						        <h5>اطلاعاتی وجود ندارد.</h5>
 					        </div>
 				        </div>`;
-			$('#load-data-html-step0').html(html);
-			$('#load-data-html-step1').html(html);
-			$('#load-data-html-step2').html(html);
-			$('#load-data-html-step3').html(html);
-			$('#load-data-html-step4').html(html);
+            $('#load-data-html-step0').html(html);
+            $('#load-data-html-step1').html(html);
+            $('#load-data-html-step2').html(html);
+            $('#load-data-html-step3').html(html);
+            $('#load-data-html-step4').html(html);
 			$('#load-data-html-stepAll').html(html);
 		}
 
@@ -411,12 +411,16 @@ async function loadMonthlyOverviewData() {
 function initialDocument(data) {
 	var html = '';
 	var htmlMobile = '';
-	var indexNumber = 1;
-	var indexNumberMobile = 1;
-	data.forEach(function (item) {
+    var indexNumber = 1;
+    var indexNumberMobile = 1;
+    data.forEach(function (item) {
 		if (item.status === 0) {
-			html += `<div class="monthly-table__container tw-cursor-pointer">
-	                        <div class="monthly-table__row tw-font-[400]  tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[14px]">
+            const isEven = indexNumber % 2 === 0;
+			const rowBgClass = isEven ? 'tw-bg-[#DDF4F4]' : 'tw-bg-[#ECFFFF]';
+			//odd:tw-bg-[#DFF0FF] even:tw-bg-[#D1E9FF]
+
+            html += `<div class="monthly-table__container tw-cursor-pointer">
+	                        <div class="monthly-table__row tw-font-[400] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] ${rowBgClass} hover:tw-bg-[#C9F0F0] tw-duration-300 tw-ease-in-out tw-px-2 tw-text-[12px]">
 		                        <div class="monthly-table__cell tw-w-[2%]">
 			                        <div class="monthly-table__cell-card monthly-table__cell-card--small">
 				                        ${indexNumber++}
@@ -445,40 +449,39 @@ function initialDocument(data) {
 	                        </div>
 	                        <!-- toggle content -->
 	                        <div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[97%] tw-gap-2 tw-flex-col tw-px-2">
-
 		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
-			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label tw-w-[50%]">نام کارفرما :</span>
-				                        <span class="monthly-table__toggle-value tw-w-[50%]"> ${item.employerName}</span>
+			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">نام کارفرما: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.employerName} </span>
 
 			                        </div>
-			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد:</span>
-				                        <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>
+			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">تعداد پرسنل قرارداد: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.contractEmployeeCount} نفر</span>
 
 			                        </div>
 		                        </div>
 		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
-			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label tw-w-[50%] ">شماره تماس کارفرما :</span>
-				                        <span class="monthly-table__toggle-value tw-w-[50%]">${item.employerPhoneNumber}</span>
+			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">شماره تماس کارفرما: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.employerPhoneNumber} </span>
 			                        </div>
 
-									<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label">تعداد پرسنل تصفیه:</span>
-				                        <span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
+									<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">تعداد پرسنل تصفیه: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.checkoutEmployeeCount} نفر</span>
 			                        </div>
 		                        </div>
 	                        </div>
 	                        <div>
 	                        </div>
                         </div>`;
-		}
-	});
+        }
+    });
 
-	data.forEach(function (item) {
+    data.forEach(function (item) {
 		if (item.status === 0) {
-			htmlMobile += `<div class="monthly-table__container tw-cursor-pointer">
+            htmlMobile += `<div class="monthly-table__container tw-cursor-pointer">
 				        <div class="monthly-table__row tw-font-[500] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[12px] md:tw-font-[400] md:tw-text-[14px]">
 					        <div class="monthly-table__cell tw-w-[5%]">
 						        <div class="monthly-table__cell-card monthly-table__cell-card--small tw-text-center">
@@ -495,7 +498,7 @@ function initialDocument(data) {
 					        <div class="monthly-table__cell tw-flex tw-w-[25%] tw-justify-end tw-gap-2">
 						        <button class="u-tactile" aria-label="Edit monthly">
 							        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-								        <rect width="21" height="21" rx="3" fill="#275197"/>
+								        <rect width="21" height="21" rx="3" fill="#23bab9"/>
 								        <path d="M10.4375 14.1484C11.3436 14.1484 12.0781 14.8891 12.0781 15.8028C12.0781 16.7166 11.3436 17.4573 10.4375 17.4573C9.53141 17.4573 8.79688 16.7166 8.79688 15.8028C8.79688 14.8891 9.53141 14.1484 10.4375 14.1484Z" fill="white"/>
 								        <path d="M10.4375 9.07031C11.3436 9.07031 12.0781 9.81102 12.0781 10.7247C12.0781 11.6384 11.3436 12.3791 10.4375 12.3791C9.53141 12.3791 8.79688 11.6384 8.79688 10.7247C8.79688 9.81102 9.53141 9.07031 10.4375 9.07031Z" fill="white"/>
 								        <path d="M12.0781 5.65441C12.0781 4.7407 11.3436 4 10.4375 4C9.53141 4 8.79688 4.74071 8.79688 5.65441C8.79688 6.56812 9.53141 7.30882 10.4375 7.30882C11.3436 7.30882 12.0781 6.56812 12.0781 5.65441Z" fill="white"/>
@@ -509,31 +512,38 @@ function initialDocument(data) {
 				        <div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[95%] tw-flex-col tw-gap-2 tw-px-2">
 
 					        <div class="monthly-table__toggle-row tw-flex">
+					            <div class="monthly-table__toggle-item tw-flex tw-w-[50%] tw-gap-2">
+						            <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد: </span>
+						            <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>
+					            </div>
+
+					            <div class="monthly-table__toggle-item tw-flex tw-w-[50%] tw-gap-2">
+						            <span class="monthly-table__toggle-label">تعداد پرسنل تصفیه: </span>
+						            <span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
+					            </div>
+					        </div>
+					        <div class="monthly-table__toggle-row tw-flex ">
 						        <div class="monthly-table__toggle-item tw-flex tw-w-[50%] tw-gap-2">
 							        <span class="monthly-table__toggle-label">استان:</span>
 							        <span class="monthly-table__toggle-value">${item.province}</span>
 
 						        </div>
-						        <div class="monthly-table__toggle-item tw-flex tw-w-[50%] tw-gap-2">
-							        <span class="monthly-table__toggle-label">تعداد پرسنل:</span>
-							        <span class="monthly-table__toggle-value">${item.employeeCount}</span>
-
-						        </div>
-
-					        </div>
-					        <div class="monthly-table__toggle-row tw-flex ">
 						        <div class="monthly-table__toggle-item tw-flex tw-w-[50%] tw-gap-2">
 							        <span class="monthly-table__toggle-label">شهرستان:</span>
 							        <span class="monthly-table__toggle-value">${item.city}</span>
 
 						        </div>
-						        <div class="monthly-table__toggle-item tw-flex tw-w-[50%] tw-gap-2">
+					        </div>
+
+					        <div class="monthly-table__toggle-row tw-flex ">
+						        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-gap-2">
 							        <span class="monthly-table__toggle-label">شماره تماس کافرما:</span>
 							        <span class="monthly-table__toggle-value">${item.employerPhoneNumber}</span>
 
 						        </div>
 
 					        </div>
+
 					        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-gap-2">
 						        <span class="monthly-table__toggle-label">جزئیات نشانی:</span>
 						        <span class="monthly-table__toggle-value text-[#000000]">${item.address}</span>
@@ -554,33 +564,39 @@ function initialDocument(data) {
 
 				        </div>
 			        </div>`;
-		}
-	});
+        }
+    });
 
 	$('#load-data-html-step0').html(html);
 	$('#load-data-html-step0-mobile').html(htmlMobile);
 }
 
 function monthlyOverviewStatusDocument(data) {
-	var htmlStep1 = '';
-	var htmlStep2 = '';
-	var htmlStep3 = '';
+    var htmlStep1 = '';
+    var htmlStep2 = '';
+    var htmlStep3 = '';
 	var htmlStep4 = '';
-	var htmlStep1Mobile = '';
-	var htmlStep2Mobile = '';
-	var htmlStep3Mobile = '';
-	var htmlStep4Mobile = '';
-	var indexNumber = 1;
+    var htmlStep1Mobile = '';
+    var htmlStep2Mobile = '';
+    var htmlStep3Mobile = '';
+    var htmlStep4Mobile = '';
+	var indexNumberStep1 = 1;
+	var indexNumberStep2 = 1;
+	var indexNumberStep3 = 1;
+	var indexNumberStep4 = 1;
 	var indexNumberMobile = 1;
 
 	data.forEach(function (item) {
 		//Step 1
 		if (item.status === 1) {
+			const isEven = indexNumberStep1 % 2 === 0;
+			const rowBgClassStep = isEven ? 'tw-bg-[#DDF4F4]' : 'tw-bg-[#ECFFFF]';
+
 			htmlStep1 += `<div class="monthly-table__container tw-cursor-pointer">
-	                        <div class="monthly-table__row tw-font-[400]  tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[14px]">
+			                <div class="monthly-table__row tw-font-[400] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] ${rowBgClassStep} hover:tw-bg-[#C9F0F0] tw-duration-300 tw-ease-in-out tw-px-2 tw-text-[12px]">
 		                        <div class="monthly-table__cell tw-w-[2%]">
 			                        <div class="monthly-table__cell-card monthly-table__cell-card--small">
-				                        ${indexNumber++}
+				                        ${indexNumberStep1++}
 			                        </div>
 		                        </div>
 		                        <div class="monthly-table__cell tw-w-[7%] tw-text-center">${item.workshopArchiveCode}</div>
@@ -615,38 +631,35 @@ function monthlyOverviewStatusDocument(data) {
 	                        </div>
 	                        <!-- toggle content -->
 	                        <div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[97%] tw-gap-2 tw-flex-col tw-px-2">
-		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
-			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label tw-w-[50%]">نام کارفرما :</span>
-				                        <span class="monthly-table__toggle-value tw-w-[50%]"> ${item.employerName}</span>
+		                       <div class="monthly-table__toggle-row tw-flex tw-gap-2">
+			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">نام کارفرما: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.employerName} </span>
 
 			                        </div>
-			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد:</span>
-				                        <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>
+			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">تعداد پرسنل قرارداد: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.contractEmployeeCount} نفر</span>
+
 			                        </div>
 		                        </div>
 		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
-			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label tw-w-[50%] ">شماره تماس کارفرما :</span>
-				                        <span class="monthly-table__toggle-value tw-w-[50%]">${item.employerPhoneNumber}</span>
+			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">شماره تماس کارفرما: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.employerPhoneNumber} </span>
 			                        </div>
-									<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label">تعداد پرسنل تصفیه:</span>
-				                        <span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
+
+									<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">تعداد پرسنل تصفیه: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.checkoutEmployeeCount} نفر</span>
 			                        </div>
 		                        </div>
 	                        </div>
 	                        <div>
 	                        </div>
-                        </div>`;
+	                    </div>`;
 
-			htmlStep1Mobile += `<div class="monthly-table__head tw-font-[500] tw-mb-[3px] tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-bg-[#3B73D0] tw-px-2 tw-text-white tw-text-[8px] md:tw-font-[600] md:tw-text-[14px]">
-			                        <div class="monthly-table__head-cell tw-w-[10%] tw-text-right  ">ردیف</div>
-			                        <div class="monthly-table__head-cell tw-w-[20%] tw-text-center">نام کارگاه</div>
-			                        <div class="monthly-table__head-cell tw-w-[70%] tw-text-end">عملیات</div>
-		                        </div>
-		                        <div class="monthly-table__body tw-whitespace-nowrap">
+			htmlStep1Mobile += `<div class=" tw-whitespace-nowrap">
 			                        <div class="monthly-table__container tw-cursor-pointer">
 				                        <div class="monthly-table__row tw-font-[500] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[12px] md:tw-font-[400] md:tw-text-[14px]">
 					                        <div class="monthly-table__cell tw-w-[10%]">
@@ -671,7 +684,7 @@ function monthlyOverviewStatusDocument(data) {
 
 						                        <button class="u-tactile" aria-label="Edit monthly">
 							                        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-								                        <rect width="21" height="21" rx="3" fill="#275197"/>
+								                        <rect width="21" height="21" rx="3" fill="#23bab9"/>
 								                        <path d="M10.4375 14.1484C11.3436 14.1484 12.0781 14.8891 12.0781 15.8028C12.0781 16.7166 11.3436 17.4573 10.4375 17.4573C9.53141 17.4573 8.79688 16.7166 8.79688 15.8028C8.79688 14.8891 9.53141 14.1484 10.4375 14.1484Z" fill="white"/>
 								                        <path d="M10.4375 9.07031C11.3436 9.07031 12.0781 9.81102 12.0781 10.7247C12.0781 11.6384 11.3436 12.3791 10.4375 12.3791C9.53141 12.3791 8.79688 11.6384 8.79688 10.7247C8.79688 9.81102 9.53141 9.07031 10.4375 9.07031Z" fill="white"/>
 								                        <path d="M12.0781 5.65441C12.0781 4.7407 11.3436 4 10.4375 4C9.53141 4 8.79688 4.74071 8.79688 5.65441C8.79688 6.56812 9.53141 7.30882 10.4375 7.30882C11.3436 7.30882 12.0781 6.56812 12.0781 5.65441Z" fill="white"/>
@@ -722,22 +735,31 @@ function monthlyOverviewStatusDocument(data) {
 						                        <span class="monthly-table__toggle-value">${item.employerPhoneNumber}</span>
 
 					                        </div>
-					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
-						                        <span class="monthly-table__toggle-label">تعداد پرسنل:</span>
-						                        <span class="monthly-table__toggle-value">${item.employeeCount}</span>
 
-					                        </div>					
+					                        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-justify-between tw-gap-2">
+						                        <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد: </span>
+						                        <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>
+					                        </div>
+
+					                        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-justify-between tw-gap-2">
+						                        <span class="monthly-table__toggle-label">تعداد پرسنل تصفیه: </span>
+						                        <span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
+					                        </div>
+
 				                        </div>
 			                        </div>
 		                        </div>`;
 		}
-		//Step 2
+        //Step 2
 		if (item.status === 2) {
+            const isEven = indexNumberStep2 % 2 === 0;
+			const rowBgClassStep = isEven ? 'tw-bg-[#DDF4F4]' : 'tw-bg-[#ECFFFF]';
+
 			htmlStep2 += `<div class="monthly-table__container tw-cursor-pointer">
-	                        <div class="monthly-table__row tw-font-[400]  tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[14px]">
+			                <div class="monthly-table__row tw-font-[400] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] ${rowBgClassStep} hover:tw-bg-[#C9F0F0] tw-duration-300 tw-ease-in-out tw-px-2 tw-text-[12px]">
 		                        <div class="monthly-table__cell tw-w-[2%]">
 			                        <div class="monthly-table__cell-card monthly-table__cell-card--small">
-				                        ${indexNumber++}
+				                        ${indexNumberStep2++}
 			                        </div>
 		                        </div>
 		                        <div class="monthly-table__cell tw-w-[7%] tw-text-center">${item.workshopArchiveCode}</div>
@@ -772,42 +794,37 @@ function monthlyOverviewStatusDocument(data) {
 	                        </div>
 	                        <!-- toggle content -->
 	                        <div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[97%] tw-gap-2 tw-flex-col tw-px-2">
-
-		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
-			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label tw-w-[50%]">نام کارفرما :</span>
-				                        <span class="monthly-table__toggle-value tw-w-[50%]"> ${item.employerName}</span>
+							    <div class="monthly-table__toggle-row tw-flex tw-gap-2">
+			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">نام کارفرما: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.employerName} </span>
 
 			                        </div>
-			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد:</span>
-				                        <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>
+			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">تعداد پرسنل قرارداد: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.contractEmployeeCount} نفر</span>
 
 			                        </div>
 		                        </div>
 		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
-			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label tw-w-[50%] ">شماره تماس کارفرما :</span>
-				                        <span class="monthly-table__toggle-value tw-w-[50%]">${item.employerPhoneNumber}</span>
+			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">شماره تماس کارفرما: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.employerPhoneNumber} </span>
 			                        </div>
-									<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label">تعداد پرسنل تصفیه:</span>
-				                        <span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
+
+									<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">تعداد پرسنل تصفیه: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.checkoutEmployeeCount} نفر</span>
 			                        </div>
 		                        </div>
 	                        </div>
 	                        <div>
 	                        </div>
-                        </div>`;
+	                    </div>`;
 
 
 
-			htmlStep1Mobile += `<div class="monthly-table__head tw-font-[500] tw-mb-[3px] tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-bg-[#3B73D0] tw-px-2 tw-text-white tw-text-[8px] md:tw-font-[600] md:tw-text-[14px]">
-			                        <div class="monthly-table__head-cell tw-w-[10%] tw-text-right  ">ردیف</div>
-			                        <div class="monthly-table__head-cell tw-w-[20%] tw-text-center">نام کارگاه</div>
-			                        <div class="monthly-table__head-cell tw-w-[70%] tw-text-end">عملیات</div>
-		                        </div>
-		                        <div class="monthly-table__body tw-whitespace-nowrap">
+			htmlStep2Mobile += `<div class=" tw-whitespace-nowrap">
 			                        <div class="monthly-table__container tw-cursor-pointer">
 				                        <div class="monthly-table__row tw-font-[500] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[12px] md:tw-font-[400] md:tw-text-[14px]">
 					                        <div class="monthly-table__cell tw-w-[10%]">
@@ -832,7 +849,7 @@ function monthlyOverviewStatusDocument(data) {
 
 						                        <button class="u-tactile" aria-label="Edit monthly">
 							                        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-								                        <rect width="21" height="21" rx="3" fill="#275197"/>
+								                        <rect width="21" height="21" rx="3" fill="#23bab9"/>
 								                        <path d="M10.4375 14.1484C11.3436 14.1484 12.0781 14.8891 12.0781 15.8028C12.0781 16.7166 11.3436 17.4573 10.4375 17.4573C9.53141 17.4573 8.79688 16.7166 8.79688 15.8028C8.79688 14.8891 9.53141 14.1484 10.4375 14.1484Z" fill="white"/>
 								                        <path d="M10.4375 9.07031C11.3436 9.07031 12.0781 9.81102 12.0781 10.7247C12.0781 11.6384 11.3436 12.3791 10.4375 12.3791C9.53141 12.3791 8.79688 11.6384 8.79688 10.7247C8.79688 9.81102 9.53141 9.07031 10.4375 9.07031Z" fill="white"/>
 								                        <path d="M12.0781 5.65441C12.0781 4.7407 11.3436 4 10.4375 4C9.53141 4 8.79688 4.74071 8.79688 5.65441C8.79688 6.56812 9.53141 7.30882 10.4375 7.30882C11.3436 7.30882 12.0781 6.56812 12.0781 5.65441Z" fill="white"/>
@@ -883,22 +900,31 @@ function monthlyOverviewStatusDocument(data) {
 						                        <span class="monthly-table__toggle-value">${item.employerPhoneNumber}</span>
 
 					                        </div>
-					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
-						                        <span class="monthly-table__toggle-label">تعداد پرسنل:</span>
-						                        <span class="monthly-table__toggle-value">${item.employeeCount}</span>
 
-					                        </div>					
+					                        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-justify-between tw-gap-2">
+						                        <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد: </span>
+						                        <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>
+					                        </div>
+
+					                        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-justify-between tw-gap-2">
+						                        <span class="monthly-table__toggle-label">تعداد پرسنل تصفیه: </span>
+						                        <span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
+					                        </div>
+
 				                        </div>
 			                        </div>
 		                        </div>`;
 		}
-		//Step 3
+        //Step 3
 		if (item.status === 3) {
+            const isEven = indexNumberStep3 % 2 === 0;
+			const rowBgClassStep = isEven ? 'tw-bg-[#DDF4F4]' : 'tw-bg-[#ECFFFF]';
+
 			htmlStep3 += `<div class="monthly-table__container tw-cursor-pointer">
-	                        <div class="monthly-table__row tw-font-[400]  tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[14px]">
+			                <div class="monthly-table__row tw-font-[400]  tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] ${rowBgClassStep} hover:tw-bg-[#C9F0F0] tw-duration-300 tw-ease-in-out tw-px-2 tw-text-[12px]">
 		                        <div class="monthly-table__cell tw-w-[2%]">
 			                        <div class="monthly-table__cell-card monthly-table__cell-card--small">
-				                        ${indexNumber++}
+				                        ${indexNumberStep3++}
 			                        </div>
 		                        </div>
 		                        <div class="monthly-table__cell tw-w-[7%] tw-text-center">${item.workshopArchiveCode}</div>
@@ -933,42 +959,37 @@ function monthlyOverviewStatusDocument(data) {
 	                        </div>
 	                        <!-- toggle content -->
 	                        <div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[97%] tw-gap-2 tw-flex-col tw-px-2">
-
-		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
-			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label tw-w-[50%]">نام کارفرما :</span>
-				                        <span class="monthly-table__toggle-value tw-w-[50%]"> ${item.employerName}</span>
+							    <div class="monthly-table__toggle-row tw-flex tw-gap-2">
+			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">نام کارفرما: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.employerName} </span>
 
 			                        </div>
-			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد:</span>
-				                        <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>
+			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">تعداد پرسنل قرارداد: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.contractEmployeeCount} نفر</span>
 
 			                        </div>
 		                        </div>
 		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
-			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label tw-w-[50%] ">شماره تماس کارفرما :</span>
-				                        <span class="monthly-table__toggle-value tw-w-[50%]">${item.employerPhoneNumber}</span>
+			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">شماره تماس کارفرما: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.employerPhoneNumber} </span>
+			                        </div>
+
+									<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">تعداد پرسنل تصفیه: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.checkoutEmployeeCount} نفر</span>
 			                        </div>
 		                        </div>
-								<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label">تعداد پرسنل تصفیه:</span>
-				                        <span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
-			                        </div>
 	                        </div>
 	                        <div>
 	                        </div>
-                        </div>`;
+	                    </div>`;
 
 
 
-			htmlStep1Mobile += `<div class="monthly-table__head tw-font-[500] tw-mb-[3px] tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-bg-[#3B73D0] tw-px-2 tw-text-white tw-text-[8px] md:tw-font-[600] md:tw-text-[14px]">
-			                        <div class="monthly-table__head-cell tw-w-[10%] tw-text-right  ">ردیف</div>
-			                        <div class="monthly-table__head-cell tw-w-[20%] tw-text-center">نام کارگاه</div>
-			                        <div class="monthly-table__head-cell tw-w-[70%] tw-text-end">عملیات</div>
-		                        </div>
-		                        <div class="monthly-table__body tw-whitespace-nowrap">
+			htmlStep3Mobile += `<div class=" tw-whitespace-nowrap">
 			                        <div class="monthly-table__container tw-cursor-pointer">
 				                        <div class="monthly-table__row tw-font-[500] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[12px] md:tw-font-[400] md:tw-text-[14px]">
 					                        <div class="monthly-table__cell tw-w-[10%]">
@@ -993,7 +1014,7 @@ function monthlyOverviewStatusDocument(data) {
 
 						                        <button class="u-tactile" aria-label="Edit monthly">
 							                        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-								                        <rect width="21" height="21" rx="3" fill="#275197"/>
+								                        <rect width="21" height="21" rx="3" fill="#23bab9"/>
 								                        <path d="M10.4375 14.1484C11.3436 14.1484 12.0781 14.8891 12.0781 15.8028C12.0781 16.7166 11.3436 17.4573 10.4375 17.4573C9.53141 17.4573 8.79688 16.7166 8.79688 15.8028C8.79688 14.8891 9.53141 14.1484 10.4375 14.1484Z" fill="white"/>
 								                        <path d="M10.4375 9.07031C11.3436 9.07031 12.0781 9.81102 12.0781 10.7247C12.0781 11.6384 11.3436 12.3791 10.4375 12.3791C9.53141 12.3791 8.79688 11.6384 8.79688 10.7247C8.79688 9.81102 9.53141 9.07031 10.4375 9.07031Z" fill="white"/>
 								                        <path d="M12.0781 5.65441C12.0781 4.7407 11.3436 4 10.4375 4C9.53141 4 8.79688 4.74071 8.79688 5.65441C8.79688 6.56812 9.53141 7.30882 10.4375 7.30882C11.3436 7.30882 12.0781 6.56812 12.0781 5.65441Z" fill="white"/>
@@ -1044,22 +1065,30 @@ function monthlyOverviewStatusDocument(data) {
 						                        <span class="monthly-table__toggle-value">${item.employerPhoneNumber}</span>
 
 					                        </div>
-					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
-						                        <span class="monthly-table__toggle-label">تعداد پرسنل:</span>
-						                        <span class="monthly-table__toggle-value">${item.employeeCount}</span>
 
-					                        </div>					
+					                        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-justify-between tw-gap-2">
+						                        <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد: </span>
+						                        <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>
+					                        </div>
+
+					                        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-justify-between tw-gap-2">
+						                        <span class="monthly-table__toggle-label">تعداد پرسنل تصفیه: </span>
+						                        <span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
+					                        </div>
 				                        </div>
 			                        </div>
 		                        </div>`;
 		}
-		//Step 4
+        //Step 4
 		if (item.status === 4) {
+            const isEven = indexNumberStep4 % 2 === 0;
+			const rowBgClassStep = isEven ? 'tw-bg-[#DDF4F4]' : 'tw-bg-[#ECFFFF]';
+
 			htmlStep4 += `<div class="monthly-table__container tw-cursor-pointer">
-	                        <div class="monthly-table__row tw-font-[400]  tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[14px]">
+			                <div class="monthly-table__row tw-font-[400] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] ${rowBgClassStep} hover:tw-bg-[#C9F0F0] tw-duration-300 tw-ease-in-out tw-px-2 tw-text-[12px]">
 		                        <div class="monthly-table__cell tw-w-[2%]">
 			                        <div class="monthly-table__cell-card monthly-table__cell-card--small">
-				                        ${indexNumber++}
+				                        ${indexNumberStep4++}
 			                        </div>
 		                        </div>
 		                        <div class="monthly-table__cell tw-w-[7%] tw-text-center">${item.workshopArchiveCode}</div>
@@ -1094,42 +1123,38 @@ function monthlyOverviewStatusDocument(data) {
 	                        </div>
 	                        <!-- toggle content -->
 	                        <div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[97%] tw-gap-2 tw-flex-col tw-px-2">
-
-		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
-			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label tw-w-[50%]">نام کارفرما :</span>
-				                        <span class="monthly-table__toggle-value tw-w-[50%]"> ${item.employerName}</span>
+							    <div class="monthly-table__toggle-row tw-flex tw-gap-2">
+			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">نام کارفرما: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.employerName} </span>
 
 			                        </div>
-			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد:</span>
-				                        <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>
+			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">تعداد پرسنل قرارداد: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.contractEmployeeCount} نفر</span>
 
 			                        </div>
 		                        </div>
 		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
-			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label tw-w-[50%] ">شماره تماس کارفرما :</span>
-				                        <span class="monthly-table__toggle-value tw-w-[50%]">${item.employerPhoneNumber}</span>
+			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">شماره تماس کارفرما: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.employerPhoneNumber} </span>
+			                        </div>
+
+									<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				                        <span class="monthly-table__toggle-label tw-w-[30%]">تعداد پرسنل تصفیه: </span>
+				                        <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.checkoutEmployeeCount} نفر</span>
 			                        </div>
 		                        </div>
-								<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
-				                        <span class="monthly-table__toggle-label">تعداد پرسنل تصفیه:</span>
-				                        <span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
-			                        </div>
 	                        </div>
 	                        <div>
 	                        </div>
-                        </div>`;
+	                    </div>`;
 
 
 
-			htmlStep1Mobile += `<div class="monthly-table__head tw-font-[500] tw-mb-[3px] tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-bg-[#3B73D0] tw-px-2 tw-text-white tw-text-[8px] md:tw-font-[600] md:tw-text-[14px]">
-			                        <div class="monthly-table__head-cell tw-w-[10%] tw-text-right  ">ردیف</div>
-			                        <div class="monthly-table__head-cell tw-w-[20%] tw-text-center">نام کارگاه</div>
-			                        <div class="monthly-table__head-cell tw-w-[70%] tw-text-end">عملیات</div>
-		                        </div>
-		                        <div class="monthly-table__body tw-whitespace-nowrap">
+			htmlStep4Mobile += `
+		                        <div class=" tw-whitespace-nowrap">
 			                        <div class="monthly-table__container tw-cursor-pointer">
 				                        <div class="monthly-table__row tw-font-[500] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[12px] md:tw-font-[400] md:tw-text-[14px]">
 					                        <div class="monthly-table__cell tw-w-[10%]">
@@ -1154,7 +1179,7 @@ function monthlyOverviewStatusDocument(data) {
 
 						                        <button class="u-tactile" aria-label="Edit monthly">
 							                        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-								                        <rect width="21" height="21" rx="3" fill="#275197"/>
+								                        <rect width="21" height="21" rx="3" fill="#23bab9"/>
 								                        <path d="M10.4375 14.1484C11.3436 14.1484 12.0781 14.8891 12.0781 15.8028C12.0781 16.7166 11.3436 17.4573 10.4375 17.4573C9.53141 17.4573 8.79688 16.7166 8.79688 15.8028C8.79688 14.8891 9.53141 14.1484 10.4375 14.1484Z" fill="white"/>
 								                        <path d="M10.4375 9.07031C11.3436 9.07031 12.0781 9.81102 12.0781 10.7247C12.0781 11.6384 11.3436 12.3791 10.4375 12.3791C9.53141 12.3791 8.79688 11.6384 8.79688 10.7247C8.79688 9.81102 9.53141 9.07031 10.4375 9.07031Z" fill="white"/>
 								                        <path d="M12.0781 5.65441C12.0781 4.7407 11.3436 4 10.4375 4C9.53141 4 8.79688 4.74071 8.79688 5.65441C8.79688 6.56812 9.53141 7.30882 10.4375 7.30882C11.3436 7.30882 12.0781 6.56812 12.0781 5.65441Z" fill="white"/>
@@ -1205,11 +1230,16 @@ function monthlyOverviewStatusDocument(data) {
 						                        <span class="monthly-table__toggle-value">${item.employerPhoneNumber}</span>
 
 					                        </div>
-					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
-						                        <span class="monthly-table__toggle-label">تعداد پرسنل:</span>
-						                        <span class="monthly-table__toggle-value">${item.employeeCount}</span>
 
-					                        </div>					
+					                        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-justify-between tw-gap-2">
+						                        <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد: </span>
+						                        <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>
+					                        </div>
+
+					                        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-justify-between tw-gap-2">
+						                        <span class="monthly-table__toggle-label">تعداد پرسنل تصفیه: </span>
+						                        <span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
+					                        </div>
 				                        </div>
 			                        </div>
 		                        </div>`;
@@ -1217,9 +1247,14 @@ function monthlyOverviewStatusDocument(data) {
 	});
 
 	$('#load-data-html-step1').html(htmlStep1);
-	$('#load-data-html-step2').html(htmlStep2);
-	$('#load-data-html-step3').html(htmlStep3);
+    $('#load-data-html-step2').html(htmlStep2);
+    $('#load-data-html-step3').html(htmlStep3);
 	$('#load-data-html-step4').html(htmlStep4);
+
+	$('#load-data-html-step1-mobile').html(htmlStep1Mobile);
+    $('#load-data-html-step2-mobile').html(htmlStep2Mobile);
+    $('#load-data-html-step3-mobile').html(htmlStep3Mobile);
+	$('#load-data-html-step4-mobile').html(htmlStep4Mobile);
 }
 
 function allWorkshops(data) {
@@ -1229,11 +1264,14 @@ function allWorkshops(data) {
 	var indexNumberMobile = 1;
 	var strTextStatus = "";
 	var strColorStatus = "";
-
+	
 	data.sort((a, b) => a.status - b.status);
 	data.forEach(function (item) {
-        html += `<div class="monthly-table__container tw-cursor-pointer">
-				<div class="monthly-table__row tw-font-[400] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[14px]">
+        const isEven = indexNumber % 2 === 0;
+		const rowBgClass = isEven ? 'tw-bg-[#DDF4F4]' : 'tw-bg-[#ECFFFF]';
+
+		html += `<div class="monthly-table__container tw-cursor-pointer">
+				    <div class="monthly-table__row tw-font-[400] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] ${rowBgClass} hover:tw-bg-[#C9F0F0] tw-duration-300 tw-ease-in-out tw-px-2 tw-text-[12px]">
 					<div class="monthly-table__cell tw-w-[2%]">
 						<div class="monthly-table__cell-card monthly-table__cell-card--small">
 							${indexNumber++}
@@ -1261,71 +1299,71 @@ function allWorkshops(data) {
 					</div>
 					<div class="monthly-table__cell tw-flex tw-w-[10%] tw-justify-center tw-gap-2">`;
 
-		switch (item.status) {
-			case 0:
-				strTextStatus = "تنظیم مستندات";
-				strColorStatus = "documents-setup";
-				break;
-			case 1:
-				strTextStatus = "در انتظار مراجعه";
-				strColorStatus = "step1";
-				break;
-			case 2:
-				strTextStatus = "در حال مراجعه";
-				strColorStatus = "step2";
-				break;
-			case 3:
-				strTextStatus = "اتمام امور";
-				strColorStatus = "step3";
-				break;
-			case 4:
-				strTextStatus = "بایگانی";
-				strColorStatus = "step4";
-				break;
-			default:
-		}
+                        switch (item.status) {
+							case 0:
+								strTextStatus = "تنظیم مستندات";
+								strColorStatus = "documents-setup";
+                                break;
+							case 1:
+								strTextStatus = "در انتظار مراجعه";
+								strColorStatus = "step1";
+                                break;
+							case 2:
+								strTextStatus = "در حال مراجعه";
+								strColorStatus = "step2";
+                                break;
+							case 3:
+								strTextStatus = "اتمام امور";
+								strColorStatus = "step3";
+                                break;
+							case 4:
+								strTextStatus = "بایگانی";
+								strColorStatus = "step4";
+                                break;
+                            default:
+                        }
 
-		html += `<button class="monthly-table__status-button monthly-table__status-button--${strColorStatus} u-tactile">
+		        html += `<button class="monthly-table__status-button monthly-table__status-button--${strColorStatus} u-tactile">
 							${strTextStatus}
 						</button>
 					</div>
 				</div>
 				<!-- toggle content -->
 				<div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[97%] tw-gap-2 tw-flex-col tw-px-2">
+				    <div class="monthly-table__toggle-row tw-flex tw-gap-2">
+			            <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				            <span class="monthly-table__toggle-label tw-w-[30%]">نام کارفرما: </span>
+				            <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.employerName} </span>
 
-					<div class="monthly-table__toggle-row tw-flex tw-gap-2">
-						<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-w-[35%]">
-							<span class="monthly-table__toggle-label tw-w-[50%]">نام کارفرما :</span>
-							<span class="monthly-table__toggle-value tw-w-[50%]"> ${item.employerName}</span>
+			            </div>
+			            <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				            <span class="monthly-table__toggle-label tw-w-[30%]">تعداد پرسنل قرارداد: </span>
+				            <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.contractEmployeeCount} نفر</span>
 
-						</div>
-						<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
-							  <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد:</span>
-				                        <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>
+			            </div>
+		            </div>
+		            <div class="monthly-table__toggle-row tw-flex tw-gap-2">
+			            <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				            <span class="monthly-table__toggle-label tw-w-[30%]">شماره تماس کارفرما: </span>
+				            <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.employerPhoneNumber} </span>
+			            </div>
 
-						</div>
-					</div>
-					<div class="monthly-table__toggle-row tw-flex tw-gap-2">
-						<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-w-[35%]">
-							<span class="monthly-table__toggle-label tw-w-[50%]">شماره تماس کارفرما :</span>
-							<span class="monthly-table__toggle-value tw-w-[50%]">${item.employerPhoneNumber}</span>
-						</div>
-						<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
-							<span class="monthly-table__toggle-label">تعداد پرسنل تصفیه:</span>
-							<span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
-						</div>
-					</div>
+						<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-gap-2 tw-w-[25%]">
+				            <span class="monthly-table__toggle-label tw-w-[30%]">تعداد پرسنل تصفیه: </span>
+				            <span class="monthly-table__toggle-value tw-w-[70%]"> ${item.checkoutEmployeeCount} نفر</span>
+			            </div>
+		            </div>
 				</div>
 				<div>
 				</div>
 			</div>`;
 
 
-		htmlMobile += `<div class="monthly-table__container tw-cursor-pointer">
+                htmlMobile += `<div class="monthly-table__container tw-cursor-pointer">
 			<div class="monthly-table__row tw-font-[500] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[12px] md:tw-font-[400] md:tw-text-[14px]">
 				<div class="monthly-table__cell tw-w-[10%]">
 					<div class="monthly-table__cell-card monthly-table__cell-card--small tw-text-right">
-						${indexNumberMobile++}
+						${indexNumberMobile ++}
 					</div>
 				</div>
 
@@ -1387,15 +1425,19 @@ function allWorkshops(data) {
 					<span class="monthly-table__toggle-value">${item.employerPhoneNumber}</span>
 
 				</div>
-
-				<div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
-					<span class="monthly-table__toggle-label">تعداد پرسنل:</span>
-					<span class="monthly-table__toggle-value">${item.employeeCount}</span>
+				
+				<div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-justify-between tw-gap-2">
+					<span class="monthly-table__toggle-label">تعداد پرسنل قرارداد: </span>
+					<span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>
 				</div>
 
+				<div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-justify-between tw-gap-2">
+					<span class="monthly-table__toggle-label">تعداد پرسنل تصفیه: </span>
+					<span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
+				</div>
 			</div>
 		</div>`;
-	});
+    });
 
 	$('#load-data-html-stepAll').html(html);
 	$('#load-data-html-stepAll-mobile').html(htmlMobile);
@@ -1403,66 +1445,66 @@ function allWorkshops(data) {
 
 
 function showConfirmSwal() {
-	return new Promise((resolve) => {
-		swal({
-			title: "آیا از انتقال مطمئن هستید؟",
-			text: "",
-			type: "warning",
-			showCancelButton: true,
-			confirmButtonColor: "#DD6B55",
-			confirmButtonText: "بله",
-			cancelButtonText: "خیر",
-			closeOnConfirm: true,
-			closeOnCancel: true
-		}, function (isConfirm) {
-			resolve(isConfirm);
-		});
-	});
+    return new Promise((resolve) => {
+        swal({
+            title: "آیا از انتقال مطمئن هستید؟",
+            text: "",
+            type: "warning",
+            showCancelButton: true,
+            confirmButtonColor: "#DD6B55",
+            confirmButtonText: "بله",
+            cancelButtonText: "خیر",
+            closeOnConfirm: true,
+            closeOnCancel: true
+        }, function (isConfirm) {
+            resolve(isConfirm);
+        });
+    });
 }
 
 async function handlerStep(id, stepStr) {
-	let handlerUrl = stepStr === "next" ? nextUrl : backUrl;
+    let handlerUrl = stepStr === "next" ? nextUrl : backUrl;
 
-	const isConfirm = await showConfirmSwal();
-	if (!isConfirm) return;
+    const isConfirm = await showConfirmSwal();
+    if (!isConfirm) return;
 
-	try {
-		const response = await ajax.post(handlerUrl, { id: id }, true);
-		if (response.isSuccedded) {
-			$('.alert-success-msg').show().find('p').text(response.message);
-			setTimeout(() => {
-				$('.alert-success-msg').hide().find('p').text('');
-			}, 1500);
+    try {
+        const response = await ajax.post(handlerUrl, { id: id }, true);
+        if (response.isSuccedded) {
+            $('.alert-success-msg').show().find('p').text(response.message);
+            setTimeout(() => {
+                $('.alert-success-msg').hide().find('p').text('');
+            }, 1500);
 
-			loadMonthlyOverviewData();
-		} else {
-			$('.alert-msg').show().find('p').text(response.message);
-			setTimeout(() => {
-				$('.alert-msg').hide().find('p').text('');
-			}, 2000);
-		}
-	} catch (err) {
-		console.error("خطا در ajax.post:", err);
-	}
+            loadMonthlyOverviewData();
+        } else {
+            $('.alert-msg').show().find('p').text(response.message);
+            setTimeout(() => {
+                $('.alert-msg').hide().find('p').text('');
+            }, 2000);
+        }
+    } catch (err) {
+        console.error("خطا در ajax.post:", err);
+    }
 }
 
 async function ajaxAdminPersonnel() {
-	await $.ajax({
+    await $.ajax({
 		url: accountSelectListUrl,
-		type: 'GET',
+        type: 'GET',
 		success: function (response) {
 			if (response.data.length > 0) {
-				var items = response.data;
+                var items = response.data;
 				var optionsHtml = '<option value="0">انتخاب اعضاء</option>';
 
-				const filteredItems = items.filter(item => item.id !== 2 && item.id !== 3);
-				filteredItems.forEach(function (item) {
+                const filteredItems = items.filter(item => item.id !== 2 && item.id !== 3);
+                filteredItems.forEach(function (item) {
 					optionsHtml += `<option value="${item.id}" ${item.id === adminAccountId ? `selected` : ``}>${item.name}</option>`;
 				});
 				$('#admin-personnel-select').html(optionsHtml);
 				$('#admin-personnel-select-mobile').html(optionsHtml);
 
-				const { year, month, employer, employerName, workshopAndArchive, workshopAndArchiveName, adminPersonnel, status } = getSearchParamsFromUrl();
+                const { year, month, employer, employerName, workshopAndArchive, workshopAndArchiveName, adminPersonnel, status } = getSearchParamsFromUrl();
 				if (![2, 3].includes(adminAccountId)) {
 					$('#admin-personnel-select').prop('disabled', true).closest("div").addClass('disable');
 					$("#admin-personnel-select").val(adminAccountId).trigger('change');
@@ -1475,68 +1517,68 @@ async function ajaxAdminPersonnel() {
                     $("#admin-personnel-select-mobile").val(adminPersonnel).trigger('change');
 				}
 			}
-		},
-		error: function (xhr, status, error) {
-			console.error(xhr.responseText);
-		}
-	});
+        },
+        error: function (xhr, status, error) {
+            console.error(xhr.responseText);
+        }
+    });
 }
 
 function paramsUrl(year, month, employer, employerName, workshopAndArchive, workshopAndArchiveName, adminPersonnel, status) {
-	const params = new URLSearchParams();
+    const params = new URLSearchParams();
 	let hasAnyFilter = false;
 
 	if (year !== '0') {
 		params.set("year", year);
-		hasAnyFilter = true;
-	}
+        hasAnyFilter = true;
+    }
 
 	if (month !== '0') {
 		params.set("month", month);
-		hasAnyFilter = true;
-	}
+        hasAnyFilter = true;
+    }
 
 	if (employer !== '0') {
 		params.set("employer", employer);
-		hasAnyFilter = true;
+        hasAnyFilter = true;
 	}
 
-	if (employer !== '0') {
+    if (employer !== '0') {
 		params.set("employer-name", employerName);
-		hasAnyFilter = true;
-	}
+        hasAnyFilter = true;
+    }
 
 	if (workshopAndArchive !== '0') {
 		params.set("workshop-archive", workshopAndArchive);
-		hasAnyFilter = true;
-	}
+        hasAnyFilter = true;
+    }
 
-	if (workshopAndArchive !== '0') {
+    if (workshopAndArchive !== '0') {
 		params.set("workshop-name", workshopAndArchiveName);
-		hasAnyFilter = true;
-	}
+        hasAnyFilter = true;
+    }
 
 	if (adminPersonnel !== "0") {
 		params.set("admin-personnel", adminPersonnel);
-		hasAnyFilter = true;
+        hasAnyFilter = true;
 	}
 
-	if (status !== "") {
+	if (status !== "2") {
 		params.set("status", status);
-		hasAnyFilter = true;
-	}
+        hasAnyFilter = true;
+    }
 
-	const newUrl = hasAnyFilter
+    const newUrl = hasAnyFilter
 		? `${window.location.origin}/AdminNew/Company/MonthlyOverview?${params.toString()}`
 		: `${window.location.origin}/AdminNew/Company/MonthlyOverview`;
 
-	window.history.pushState({}, '', newUrl);
+    window.history.pushState({}, '', newUrl);
 }
 
 function getSearchParamsFromUrl() {
-	const urlParams = new URLSearchParams(window.location.search);
+    const urlParams = new URLSearchParams(window.location.search);
 
-	return {
+    return {
 		year: urlParams.get("year") || "0",
 		month: urlParams.get("month") || "0",
 		employer: urlParams.get("employer") || "0",
@@ -1545,5 +1587,5 @@ function getSearchParamsFromUrl() {
 		workshopAndArchiveName: urlParams.get("workshop-name") || "",
 		adminPersonnel: urlParams.get("admin-personnel") || "0",
 		status: urlParams.get("status") || ""
-	};
+    };
 }
\ No newline at end of file
diff --git a/ServiceHost/wwwroot/AssetsTailwind/main.css b/ServiceHost/wwwroot/AssetsTailwind/main.css
index 465f2b69..0892d1f2 100644
--- a/ServiceHost/wwwroot/AssetsTailwind/main.css
+++ b/ServiceHost/wwwroot/AssetsTailwind/main.css
@@ -1 +1 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.tw-col-span-1{grid-column:span 1/span 1}.tw-col-span-2{grid-column:span 2/span 2}.tw-mx-auto{margin-left:auto;margin-right:auto}.tw-mb-1{margin-bottom:.25rem}.tw-mb-2{margin-bottom:.5rem}.tw-mb-3{margin-bottom:.75rem}.tw-mb-\[3px\]{margin-bottom:3px}.tw-block{display:block}.tw-flex{display:flex}.tw-grid{display:grid}.tw-hidden{display:none}.tw-h-\[20px\]{height:20px}.tw-h-\[35px\]{height:35px}.tw-h-full{height:100%}.tw-w-\[10\%\]{width:10%}.tw-w-\[100\%\]{width:100%}.tw-w-\[14\%\]{width:14%}.tw-w-\[15\%\]{width:15%}.tw-w-\[18\%\]{width:18%}.tw-w-\[2\%\]{width:2%}.tw-w-\[20\%\]{width:20%}.tw-w-\[25\%\]{width:25%}.tw-w-\[35\%\]{width:35%}.tw-w-\[40\%\]{width:40%}.tw-w-\[5\%\]{width:5%}.tw-w-\[50\%\]{width:50%}.tw-w-\[58px\]{width:58px}.tw-w-\[7\%\]{width:7%}.tw-w-\[70\%\]{width:70%}.tw-w-\[8\%\]{width:8%}.tw-w-\[95\%\]{width:95%}.tw-w-\[97\%\]{width:97%}.tw-w-full{width:100%}.tw-w-max{width:-moz-max-content;width:max-content}.tw-cursor-pointer{cursor:pointer}.tw-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.tw-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.tw-flex-col{flex-direction:column}.tw-items-center{align-items:center}.tw-justify-end{justify-content:flex-end}.tw-justify-center{justify-content:center}.tw-justify-between{justify-content:space-between}.tw-gap-1{gap:.25rem}.tw-gap-2{gap:.5rem}.tw-gap-3{gap:.75rem}.tw-gap-40{gap:10rem}.tw-overflow-x-auto{overflow-x:auto}.tw-truncate{overflow:hidden;text-overflow:ellipsis}.tw-truncate,.tw-whitespace-nowrap{white-space:nowrap}.tw-rounded-\[15px\]{border-radius:15px}.tw-rounded-\[5px\]{border-radius:5px}.tw-bg-\[\#3B73D0\]{--tw-bg-opacity:1;background-color:rgb(59 115 208/var(--tw-bg-opacity,1))}.tw-bg-\[\#454D5C\]{--tw-bg-opacity:1;background-color:rgb(69 77 92/var(--tw-bg-opacity,1))}.tw-bg-\[\#DFF0FF\]{--tw-bg-opacity:1;background-color:rgb(223 240 255/var(--tw-bg-opacity,1))}.tw-bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.tw-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.tw-p-2{padding:.5rem}.tw-px-2{padding-left:.5rem;padding-right:.5rem}.tw-px-4{padding-left:1rem;padding-right:1rem}.tw-text-center{text-align:center}.tw-text-right{text-align:right}.tw-text-start{text-align:start}.tw-text-end{text-align:end}.tw-text-\[10px\]{font-size:10px}.tw-text-\[12px\]{font-size:12px}.tw-text-\[14px\]{font-size:14px}.tw-text-\[16px\]{font-size:16px}.tw-text-\[8px\]{font-size:8px}.tw-text-xs{font-size:.75rem;line-height:1rem}.tw-font-\[400\]{font-weight:400}.tw-font-\[500\]{font-weight:500}.tw-font-\[600\]{font-weight:600}.tw-ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.tw-leading-\[20px\]{line-height:20px}.tw-text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.tw-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.tw-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tw-delay-150{transition-delay:.15s}@media (min-width:768px){.md\:tw-col-span-2{grid-column:span 2/span 2}.md\:tw-block{display:block}.md\:tw-hidden{display:none}.md\:tw-h-\[28px\]{height:28px}.md\:tw-w-\[98px\]{width:98px}.md\:tw-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:tw-text-\[14px\]{font-size:14px}.md\:tw-text-\[20px\]{font-size:20px}.md\:tw-font-\[400\]{font-weight:400}.md\:tw-font-\[600\]{font-weight:600}.md\:tw-leading-\[28px\]{line-height:28px}}
\ No newline at end of file
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.tw-col-span-1{grid-column:span 1/span 1}.tw-col-span-2{grid-column:span 2/span 2}.tw-mx-auto{margin-left:auto;margin-right:auto}.tw-mb-1{margin-bottom:.25rem}.tw-mb-2{margin-bottom:.5rem}.tw-mb-3{margin-bottom:.75rem}.tw-mb-\[3px\]{margin-bottom:3px}.tw-block{display:block}.tw-flex{display:flex}.tw-grid{display:grid}.tw-hidden{display:none}.tw-h-\[20px\]{height:20px}.tw-h-\[35px\]{height:35px}.tw-h-full{height:100%}.tw-w-\[10\%\]{width:10%}.tw-w-\[100\%\]{width:100%}.tw-w-\[14\%\]{width:14%}.tw-w-\[15\%\]{width:15%}.tw-w-\[18\%\]{width:18%}.tw-w-\[2\%\]{width:2%}.tw-w-\[20\%\]{width:20%}.tw-w-\[25\%\]{width:25%}.tw-w-\[30\%\]{width:30%}.tw-w-\[35\%\]{width:35%}.tw-w-\[40\%\]{width:40%}.tw-w-\[5\%\]{width:5%}.tw-w-\[50\%\]{width:50%}.tw-w-\[58px\]{width:58px}.tw-w-\[7\%\]{width:7%}.tw-w-\[70\%\]{width:70%}.tw-w-\[8\%\]{width:8%}.tw-w-\[95\%\]{width:95%}.tw-w-\[97\%\]{width:97%}.tw-w-full{width:100%}.tw-w-max{width:-moz-max-content;width:max-content}.tw-cursor-pointer{cursor:pointer}.tw-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.tw-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.tw-flex-col{flex-direction:column}.tw-items-center{align-items:center}.tw-justify-end{justify-content:flex-end}.tw-justify-center{justify-content:center}.tw-justify-between{justify-content:space-between}.tw-gap-1{gap:.25rem}.tw-gap-2{gap:.5rem}.tw-gap-3{gap:.75rem}.tw-gap-40{gap:10rem}.tw-overflow-x-auto{overflow-x:auto}.tw-truncate{overflow:hidden;text-overflow:ellipsis}.tw-truncate,.tw-whitespace-nowrap{white-space:nowrap}.tw-rounded-\[15px\]{border-radius:15px}.tw-rounded-\[5px\]{border-radius:5px}.tw-bg-\[\#454D5C\]{--tw-bg-opacity:1;background-color:rgb(69 77 92/var(--tw-bg-opacity,1))}.tw-bg-\[\#DDF4F4\]{--tw-bg-opacity:1;background-color:rgb(221 244 244/var(--tw-bg-opacity,1))}.tw-bg-\[\#DFF0FF\]{--tw-bg-opacity:1;background-color:rgb(223 240 255/var(--tw-bg-opacity,1))}.tw-bg-\[\#ECFFFF\]{--tw-bg-opacity:1;background-color:rgb(236 255 255/var(--tw-bg-opacity,1))}.tw-bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.tw-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.tw-bg-\[linear-gradient\(180deg\,_\#41D1D1_0\%\,_\#2CD0D0_100\%\)\]{background-image:linear-gradient(180deg,#41d1d1,#2cd0d0)}.tw-p-2{padding:.5rem}.tw-px-2{padding-left:.5rem;padding-right:.5rem}.tw-px-4{padding-left:1rem;padding-right:1rem}.tw-text-center{text-align:center}.tw-text-right{text-align:right}.tw-text-start{text-align:start}.tw-text-end{text-align:end}.tw-text-\[10px\]{font-size:10px}.tw-text-\[12px\]{font-size:12px}.tw-text-\[13px\]{font-size:13px}.tw-text-\[16px\]{font-size:16px}.tw-text-\[8px\]{font-size:8px}.tw-text-xs{font-size:.75rem;line-height:1rem}.tw-font-\[400\]{font-weight:400}.tw-font-\[500\]{font-weight:500}.tw-font-\[600\]{font-weight:600}.tw-ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.tw-leading-\[20px\]{line-height:20px}.tw-text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.tw-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.tw-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tw-delay-150{transition-delay:.15s}.tw-duration-300{transition-duration:.3s}.tw-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.even\:tw-bg-\[\#D1E9FF\]:nth-child(2n){--tw-bg-opacity:1;background-color:rgb(209 233 255/var(--tw-bg-opacity,1))}.hover\:tw-bg-\[\#C9F0F0\]:hover{--tw-bg-opacity:1;background-color:rgb(201 240 240/var(--tw-bg-opacity,1))}@media (min-width:768px){.md\:tw-col-span-2{grid-column:span 2/span 2}.md\:tw-block{display:block}.md\:tw-hidden{display:none}.md\:tw-h-\[28px\]{height:28px}.md\:tw-w-\[98px\]{width:98px}.md\:tw-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:tw-text-\[13px\]{font-size:13px}.md\:tw-text-\[14px\]{font-size:14px}.md\:tw-text-\[20px\]{font-size:20px}.md\:tw-font-\[400\]{font-weight:400}.md\:tw-font-\[600\]{font-weight:600}.md\:tw-leading-\[28px\]{line-height:28px}}
\ No newline at end of file