upd

client/src/pages/DashboardPage.tsx

@@ -15,6 +15,9 @@ import {
   parse,
   addDays,
   subDays,
+  parseISO,
+  isAfter,
+  isBefore,
 } from "date-fns";
 import Button from "../components/Button";
 import { ru } from "date-fns/locale";
@@ -23,6 +26,7 @@ import SpinnerIcon from "../components/icons/SpinnerIcon";
 import useModalStore from "../stores/useModalStore";
 import ModalContainer from "../components/ModalContainer";
 import CreateSchedule from "../components/modals/CreateSchedule";
+import MoreIcon from "../components/icons/MoreIcon";
 
 function DashboardPage() {
   const [user, setAccessToken] = useAuthStore((state) => [
@@ -33,6 +37,7 @@ function DashboardPage() {
   const [managers, setManagers] = useState<any[]>();
   const [builds, setBuilds] = useState<any[]>();
   const [selectedBuild, setSelectedBuild] = useState<{ [key: string]: any }>();
+  const [schedules, setSchedules] = useState<any[]>();
   const [scheduledSessions, setScheduledSessions] = useState<any[]>();
   const [generatedScheduledSessions, setGeneratedScheduledSessions] =
     useState<any[][]>();
@@ -70,6 +75,21 @@ function DashboardPage() {
     setSelectedDate(new Date());
   }
 
+  useEffect(() => {
+    if (!schedules?.length) return;
+
+    schedules.map((schedule) => {
+      if (
+        isAfter(selectedDate, parseISO(schedule.startDate)) &&
+        isBefore(selectedDate, parseISO(schedule.endDate))
+      ) {
+        console.log("FIND");
+      } else {
+        console.log("Not find");
+      }
+    });
+  }, [schedules, scheduledSessions]);
+
   async function getCompany() {
     if (!user) {
       console.log("No User", user);
@@ -214,6 +234,16 @@ function DashboardPage() {
     }
   }
 
+  async function getSchedules() {
+    if (!company || !selectedBuild) return;
+
+    const result: any[] = await api
+      .get(`companies/${company.id}/builds/${selectedBuild.id}/schedules`)
+      .json();
+
+    setSchedules(result);
+  }
+
   useEffect(() => {
     getCompany();
 
@@ -250,6 +280,12 @@ function DashboardPage() {
     };
   }, [managers, selectedDate, selectedBuild]);
 
+  useEffect(() => {
+    if (!company || !selectedBuild) return;
+
+    getSchedules();
+  }, [selectedBuild]);
+
   useEffect(() => {
     if (!scheduledSessions) return;
     generateScheduledSessions();
@@ -429,12 +465,92 @@ function DashboardPage() {
           <div className="p-4 flex flex-col gap-4">
             <p className="text-sm font-semibold">Расписание</p>
 
-            <div className=""></div>
+            {schedules?.map((schedule) => (
+              <div key={schedule.id} className="flex flex-col gap-3 text-xs">
+                <p className="font-semibold flex gap-1">
+                  <span>
+                    {format(parseISO(schedule.startDate), "dd.MM.yyyy")}
+                  </span>
+                  <span>-</span>
+                  <span>
+                    {format(parseISO(schedule.endDate), "dd.MM.yyyy")}
+                  </span>
+                </p>
+
+                <div className="flex flex-col gap-2">
+                  <div className="grid grid-cols-3">
+                    <p className="col-span-2 text-[#77828C]">
+                      Общее кол-во сеансов
+                    </p>
+                    <p>{schedule.sessionCount}</p>
+                  </div>
+                  <div className="grid grid-cols-3">
+                    <p className="col-span-2 text-[#77828C]">
+                      Длительность сеанса
+                    </p>
+                    <p>{schedule.sessionDuration} мин.</p>
+                  </div>
+                  <div className="grid grid-cols-3">
+                    <p className="col-span-2 text-[#77828C]">Между сеансами</p>
+                    <p>{schedule.sessionBreak} мин.</p>
+                  </div>
+                  <div className="grid grid-cols-3">
+                    <p className="col-span-2 text-[#77828C]">Время работы</p>
+                    <p>
+                      {schedule.startTime} - {schedule.endTime}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
 
             <Button
               color="secondary"
               className="w-full"
-              handleClick={() => setModal(<CreateSchedule />)}
+              handleClick={() =>
+                setModal(
+                  <CreateSchedule
+                    companyId={company?.id}
+                    buildId={selectedBuild?.id}
+                    handleCreate={getSchedules}
+                  />
+                )
+              }
+            >
+              Добавить
+            </Button>
+          </div>
+
+          <div className="p-4 flex flex-col gap-4">
+            <p className="text-sm font-semibold">Менеджеры</p>
+
+            <div className="flex flex-col gap-2">
+              {managers?.map((manager) => (
+                <div key={manager.id} className="flex justify-between">
+                  <div className="flex items-center gap-2">
+                    <img
+                      src={manager.avatar}
+                      alt=""
+                      className="w-8 h-8 rounded-full"
+                    />
+                    <p className="text-sm leading-[140%]">{manager.name}</p>
+                  </div>
+                  <Button
+                    disabled
+                    color="tertiary"
+                    onlyIcon
+                    icon={<MoreIcon />}
+                    handleClick={() => {}}
+                  />
+                </div>
+              ))}
+            </div>
+
+            <Button
+              disabled
+              color="secondary"
+              className="w-full"
+              handleClick={() => {}}
             >
               Добавить
             </Button>