diff --git a/public/images/super-table.png b/public/images/super-table.png new file mode 100644 index 0000000..f6b1d1b Binary files /dev/null and b/public/images/super-table.png differ diff --git a/src/components/DesktopCard.tsx b/src/components/DesktopCard.tsx index 566f5e4..705cbed 100644 --- a/src/components/DesktopCard.tsx +++ b/src/components/DesktopCard.tsx @@ -6,12 +6,12 @@ import CreateSessionModal from "./modals/CreateSessionModal"; import NewButton from "./NewButton"; import FlashIcon from "./icons/FlashIcon"; import CogIcon from "./icons/CogIcon"; -import ChevronLeftIcon from "./icons/ChevronLeftIcon"; import PlusIcon from "./icons/PlusIcon"; -import EditTable from "./modals/EditTable"; +import EditTable from "./modals/EditTableModal"; import UnlinkIcon from "./icons/UnlinkIcon"; import clsx from "clsx"; - +import ChevronRightIcon from "./icons/ChevronRightIcon"; +import CurrentSessionModal from "./modals/CurrentSessionModal"; interface IDesktopCardProps { server: IServer; } @@ -48,7 +48,7 @@ export default function DesktopCard({ server }: IDesktopCardProps) { } return ( -
+
setModal()} > - +
-
-
-

+

+
+

{server.name}

-

{server.location}

+

{server.location}

-
+
{server.sessions?.[0]?.status === "started" ? ( -
+
endSession()} - className="flex gap-[0.556vw] items-center" + variant='primary' + onClick={() => { + setModal(); + }} + className='flex gap-[0.556vw] items-center' > - + -

Идёт сеанс

- - +

Идёт сеанс

+ +
) : server.status === "offline" ? ( - - + + Проверьте соединение ) : ( -
- +
+ -

Создать сеанс

+

Создать сеанс

)} diff --git a/src/components/icons/ChevronRightIcon.tsx b/src/components/icons/ChevronRightIcon.tsx new file mode 100644 index 0000000..7619d78 --- /dev/null +++ b/src/components/icons/ChevronRightIcon.tsx @@ -0,0 +1,21 @@ +function ChevronRightIcon() { + return ( + + + + ); +} + +export default ChevronRightIcon; diff --git a/src/components/modals/CreateSessionModal.tsx b/src/components/modals/CreateSessionModal.tsx index bf9c822..c72a859 100644 --- a/src/components/modals/CreateSessionModal.tsx +++ b/src/components/modals/CreateSessionModal.tsx @@ -72,45 +72,45 @@ export default function CreateSessionModal({ return (
-
-

Новый сеанс

+
+

Новый сеанс

-
-
+
+
-
-

Укажите данные клиента

-
+
+

Укажите данные клиента

+
setPhone(e.target.value)} - placeholder="Номер телефона" + placeholder='Номер телефона' required /> setName(e.target.value)} - placeholder="Имя" + placeholder='Имя' required /> setEmail(e.target.value)} - placeholder="Электронная почта" + placeholder='Электронная почта' />
-
-

Выберите параметры сеанса

+
+

Выберите параметры сеанса

{selectedServer?.apps?.length && selectedServer?.apps?.length > 0 && ( -
-
+
+
diff --git a/src/components/modals/CurrentSessionModal.tsx b/src/components/modals/CurrentSessionModal.tsx new file mode 100644 index 0000000..32caa14 --- /dev/null +++ b/src/components/modals/CurrentSessionModal.tsx @@ -0,0 +1,60 @@ +import { IServer } from "../../types/IServer"; +import FlashIcon from "../icons/FlashIcon"; +import NewButton from "../NewButton"; +import ChevronRightIcon from "../icons/ChevronRightIcon"; + +function CurrentSessionModal({ server }: { server: IServer }) { + console.log(server.client?.name); + return ( +
+

+ Текущий сеанс +

+
+
+
+
+
+

{server.name}

+

+ + Сеанс идёт 24:05 +

+
+
+

+ {server.location} +

+
+
+
+
+

Параметры сеанса

+
+ +
+

Клиент

+

{server.client?.name}

+
+
+ {!server.client?.email && ( +

+ Добавьте email +

+ )} + + + +
+ +
+
+
+

Детали

+
+
+
+ ); +} + +export default CurrentSessionModal; diff --git a/src/components/modals/EditTable.tsx b/src/components/modals/EditTableModal.tsx similarity index 100% rename from src/components/modals/EditTable.tsx rename to src/components/modals/EditTableModal.tsx diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx index f05a68c..1ada217 100644 --- a/src/pages/DashboardPage.tsx +++ b/src/pages/DashboardPage.tsx @@ -6,6 +6,8 @@ import DesktopCard from "../components/DesktopCard"; import Badge from "../components/Badge"; import { ISession } from "../types/ISession"; import SessionCard from "../components/SessionCard"; +import NewButton from "../components/NewButton"; +import ChevronRightIcon from "../components/icons/ChevronRightIcon"; function DashboardPage() { const { data: me } = useQuery({ @@ -58,12 +60,24 @@ function DashboardPage() {

Последние сеансы

-
- {sessions - ?.filter((session) => session.status === "ended") - .map((session) => ( - - ))} +
+
+ {sessions + ?.filter((session) => session.status === "ended") + .map((session) => ( + + ))} +
+ +

Смотреть всё

+ + + +
diff --git a/src/types/IClient.ts b/src/types/IClient.ts index d600434..b087356 100644 --- a/src/types/IClient.ts +++ b/src/types/IClient.ts @@ -1,7 +1,10 @@ export interface IClient { id: string; - fullname: string; + name: string; email: string; phone: string; companyId: string; + createdAt: string; + ownerId: string; + updatedAt: string; } diff --git a/src/types/IServer.ts b/src/types/IServer.ts index 03b3b0f..647d9af 100644 --- a/src/types/IServer.ts +++ b/src/types/IServer.ts @@ -1,4 +1,5 @@ import { IApp } from "./IApp"; +import { IClient } from "./IClient"; import { ISession } from "./ISession"; export interface IServer { @@ -10,4 +11,5 @@ export interface IServer { sessions?: ISession[]; apps?: IApp[]; status: "online" | "offline"; + client?: IClient; }