311 lines
11 KiB
JavaScript
311 lines
11 KiB
JavaScript
"use client";
|
||
|
||
import AppHeader from "@comp/AppHeader/page";
|
||
import PositionEmployees from "@comp/EmployeesComponent/Position/page";
|
||
import RolesEmployees from "@comp/EmployeesComponent/Roles/page";
|
||
import Roles from "@comp/EmployeesComponent/Roles/page";
|
||
import SectionEmployees from "@comp/EmployeesComponent/Sections/page";
|
||
import UsersEmployees from "@comp/EmployeesComponent/Users/page";
|
||
import RoutineEmployees from "@comp/EmployeesComponent/routine/page";
|
||
import AppContext from "@ctx/AppContext";
|
||
import BottomSheetCreateEmployees from "plugins/BottomSheet/BottomSheetCreateEmployees";
|
||
import BottomSheetCreatePosition from "plugins/BottomSheet/BottomSheetCreatePosition";
|
||
import BottomSheetCreateRole from "plugins/BottomSheet/BottomSheetCreateRole";
|
||
import BottomSheetCreateRoutine from "plugins/BottomSheet/BottomSheetCreateRoutine";
|
||
import BottomSheetCreateSection from "plugins/BottomSheet/BottomSheetCreateSection";
|
||
import PersianNumber from "plugins/PersianNumber";
|
||
import React, { useContext, useEffect, useState } from "react";
|
||
|
||
// import second from "@img/test.png";
|
||
|
||
const Employees = (props) => {
|
||
const CTX = useContext(AppContext);
|
||
|
||
const [activeSection, setActiveSection] = useState(0);
|
||
|
||
useEffect(() => {
|
||
CTX.GetRoles();
|
||
CTX.GetUsers();
|
||
CTX.GetRoutines();
|
||
CTX.GetSections();
|
||
CTX.GetPositions();
|
||
}, []);
|
||
|
||
const routinesData = CTX.state.routinesData;
|
||
const sectionsData = CTX.state.sectionsData;
|
||
const usersData = CTX.state.usersData;
|
||
const positionsData = CTX.state.positionsData;
|
||
|
||
return (
|
||
<div className="pb-20">
|
||
<AppHeader
|
||
title=" مدیریت کارکنان و نقش ها"
|
||
sub=" شما 12 نفر همکار در مجموعه دارید"
|
||
icon2={true}
|
||
iconName2="ARROW"
|
||
iconHref2="/home"
|
||
iconEvent2={() => {
|
||
return undefined;
|
||
}}
|
||
/>
|
||
|
||
<div className="bg-body-100 relative top-[-30px] rounded-t-3xl overflow-hidden p-3 rtl">
|
||
<div>
|
||
<div
|
||
className="flex justify-between mt-7 bg-white rounded-2xl"
|
||
onClick={() => setActiveSection(0)}
|
||
>
|
||
<div className="flex p-2">
|
||
<div className="bg-gray-100 rounded-xl p-3 w-fit">
|
||
<p className="mb-0 text-center pt-3">
|
||
<PersianNumber number={1} style="text-[30px] " />
|
||
</p>
|
||
</div>
|
||
<div className="m-2">
|
||
<h4 className="text-base font-bold">
|
||
مدیریت روتین های مجموعه
|
||
</h4>
|
||
<p className="mb-0 text-[10px] opacity-90 ">
|
||
شما
|
||
<strong className="mx-1 text-primary-300">
|
||
<PersianNumber number={routinesData?.length} />
|
||
</strong>
|
||
روتین فعال دارید
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{activeSection == 0 ? (
|
||
<div
|
||
className="w-[40px] h-[40px] bg-gray-100 shadow-sm rounded-xl m-[15px] "
|
||
onClick={() => CTX.setBottomSheetCreateRoutineOpen(true)}
|
||
>
|
||
<svg
|
||
width="22"
|
||
height="22"
|
||
viewBox="0 0 16 16"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="mx-auto mt-2 opacity-70"
|
||
>
|
||
<path
|
||
d="M8 1V15M1 8H15"
|
||
stroke="#2B2B2B"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
) : (
|
||
<div className="w-[10px] h-[10px] bg-gray-200 shadow-sm rounded-xl m-[15px] "></div>
|
||
)}
|
||
</div>
|
||
|
||
{activeSection == 0 && <RoutineEmployees />}
|
||
</div>
|
||
|
||
{/* <div className="flex justify-between mt-3">
|
||
<div>
|
||
<h4 className="text-base font-bold">مدیریت نقش های مجموعه</h4>
|
||
<p className="mb-0 text-[10px] opacity-90 ">
|
||
شما
|
||
<strong className="mx-1 text-primary-300">
|
||
<PersianNumber number={rolesData?.length} />
|
||
</strong>
|
||
نقش فعال دارید
|
||
</p>
|
||
</div>
|
||
|
||
<div
|
||
className="w-[40px] h-[40px] bg-white shadow-sm rounded-xl "
|
||
onClick={() => CTX.setBottomSheetCreateRoleOpen(true)}
|
||
>
|
||
<svg
|
||
width="22"
|
||
height="22"
|
||
viewBox="0 0 16 16"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="mx-auto mt-2 opacity-70"
|
||
>
|
||
<path
|
||
d="M8 1V15M1 8H15"
|
||
stroke="#2B2B2B"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<RolesEmployees /> */}
|
||
|
||
<div>
|
||
<div
|
||
className="flex justify-between mt-7 bg-white rounded-2xl"
|
||
onClick={() => setActiveSection(1)}
|
||
>
|
||
<div className="flex p-2">
|
||
<div className="bg-gray-100 rounded-xl p-3 w-fit">
|
||
<p className="mb-0 text-center pt-3">
|
||
<PersianNumber number={2} style="text-[30px] " />
|
||
</p>
|
||
</div>
|
||
<div className="m-2">
|
||
<h4 className="text-base font-bold">مدیریت سکشن ها مجموعه</h4>
|
||
<p className="mb-0 text-[10px] opacity-90 ">
|
||
شما
|
||
<strong className="mx-1 text-primary-300">
|
||
<PersianNumber number={sectionsData?.length} />
|
||
</strong>
|
||
سکشن فعال دارید
|
||
</p>
|
||
</div>
|
||
</div>
|
||
{activeSection == 1 ? (
|
||
<div
|
||
className="w-[40px] h-[40px] bg-gray-100 shadow-sm rounded-xl m-[15px] "
|
||
onClick={() => CTX.setBottomSheetCreateSectionOpen(true)}
|
||
>
|
||
<svg
|
||
width="22"
|
||
height="22"
|
||
viewBox="0 0 16 16"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="mx-auto mt-2 opacity-70"
|
||
>
|
||
<path
|
||
d="M8 1V15M1 8H15"
|
||
stroke="#2B2B2B"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
) : (
|
||
<div className="w-[10px] h-[10px] bg-gray-200 shadow-sm rounded-xl m-[15px] "></div>
|
||
)}
|
||
</div>
|
||
{activeSection == 1 && <SectionEmployees />}
|
||
</div>
|
||
|
||
<div>
|
||
<div
|
||
className="flex justify-between mt-7 bg-white rounded-2xl"
|
||
onClick={() => setActiveSection(2)}
|
||
>
|
||
<div className="flex p-2">
|
||
<div className="bg-gray-100 rounded-xl p-3 w-fit">
|
||
<p className="mb-0 text-center pt-3">
|
||
<PersianNumber number={3} style="text-[30px] " />
|
||
</p>
|
||
</div>
|
||
<div className="m-2">
|
||
<h4 className="text-base font-bold">
|
||
مدیریت پوزیشن های مجموعه
|
||
</h4>
|
||
<p className="mb-0 text-[10px] opacity-90 ">
|
||
شما
|
||
<strong className="mx-1 text-primary-300">
|
||
<PersianNumber number={positionsData?.length} />
|
||
</strong>
|
||
پوزیشن فعال دارید
|
||
</p>
|
||
</div>
|
||
</div>
|
||
{activeSection == 2 ? (
|
||
<div
|
||
className="w-[40px] h-[40px] bg-gray-100 shadow-sm rounded-xl m-[15px] "
|
||
onClick={() => CTX.setBottomSheetCreatePositionOpen(true)}
|
||
>
|
||
<svg
|
||
width="22"
|
||
height="22"
|
||
viewBox="0 0 16 16"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="mx-auto mt-2 opacity-70"
|
||
>
|
||
<path
|
||
d="M8 1V15M1 8H15"
|
||
stroke="#2B2B2B"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
) : (
|
||
<div className="w-[10px] h-[10px] bg-gray-200 shadow-sm rounded-xl m-[15px] "></div>
|
||
)}
|
||
</div>
|
||
{activeSection == 2 && <PositionEmployees />}
|
||
</div>
|
||
|
||
<div>
|
||
<div
|
||
className="flex justify-between mt-7 bg-white rounded-2xl"
|
||
onClick={() => setActiveSection(3)}
|
||
>
|
||
<div className="flex p-2">
|
||
<div className="bg-gray-100 rounded-xl p-3 w-fit">
|
||
<p className="mb-0 text-center pt-3">
|
||
<PersianNumber number={4} style="text-[30px] " />
|
||
</p>
|
||
</div>
|
||
<div className="m-2">
|
||
<h4 className="text-base font-bold">مدیریت کارکنان مجموعه</h4>
|
||
<p className="mb-0 text-[10px] opacity-90 ">
|
||
شما
|
||
<strong className="mx-1 text-primary-300">
|
||
<PersianNumber number={usersData?.length} />
|
||
</strong>
|
||
کارمند فعال دارید
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{activeSection == 3 ? (
|
||
<div
|
||
className="w-[40px] h-[40px] bg-gray-100 shadow-sm rounded-xl m-[15px] "
|
||
onClick={() => CTX.setBottomSheetCreateEmployeesOpen(true)}
|
||
>
|
||
<svg
|
||
width="22"
|
||
height="22"
|
||
viewBox="0 0 16 16"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="mx-auto mt-2 opacity-70"
|
||
>
|
||
<path
|
||
d="M8 1V15M1 8H15"
|
||
stroke="#2B2B2B"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
) : (
|
||
<div className="w-[10px] h-[10px] bg-gray-200 shadow-sm rounded-xl m-[15px] "></div>
|
||
)}
|
||
</div>
|
||
{activeSection == 3 && <UsersEmployees />}
|
||
</div>
|
||
</div>
|
||
{/* <BottomSheetCreateRole /> */}
|
||
<BottomSheetCreateEmployees />
|
||
<BottomSheetCreateSection />
|
||
<BottomSheetCreateRoutine />
|
||
<BottomSheetCreatePosition />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Employees;
|