From 411281c574d29adc1e4a3e512fb25afdd2442644 Mon Sep 17 00:00:00 2001 From: c00b3r Date: Wed, 4 Jun 2025 15:48:55 +0500 Subject: [PATCH] feat: add new icons and modals, update DesktopCard and TableSelector components for improved UI and functionality --- public/images/super-table.png | Bin 0 -> 3353 bytes src/components/DesktopCard.tsx | 60 +++++++++--------- src/components/TableSelector.tsx | 21 +++--- src/components/icons/ChevronRightIcon.tsx | 21 ++++++ src/components/modals/CreateSessionModal.tsx | 40 ++++++------ src/components/modals/CurrentSessionModal.tsx | 60 ++++++++++++++++++ .../{EditTable.tsx => EditTableModal.tsx} | 0 src/pages/DashboardPage.tsx | 26 ++++++-- src/types/IClient.ts | 5 +- src/types/IServer.ts | 2 + 10 files changed, 170 insertions(+), 65 deletions(-) create mode 100644 public/images/super-table.png create mode 100644 src/components/icons/ChevronRightIcon.tsx create mode 100644 src/components/modals/CurrentSessionModal.tsx rename src/components/modals/{EditTable.tsx => EditTableModal.tsx} (100%) diff --git a/public/images/super-table.png b/public/images/super-table.png new file mode 100644 index 0000000000000000000000000000000000000000..f6b1d1b71180dd2c444246f6e090a6b42e401535 GIT binary patch literal 3353 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 literal 0 HcmV?d00001 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/TableSelector.tsx b/src/components/TableSelector.tsx index 49d5690..0550508 100644 --- a/src/components/TableSelector.tsx +++ b/src/components/TableSelector.tsx @@ -13,8 +13,9 @@ function TableSelector({ selectedTable, onSelect, }: TableSelectorProps) { + console.log(tables); return ( -
+
{tables.map((table) => ( ))} 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; }