connect beck

frontend/package-lock.json

@@ -12,12 +12,14 @@
         "@hookform/resolvers": "^3.3.4",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-avatar": "^1.0.4",
+        "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-menubar": "^1.0.4",
         "@radix-ui/react-navigation-menu": "^1.1.4",
+        "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-switch": "^1.0.3",
@@ -26,11 +28,13 @@
         "autoprefixer": "^10.4.19",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
+        "cmdk": "^1.0.0",
         "cn-decorator": "^2.1.0",
         "cross": "^1.0.0",
         "i18next": "^23.10.1",
         "less": "^4.2.0",
         "lucide-react": "^0.363.0",
+        "moment": "^2.30.1",
         "next-themes": "^0.3.0",
         "postcss": "^8.4.38",
         "react": "^18.2.0",
@@ -1224,6 +1228,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz",
+      "integrity": "sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collapsible": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz",
@@ -1622,6 +1656,43 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.7.tgz",
+      "integrity": "sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
@@ -3242,6 +3313,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.0.tgz",
+      "integrity": "sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "1.0.5",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/cn-decorator": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cn-decorator/-/cn-decorator-2.1.0.tgz",
@@ -5838,6 +5922,14 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

frontend/package.json

@@ -12,25 +12,31 @@
   "dependencies": {
     "@balkangraph/orgchart.js": "^8.14.19",
     "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-menubar": "^1.0.4",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "cmdk": "^1.0.0",
     "cn-decorator": "^2.1.0",
     "cross": "^1.0.0",
     "i18next": "^23.10.1",
     "less": "^4.2.0",
     "lucide-react": "^0.363.0",
+    "moment": "^2.30.1",
     "next-themes": "^0.3.0",
     "postcss": "^8.4.38",
     "react": "^18.2.0",
@@ -46,9 +52,7 @@
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
-    "zod": "^3.22.4",
+    "zod": "^3.22.4"
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-avatar": "^1.0.4"
   },
   "devDependencies": {
     "@types/node": "^20.11.30",
@@ -56,6 +60,8 @@
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-with-typescript": "19.0.1",
@@ -63,10 +69,8 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "prettier": "^3.2.5",
-    "@vitejs/plugin-react": "^4.2.0",
-    "autoprefixer": "^10.4.16",
     "postcss": "^8.4.32",
+    "prettier": "^3.2.5",
     "tailwindcss": "^3.3.5",
     "vite": "^5.0.0"
   }

frontend/src/components/app/APIurl.ts

@@ -4,5 +4,7 @@ export const API_BASE = "http://localhost/api/" //3 сервер
 
 export const API_REG = "auth/signup/"
 export const API_CREATE_TOKEN = "auth/login/"
-export const API_CREATE_EVENT = "events/"
+export const API_EVENT = "events/"
+export const API_USERS = "users/"
+
 

frontend/src/components/entities/VacancyCard/VacancyCard.module.less

@@ -2,5 +2,15 @@
     max-width: 800px;
     padding: 20px;
     margin-bottom: 10px;
-    height: 200px;
+
+}
+.up{
+    display: flex;
+    flex-direction: column;
+}
+.header{
+    display: flex;
+    flex-direction: row;
+    justify-content:space-between;
+    padding: 0;
 }

frontend/src/components/entities/VacancyCard/VacancyCard.tsx

@@ -2,22 +2,37 @@ import { useTranslation } from "react-i18next";
 import { Button } from "../../shared/ui/button";
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "../../shared/ui/card"
 import less from "./VacancyCard.module.less";
+import { TrashIcon } from "lucide-react";
+import { deleteEvent } from "../../pages/AdminEventPage/AdminEventAPI";
 
