okey

.gitignore

@@ -0,0 +1 @@
+.DS_Store

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "skill-hub",
       "version": "0.0.0",
       "dependencies": {
+        "@balkangraph/orgchart.js": "^8.14.19",
         "@hookform/resolvers": "^3.3.4",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -16,6 +17,7 @@
         "@radix-ui/react-menubar": "^1.0.4",
         "@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",
         "@vitejs/plugin-react-swc": "^3.5.0",
         "autoprefixer": "^10.4.19",
@@ -90,6 +92,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@balkangraph/orgchart.js": {
+      "version": "8.14.19",
+      "resolved": "https://registry.npmjs.org/@balkangraph/orgchart.js/-/orgchart.js-8.14.19.tgz",
+      "integrity": "sha512-pa4km/5mTWmMcVLBIsHcuC73s4y1La9BOx4AU9ilGetQwlAbWfrFcSU7hf8FO49otmk1AysfBhPrcBoRl2i46w=="
+    },
     "node_modules/@esbuild/darwin-x64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
@@ -954,6 +961,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.0.3.tgz",
+      "integrity": "sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==",
+      "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-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-tabs": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz",
@@ -1054,6 +1090,23 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
+      "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@balkangraph/orgchart.js": "^8.14.19",
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -18,6 +19,7 @@
     "@radix-ui/react-menubar": "^1.0.4",
     "@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",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.19",

frontend/src/App.tsx

@@ -11,47 +11,53 @@ import Teams from "./components/pages/Teams/Teams";
 import MyTeams from "./components/pages/MyTeams/MyTeams";
 import Successful from "./components/pages/Successful/Successful";
 import AdminPage from "./components/pages/Admin/Admin";
