inmake/graff-mate-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'main' of http://192.168.1.163:3000/inmake/graff-mate-client

Browse Source
This commit is contained in:
c00b3r
2025-06-18 18:36:23 +05:00
parent d62a476172 0ab74755d6
commit daf6662a91
16 changed files with 142 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Input.tsx
+10 -2
View File
@@ -1,19 +1,22 @@
import clsx from "clsx";
import SpinIcon from "./icons/SpinIcon";
interface NewInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
placeholder?: string;
isError?: boolean;
errorMessage?: string;
isLoading?: boolean;
}
function Input({
placeholder,
isError,
errorMessage,
isLoading,
...props
}: NewInputProps) {
return (
<div className="relative">
<div className={clsx("relative", props.disabled && "opacity-40")}>
<input
{...props}
placeholder=""
@@ -30,7 +33,7 @@ function Input({
peer-focus:caption-xs peer-focus:top-[0.556vw] peer-focus:translate-y-0
peer-[:not(:placeholder-shown)]:caption-xs peer-[:not(:placeholder-shown)]:top-[0.556vw] peer-[:not(:placeholder-shown)]:translate-y-0"
>
{placeholder}
{placeholder + (props.required ? "*" : "")}
</span>
)}
{isError && (
@@ -38,6 +41,11 @@ function Input({
{errorMessage}
</p>
)}
{isLoading && (
<div className="size-[1.389vw] text-[#7B60F3] animate-spin z-1 absolute right-[1.111vw] top-1/2 -translate-y-1/2">
<SpinIcon />
</div>
)}
</div>
);
}
src/components/MultySelect.tsx
+3 -5
View File
@@ -45,9 +45,9 @@ function MultySelect<T extends { name: string; id: string }>({
const isItemSelected = selectedValues.some((val) => val.id === item.id);
if (isItemSelected) {
setSelectedValues(selectedValues.filter((value) => value.id !== item.id));
setSelectedValues((prev) => prev.filter((value) => value.id !== item.id));
} else {
setSelectedValues([...selectedValues, item]);
setSelectedValues((prev) => [...prev, item]);
}
};
@@ -59,9 +59,7 @@ function MultySelect<T extends { name: string; id: string }>({
<div
className={clsx(
"flex items-center justify-between px-[1.111vw] py-[1.285vw] hover:bg-[#F0F0F0] rounded-[0.833vw] cursor-pointer",
isSelectVisible
? "!bg-[#E1DEFC] !text-[#7B60F3] hover:bg-[#E1DEFC]"
: "text-[#141414]"
isSelectVisible && "!bg-[#E1DEFC] !text-[#7B60F3] hover:bg-[#E1DEFC]"
)}
onClick={() => setIsSelectVisible(!isSelectVisible)}
>
src/components/ProjectSelector.tsx
+6 -6
View File
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
import { IApp } from "../types/App";
import { App } from "../types/App";
import ChevronLeftIcon from "./icons/ChevronLeftIcon";
import CloseIcon from "./icons/CloseIcon";
import LightningIcon from "./icons/LightningIcon";
@@ -8,10 +8,10 @@ import CheckIcon from "./icons/CheckIcon";
import ChevronDownIcon from "./icons/ChevronDownIcon";
interface Props {
projects: IApp[];
selectedProject: IApp | null;
setSelectedProject: (project: IApp | null) => void;
activeProject: IApp | null;
projects: App[];
selectedProject: App | null;
setSelectedProject: (project: App | null) => void;
activeProject: App | null;
}
function ProjectSelector({
@@ -26,7 +26,7 @@ function ProjectSelector({
const [isOpen, setIsOpen] = useState(false);
const [pointedProject, setPointedProject] = useState<IApp | null>(null);
const [pointedProject, setPointedProject] = useState<App | null>(null);
useEffect(() => {
setPointedProject(selectedProject);
src/components/icons/SpinIcon.tsx
-2
View File
@@ -15,8 +15,6 @@ function SpinIcon() {
>
<div
style={{
background:
"conic-gradient(from 90deg,rgba(255,255,255,.0195) 0deg,#fff 314.826deg,rgba(255,255,255,0) 353.741deg,rgba(255,255,255,.0195) 360deg)",
height: "100%",
width: "100%",
opacity: 1,
src/components/modals/CreateSessionModal.tsx
+67 -22
View File
@@ -1,6 +1,6 @@
import { Server } from "../../types/Server.ts";
import { useEffect, useRef, useState } from "react";
import { IApp } from "../../types/App.ts";
import { App } from "../../types/App.ts";
import api from "../../utils/api.ts";
import { Session } from "../../types/Session.ts";
import { Client } from "../../types/Client.ts";
@@ -11,6 +11,8 @@ import StartSessionIcon from "../icons/StartSessionIcon.tsx";
import Button from "../Button.tsx";
import ProjectSelector from "../ProjectSelector.tsx";
import { useQueryClient, useMutation, useQuery } from "@tanstack/react-query";
import { useDebounce } from "@uidotdev/usehooks";
import { AnimatePresence, motion } from "motion/react";
interface Props {
targetServerId: string | null;
@@ -38,7 +40,7 @@ export default function CreateSessionModal({ targetServerId }: Props) {
const [selectedServer, setSelectedServer] = useState<Server | null>(
targetServer
);
const [selectedApp, setSelectedApp] = useState<IApp | null>(null);
const [selectedApp, setSelectedApp] = useState<App | null>(null);
useEffect(() => {
setSelectedApp(
@@ -48,9 +50,32 @@ export default function CreateSessionModal({ targetServerId }: Props) {
);
}, [selectedServer]);
const debouncedPhone = useDebounce(phone, 500);
const { data, isLoading, error } = useQuery({
queryKey: ["get-user-by-phone", debouncedPhone],
queryFn: () =>
api
.get("clients/by-phone", {
searchParams: debouncedPhone ? { phone: debouncedPhone } : {},
})
.json<Client>(),
enabled: !!debouncedPhone,
});
useEffect(() => {
if (!error && data) {
setName(data.name);
setEmail(data.email);
} else {
setName(null);
setEmail(null);
}
}, [data, error]);
const { mutate: createClient } = useMutation({
mutationFn: () => {
return api
mutationFn: () =>
api
.post("clients", {
json: {
name,
@@ -58,8 +83,7 @@ export default function CreateSessionModal({ targetServerId }: Props) {
email,
},
})
.json<Client>();
},
.json<Client>(),
});
const { mutate: createSession } = useMutation({
@@ -158,7 +182,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] bg-[#F0F0F0] flex flex-col overflow-hidden"
onSubmit={handleClickCreateSession}
ref={ref}
>
@@ -166,7 +190,7 @@ export default function CreateSessionModal({ targetServerId }: Props) {
<p className="title-s font-medium">Новый сеанс</p>
</div>
<div className="w-full h-[6.944vw] bg-[url(/images/Table.png)] bg-no-repeat bg-top bg-[length:9.306vw]" />
<div className="bg-white rounded-t-[2.222vw] p-[1.389vw] flex flex-col gap-y-[1.667vw] flex-1 overflow-y-auto">
<div className="bg-white rounded-t-[2.222vw] p-[1.389vw] flex flex-col gap-y-[1.667vw] flex-1moverflow-y-auto">
<TableSelector
tables={servers || []}
selectedTable={selectedServer}
@@ -180,19 +204,40 @@ export default function CreateSessionModal({ targetServerId }: Props) {
onChange={(e) => setPhone(e.target.value)}
placeholder="Номер телефона"
required
isLoading={isLoading}
/>
<Input
value={name || ""}
onChange={(e) => setName(e.target.value)}
placeholder="Имя"
required
/>
<Input
type="email"
value={email || ""}
onChange={(e) => setEmail(e.target.value)}
placeholder="Электронная почта"
/>
<AnimatePresence>
{phone && (
<>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<Input
value={name || ""}
disabled={isLoading}
onChange={(e) => setName(e.target.value)}
placeholder="Имя"
required
/>
</motion.div>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<Input
disabled={isLoading}
type="email"
value={email || ""}
onChange={(e) => setEmail(e.target.value)}
placeholder="Электронная почта"
/>
</motion.div>
</>
)}
</AnimatePresence>
</div>
</div>
<div className="flex flex-col gap-y-[0.833vw]">
@@ -232,7 +277,8 @@ export default function CreateSessionModal({ targetServerId }: Props) {
<Button
type="submit"
disabled={
!ref.current?.checkValidity() ||
!phone ||
!name ||
!selectedServer ||
!selectedApp ||
servers?.find((server) => server.id === selectedServer?.id)
@@ -240,7 +286,6 @@ export default function CreateSessionModal({ targetServerId }: Props) {
}
variant="cta"
size="large"
className="sticky bottom-0"
>
<div className="size-[1.111vw]">
<StartSessionIcon />
src/index.css
+2 -2
View File
@@ -7,12 +7,12 @@ body {
color: #141414;
}
button {
button:enabled {
cursor: pointer;
}
button:disabled {
color: default;
cursor: default;
}
@layer utilities {
src/pages/ClientsPage.tsx
+31 -24
View File
@@ -1,3 +1,4 @@
import api from "../utils/api";
import Button from "../components/Button";
import CloseIcon from "../components/icons/CloseIcon";
import SpinIcon from "../components/icons/SpinIcon";
@@ -5,25 +6,44 @@ import MultySelect from "../components/MultySelect";
import SearchInput from "../components/SearchInput";
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { IUser } from "../types/User";
import api from "../utils/api";
import { User } from "../types/User";
import { Client } from "../types/Client";
import { useDebounce } from "@uidotdev/usehooks";
import pluralize from "../utils/pluralize";
function ClientsPage() {
const [limit, setLimit] = useState(10);
const [search, setSearch] = useState<string | null>(null);
// const debouncedSearch = useDebounce(search, 500);
const debouncedSearch = useDebounce(search, 500);
const { data: me } = useQuery({
queryKey: ["me"],
queryFn: () => api.get("auth/me").json<IUser>(),
queryFn: () => api.get("auth/me").json<User>(),
});
const { data: clients, isLoading } = useQuery({
queryKey: ["clients"],
queryFn: () => api.get("clients").json<Client[]>(),
queryKey: ["clients", debouncedSearch],
queryFn: () =>
api
.get("clients", {
searchParams: debouncedSearch
? { search: debouncedSearch, limit }
: {},
})
.json<Client[]>(),
enabled: !!me,
});
const { data: count } = useQuery({
queryKey: ["clients", "count", debouncedSearch],
queryFn: () =>
api
.get(`clients/count`, {
searchParams: debouncedSearch ? { search: debouncedSearch } : {},
})
.json<number>(),
enabled: !!me,
});
@@ -32,11 +52,11 @@ function ClientsPage() {
}
return (
<div className=" flex flex-col gap-[1.667vw]">
<div className="flex flex-col gap-[1.667vw] h-full">
<h1 className="title-l font-medium">Клиенты</h1>
<div className="p-[1.389vw] rounded-[2.222vw] shadow-[0_4px_40px_0_rgba(15,16,17,0.05),0_2px_2px_0_rgba(15,16,17,0.05)] w-full">
<div className="space-y-[1.111vw]">
<div className="flex flex-col gap-[0.556vw]">
<div className="flex flex-col gap-[0.556vw] h-full">
<SearchInput
placeholder="Поиск клиентов"
value={search || ""}
@@ -45,17 +65,7 @@ function ClientsPage() {
/>
<div className="flex gap-[0.556vw]">
<MultySelect
data={[
{ name: "С бронью", id: "1" },
{
name: "С избранными лотами",
id: "2",
},
{
name: "Без отправленных КП",
id: "3",
},
]}
data={[]}
isGrid={false}
placeholder={"Все встречи"}
resetTitle={"Все встречи"}
@@ -72,10 +82,7 @@ function ClientsPage() {
</div>
<div className="flex justify-between items-center">
<p className="caption-m font-medium opacity-40">
Найдено{" "}
{clients?.length
? pluralize(clients?.length, "клиент")
: "0 клиентов"}
Найдено {count ? pluralize(count, "клиент") : "0 клиентов"}
</p>
<button className="flex gap-[0.278vw] items-center" onClick={reset}>
<div className="size-[1.111vw] text-[#7D7D7D]">
@@ -95,7 +102,7 @@ function ClientsPage() {
</div>
) : clients?.length ? (
clients?.map(({ name }) => (
<div key={name} className="space-y-[0.833vw]">
<div key={name} className="aspace-y-[0.833vw]">
<p className="caption-m font-medium opacity-40">{name}</p>
</div>
))
src/pages/DashboardPage.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { useQuery } from "@tanstack/react-query";
import { IUser } from "../types/User";
import { User } from "../types/User";
import api from "../utils/api";
import { Server } from "../types/Server";
import DesktopCard from "../components/DesktopCard";
@@ -13,7 +13,7 @@ import { useNavigate } from "react-router";
function DashboardPage() {
const { data: me } = useQuery({
queryKey: ["me"],
queryFn: () => api.get("auth/me").json<IUser>(),
queryFn: () => api.get("auth/me").json<User>(),
});
const { data: servers } = useQuery({
src/pages/ProtectedPage.tsx
+2 -2
View File
@@ -2,14 +2,14 @@ import { Navigate, Outlet } from "react-router";
import useAuthStore from "../stores/useAuthStore";
import api from "../utils/api";
import { useQuery } from "@tanstack/react-query";
import { IUser } from "../types/User";
import { User } from "../types/User";
function ProtectedPage() {
const { token } = useAuthStore();
const { data: user, isLoading } = useQuery({
queryKey: ["me"],
queryFn: () => api.get("auth/me").json<IUser>(),
queryFn: () => api.get("auth/me").json<User>(),
enabled: !!token,
});
src/pages/SessionsPage.tsx
+6 -5
View File
@@ -1,9 +1,9 @@
import { useQuery } from "@tanstack/react-query";
import api from "../utils/api";
import { IUser } from "../types/User";
import { User } from "../types/User";
import { Session } from "../types/Session";
import { useState } from "react";
import { IApp } from "../types/App";
import { App } from "../types/App";
import { useDebounce } from "@uidotdev/usehooks";
import SessionCard from "../components/SessionCard";
import { groupByCreatedAt } from "../utils/groupByCreatedAt";
@@ -19,6 +19,7 @@ import pluralize from "../utils/pluralize";
function SessionsPage() {
const [limit, setLimit] = useState(10);
const [search, setSearch] = useState<string | null>(null);
const [managerIds, setManagerIds] = useState<string[]>([]);
const [appIds, setAppIds] = useState<string[]>([]);
const [shouldReset, setShouldReset] = useState(false);
@@ -27,18 +28,18 @@ function SessionsPage() {
const { data: me } = useQuery({
queryKey: ["me"],
queryFn: () => api.get("auth/me").json<IUser>(),
queryFn: () => api.get("auth/me").json<User>(),
});
const { data: managers } = useQuery({
queryKey: ["managers"],
queryFn: () => api.get("users").json<IUser[]>(),
queryFn: () => api.get("users").json<User[]>(),
enabled: !!me,
});
const { data: apps } = useQuery({
queryKey: ["apps"],
queryFn: () => api.get("apps").json<IApp[]>(),
queryFn: () => api.get("apps").json<App[]>(),
enabled: !!me,
});
src/queries/useQueryApps.ts
+2 -2
View File
@@ -1,10 +1,10 @@
import { IApp } from "../types/App.ts";
import { App } from "../types/App.ts";
import api from "../utils/api.ts";
import { useQuery } from "@tanstack/react-query";
export default function useQueryApps() {
return useQuery({
queryKey: ["apps"],
queryFn: () => api.get("apps").json<IApp[]>(),
queryFn: () => api.get("apps").json<App[]>(),
});
}
src/types/App.ts
+1 -1
View File
@@ -1,4 +1,4 @@
export interface IApp {
export interface App {
id: string;
name: string;
fileName: string;
src/types/Company.ts
+5 -5
View File
@@ -1,11 +1,11 @@
import { IApp } from "./App";
import { App } from "./App";
import { Server } from "./Server";
import { IUser } from "./User";
import { User } from "./User";
export interface ICompany {
export interface Company {
id: string;
name: string;
apps?: IApp[];
apps?: App[];
servers?: Server[];
users?: IUser[];
users?: User[];
}
src/types/Server.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { IApp as App } from "./App";
import { App as App } from "./App";
import { Session } from "./Session";
export interface Server {
src/types/Session.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { IApp as App } from "./App";
import { App as App } from "./App";
import { Comment } from "./Comment";
import { IOwner as Owner } from "./Owner";
import { Server } from "./Server";
src/types/User.ts
+3 -3
View File
@@ -1,9 +1,9 @@
import { ICompany } from "./Company";
import { Company } from "./Company";
export interface IUser {
export interface User {
id: string;
email: string;
fullname: string;
companyId: string;
company?: ICompany;
company?: Company;
}