138 lines
6.8 KiB
JavaScript
138 lines
6.8 KiB
JavaScript
"use client";
|
|
|
|
import AppContext from "@ctx/AppContext";
|
|
import { DaysOfWeek } from "plugins/DaysOfWeek/page";
|
|
import PersianNumber from "plugins/PersianNumber";
|
|
import { getTimeOfDay } from "plugins/TimeOfDay/page";
|
|
import React, { useContext } from "react";
|
|
|
|
const ShiftsEmployees = () => {
|
|
const CTX = useContext(AppContext);
|
|
const shiftsData = CTX.state.shiftsData;
|
|
|
|
const goToEditUser = (id) => {
|
|
CTX.setGoToEditShift(true);
|
|
CTX.setBottomSheetCreateShiftsOpen(true);
|
|
CTX.setIdEditShift(id);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{shiftsData.length > 0 ? (
|
|
<>
|
|
{shiftsData &&
|
|
shiftsData.map((e) => (
|
|
<>
|
|
<div className="bg-backgroundPrimary-100 rounded-xl rounded-t-3xl mt-5">
|
|
<div className=" bg-white rounded-3xl border shadow p-2 flex justify-between w-full h-fit pr-5 mt-2 ">
|
|
<div>
|
|
<h4 className="text-xl font-bold text-primary-300 mt-1">
|
|
{e?.title}{" "}
|
|
</h4>
|
|
</div>
|
|
<div
|
|
className="w-[35px] h-[35px] bg-secondaryLighter-100 rounded-full pt-[3px]"
|
|
onClick={() => goToEditUser(e.id)}
|
|
>
|
|
<svg
|
|
width="13"
|
|
height="13"
|
|
viewBox="0 0 18 18"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[8px]"
|
|
>
|
|
<g clip-path="url(#clip0_72_994)">
|
|
<path
|
|
d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
|
|
stroke="#DA4215"
|
|
stroke-width="1.5"
|
|
/>
|
|
<path
|
|
d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
|
|
stroke="#D03405"
|
|
stroke-width="1.5"
|
|
/>
|
|
<g opacity="0.5">
|
|
<path
|
|
d="M10.77 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
|
|
stroke="#DA4215"
|
|
stroke-width="1.5"
|
|
/>
|
|
<path
|
|
d="M10.77 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
|
|
stroke="#D03405"
|
|
stroke-width="1.5"
|
|
/>
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_72_994">
|
|
<rect width="18" height="18" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="py-2 px-3">
|
|
<div className="flex">
|
|
<p className="mb-0 border-l-[1px] border-gray-500 pl-2 text-gray-500 text-sm ">
|
|
شروع :
|
|
<strong className="font-bold mx-1">
|
|
<PersianNumber
|
|
number={
|
|
e?.startAt?.split(":")[0] +
|
|
":" +
|
|
e?.startAt?.split(":")[1]
|
|
}
|
|
/>
|
|
</strong>
|
|
{getTimeOfDay(e?.startAt?.split(":")[0])}
|
|
</p>
|
|
|
|
<p className="mb-0 pr-2 text-gray-500 text-sm">
|
|
پایان :
|
|
<strong className="font-bold mx-1">
|
|
<strong className="font-bold mx-1">
|
|
<PersianNumber
|
|
number={
|
|
e?.endAt?.split(":")[0] +
|
|
":" +
|
|
e?.endAt?.split(":")[1]
|
|
}
|
|
/>
|
|
</strong>
|
|
</strong>
|
|
{getTimeOfDay(e?.endAt?.split(":")[0])}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* <div className="flex flex-wrap px-3 pb-4 pt-2">
|
|
{e?.days.map((e) => (
|
|
<div className="bg-secondaryLighter-100 rounded-full py-1 px-4 mx-1 mt-2">
|
|
<p className="mb-0 text-[11px] white text-secondary-200 font-bold ">
|
|
{" "}
|
|
{DaysOfWeek(e)}{" "}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div> */}
|
|
</div>
|
|
</>
|
|
))}
|
|
</>
|
|
) : (
|
|
<div className="flex justify-center py-5">
|
|
<div className="bg-white shadow mt-5 w-fit rounded-full p-4">
|
|
چیزی یافت نشد
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ShiftsEmployees;
|