+import SkillTree from "./components/pages/SkillTree/SkillTree";
+import AdminEventPage from "./components/pages/AdminEventPage/AdminEventPage";
 
 const router = createBrowserRouter([
-  {
-    path: "",
-    element: <TemplateWeb />,
-    children: [{
-      path: "",
-      element: <Landing />,
-    }]
-  },
-  {
-    path: "*",
-    element: <General />,
-    children: [{
-      path: "login",
-      element: <Main />,
-    },
-    // {
-    //   path: "teams",
-    //   element: <Teams />,
-    // },
-    // {
-    //   path: "my-teams",
-    //   element: <MyTeams />,
-    // },
     {
-      path: "successful",
+      path: "",
-      element: <Successful />,
+      element: <TemplateWeb />,
-    }]
+      children: [
-  },
+        {
+          path: "",
+          element: <Landing />
+        }
+      ]
+    },
+    {
+      path: "*",
+      element: <General />,
+      children: [
+        {
+          path: "login",
+          element: <Main />
+        },
+        {
+          path: "successful",
+          element: <Successful />
+        }
+      ]
+    },
     {
       path: "dash",
       element: <General />,
-      children: [{
+      children: [
-      path: "admin",
+        {
-      element: <AdminPage />,
+          path: "eventlist",
-    },
+          element: <AdminEventPage />
-  ]
+        },
-  },
+        {
-])
+          path: "admin",
-
+          element: <AdminPage />
+        },
+        {
+          path: "skill-tree",
+          element: <SkillTree />
+        }
+      ]
+    }  
+  ])
 function App() {
   return (
     <>

frontend/src/components/app/APIurl.ts

@@ -1,6 +1,8 @@
-// export const API_BASE = "http://158.160.56.239/api/"
+// export const API_BASE = "https://animulichki.ru/api/"
 // export const API_BASE = "http://212.22.79.188/api/" //2 сервер
 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/"
+

frontend/src/components/app/Template/General/General.tsx

@@ -9,11 +9,9 @@ function General() {
   return (
     <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
        <Header />
-      <div className={less['page-maket']}>
+      <main className={less["main-content"]}>
-      <div className={less["main-content"]}>
       <Outlet/>
-    </div>
+    </main>
-    </div>
     </ThemeProvider>
 
   )

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

@@ -2,4 +2,5 @@
     max-width: 800px;
     padding: 20px;
     margin-bottom: 10px;
+    height: 200px;
 }

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

@@ -17,7 +17,7 @@ const VacancyCard = () =>{
   <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>
   </CardContent>
-      <Button  className="mt-10">{t("respondRequest")}</Button>
+      <Button  className="mt-5">{t("respondRequest")}</Button>
   </div>
 </Card>
 

frontend/src/components/pages/Admin/Admin.tsx

@@ -4,6 +4,7 @@ import less from "./Admin.module.less"
 import PlayerCard from "../../entities/PlayerCard/PlayerCard"
 import { useTranslation } from "react-i18next"
 import CreateTeam from "../../widgets/CreateTeams/CreateTeams"
+import { Link } from "react-router-dom"
 
 const AdminPage = () =>{
     const { t } = useTranslation();
@@ -11,7 +12,8 @@ const AdminPage = () =>{
         <ResizablePanelGroup direction="horizontal">
   <ResizablePanel defaultSize={95} maxSize={95}>
     <div className={less["main-admin"]}>
-    <Button>{t("EditTree")}</Button>
+    <Button asChild><Link to={"skill-tree"}>{t("EditTree")}</Link></Button>
+
     <CreateTeam/>
     </div>
 

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

@@ -0,0 +1,65 @@
+import { FormEvent } from "react";
+import { API_BASE, API_CREATE_EVENT } from "../../app/APIurl";
+
+export const submitAddEvent = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const formProps = Object.fromEntries(formData);
+    console.log(formProps)
+
+
+    fetch(`${API_BASE}${API_CREATE_EVENT}`, {
+      method: "POST",
+      headers: {
+          "Content-Type": "application/json",
+      },
+      body: JSON.stringify(formProps) ,
+  })
+  .then(response => {
+    
+      console.log(response.status);
+
+      if (response.ok) { 
+          console.log('Создан:', response.headers.get('Location'));
+          return response.json(); 
+      } else {
+
+          throw new Error('Код ошибки: ' + response.status);
+      }
+  })
+  .then(data => {
+      console.log('Успешно:', data);
+  })
+  .catch(error => {
+      console.error('Возникла ошибка с созданием:', error);
+  });
+}
+
+export const eventList = () => {
+
+
+    fetch(`${API_BASE}${API_CREATE_EVENT}`, {
+      method: "GET",
+      headers: {
+          "Content-Type": "application/json",
+      },
+  })
+  .then(response => {
+    
+      console.log(response.status);
+
+      if (response.ok) { 
+          console.log('Получен:', response.headers.get('Location'));
+          return response.json(); 
+      } else {
+
+          throw new Error('Код ошибки: ' + response.status);
+      }
+  })
+  .then(data => {
+      console.log('Успешно:', data);
+  })
+  .catch(error => {
+      console.error('Возникла ошибка с получением:', error);
+  });
+}

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

@@ -0,0 +1,37 @@
+.main-admin{
+    display: flex;
+    flex-direction: column;
+    width: 80%;
+    justify-content: center;
+    align-items: center;
+    gap: 50px;
+    margin-top: 40px;
+    height: 70vh;
+}
+.admin-event__page{
+    display: flex;
+}
+.cont_1{
+    width: 50%;
+    border-right-width: 1px;
+    height: 100vh;
+    padding: 20px;
+
+}
+.cont_2{
+    width: 50%;
+    padding: 20px;
+
+    display: flex;
+    flex-direction: column;
+}
+.input-form{
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+.liner-block{
+    display: flex;
+
+    align-items: center;
+}

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

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

frontend/src/components/pages/SkillTree/SkillTree.tsx

@@ -0,0 +1,9 @@
+
+
+const SkillTree = () => {
+    return (
+        <div style={{height: '100%'}}>
+        </div>
+    );
+    }
+ export default SkillTree;

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

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "../../../../lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

frontend/src/i18n.ts

@@ -43,6 +43,7 @@ i18n
         download: "Скачать",
         descDownload: "Скачать XLS таблицу",
         open: "Открыть",
+        createEvent: "Создать ивент",
 
 
         }
@@ -80,7 +81,7 @@ i18n
             download: "Download",
             descDownload: "Download the XLS table",
             open: "Open",
-
+            createEvent: "Сreate Event",
              }
       },
       zh: {
@@ -115,6 +116,8 @@ i18n
             download: "下载",
             descDownload: "下载XLS表",
             open: "打开",
+            createEvent: "创建一个事件",
+
         }
       },
     }

node_modules/.package-lock.json

