web/src/app/shifts/page.jsx

"use client";

import AppHeader from "@comp/AppHeader/page";
import ShiftCard from "@comp/ShiftComponent/ShiftCard/page";
import AppContext from "@ctx/AppContext";
import BottomSheetCreateShifts from "plugins/BottomSheet/BottomSheetCreateShifts";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext, useEffect } from "react";

const Shifts = (props) => {
  const CTX = useContext(AppContext);

  useEffect(() => {
    CTX.GetShifts();
  }, []);

  return (
    <>
      <div className="pb-20">
        <AppHeader
          title="شیفتــــ های مجموعه"
          sub="شما 12 نفر شیفت متفاوت دارید"
          icon1={true}
          iconName1="PLUS"
          iconHref1="#"
          iconEvent1={() => CTX.setBottomSheetCreateShiftsOpen(true)}
          icon2={true}
          iconName2="ARROW"
          iconHref2="/home"
          iconEvent2={() => {
            return undefined;
          }}
        />

        <div className="bg-body-100 relative top-[-30px] rounded-t-3xl overflow-hidden p-4 rtl mt-2">
          <div>
            <div className="bg-primary-200 p-3 rounded-xl">
              <h2 className="mb-0 text-white font-bold text-base mt-3">
                شیفتــــ های مجموعه{" "}
              </h2>
              <p className="mb-0 text-white text-sm">
                شما میتوانید به صورت هفتگی شیفت بندی های رستوران خود را تعریف
                نمایید و با توجه به نیاز های مجموعه خود شیفت بندی کنید .{" "}
              </p>
              <div className="flex my-3">
                <button className="btn btn-secondary text-[12px] w-full">
                  {" "}
                  شیفت بندی هفته
                </button>
                <button className="btn bg-transparent border-[2px] border-white border-dashed text-white  text-[12px] mx-2 w-full">
                  {" "}
                  شیفت بندی هغته بعد
                </button>
              </div>
            </div>
          </div>
          <ShiftCard />
        </div>
      </div>
      <BottomSheetCreateShifts />
    </>
  );
};

export default Shifts;