-const VacancyCard = () =>{
+interface VacancyCardProms{
+  title: string;
+  date: string;
+  desc: string;
+  cardId: string;
+  admin: boolean;
+}
+
+const VacancyCard = ({title, date, desc,cardId, admin = false} : VacancyCardProms) =>{
   const { t } = useTranslation();
 
 
     return(
         <Card className={`${less["card"]} flex flex-row `}>
 <div className="flex flex-col">
-  <CardHeader className="p-0">
+  <CardHeader className={less["header"]}>
-    <CardTitle className="p-0">Lorem ipsum</CardTitle>
+    <div className={less["up"]}>
-    <CardDescription>Lorem ipsum</CardDescription>
+    <CardTitle className="p-0">{title}</CardTitle>
+    <CardDescription>Дата начала: {date}</CardDescription>
+    </div>
+{admin &&(
+    <Button size="icon" variant="ghost" onClick={() => deleteEvent(cardId)}><TrashIcon/></Button>
+    )}
   </CardHeader>
   <CardContent className="p-0 mt-4">
-    <p>Lorem ipsum dolor sit amet consectetur. Lorem justo sit nunc commodo nam fames dui ac ullamcorper. Laoreet faucibus semper adipiscing lobortis.</p>
+    <p>{desc}</p>
   </CardContent>
-      <Button  className="mt-5">{t("respondRequest")}</Button>
+      <Button  className="mt-2">{t("respondRequest")}</Button>
   </div>
 </Card>
 

frontend/src/components/pages/AdminEventPage/AdminEventAPI.ts

@@ -1,5 +1,5 @@
 import { FormEvent } from "react";
-import { API_BASE, API_CREATE_EVENT } from "../../app/APIurl";
+import { API_BASE, API_EVENT } from "../../app/APIurl";
 
 export const submitAddEvent = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -8,7 +8,7 @@ export const submitAddEvent = (e: FormEvent<HTMLFormElement>) => {
     console.log(formProps)
 
 
-    fetch(`${API_BASE}${API_CREATE_EVENT}`, {
+    fetch(`${API_BASE}${API_EVENT}`, {
       method: "POST",
       headers: {
           "Content-Type": "application/json",
@@ -29,37 +29,48 @@ export const submitAddEvent = (e: FormEvent<HTMLFormElement>) => {
   })
   .then(data => {
       console.log('Успешно:', data);
+      return data
   })
   .catch(error => {
       console.error('Возникла ошибка с созданием:', error);
   });
 }
-
 export const eventList = () => {
-
+    return fetch(`${API_BASE}${API_EVENT}`, {
-
+        method: "GET",
-    fetch(`${API_BASE}${API_CREATE_EVENT}`, {
+        headers: {
-      method: "GET",
+            "Content-Type": "application/json",
-      headers: {
+        },
-          "Content-Type": "application/json",
+    })
-      },
+    .then(response => {
-  })
+        if (response.ok) { 
-  .then(response => {
+            return response.json(); 
-    
+        } else {
-      console.log(response.status);
+            throw new Error('Код ошибки: ' + response.status);
-
+        }
-      if (response.ok) { 
+    })
-          console.log('Получен:', response.headers.get('Location'));
+    .then(data => {
-          return response.json(); 
+        return data; 
-      } else {
+    })
-
+    .catch(error => {
-          throw new Error('Код ошибки: ' + response.status);
+        console.error('Возникла ошибка с получением:', error);
-      }
+    });
-  })
+}
-  .then(data => {
+export const deleteEvent = (id:string) => {
-      console.log('Успешно:', data);
+     fetch(`${API_BASE}${API_EVENT}${id}`, {
-  })
+        method: "DELETE",
-  .catch(error => {
+        headers: {
-      console.error('Возникла ошибка с получением:', error);
+            "Content-Type": "application/json",
-  });
+        },
+    })
+    .then(response => {
+        if (response.ok) { 
+
+        } else {
+            throw new Error('Код ошибки: ' + response.status);
+        }
+    })
+    .catch(error => {
+        console.error('Возникла ошибка с удалением:', error);
+    });
 }

frontend/src/components/pages/AdminEventPage/AdminEventPage.tsx

@@ -11,63 +11,47 @@ import { useEffect, useState } from "react";
 
 
 
-const AdminEventPage = () =>{
+const AdminEventPage = () => {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
-    let wfew = JSON.stringify(eventList());
-    console.log(typeof wfew);
-    console.log(wfew );
 
 
-    const [events, setEvents] = useState<Event[]>([]);
+  const [events, setEvents] = useState<Event[]>([]);
 
-    useEffect(() => {
+  useEffect(() => {
-      fetchData(); 
+    eventList().then((data) => {
-    }, []);
+        setEvents(data)
+    }).catch(error => {
+      console.error('Возникла ошибка с получением:', error)
+    })
+  }, []);
 
-    const fetchData = () => {
-      eventList() // Вызываем функцию eventList из файла api.ts
-        .then((data: Event[]) => {
-          setEvents(data); // Устанавливаем полученные данные в состояние
-        })
-        .catch((error: any) => {
-          console.error('Произошла ошибка:', error); // Обрабатываем ошибку, если она возникла
-        });
-    };
 
-    return(
+  return (
-      <div className={less["admin-event__page"]}>
+    <div className={less["admin-event__page"]}>
-        <div className={less["cont_1"]}>
+      <div className={less["cont_1"]}>
         <form className={less["input-form"]} onSubmit={(event) => submitAddEvent(event)}>
-                    <h1 className={less["title-titleform"]}>{t("createEvent")}</h1>
+          <h1 className={less["title-titleform"]}>{t("createEvent")}</h1>
-                    <Input type="text" name="title" placeholder="Event name" />
+          <Input type="text" name="title" placeholder="Event name" />
-                    <Input type="date" name="start_date" placeholder="Start Date" />
+          <Input type="date" name="start_date" placeholder="Start Date" />
-                    <Input type="date" name="end_date" placeholder="End Date" />
+          <Input type="date" name="end_date" placeholder="End Date" />
 
-                    <Textarea name="description" placeholder="About Event" />
+          <Textarea name="description" placeholder="About Event" />
-                    <div className={less["liner-block"]}>
+          <div className={less["liner-block"]}>
-                    <Switch name="is_online" />
+            <Switch name="is_online" />
-                    <Label htmlFor="airplane-mode">Онлайн мероприятие</Label>
+            <Label htmlFor="airplane-mode">Онлайн мероприятие</Label>
-                    </div>
+          </div>
-                    <Button>{t("createEvent")}</Button>
+          <Button>{t("createEvent")}</Button>
-                </form>
+        </form>
 
       </div>
-      <Button onClick={eventList}>{t("createEvent")}</Button>
-      
       <div className={less["cont_2"]}>
       {events.map((event) => (
-          <li key={event.created_at}>
+        <VacancyCard title={event.title} date={event.start_date} desc={event.description} cardId={event.id} admin={true}></VacancyCard>
-            <div>Название: {event.title}</div>
+
-            <div>Дата: {event.updated_at}</div>
+      ))}
-            {/* Добавьте другие свойства вашего объекта, если они есть */}
-          </li>
-        ))}
-          <VacancyCard></VacancyCard>
-      <VacancyCard></VacancyCard>
-      <VacancyCard></VacancyCard>
-</div>
       </div>
-    )
+    </div>
+  )
 }
 export default AdminEventPage
 

frontend/src/components/pages/Main/Main.module.less

@@ -1,21 +1,24 @@
 .divv{
     margin: 0;
 }
+.novis{
+    opacity: 0;
+    visibility: hidden;
+}
 .general-content{
     margin-left: 20px;
     display: flex;
-    height: 90vh;
 }
 .general-left{
     width: 50%; 
-    display: flex;
+    padding: 10px;
-    justify-content: center;   
+    padding-top: 80px;
-    align-items: center;
-    flex-direction: column;
     border-right-width: 1px;
 }
 .general-right{
+    padding-top: 80px;
     margin-left: 20px;
+    width: 30%;
     
 }
 .input-form{
@@ -32,9 +35,24 @@
 .title-form{
     font-size: 30px;
 }
+.card{
+    max-width: 800px;
+    padding: 20px;
+    margin-bottom: 10px;
+
+}
+.up{
+    display: flex;
+    flex-direction: column;
+}
+.header{
+    display: flex;
+    flex-direction: row;
+    justify-content:space-between;
+    padding: 0;
+}
 @media (max-width: 820px) {
     .general-left{
         width: 100%; 
     }
 }
-

frontend/src/components/pages/Main/Main.tsx

@@ -5,6 +5,13 @@ import { submitRegister } from "../../widgets/Header/AuthAPI";
 import { Button } from "../../shared/ui/button";
 import { Textarea } from "../../shared/ui/textarea";
 import { Link, useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { deleteEvent, eventList } from "../AdminEventPage/AdminEventAPI";
+import VacancyCard from "../../entities/VacancyCard/VacancyCard";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../ui/card";
+import { TrashIcon } from "lucide-react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../../shared/ui/dialog";
+import { t } from "i18next";
 
 
 
@@ -12,27 +19,66 @@ const Main = () => {
     const { t } = useTranslation();
     const navigate = useNavigate();
 
-    return (
+    const [events, setEvents] = useState<Event[]>([]);
-        <div className={less["general-content"]}>
-            <div className={less["general-left"]}>
-                <form className={less["input-form"]} onSubmit={(event) => submitRegister(event, navigate)}>
-                    <h1 className={less["title-form"]}>{t("entrance")}</h1>
-                    <Input type="text" name="first_name" placeholder="First name" />
-                    <Input type="text" name="last_name" placeholder="Last name" />
-                    <Input type="date" name="birth_date" placeholder="Date" />
-                    <Input type="email" name="email" placeholder="Email" />
 
-                    <Textarea name="about" placeholder="About" />
+    useEffect(() => {
+        eventList().then((data) => {
+            setEvents(data)
+        }).catch(error => {
+            console.error('Возникла ошибка с получением:', error)
+        })
+    }, []);
 
-                    <Button>{t("buttonLoginInSystem")}</Button>
+return (
-                </form>
+    <div className={less["general-content"]}>
-                <Button variant="link" asChild><Link to={"/dash/admin"}>{t("iorganizer")}</Link></Button>
+        <div className={less["general-left"]}>
+            {events.map((event) => (
+                <Card className={`${less["card"]} flex flex-row `}>
+                    <div className="flex flex-col">
+                        <CardHeader className={less["header"]}>
+                            <div className={less["up"]}>
+                                <CardTitle className="p-0">{event.title}</CardTitle>
+                                <CardDescription>Дата начала: {event.start_date}</CardDescription>
+                            </div>
+                            {false && (
+                                <Button size="icon" variant="ghost" onClick={() => deleteEvent(event.id)}><TrashIcon /></Button>
+                            )}
+                        </CardHeader>
+                        <CardContent className="p-0 mt-4" >
+                            <p>{event.description}</p>
+                        </CardContent>
+                        <Dialog>
+                            <DialogTrigger className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2">{t("respondRequest")}</DialogTrigger>
+                            <DialogContent>
+                                <DialogHeader>
+                                    <DialogTitle><h1 className={less["title-form"]}>{t("entrance")}</h1></DialogTitle>
+                                    <DialogDescription>
+                                        <form className={less["input-form"]} onSubmit={(event) => submitRegister(event, navigate)}>
+                                            <div className={less["novis"]}><Input type="text" name="event_id" value={event.id} placeholder="Event" /></div>
+                                            <Input type="text" name="first_name" placeholder="First name" />
+                                            <Input type="text" name="last_name" placeholder="Last name" />
+                                            <Input type="date" name="birth_date" placeholder="Date" />
+                                            <Input type="email" name="email" placeholder="Email" />
+                                            <Textarea name="bio" placeholder="About" />
 
-            </div>
+                                            <Button>{t("buttonLoginInSystem")}</Button>
-            <div className={less["general-right"] + " shadow"}>
+                                        </form>
-            </div>
+                                    </DialogDescription>
+                                </DialogHeader>
+                            </DialogContent>
+                        </Dialog>
+
+                    </div>
+                </Card>
+            ))}
+            <Button variant="link" asChild><Link to={"/dash/admin"}>{t("iorganizer")}</Link></Button>
 
         </div>
-    )
+        <div className={less["general-right"] + " shadow"}>
+
+        </div>
+
+    </div>
+)
 }
 export default Main;

frontend/src/components/shared/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "@radix-ui/react-icons"
+
+import { cn } from "../../../lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

frontend/src/components/shared/ui/command.tsx

@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "../../../lib/utils"
+import { Dialog, DialogContent } from "src/components/shared/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

frontend/src/components/shared/ui/popover.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "../../../lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

frontend/src/components/widgets/Header/AuthAPI.ts

@@ -1,6 +1,5 @@
 import { FormEvent } from "react";
-import { API_BASE, API_CREATE_TOKEN, API_REG } from "../../app/APIurl";
+import { API_BASE, API_CREATE_TOKEN, API_USERS } from "../../app/APIurl";
-import { useNavigate } from 'react-router-dom';
   
 //логин
 export const submitLogin = (e: FormEvent<HTMLFormElement>) => {
@@ -42,8 +41,10 @@ export const submitRegister = (e: FormEvent<HTMLFormElement>, navigate: Function
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
     const formProps = Object.fromEntries(formData);
+    console.log(formProps)
 
-    fetch(`${API_BASE}${API_REG}`, {
+
+    fetch(`${API_BASE}${API_USERS}`, {
         method: "POST",
         headers: {
             "Content-Type": "application/json"

frontend/src/components/widgets/Header/Header.module.less

@@ -6,6 +6,11 @@
     align-items: center;
     padding: 0px 32px;
     width: 100%;
+    z-index: 999;
+    position: fixed;
+    width: 100%;
+    top:  0;
+    background-color: hsl(var(--background));
 
 }