Files
Backend-Api/ServiceHost/Pages/services/employee.cshtml
2025-05-14 21:24:06 +03:30

288 lines
20 KiB
Plaintext

@page
@model ServiceHost.Pages.services.employeeModel
@{
Layout = "Shared/_LayoutHome";
}
<!-- Start Header -->
<div class="py-3 relative overflow-hidden">
<img src="~/assetsmain/images/headerSingle.png" class="absolute inset-0 object-cover object-center dark:opacity-15 h-full w-full" alt="" srcset="">
<div class="flex items-center justify-between gap-3 py-1 z-10">
<div class="flex flex-col gap-2 lg:gap-4 px-6 w-full md:w-6/12 text-[#3F3F3F] dark:text-white opacity-100 z-10">
<h4 class="text-[1.6rem] font-bold">عملیات پرسنل</h4>
<p class="text-[0.8rem] md:text-[0.9rem] font-bold md:font-medium text-justify">
بخش "عملیات پرسنل" یکی از هسته‌های اصلی مدیریت منابع انسانی در نرم‌افزار شماست. این ماژول به شما امکان می‌دهد تا تمامی اطلاعات فردی، مالی و عملکردی پرسنل را به‌صورت متمرکز و ساختاریافته مدیریت کنید. در این بخش، ابزارهایی برای بررسی، ثبت، و گزارش‌گیری از فعالیت‌ها و سوابق کارکنان طراحی شده‌اند.
</p>
<div class="flex items-center justify-start gap-3 my-4">
<button class="py-[0.54rem] w-full md:w-[8rem] px-3 text-[0.8rem] font-[500] text-center bg-white hover:bg-[#2DBCBC] border-2 border-[#2DBCBC] text-[#138F8F] hover:text-white rounded-md duration-500 ease-in-out">
<span>تماس با فروش</span>
</button>
<a asp-page="/register/Index" class="py-[0.54rem] w-full md:w-[8rem] px-3 text-[0.8rem] font-[500] text-center bg-white hover:bg-[#2DBCBC] border-2 border-[#2DBCBC] text-[#138F8F] hover:text-white rounded-md duration-500 ease-in-out cursor-pointer">
<span>ثبت نام</span>
</a>
</div>
</div>
<div class="hidden md:flex justify-end gap-6 w-6/12 opacity-100 z-1">
<img src="~/assetsmain/images/line-wave.svg" class="absolute left-0 -top-20 " alt="">
</div>
</div>
</div>
<!-- End Header -->
<!-- Start Contents -->
<div class="block lg:hidden sticky top-[66px] z-[100] mx-4">
<button class="bg-white dark:bg-[#212330] rounded-lg w-full text-[#2B2B2B] dark:text-white font-bold px-4 py-3 flex items-center justify-between shadow-lg focus:outline-none before:content-[''] before:absolute before:h-[33px] before:my-auto before:w-[6px] before:bg-[#2DBCBC] before:top-2 before:right-0 before:rounded-tl-md before:rounded-bl-md before:transition-all before:opacity-0 active before:!opacity-100" id="dropdown-rule">
<span id="ruleBtnMobile">لیست کل پرسنل</span>
<svg id="dropdown-icon" class="text-[#33363F] dark:text-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="dropdown-menu" class="absolute right-0 hidden w-full bg-white dark:bg-[#212330] rounded-none shadow-lg z-10">
<a href="#tab1" class="block px-4 py-2 text-[#2B2B2B] dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800">لیست کل پرسنل</a>
<a href="#tab2" class="block px-4 py-2 text-[#2B2B2B] dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800">لیست کل مرخصی</a>
<a href="#tab3" class="block px-4 py-2 text-[#2B2B2B] dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800">حساب بانکی پرسنل</a>
<a href="#tab4" class="block px-4 py-2 text-[#2B2B2B] dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800">مدارک پرسنل</a>
<a href="#tab5" class="block px-4 py-2 text-[#2B2B2B] dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800">وام</a>
<a href="#tab6" class="block px-4 py-2 text-[#2B2B2B] dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800">پاداش</a>
<a href="#tab7" class="block px-4 py-2 text-[#2B2B2B] dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800">مساعده</a>
<a href="#tab8" class="block px-4 py-2 text-[#2B2B2B] dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800">جرایم</a>
</div>
</div>
<div class="hidden lg:flex mb-4 items-center justify-center gap-9 sticky top-[127px] w-full mx-auto bg-white dark:bg-[#212330] shadow-md z-20">
<div class="relative p-3 cursor-pointer before:content-[''] before:absolute before:w-full before:h-[4px] before:bg-[#2DBCBC] before:bottom-0 before:right-0 before:rounded-t-md before:transition-all before:opacity-0 active before:!opacity-100">
<a href="#tab1" class="tab-link block text-[#344456] dark:text-white hover:text-[#25303D] transition-colors text-[0.9rem] font-[500]">
لیست کل پرسنل
</a>
</div>
<div class="relative p-3 cursor-pointer before:content-[''] before:absolute before:w-full before:h-[4px] before:bg-[#2DBCBC] before:bottom-0 before:right-0 before:rounded-t-md before:transition-all before:opacity-0">
<a href="#tab2" class="tab-link block text-[#344456] dark:text-white hover:text-[#25303D] transition-colors text-[0.9rem] font-[500]">
لیست کل مرخصی
</a>
</div>
<div class="relative p-3 cursor-pointer before:content-[''] before:absolute before:w-full before:h-[4px] before:bg-[#2DBCBC] before:bottom-0 before:right-0 before:rounded-t-md before:transition-all before:opacity-0">
<a href="#tab3" class="tab-link block text-[#344456] dark:text-white hover:text-[#25303D] transition-colors text-[0.9rem] font-[500]">
حساب بانکی پرسنل
</a>
</div>
<div class="relative p-3 cursor-pointer before:content-[''] before:absolute before:w-full before:h-[4px] before:bg-[#2DBCBC] before:bottom-0 before:right-0 before:rounded-t-md before:transition-all before:opacity-0">
<a href="#tab4" class="tab-link block text-[#344456] dark:text-white hover:text-[#25303D] transition-colors text-[0.9rem] font-[500]">
مدارک پرسنل
</a>
</div>
<div class="relative p-3 cursor-pointer before:content-[''] before:absolute before:w-full before:h-[4px] before:bg-[#2DBCBC] before:bottom-0 before:right-0 before:rounded-t-md before:transition-all before:opacity-0">
<a href="#tab5" class="tab-link block text-[#344456] dark:text-white hover:text-[#25303D] transition-colors text-[0.9rem] font-[500]">
وام
</a>
</div>
<div class="relative p-3 cursor-pointer before:content-[''] before:absolute before:w-full before:h-[4px] before:bg-[#2DBCBC] before:bottom-0 before:right-0 before:rounded-t-md before:transition-all before:opacity-0">
<a href="#tab6" class="tab-link block text-[#344456] dark:text-white hover:text-[#25303D] transition-colors text-[0.9rem] font-[500]">
پاداش
</a>
</div>
<div class="relative p-3 cursor-pointer before:content-[''] before:absolute before:w-full before:h-[4px] before:bg-[#2DBCBC] before:bottom-0 before:right-0 before:rounded-t-md before:transition-all before:opacity-0">
<a href="#tab7" class="tab-link block text-[#344456] dark:text-white hover:text-[#25303D] transition-colors text-[0.9rem] font-[500]">
مساعده
</a>
</div>
<div class="relative p-3 cursor-pointer before:content-[''] before:absolute before:w-full before:h-[4px] before:bg-[#2DBCBC] before:bottom-0 before:right-0 before:rounded-t-md before:transition-all before:opacity-0">
<a href="#tab8" class="tab-link block text-[#344456] dark:text-white hover:text-[#25303D] transition-colors text-[0.9rem] font-[500]">
جرایم
</a>
</div>
</div>
<div class="px-6 md:px-9 lg:px-12 mx-auto max-w-[1320px]">
<div class="mb-9 max-w-screen-xl">
<div class="w-full md:w-10/12 lg:w-9/12 mx-auto">
<section id="tab1" class="py-2 md:py-9">
<div class="flex flex-col md:flex-row justify-between items-center gap-3">
<div>
<h2 class="text-[#3F3F3F] text-xl font-bold mb-2 dark:text-white">لیست کل پرسنل</h2>
<p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
در این قسمت می‌توانید فهرست کاملی از تمامی کارکنان مجموعه را به‌صورت جدولی مشاهده کنید. این جدول شامل اطلاعات پایه هر فرد مانند نام، کد پرسنلی، کد ملی، سمت شغلی، نوع قرارداد، وضعیت فعال یا غیرفعال بودن و ... می‌باشد. همچنین قابلیت جستجو، فیلتر و مرتب‌سازی نیز برای تسریع در دسترسی فراهم شده است.
</p>
</div>
<img src="~/assetsmain/images/contract-list.svg" class="w-full sm:w-72 md:w-80 lg:w-96 text-center" alt="">
</div>
</section>
<section id="tab2" class="py-2 md:py-9">
<div class="flex flex-col md:flex-row justify-between items-center gap-3">
<img src="~/assetsmain/images/checkout-list.png" class="w-full sm:w-72 md:w-80 lg:w-96 text-center order-2 lg:order-1" alt="">
<div class="order-1 lg:order-2">
<h2 class="text-[#2B2B2B] text-xl font-bold mb-2 dark:text-white">لیست کل مرخصی</h2>
<p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
این بخش مخصوص ثبت و پیگیری درخواست‌ها و وضعیت مرخصی پرسنل است. شما می‌توانید مرخصی‌های استعلاجی، استحقاقی، بدون حقوق، ساعتی و ... را مشاهده و بررسی کنید. همچنین می‌توان سوابق تایید یا رد درخواست‌ها را در طول سال مشاهده نمود. این قابلیت به کنترل دقیق مانده مرخصی و مدیریت غیبت‌ها کمک زیادی می‌کند.
</p>
</div>
</div>
</section>
<section id="tab3" class="py-2 md:py-9">
<div class="flex flex-col md:flex-row justify-between items-center gap-3">
<div>
<h2 class="text-[#2B2B2B] text-xl font-bold mb-2 dark:text-white">حساب بانکی پرسنل</h2>
<p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
در این قسمت، اطلاعات مربوط به حساب بانکی هر کارمند ذخیره می‌شود. اطلاعاتی مانند شماره حساب، شماره شبا، نام بانک، نوع حساب و وضعیت فعال بودن آن. این اطلاعات نقش کلیدی در تهیه فایل‌های پرداخت حقوق و هماهنگی با سیستم بانکی دارند.
</p>
</div>
<img src="~/assetsmain/images/contract-list.svg" class="w-full sm:w-72 md:w-80 lg:w-96 text-center" alt="">
</div>
</section>
<section id="tab4" class="py-2 md:py-9">
<div class="flex flex-col md:flex-row justify-between items-center gap-3">
<img src="~/assetsmain/images/checkout-list.png" class="w-full sm:w-72 md:w-80 lg:w-96 text-center order-2 lg:order-1" alt="">
<div class="order-1 lg:order-2">
<h2 class="text-[#2B2B2B] text-xl font-bold mb-2 dark:text-white">مدارک پرسنل</h2>
<p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
بایگانی دیجیتال مدارک هر کارمند در این بخش انجام می‌شود. می‌توانید مدارکی مثل شناسنامه، کارت ملی، کارت پایان خدمت، گواهی تحصیلی، مدارک تخصصی، بیمه نامه، قرارداد امضا شده و ... را بارگذاری و طبقه‌بندی کنید. هر مدرک با تاریخ ثبت، نوع و امکان مشاهده سریع در دسترس است.
</p>
</div>
</div>
</section>
<section id="tab5" class="py-2 md:py-9">
<div class="flex flex-col md:flex-row justify-between items-center gap-3">
<div>
<h2 class="text-[#2B2B2B] text-xl font-bold mb-2 dark:text-white">وام</h2>
<p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
در این بخش، اطلاعات مربوط به وام‌هایی که به پرسنل اعطا شده مدیریت می‌شود. شامل مبلغ وام، تعداد اقساط، مبلغ هر قسط، تاریخ شروع و پایان پرداخت و وضعیت پرداخت‌ها. همچنین گزارش اقساط معوق یا تسویه‌شده نیز قابل مشاهده است.
</p>
</div>
<img src="~/assetsmain/images/contract-list.svg" class="w-full sm:w-72 md:w-80 lg:w-96 text-center" alt="">
</div>
</section>
<section id="tab6" class="py-2 md:py-9">
<div class="flex flex-col md:flex-row justify-between items-center gap-3">
<img src="~/assetsmain/images/checkout-list.png" class="w-full sm:w-72 md:w-80 lg:w-96 text-center order-2 lg:order-1" alt="">
<div class="order-1 lg:order-2">
<h2 class="text-[#2B2B2B] text-xl font-bold mb-2 dark:text-white">پاداش</h2>
<p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
تمامی پرداخت‌های تشویقی و پاداش‌ها از جمله پاداش بهره‌وری، عملکرد، سنوات و ... در این بخش ثبت و طبقه‌بندی می‌شوند. شما می‌توانید تاریخ پرداخت، مبلغ، دلیل و نوع پاداش را برای هر کارمند مشاهده و گزارش‌گیری کنید.
</p>
</div>
</div>
</section>
<section id="tab7" class="py-2 md:py-9">
<div class="flex flex-col md:flex-row justify-between items-center gap-3">
<div>
<h2 class="text-[#2B2B2B] text-xl font-bold mb-2 dark:text-white">مساعده</h2>
<p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
در صورتی که کارمندی درخواست مساعده داشته باشد، اطلاعات مربوط به درخواست، مبلغ تأیید شده، تاریخ پرداخت و نحوه بازپرداخت در این بخش ثبت می‌شود. این بخش به شفاف‌سازی ارتباط مالی بین سازمان و کارمند کمک می‌کند.
</p>
</div>
<img src="~/assetsmain/images/contract-list.svg" class="w-full sm:w-72 md:w-80 lg:w-96 text-center" alt="">
</div>
</section>
<section id="tab8" class="py-2 md:py-9">
<div class="flex flex-col md:flex-row justify-between items-center gap-3">
<img src="~/assetsmain/images/checkout-list.png" class="w-full sm:w-72 md:w-80 lg:w-96 text-center order-2 lg:order-1" alt="">
<div class="order-1 lg:order-2">
<h2 class="text-[#2B2B2B] text-xl font-bold mb-2 dark:text-white">جرایم</h2>
<p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
در صورت وجود تخلفات انضباطی یا دیرکرد در ورود و خروج، تأخیر، ترک محل کار یا سایر موارد، می‌توان جرایم مربوطه را ثبت کرد. اطلاعات شامل نوع تخلف، مبلغ جریمه، تاریخ، و توضیحات تکمیلی است. این بخش به حفظ نظم و قانون‌مداری در مجموعه کمک می‌کند.
</p>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="py-3 px-6 mx-auto max-w-[1320px]">
<div class="relative flex flex-col md:flex-row gap-6 items-center w-full mx-auto bg-gradient-to-l to-[#2EBEBE] 1E9D9D from-[#035757] overflow-hidden rounded-2xl my-1 p-3 md:p-6 lg:p-9">
<div class="absolute bottom-0 left-0">
<img src="~/assetsmain/images/lineSupportLeft.svg" class="" alt="">
</div>
<div class="absolute top-0 -right-6">
<img src="~/assetsmain/images/lineSupportRight.svg" class="" alt="">
</div>
<div class="w-full md:w-8/12 text-center md:text-start">
<div class="text-white font-extrabold text-[1.6rem] mb-4">مدیریت یکپارچه منابع انسانی و هوشمند</div>
<p class="text-white font-medium text-[0.8rem] p-0 text-justify">
با استفاده از خدمات سامانه کارگاه، به اطلاعات پرسنلی، صورت‌حساب‌های مالی، گزارشات، حضور و غیاب، کارپوشه، مدیریت کاربران و پشتیبانی دسترسی داشته باشید و فرآیندهای سازمانی خود را بهینه کنید.
</p>
</div>
<div class="w-full md:w-4/12 text-center md:text-left z-10">
<a asp-page="/contact-us/Index" class="px-9 py-2 w-full md:w-auto text-[#138F8F] text-[0.8rem] font-semibold rounded-lg cursor-pointer bg-white hover:bg-[#DDDDDD] duration-500 ease-in-out">درخواست مشاوره</a>
</div>
</div>
</div>
@section Script {
<script>
$(document).ready(function () {
$('.tab-link').on('click', function (e) {
e.preventDefault();
let target = $(this).attr('href');
$('html, body').animate({
scrollTop: $(target).offset().top - 110
}, 500);
$('.tab-link').parent().removeClass('active before:!opacity-100');
$(this).parent().addClass('active before:!opacity-100');
});
$('#dropdown-rule').on('click', function () {
$('#dropdown-menu').toggleClass('hidden');
});
$('#dropdown-menu a').on('click', function (e) {
e.preventDefault();
const target = $(this).attr('href');
$('html, body').animate({
scrollTop: $(target).offset().top - 110
}, 500);
$('#dropdown-menu').addClass('hidden');
$('#ruleBtnMobile').text($(this).text());
});
$(window).on('scroll', function () {
let scrollPosition = $(window).scrollTop();
$('section[id^="tab"]').each(function () {
let sectionOffset = $(this).offset().top - 110;
let sectionHeight = $(this).outerHeight();
let sectionId = $(this).attr('id');
if (scrollPosition >= sectionOffset && scrollPosition < sectionOffset + sectionHeight) {
$('.tab-link').parent().removeClass('active before:!opacity-100');
$('.tab-link[href="#' + sectionId + '"]').parent().addClass('active before:!opacity-100');
const currentDropdownItem = $('#dropdown-menu a[href="#' + sectionId + '"]');
$('#ruleBtnMobile').text(currentDropdownItem.text());
}
});
});
});
</script>
}