upd

client/.env

@@ -1,4 +0,0 @@
-VITE_API_URL=http://localhost:3001
-# VITE_API_URL=http://192.168.1.171:3001
-# VITE_API_URL=https://crm.stream.graff.tech/api
-VITE_STREAM_URL=https://stream.graff.tech

client/.env.development

@@ -0,0 +1,2 @@
+VITE_API_URL=http://localhost:3001
+VITE_STREAM_URL=https://stream.graff.tech

client/.env.production

@@ -0,0 +1,2 @@
+VITE_API_URL=https://crm.stream.graff.tech/api
+VITE_STREAM_URL=https://stream.graff.tech

client/src/components/Card.tsx

@@ -97,7 +97,7 @@ function Card({
           <div className="flex items-center gap-2">
             {manager ? (
               <img
-                src={manager.avatar}
+                src={manager.avatar || "/images/no-avatar.png"}
                 alt=""
                 className="w-6 h-6 rounded-full"
               />

client/src/components/Input.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 
 interface InputProps {
   type?: "text" | "email" | "password" | "time" | "tel";
+  value?: string;
   placeholder?: string;
   autoFocus?: boolean;
   required?: boolean;
@@ -16,11 +17,12 @@ interface InputProps {
 
 function Input({
   type = "text",
+  value,
   placeholder,
   autoFocus,
   required,
   readOnly,
-  defaultValue,
+  defaultValue = "",
   className,
   handleChange,
   handleFocus,
@@ -30,11 +32,15 @@ function Input({
     replacement: { _: /\d/ },
   });
 
-  const [value, setValue] = useState<string>(defaultValue || "");
+  const [_value, setValue] = useState<string>(value || defaultValue || "");
 
   useEffect(() => {
-    handleChange && handleChange(value);
-  }, [value]);
+    if (!_value || !handleChange) {
+      return;
+    }
+
+    handleChange(_value);
+  }, [_value]);
 
   return (
     <input
@@ -44,7 +50,7 @@ function Input({
       autoFocus={autoFocus}
       required={required}
       readOnly={readOnly}
-      value={defaultValue}
+      value={value || defaultValue || ""}
       onChange={(e) => setValue(e.target.value)}
       onFocus={handleFocus}
       className={`px-3 py-2.5 outline-none rounded-lg border border-[#DAE0E5] focus:border-[#49A1F5] transition-colors text-sm ${className}`}

client/src/components/Managers.tsx

@@ -30,7 +30,7 @@ function Managers() {
               <div key={manager.id} className="flex justify-between">
                 <div className="flex items-center gap-2">
                   <img
-                    src={manager.avatar}
+                    src={manager.avatar || "/images/no-avatar.png"}
                     alt=""
                     className="w-8 h-8 rounded-full"
                   />

client/src/components/SelectUser.tsx

@@ -36,10 +36,7 @@ function SelectUser({
             >
               <div className="flex items-center gap-2">
                 <img
-                  src={
-                    manager.avatar ||
-                    "https://as2.ftcdn.net/v2/jpg/00/64/67/27/1000_F_64672736_U5kpdGs9keUll8CRQ3p3YaEv2M6qkVY5.jpg"
-                  }
+                  src={manager.avatar || "/images/no-avatar.png"}
                   alt=""
                   className="w-6 h-6 rounded-full"
                 />

client/src/components/modals/CreateBuildModal.tsx

@@ -0,0 +1,84 @@
+import { FormEvent, useState } from "react";
+import Button from "../Button";
+import Input from "../Input";
+import api from "../../utils/api";
+import IError from "../../types/IError";
+import IBuild from "../../types/IBuild";
+import useModalStore from "../../stores/useModalStore";
+
+interface Props {
+  companyId: string;
+}
+
+function CreateBuildModal({ companyId }: Props) {
+  const [name, setName] = useState<string>("");
+  const [build, setBuild] = useState<string>("");
+  const [sessionLimit, setSessionLimit] = useState<number>(1);
+  const { setModal } = useModalStore();
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+
+    addBuild();
+  }
+
+  async function addBuild() {
+    try {
+      const result: IBuild | IError = await api
+        .post(`admin/builds`, {
+          json: {
+            companyId,
+            name,
+            build,
+            sessionLimit,
+          },
+        })
+        .json();
+
+      if ("error" in result) {
+        alert(result.error);
+        return;
+      }
+
+      window.location.reload();
+    } catch (error) {
+      alert((error as Error).message);
+    }
+  }
+
+  return (
+    <div className="bg-white p-8 space-y-4 rounded-xl">
+      <p className="text-xl font-semibold">Создание ЖК</p>
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+        <Input
+          placeholder="Название ЖК"
+          className="w-64"
+          handleChange={(value) => setName(value)}
+          autoFocus
+          required
+        />
+        <Input
+          placeholder="Сборка приложения"
+          className="w-64"
+          handleChange={(value) => setBuild(value)}
+          required
+        />
+        <Input
+          placeholder="Кол-во слотов"
+          className="w-64"
+          defaultValue={sessionLimit?.toString()}
+          handleChange={(value) => setSessionLimit(+value)}
+          required
+        />
+        <div className="self-end flex gap-2">
+          <Button color="secondary" handleClick={() => setModal(null)}>
+            Отмена
+          </Button>
+          <Button type="submit">Сохранить</Button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default CreateBuildModal;

client/src/components/modals/CreateCompanyModal.tsx

@@ -0,0 +1,62 @@
+import { FormEvent, useState } from "react";
+import Button from "../Button";
+import Input from "../Input";
+import api from "../../utils/api";
+import ICompany from "../../types/ICompany";
+import IError from "../../types/IError";
+import useModalStore from "../../stores/useModalStore";
+
+function CreateCompanyModal() {
+  const [name, setName] = useState<string>("");
+  const { setModal } = useModalStore();
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+
+    addComapny();
+  }
+
+  async function addComapny() {
+    try {
+      const result: ICompany | IError = await api
+        .post(`admin/companies`, {
+          json: {
+            name,
+          },
+        })
+        .json();
+
+      if ("error" in result) {
+        alert(result.error);
+        return;
+      }
+
+      window.location.reload();
+    } catch (error) {
+      alert((error as Error).message);
+    }
+  }
+
+  return (
+    <div className="bg-white p-8 space-y-4 rounded-xl">
+      <p className="text-xl font-semibold">Создание компании</p>
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+        <Input
+          placeholder="Название компании"
+          className="w-64"
+          handleChange={(value) => setName(value)}
+          autoFocus
+          required
+        />
+        <div className="self-end flex gap-2">
+          <Button color="secondary" handleClick={() => setModal(null)}>
+            Отмена
+          </Button>
+          <Button type="submit">Сохранить</Button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default CreateCompanyModal;

client/src/components/modals/CreateUserModal.tsx

@@ -0,0 +1,159 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ChangeEvent, FormEvent, useEffect, useState } from "react";
+import Button from "../Button";
+import Input from "../Input";
+import api from "../../utils/api";
+import IError from "../../types/IError";
+import IBuild from "../../types/IBuild";
+import { Transition } from "react-transition-group";
+import SpinnerIcon from "../icons/SpinnerIcon";
+import useModalStore from "../../stores/useModalStore";
+
+interface Props {
+  companyId: string;
+}
+
+function CreateUserModal({ companyId }: Props) {
+  const [name, setName] = useState<string>("");
+  const [username, setUsername] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+  const [builds, setBuilds] = useState<IBuild[]>();
+  const [role, setRole] = useState<string>("manager");
+  const [buildIds, setBuildIds] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const { setModal } = useModalStore();
+
+  async function getBuilds() {
+    try {
+      const result: IBuild[] | IError = await api
+        .get(`admin/builds?companyId=${companyId}`)
+        .json();
+
+      if ("error" in result) {
+        alert(result.error);
+        return;
+      }
+
+      setBuilds(result);
+    } catch (error) {
+      alert((error as Error).message);
+    }
+  }
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+
+    addUser();
+  }
+
+  async function addUser() {
+    try {
+      const result: IBuild | IError = await api
+        .post(`admin/users`, {
+          json: {
+            companyId,
+            name,
+            username,
+            password,
+            role,
+            buildIds,
+          },
+        })
+        .json();
+
+      if ("error" in result) {
+        alert(result.error);
+        return;
+      }
+
+      window.location.reload();
+    } catch (error) {
+      alert((error as Error).message);
+    }
+  }
+
+  function handleChangeBuilds(e: ChangeEvent<HTMLSelectElement>) {
+    const buildValues = [...e.target.selectedOptions].map(
+      (option) => option.value
+    );
+
+    setBuildIds(buildValues);
+  }
+
+  useEffect(() => {
+    getBuilds();
+  }, []);
+
+  useEffect(() => {
+    if (!builds) {
+      return;
+    }
+
+    setIsLoading(false);
+  }, [builds]);
+
+  return (
+    <div className="bg-white p-8 space-y-4 rounded-xl">
+      <p className="text-xl font-semibold">Создание пользователя</p>
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+        <Input
+          placeholder="Имя Фамилия"
+          className="w-64"
+          handleChange={(value) => setName(value)}
+          autoFocus
+          required
+        />
+        <Input
+          placeholder="Email (Логин)"
+          className="w-64"
+          handleChange={(value) => setUsername(value)}
+          required
+        />
+        <Input
+          type="password"
+          placeholder="Пароль"
+          className="w-64"
+          handleChange={(value) => setPassword(value)}
+          required
+        />
+        <select
+          className="px-3 py-2 outline-none border border-gray-300 rounded-lg"
+          defaultValue={role}
+          onChange={(e) => setRole(e.target.selectedOptions[0].value)}
+        >
+          {["manager", "admin"].map((role) => (
+            <option value={role}>{role}</option>
+          ))}
+        </select>
+        <select
+          className="px-3 py-2 outline-none border border-gray-300 rounded-lg"
+          onChange={handleChangeBuilds}
+          multiple
+        >
+          {builds &&
+            builds.map((build) => (
+              <option value={build.id}>{build.name}</option>
+            ))}
+        </select>
+        <div className="self-end flex gap-2">
+          <Button color="secondary" handleClick={() => setModal(null)}>
+            Отмена
+          </Button>
+          <Button type="submit">Сохранить</Button>
+        </div>
+      </form>
+
+      <Transition in={isLoading} timeout={150} mountOnEnter unmountOnExit>
+        {(state) => (
+          <div
+            className={`fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50 transition-all ${state}`}
+          >
+            <SpinnerIcon />
+          </div>
+        )}
+      </Transition>
+    </div>
+  );
+}
+
+export default CreateUserModal;

client/src/components/modals/EditUserModal.tsx

@@ -0,0 +1,184 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ChangeEvent, FormEvent, useEffect, useState } from "react";
+import Button from "../Button";
+import Input from "../Input";
+import api from "../../utils/api";
+import IError from "../../types/IError";
+import IBuild from "../../types/IBuild";
+import { Transition } from "react-transition-group";
+import SpinnerIcon from "../icons/SpinnerIcon";
+import IUser from "../../types/IUser";
+import useModalStore from "../../stores/useModalStore";
+
+interface Props {
+  companyId: string;
+  userId: string;
+}
+
+function EditUserModal({ companyId, userId }: Props) {
+  const [user, setUser] = useState<IUser>();
+  const [name, setName] = useState<string>("");
+  const [username, setUsername] = useState<string>("");
+  // const [password, setPassword] = useState<string>("");
+  const [builds, setBuilds] = useState<IBuild[]>();
+  const [role, setRole] = useState<string>("manager");
+  const [buildIds, setBuildIds] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const { setModal } = useModalStore();
+
+  async function getUser() {
+    try {
+      const result: IUser | IError = await api
+        .get(`admin/users/${userId}`)
+        .json();
+
+      if ("error" in result) {
+        alert(result.error);
+        return;
+      }
+
+      setUser(result);
+      setName(result.name);
+      setUsername(result.username);
+      setRole(result.role);
+
+      if (result.buildIds) {
+        setBuildIds(result.buildIds);
+      }
+    } catch (error) {
+      alert((error as Error).message);
+    }
+  }
+
+  async function getBuilds() {
+    try {
+      const result: IBuild[] | IError = await api
+        .get(`admin/builds?companyId=${companyId}`)
+        .json();
+
+      if ("error" in result) {
+        alert(result.error);
+        return;
+      }
+
+      setBuilds(result);
+    } catch (error) {
+      alert((error as Error).message);
+    }
+  }
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+
+    updateUser();
+  }
+
+  async function updateUser() {
+    try {
+      const result: IBuild | IError = await api
+        .put(`admin/users/${userId}`, {
+          json: {
+            name,
+            username,
+            role,
+            buildIds,
+          },
+        })
+        .json();
+
+      if ("error" in result) {
+        alert(result.error);
+        return;
+      }
+
+      window.location.reload();
+    } catch (error) {
+      alert((error as Error).message);
+    }
+  }
+
+  function handleChangeBuilds(e: ChangeEvent<HTMLSelectElement>) {
+    const buildValues = [...e.target.selectedOptions].map(
+      (option) => option.value
+    );
+
+    setBuildIds(buildValues);
+  }
+
+  useEffect(() => {
+    getUser();
+    getBuilds();
+  }, []);
+
+  useEffect(() => {
+    if (!user || !builds || !buildIds) {
+      return;
+    }
+
+    setIsLoading(false);
+  }, [user, builds, buildIds]);
+
+  return (
+    <div className="bg-white p-8 space-y-4 rounded-xl">
+      <p className="text-xl font-semibold">Редактирование</p>
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+        <Input
+          placeholder="Имя Фамилия"
+          className="w-64"
+          value={name}
+          handleChange={(value) => setName(value)}
+          required
+        />
+        <Input
+          placeholder="Email (Логин)"
+          className="w-64"
+          value={username}
+          handleChange={(value) => setUsername(value)}
+          required
+        />
+        <select
+          className="px-3 py-2 outline-none border border-gray-300 rounded-lg"
+          value={role}
+          onChange={(e) => setRole(e.target.selectedOptions[0].value)}
+        >
+          {["manager", "admin"].map((role) => (
+            <option value={role}>{role}</option>
+          ))}
+        </select>
+        <select
+          className="px-3 py-2 outline-none border border-gray-300 rounded-lg"
+          onChange={handleChangeBuilds}
+          multiple
+        >
+          {builds &&
+            builds.map((build) => (
+              <option
+                selected={builds.some((build) => buildIds.includes(build.id))}
+                value={build.id}
+              >
+                {build.name}
+              </option>
+            ))}
+        </select>
+        <div className="self-end flex gap-2">
+          <Button color="secondary" handleClick={() => setModal(null)}>
+            Отмена
+          </Button>
+          <Button type="submit">Сохранить</Button>
+        </div>
+      </form>
+
+      <Transition in={isLoading} timeout={150} mountOnEnter unmountOnExit>
+        {(state) => (
+          <div
+            className={`fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50 transition-all ${state}`}
+          >
+            <SpinnerIcon />
+          </div>
+        )}
+      </Transition>
+    </div>
+  );
+}
+
+export default EditUserModal;

client/src/main.tsx

@@ -8,6 +8,8 @@ import LoginPage from "./pages/LoginPage.tsx";
 import RegistrationPage from "./pages/RegistrationPage.tsx";
 import RegistrationCompanyPage from "./pages/RegistrationCompanyPage.tsx";
 import RegistrationManagerPage from "./pages/RegistrationManagerPage.tsx";
+import AdminPage from "./pages/AdminPage.tsx";
+import AdminCompanyPage from "./pages/AdminCompanyPage.tsx";
 
 const router = createBrowserRouter([
   {
@@ -48,6 +50,25 @@ const router = createBrowserRouter([
           },
         ],
       },
+      {
+        path: "admin",
+        element: <ProtectedRoute />,
+        children: [
+          {
+            index: true,
+            element: <AdminPage />,
+          },
+          {
+            path: ":companyId",
+            children: [
+              {
+                index: true,
+                element: <AdminCompanyPage />,
+              },
+            ],
+          },
+        ],
+      },
     ],
   },
 ]);

client/src/pages/AdminCompanyPage.tsx

@@ -0,0 +1,194 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useState } from "react";
+import api from "../utils/api";
+import IError from "../types/IError";
+import Button from "../components/Button";
+import useModalStore from "../stores/useModalStore";
+import ModalContainer from "../components/ModalContainer";
+import { useNavigate, useParams } from "react-router-dom";
+import IBuild from "../types/IBuild";
+import CreateBuildModal from "../components/modals/CreateBuildModal";
+import IUser from "../types/IUser";
+import CreateUserModal from "../components/modals/CreateUserModal";
+import { Transition } from "react-transition-group";
+import SpinnerIcon from "../components/icons/SpinnerIcon";
+import MoreIcon from "../components/icons/MoreIcon";
+import EditUserModal from "../components/modals/EditUserModal";
+
+function AdminCompanyPage() {
+  const { companyId } = useParams();
+  const [builds, setBuilds] = useState<IBuild[]>();
+  const [users, setUsers] = useState<IUser[]>();
+  const { setModal } = useModalStore();
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  async function getBuilds() {
+    if (!companyId) return;
+
+    try {
+      const result: IBuild[] | IError = await api
+        .get(`admin/builds?companyId=${companyId}`)
+        .json();
+
+      if ("error" in result) {
+        alert(result.error);
+        return;
+      }
+
+      setBuilds(result);
+    } catch (error) {
+      alert((error as Error).message);
+    }
+  }
+
+  async function getUsers() {
+    if (!companyId) return;
+
+    try {
+      const result: IUser[] | IError = await api
+        .get(`admin/users?companyId=${companyId}`)
+        .json();
+
+      if ("error" in result) {
+        alert(result.error);
+        return;
+      }
+
+      setUsers(result);
+    } catch (error) {
+      alert((error as Error).message);
+    }
+  }
+
+  useEffect(() => {
+    getBuilds();
+    getUsers();
+  }, []);
+
+  useEffect(() => {
+    if (!users || !builds) {
+      return;
+    }
+
+    setIsLoading(false);
+  }, [users, builds]);
+
+  return (
+    <div className="min-h-screen flex flex-col gap-8 bg-gray-100 p-8">
+      <div className="flex gap-8">
+        <Button
+          color="secondary"
+          size="medium"
+          className="border border-gray-300"
+          handleClick={() => navigate("..")}
+        >
+          Назад
+        </Button>
+      </div>
+      <div className="space-y-4">
+        <div className="flex items-center gap-4">
+          <p className="text-xl font-semibold">Жилые комплексы</p>
+          <Button
+            handleClick={() =>
+              companyId && setModal(<CreateBuildModal companyId={companyId} />)
+            }
+          >
+            Добавить ЖК
+          </Button>
+        </div>
+        <div className="grid grid-cols-4 gap-4 border-b border-gray-300 pb-8">
+          {builds &&
+            builds.map((build) => (
+              <div className="relative bg-white rounded-xl overflow-hidden">
+                <img
+                  src=""
+                  alt=""
+                  className="aspect-video bg-gray-400 object-cover"
+                />
+                <div className="absolute bottom-4 left-6  text-white text-left">
+                  <p className="text-xl font-semibold">{build.name}</p>
+                  <p className="">
+                    Сборка приложения:{" "}
+                    <span className="font-semibold">{build.build}</span>
+                  </p>
+                  <p className="">
+                    Кол-во слотов:{" "}
+                    <span className="font-semibold">{build.sessionLimit}</span>
+                  </p>
+                </div>
+              </div>
+            ))}
+        </div>
+      </div>
+      <div className="space-y-4 border-b border-gray-300 pb-8">
+        <div className="flex items-center gap-4">
+          <p className="text-xl font-semibold">Пользователи</p>
+          <Button
+            handleClick={() =>
+              companyId && setModal(<CreateUserModal companyId={companyId} />)
+            }
+          >
+            Добавить пользователя
+          </Button>
+        </div>
+        <div className="grid grid-cols-5 gap-4">
+          {users &&
+            users.map((user) => (
+              <div
+                key={user.id}
+                className="flex justify-between gap-4 p-4 rounded-lg shadow"
+              >
+                <div className="flex gap-4">
+                  <img
+                    src={user.avatar || "/images/no-avatar.png"}
+                    alt=""
+                    className="w-8 h-8 rounded-full bg-gray-500"
+                  />
+
+                  <div className="text-sm">
+                    <p>{user.name}</p>
+                    <p>{user.username}</p>
+                    <p>Роль: {user.role}</p>
+                    <p>
+                      Связанные ЖК:{" "}
+                      {builds
+                        ?.filter((build) => user.buildIds?.includes(build.id))
+                        .map((build) => build.name)
+                        .join(", ") || "Нет связанных сборок"}
+                    </p>
+                  </div>
+                </div>
+
+                <Button
+                  color="secondary"
+                  icon={<MoreIcon />}
+                  onlyIcon
+                  handleClick={() =>
+                    companyId &&
+                    setModal(
+                      <EditUserModal companyId={companyId} userId={user.id} />
+                    )
+                  }
+                />
+              </div>
+            ))}
+        </div>
+      </div>
+
+      <ModalContainer />
+
+      <Transition in={isLoading} timeout={150} mountOnEnter unmountOnExit>
+        {(state) => (
+          <div
+            className={`fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50 transition-all ${state}`}
+          >
+            <SpinnerIcon />
+          </div>
+        )}
+      </Transition>
+    </div>
+  );
+}
+
+export default AdminCompanyPage;

client/src/pages/AdminPage.tsx

@@ -0,0 +1,90 @@
+import { useEffect, useState } from "react";
+import ICompany from "../types/ICompany";
+import api from "../utils/api";
+import IError from "../types/IError";
+import Button from "../components/Button";
+import useModalStore from "../stores/useModalStore";
+import CreateCompanyModal from "../components/modals/CreateCompanyModal";
+import ModalContainer from "../components/ModalContainer";
+import { useNavigate } from "react-router-dom";
+import SpinnerIcon from "../components/icons/SpinnerIcon";
+import { Transition } from "react-transition-group";
+
+function AdminPage() {
+  const [companies, setCompanies] = useState<ICompany[]>();
+  const { setModal } = useModalStore();
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  async function getCompanies() {
+    try {
+      const result: ICompany[] | IError = await api
+        .get(`admin/companies`)
+        .json();
+
+      if ("error" in result) {
+        alert(result.error);
+        return;
+      }
+
+      setCompanies(result);
+    } catch (error) {
+      alert((error as Error).message);
+    }
+  }
+
+  useEffect(() => {
+    getCompanies();
+  }, []);
+
+  useEffect(() => {
+    if (!companies) {
+      return;
+    }
+
+    setIsLoading(false);
+  }, [companies]);
+
+  return (
+    <div className="min-h-screen flex flex-col gap-8 bg-gray-100 p-8">
+      <div className="flex items-center gap-4">
+        <p className="text-xl font-semibold">Компании</p>
+        <Button handleClick={() => setModal(<CreateCompanyModal />)}>
+          Добавить компанию
+        </Button>
+      </div>
+      <div className="grid grid-cols-4 gap-4">
+        {companies &&
+          companies.map((company) => (
+            <button
+              className="relative bg-white rounded-xl overflow-hidden"
+              onClick={() => navigate(`${company.id}`)}
+            >
+              <img
+                src=""
+                alt=""
+                className="aspect-video bg-gray-400 object-cover"
+              />
+              <p className="text-xl font-semibold text-white absolute bottom-4 left-6">
+                {company.name}
+              </p>
+            </button>
+          ))}
+      </div>
+
+      <ModalContainer />
+
+      <Transition in={isLoading} timeout={150} mountOnEnter unmountOnExit>
+        {(state) => (
+          <div
+            className={`fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50 transition-all ${state}`}
+          >
+            <SpinnerIcon />
+          </div>
+        )}
+      </Transition>
+    </div>
+  );
+}
+
+export default AdminPage;

client/src/pages/DashboardPage.tsx

@@ -27,6 +27,8 @@ import SpinnerIcon from "../components/icons/SpinnerIcon";
 import ModalContainer from "../components/ModalContainer";
 import ChevronLeftIcon from "../components/icons/ChevronLeftIcon";
 import ChevronRightIcon from "../components/icons/ChevronRightIcon";
+import IUser from "../types/IUser";
+import IError from "../types/IError";
 
 function DashboardPage() {
   const { user } = useAuthStore();
@@ -69,7 +71,7 @@ function DashboardPage() {
   }
 
   function findSessionsByTime(time: Date) {
-    if (!scheduledSessions) return [];
+    if (!scheduledSessions || !scheduledSessions.length) return [];
 
     const foundScheduledSessions = scheduledSessions?.filter(
       (scheduledSession) => isEqual(new Date(scheduledSession.startAt), time)
@@ -180,14 +182,20 @@ function DashboardPage() {
     }
 
     try {
-      const result: any = await api
-        .get(`companies/${company.id}/builds/${selectedBuild.id}/users`)
+      const result: IUser[] | IError = await api
+        .get(`users?companyId=${company.id}&buildIds=${selectedBuild.id}`)
         .json();
+
+      if ("error" in result) {
+        alert(result.error);
+        return;
+      }
+
+      console.log("result", result);
+
       setManagers(result);
     } catch (error) {
-      if (error instanceof Error) {
-        console.log("Error: ", error.message);
-      }
+      alert((error as Error).message);
     }
   }
 

client/src/types/IError.ts

@@ -0,0 +1,5 @@
+interface IError {
+  error: string;
+}
+
+export default IError;

client/src/types/IUser.ts

@@ -1,10 +1,11 @@
 interface IUser {
   id: string;
   companyId: string;
-  avatar: string;
+  avatar?: string;
   name: string;
   username: string;
   role: string;
+  buildIds?: string[];
 }
 
 export default IUser;