@@ -0,0 +1,12 @@
+{
+  "name": "PROD-Animulichki-SkillHub",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "node_modules/@balkangraph/orgchart.js": {
+      "version": "8.14.19",
+      "resolved": "https://registry.npmjs.org/@balkangraph/orgchart.js/-/orgchart.js-8.14.19.tgz",
+      "integrity": "sha512-pa4km/5mTWmMcVLBIsHcuC73s4y1La9BOx4AU9ilGetQwlAbWfrFcSU7hf8FO49otmk1AysfBhPrcBoRl2i46w=="
+    }
+  }
+}

node_modules/@balkangraph/orgchart.js/README.md

@@ -0,0 +1,61 @@
+# ![Org Chart JS](https://balkangraph.com/content/img/icon-orgchart-js.png) Org Chart JS
+Build organizational chart app with BALKAN OrgChartJS JavaScript library. Org Chart JS is a simple, flexible and highly customizable organization chart plugin for presenting the structure of your organization and the relationships in an elegant way.
+
+![Org Chart JS](https://balkan.app/Content/Img/oc.png)
+
+## [Demos](https://balkan.app/OrgChartJS/Demos/BasicUsage)        [Docs](https://balkan.app/OrgChartJS/Docs/GettingStarted)        [Download](https://balkan.app/OrgChartJS/Download)       [Support](https://balkan.app/OrgChartJS/Support)
+
+## Features
+- Supports both local data and remote data (JSON)
+- Smooth expand/collapse effects
+- Align the chart in 8 orientations
+- Allows user to change orgchart structure by drag/drop nodes
+- Supports pan and zoom
+- Edit Form
+- Node Customization
+- Search
+- Scroll Bars
+- Lazy Loading
+- Mixed Hierarchy
+- Exporting
+- Assistant
+- Partners
+- Sub Trees
+- Family Tree
+
+## Installation
+Option 1 - [standalone build](https://balkan.app/OrgChartJS/Docs/GettingStarted)
+
+Option 2 - NPM
+```
+npm i @balkangraph/orgchart.js
+```
+
+Option 3 - Bower
+```
+bower install orgchart.js
+```
+
+
+## Usage
+```
+    <script src="https://balkan.app/js/orgchart.js"></script>
+    <div id="tree"/>
+    <script> 
+    var chart = new OrgChart(document.getElementById("tree"), {
+        nodeBinding: {
+            field_0: "name"
+        },
+        nodes: [
+            { id: 1, name: "Amber McKenzie" },
+            { id: 2, pid: 1, name: "Ava Field" },
+            { id: 3, pid: 1, name: "Peter Stevens" }
+        ]
+    });
+    </script>
+```
+
+
+## 1 click to talk 2 us
+
+[![OrgChart](https://balkangraph.com/content/img/phone-icon4.png)](https://webcall.me/BALKANGraph)

node_modules/@balkangraph/orgchart.js/package.json

@@ -0,0 +1 @@
+{"author":{"name":"BALKAN App"},"bugs":{"email":"support@balkan.app","url":"https://github.com/BALKANGraph/OrgChartJS/issues"},"deprecated":false,"description":"Ultimate Organizational Chart JavaScript library, Interactive Diagrams","files":["orgchart.js","orgchart.d.ts","package.json","README.md"],"homepage":"https://balkan.app/","keywords":["diagram","chart","tree","orgchart","graph","svg","hierarchy","family-tree","decision-tree","visualization","tree-layout","hierarchical","javascript","js","html","html5"],"license":"SEE LICENSE IN https://balkan.app","main":"orgchart.js","types":"orgchart.d.ts","name":"@balkangraph/orgchart.js","repository":{"type":"git","url":"https://github.com/BALKANGraph/OrgChartJS"},"dependencies":{},"version":"8.14.19"}

package-lock.json

@@ -0,0 +1,17 @@
+{
+  "name": "PROD-Animulichki-SkillHub",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@balkangraph/orgchart.js": "^8.14.19"
+      }
+    },
+    "node_modules/@balkangraph/orgchart.js": {
+      "version": "8.14.19",
+      "resolved": "https://registry.npmjs.org/@balkangraph/orgchart.js/-/orgchart.js-8.14.19.tgz",
+      "integrity": "sha512-pa4km/5mTWmMcVLBIsHcuC73s4y1La9BOx4AU9ilGetQwlAbWfrFcSU7hf8FO49otmk1AysfBhPrcBoRl2i46w=="
+    }
+  }
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@balkangraph/orgchart.js": "^8.14.19"
+  }
+}