feat: add ClientCard and SessionModal components, enhance session handling with comments and duration utilities

src/components/modals/CreateSessionModal.tsx

@@ -144,7 +144,7 @@ export default function CreateSessionModal({ targetServerId }: Props) {
 
   return (
     <form
-      className="relative rounded-[2.222vw] w-[25vw] min-h-[calc(100dvh-2.222vw)] bg-[#F0F0F0] flex flex-col overflow-hidden"
+      className="relative rounded-[2.222vw] w-[25vw] min-h-[calc(100dvh-2.222vw)] bg-[#F0F0F0] flex flex-col overflow-hidden "
       onSubmit={handleClickCreateSession}
       ref={ref}
     >

src/components/modals/CurrentSessionModal.tsx

@@ -18,7 +18,15 @@ function CurrentSessionModal({ session }: { session: ISession }) {
       api.put(`sessions/${session.id}`, {
         json: { status: "ending" },
       }),
-    onMutate: () => queryClient.invalidateQueries({ queryKey: ["sessions"] }),
+    onMutate: () =>
+      queryClient.invalidateQueries({
+        queryKey: ["sessions"],
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["last-sessions"],
+      });
+    },
   });
   const [now, setNow] = useState(Date.now());
 

src/components/modals/SessionModal.tsx

@@ -0,0 +1,150 @@
+import { ISession } from "../../types/ISession";
+import { format } from "date-fns";
+import { ru } from "date-fns/locale";
+import getIntervalDuration from "../../utils/interval-duration";
+import MagicIcon from "../icons/MagicIcon";
+import NewButton from "../NewButton";
+import ChevronRightIcon from "../icons/ChevronRightIcon";
+import Badge from "../Badge";
+import ClientCard from "../ClientCard";
+import DownloadIcon from "../icons/DownloadIcon";
+import ShareIcon from "../icons/ShareIcon";
+
+function SessionModal({ session }: { session: ISession }) {
+  console.log(session);
+  return (
+    <div className="bg-[#FFFFFF] w-[49.722vw] rounded-4xl">
+      <div className="w-full flex justify-center items-center h-[4.861vw]">
+        <div className="title-s font-medium flex">
+          <p>{format(session.createdAt, "dd MMMM yyyy", { locale: ru })}</p>
+          <p>,&nbsp;{format(session.createdAt, "HH:mm")}</p>
+        </div>
+      </div>
+      <div className="bg-[#F0F0F0] flex h-[calc(100vh-8.861vw)] overflow-hidden rounded-b-4xl">
+        <div className="flex-1 flex flex-col gap-[0.833vw] px-[1.111vw] overflow-y-auto pr-[0.556vw] pb-[1.111vw]">
+          <div className="flex flex-col gap-[0.556vw] justify-center items-center pt-[1.111vw]">
+            <div className="size-[3.333vw] rounded-full bg-white"></div>
+            <div className="flex flex-col gap-[0.278vw] items-center">
+              <p className="title-s font-medium">{session.owner.fullname}</p>
+              <p className="caption-s text-[#BDBDBD] font-medium">
+                Продолжительность:{" "}
+                {getIntervalDuration(session.createdAt, session.updatedAt)}
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-col gap-[1.111vw] bg-white rounded-3xl p-[1.111vw]">
+            <h3 className="title-s font-medium">Информация о сеансе</h3>
+            <div className="flex flex-col gap-[0.556vw]">
+              <p className="flex gap-[0.556vw]">
+                <span className="caption-s font-medium text-[#BDBDBD]">
+                  Сценарии:
+                </span>
+                <span className="caption-s font-medium">Добавить в бэкенд</span>
+              </p>
+              <p className="flex gap-[0.556vw]">
+                <span className="caption-s font-medium text-[#BDBDBD]">
+                  Интерактивный стол:
+                </span>
+                <span className="caption-s font-medium">
+                  {session.server.name}
+                </span>
+              </p>
+              <p className="flex gap-[0.556vw]">
+                <span className="caption-s font-medium text-[#BDBDBD]">
+                  Продолжительность сеанса:
+                </span>
+                <span className="caption-s font-medium">
+                  {getIntervalDuration(session.createdAt, session.updatedAt)}
+                </span>
+              </p>
+              <p className="flex gap-[0.556vw]">
+                <span className="caption-s font-medium text-[#BDBDBD]">
+                  Проект:
+                </span>
+                <span className="caption-s font-medium">
+                  {session.app.name}
+                </span>
+              </p>
+            </div>
+            <ClientCard client={session.client} />
+          </div>
+          <div className="flex flex-col gap-[1.111vw] bg-white rounded-3xl p-[1.111vw]">
+            <h3 className="title-s font-medium flex">
+              Речевая&nbsp;
+              <span className="text-[#7B60F3] flex">
+                аналитика&nbsp;
+                <span className="w-[1.389vw] h-[1.389vw] text-[#7B60F3]">
+                  <MagicIcon />
+                </span>
+              </span>
+            </h3>
+            <div className="flex flex-col gap-[0.556vw]">
+              <p className="flex gap-[0.556vw]">
+                <span className="caption-s font-medium text-[#BDBDBD]">
+                  Эффективность встречи:
+                </span>
+                <span className="caption-s font-medium text-[#29AF61]">
+                  Высокая
+                </span>
+              </p>
+              <p className="flex gap-[0.556vw]">
+                <span className="caption-s font-medium text-[#BDBDBD]">
+                  Бюджет клиента:
+                </span>
+                <span className="caption-s font-medium">8 500 000 ₽</span>
+              </p>
+            </div>
+            <div className="bg-[#F6F6F6] rounded-xl px-[1.111vw] py-[0.833vw] text-xs tracking-[-0.02em]">
+              Клиент проявил высокий интерес к объекту, особенно к варианту с
+              улучшенной отделкой. Основной вопрос для принятия решения —
+              согласование с семьей и выбор этажа. Необходимо подготовить
+              предварительный договор к следующей встрече.
+            </div>
+            <NewButton variant="primary" size="large">
+              Весь отчёт по встречи <ChevronRightIcon />
+            </NewButton>
+          </div>
+          <div className="flex flex-col gap-[1.111vw] bg-white rounded-3xl p-[1.111vw]">
+            <h3 className="title-s font-medium flex">
+              Документы по сеансу <Badge count={4} />
+            </h3>
+            <div className="flex w-full gap-[0.556vw]">
+              <NewButton variant="primary" size="large" className="w-full">
+                <span className="w-[1.111vw] h-[1.111vw] text-[#7B60F3]">
+                  <DownloadIcon />
+                </span>
+                Скачать архивом
+              </NewButton>
+              <NewButton variant="primary" size="large">
+                <span className="w-[1.111vw] h-[1.111vw] text-[#7B60F3]">
+                  <ShareIcon />
+                </span>
+              </NewButton>
+            </div>
+          </div>
+        </div>
+        <div className="flex-1 flex flex-col">
+          <div className="relative h-full">
+            {session.comments.length > 0 ? (
+              <div>Комменты</div>
+            ) : (
+              <div className="flex flex-col gap-[1.111vw] items-center justify-center h-full">
+                <img src="/images/smile-ghost.png" alt="ghost" />
+                <div className="flex flex-col gap-[0.556vw] items-center">
+                  <h3 className="title-m font-medium">Оставьте заметку</h3>
+                  <p className="caption-s font-medium text-[#BDBDBD] text-center whitespace-pre-line">
+                    {`В дальнейшем это поможет быстро найти
+                    клиента и не запутаться.`}
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="h-[5.556vw] border-black border-t"></div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SessionModal;