front

front/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

front/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

front/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

front/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.3.7",
+    "antd": "^5.17.0",
+    "next": "14.2.3",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

front/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

front/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

front/public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

front/src/app/globals.css

@@ -0,0 +1,26 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

front/src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

front/src/app/login/LoginPage.tsx

@@ -0,0 +1,93 @@
+// 1. Страница входа (Login Page)
+// Дизайн: Страница должна быть минималистичной с использованием профессиональной цветовой схемы (синие и серые тона). Должно быть поле для ввода мнемонической фразы (SEED_KEY) и кнопка для входа.
+// Безопасность: Добавить элементы, подчеркивающие безопасность, например, иконку замка и текст, имитирующий шифрование.
+// Валидация: Проверять формат введенного SEED_KEY на клиентской стороне перед отправкой на сервер.
+"use client";
+import React from "react";
+import { SeedItem } from "../seedItem/SeedItem";
+
+import { useRouter } from "next/navigation";
+import { useState, useEffect, FC } from "react";
+import { EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons";
+
+import { Input, Space, Button, List, Card, Typography } from "antd";
+import { LockOutlined } from "@ant-design/icons";
+import useLoginHooks from "@/hooks/login";
+
+export function LoginPage() {
+  const { passwordVisible, setPasswordVisible, seed, getSeed } =
+    useLoginHooks();
+  const [inp, setInp] = useState("");
+  const [disabled, setDisabled] = useState(true);
+  const router = useRouter();
+  const onNextPageHandler = () => {
+    router.push("/organization");
+  };
+  const { Text } = Typography;
+  useEffect(() => {
+    setDisabled(!(inp.length >= 4));
+  }, [inp]);
+
+  const onSubmitHandler = () => {
+    setInp("");
+    getSeed(inp);
+  };
+  return (
+    <div className="flex relative  overflow-hidden flex-col w-2/3 h-3/4 items-center justify-center gap-10 bg-white border-solid border rounded-md border-neutral-300 text-neutral-500">
+      <div className="w-full h-20    bg-[#1677FF] absolute top-0 flex items-center justify-center">
+        <h1 className="text-white text-xl font-semibold">Log In</h1>
+      </div>
+      <div className="flex flex-col w-6/12  gap-3 items-start mt-20">
+        <div>
+          <Text type="secondary">Please enter 12 words always lowercase.</Text>
+        </div>
+
+        <Space.Compact style={{ width: "100%" }}>
+          <Input.Password
+            defaultValue="Combine input and button"
+            value={inp}
+            type="submit"
+            size="large"
+            suffix={<LockOutlined className="site-form-item-icon" />}
+            addonBefore="Seed"
+            visibilityToggle={{
+              visible: !!passwordVisible,
+              // onVisibleChange: setPasswordVisible,
+            }}
+            iconRender={(visible) =>
+              visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
+            }
+            placeholder="Enter your seed words in order"
+            onInput={(event: any) => setInp(event.target.value)}
+            maxLength={8}
+            minLength={4}
+          />
+          <Button
+            size="large"
+            type="primary"
+            disabled={disabled}
+            onClick={onSubmitHandler}
+          >
+            Submit
+          </Button>
+        </Space.Compact>
+      </div>
+      <div
+        className="flex flex-row w-[700px] gap-3 content-box flex-wrap
+      "
+      >
+        {seed.map((element: string, index: number) => (
+          <SeedItem key={index} seed={element} />
+        ))}
+      </div>
+      <Button
+        onClick={onNextPageHandler}
+        style={{ width: "150px" }}
+        type="primary"
+        size="large"
+      >
+        Login
+      </Button>
+    </div>
+  );
+}

front/src/app/login/login.service.ts

@@ -0,0 +1,5 @@
+export class LoginService {
+  login(seedKey: string) {
+    return fetch(`backend`);
+  }
+}

front/src/app/organization/OrgCard.tsx

@@ -0,0 +1,37 @@
+"use client";
+import React from "react";
+
+import { Card } from "antd";
+import { useState, useEffect, FC } from "react";
+import { useRouter } from "next/navigation";
+type OrgData = {
+  name: string;
+  address: string;
+  phone: number;
+};
+type OrgItemProps = {
+  element: OrgData;
+};
+
+export const OrganizationCard: FC<OrgItemProps> = ({ element }) => {
+  const router = useRouter();
+  const onNextPageHandler = () => {
+    router.push("/organization/dashboard");
+  };
+  return (
+    <>
+      <Card
+        title={element.name}
+        type="inner"
+        extra={
+          <a onClick={onNextPageHandler} href="#">
+            More
+          </a>
+        }
+      >
+        <p>{element.address}</p>
+        <p>{element.phone}</p>
+      </Card>
+    </>
+  );
+};

front/src/app/organization/OrgCreatePage.tsx

@@ -0,0 +1,105 @@
+// 2. Страница создания организации (Organization Creation Page)
+// Поля для ввода: Предоставить поля для ввода названия организации и дополнительной информации, такой как адрес и контактные данные.
+// Кнопка создания: Иметь кнопку "Создать", которая активируется только после заполнения всех необходимых полей.
+// Обратная связь: Показывать сообщения об ошибках или подтверждение успешного создания организации.
+
+//* <h1>{seed.join("\n")}</h1> */shtuchka kak map
+
+"use client";
+import React from "react";
+import { Button, Modal } from "antd";
+import { useState } from "react";
+
+import { OrgForm } from "./OrgForm";
+import { OrganizationCard } from "./OrgCard";
+import { FolderOpenTwoTone } from "@ant-design/icons";
+
+type OrgData = {
+  name: string;
+  address: string;
+  phone: number;
+};
+export function OrgCreatePage() {
+  const [organizations, setOrganizations] = useState([
+    {
+      name: "My Company",
+      address: "2930 Pearl St Boulder, CO 80301 United States",
+      phone: "+1303-245-0086",
+    },
+  ]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const onFinish = (values: any) => {
+    handleOk();
+    setOrganizations((prev: any[]) => [...prev, formData]);
+    setFormData({});
+  };
+  const [formData, setFormData] = useState({});
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <>
+      <div className="flex relative  overflow-hidden  flex-col w-2/3 h-3/4 items-center justify-center z-30 gap-5 bg-white border-solid border rounded-md border-neutral-300 text-neutral-500">
+        <div className="w-full h-20   bg-[#1677FF] absolute top-0 flex items-center z-40 justify-center">
+          <h1 className="text-white text-xl font-semibold">
+            Your Organizations
+          </h1>
+        </div>
+        <div></div>
+        <div className="flex flex-col relative  w-full h-3/4  items-center  overflow-scroll gap-10  p-10 z-0">
+          {organizations.length === 0 && (
+            <FolderOpenTwoTone style={{ fontSize: "400%" }} />
+          )}
+          {organizations.length ? (
+            organizations.map((element: any) => {
+              return (
+                <div className="flex flex-col min-w-full  ">
+                  <OrganizationCard element={element} />
+                </div>
+              );
+            })
+          ) : (
+            <em>Your Organization list is currently empty.</em>
+          )}
+
+          <div>
+            <Modal
+              width={1000}
+              centered
+              title="Please input information"
+              open={isModalOpen}
+              okText="Submit"
+              onOk={onFinish}
+              okButtonProps={{
+                disabled: !(Object.values(formData).length === 3),
+              }}
+              onCancel={handleCancel}
+            >
+              <OrgForm setFormData={setFormData} />
+            </Modal>
+          </div>
+        </div>
+        <div className=" flex z-40 ">
+          <Button
+            style={{ width: "150px" }}
+            size="large"
+            type="primary"
+            onClick={showModal}
+          >
+            Create
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}

front/src/app/organization/OrgForm.tsx

@@ -0,0 +1,105 @@
+"use client";
+import React, { useState } from "react";
+import { Button, Form, Input, Select, Space } from "antd";
+import { useRouter } from "next/navigation";
+export function OrgForm({ setFormData }) {
+  const { Option } = Select;
+  const prefixSelector = (
+    <Form.Item name="prefix" noStyle>
+      <Select style={{ width: 70 }}>
+        <Option value="86">+86</Option>
+        <Option value="87">+87</Option>
+      </Select>
+    </Form.Item>
+  );
+  const router = useRouter();
+  const onNextPageHandler = () => {
+    router.push("/organization/dashboard");
+  };
+  return (
+    <div className="bg-white p-10 flex items-center justify-start pl-36">
+      <Form
+        name="complex-form"
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 16 }}
+        style={{ maxWidth: 600 }}
+      >
+        <div>
+          <Form.Item label="Organization name">
+            <Space>
+              <Form.Item
+                noStyle
+                rules={[
+                  {
+                    required: true,
+                    message: "Organization name is required",
+                  },
+                ]}
+              >
+                <Input
+                  name="name"
+                  style={{ width: 350 }}
+                  onInput={(e: any) =>
+                    setFormData((prev: object) => ({
+                      ...prev,
+                      [e.target.name]: e.target.value,
+                    }))
+                  }
+                />
+              </Form.Item>
+            </Space>
+          </Form.Item>
+          <Form.Item label="Address">
+            <Space>
+              <Form.Item
+                name="address"
+                noStyle
+                rules={[{ required: true, message: "Address is required" }]}
+              >
+                <Input
+                  name="address"
+                  onInput={(e: any) =>
+                    setFormData((prev: object) => ({
+                      ...prev,
+                      [e.target.name]: e.target.value,
+                    }))
+                  }
+                  style={{ width: 350 }}
+                />
+              </Form.Item>
+            </Space>
+          </Form.Item>
+          <Form.Item label="Phone Number">
+            <Space>
+              <Form.Item
+                noStyle
+                rules={[
+                  {
+                    required: true,
+                    message: "Please input phone number",
+                  },
+                ]}
+              >
+                <Input
+                  name="phone"
+                  addonBefore={prefixSelector}
+                  style={{ width: 350 }}
+                  onInput={(e: any) =>
+                    setFormData((prev: object) => ({
+                      ...prev,
+                      [e.target.name]: e.target.value,
+                    }))
+                  }
+                  type="number"
+                  required
+                  minLength={9}
+                  maxLength={9}
+                />
+              </Form.Item>
+            </Space>
+          </Form.Item>
+        </div>
+      </Form>
+    </div>
+  );
+}

front/src/app/organization/dashboard/OrgProfile.tsx

@@ -0,0 +1,246 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Card } from "antd";
+import {
+  AppstoreOutlined,
+  ContainerOutlined,
+  DesktopOutlined,
+  MailOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  PieChartOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+import type { MenuProps } from "antd";
+import {
+  Button,
+  Menu,
+  List,
+  Divider,
+  Typography,
+  Avatar,
+  Skeleton,
+} from "antd";
+interface DataType {
+  gender?: string;
+  name: {
+    title?: string;
+    first?: string;
+    last?: string;
+  };
+  email?: string;
+  picture: {
+    large?: string;
+    medium?: string;
+    thumbnail?: string;
+  };
+  nat?: string;
+  loading: boolean;
+}
+const count = 3;
+const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`;
+
+type MenuItem = Required<MenuProps>["items"][number];
+const data = [
+  "Ackee Blockchain is a team of auditors and white hat hackers who perform security audits and assessments for Ethereum and Solana.",
+  "Global blockchain services company and Initial Coin Offering solutions provider",
+  "AutoMinter is a decentralized no-code NFT collection generation platform.",
+  "BANKEX will create smart contracts of any complexity for your projects in the Solidity language.",
+  "Securing the DeFi ecosystem",
+];
+
+const items: MenuItem[] = [
+  { key: "1", icon: <PieChartOutlined />, label: "Wallet Info" },
+  { key: "2", icon: <DesktopOutlined />, label: "Option 2" },
+  { key: "3", icon: <ContainerOutlined />, label: "Contracts" },
+  {
+    key: "sub1",
+    label: "Navigation One",
+    icon: <MailOutlined />,
+    // children: [
+    //   { key: "5", label: "Option 5" },
+    //   { key: "6", label: "Option 6" },
+    // ],
+  },
+  {
+    key: "sub2",
+    label: "Navigation Two",
+    icon: <AppstoreOutlined />,
+    children: [
+      { key: "9", label: "Option 9" },
+      { key: "10", label: "Option 10" },
+      {
+        key: "sub3",
+        label: "Submenu",
+        children: [
+          { key: "11", label: "Option 11" },
+          { key: "12", label: "Option 12" },
+        ],
+      },
+    ],
+  },
+];
+const { Title } = Typography;
+export function OrgProfile() {
+  const [collapsed, setCollapsed] = useState(true);
+  const [initLoading, setInitLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [dataEmployees, setData] = useState<DataType[]>([]);
+  const [list, setList] = useState<DataType[]>([]);
+
+  const router = useRouter();
+  const onNextPageHandler = () => {
+    router.push("/organization/employees");
+  };
+  const onMultisigPageHandler = () => {
+    router.push("/organization/multiSig");
+  };
+  useEffect(() => {
+    fetch(fakeDataUrl)
+      .then((res) => res.json())
+      .then((res) => {
+        setInitLoading(false);
+        setData(res.results);
+        setList(res.results);
+      });
+  }, []);
+  const onLoadMore = () => {
+    setLoading(true);
+    setList(
+      dataEmployees.concat(
+        [...new Array(count)].map(() => ({
+          loading: true,
+          name: {},
+          picture: {},
+        }))
+      )
+    );
+    fetch(fakeDataUrl)
+      .then((res) => res.json())
+      .then((res) => {
+        const newData = dataEmployees.concat(res.results);
+        setData(newData);
+        setList(newData);
+        setLoading(false);
+        // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
+        // In real scene, you can using public method of react-virtualized:
+        // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
+        window.dispatchEvent(new Event("resize"));
+      });
+  };
+  const loadMore =
+    !initLoading && !loading ? (
+      <div
+        style={{
+          textAlign: "center",
+          marginTop: 12,
+          height: 32,
+          lineHeight: "32px",
+        }}
+      >
+        <Button onClick={onLoadMore}>loading more</Button>
+      </div>
+    ) : null;
+
+  return (
+    <div className="flex flex-row w-full h-full bg-slate-50 gap-5 pb-20 px-30 p-10">
+      <div className="w-24 py-2">
+        <div>
+          <Menu
+            style={{
+              borderRadius: 8,
+              height: "228px",
+              border: "solid 1px #1677FF",
+            }}
+            defaultSelectedKeys={["1"]}
+            defaultOpenKeys={["sub1"]}
+            mode="inline"
+            theme="light"
+            inlineCollapsed={collapsed}
+            items={items}
+          />
+        </div>
+      </div>
+      <div className="flex flex-col w-11/12  pr-10">
+        <Title style={{ color: "#302d43", textIndent: 15 }}>Dashboard</Title>
+        <Card
+          title="Organization Name"
+          bordered={false}
+          style={{ width: "60%" }}
+        >
+          <p>Address</p>
+          <p>Phone</p>
+          <p>Description</p>
+        </Card>
+        <div className="flex  w-full justify-end ">
+          <Button
+            type="primary"
+            size={"large"}
+            style={{ width: "240px" }}
+            onClick={onMultisigPageHandler}
+          >
+            Create Multisig contract
+          </Button>
+        </div>
+        <Divider
+          style={{ color: "#1677FF" }}
+          orientation="left"
+          orientationMargin="0"
+        >
+          Recent Activities
+        </Divider>
+        <List
+          bordered
+          dataSource={data}
+          renderItem={(item) => (
+            <List.Item>
+              <Typography.Text mark></Typography.Text> {item}
+            </List.Item>
+          )}
+        />
+        <div className="flex  w-full justify-end ">
+          <Button
+            type="primary"
+            size={"large"}
+            style={{ width: "180px", marginTop: 20 }}
+            onClick={onNextPageHandler}
+          >
+            Add new employee
+          </Button>
+        </div>
+        <Divider
+          style={{ color: "#1677FF" }}
+          orientation="left"
+          orientationMargin="0"
+        >
+          Employee List
+        </Divider>
+        <List
+          className="demo-loadmore-list"
+          loading={initLoading}
+          itemLayout="horizontal"
+          loadMore={loadMore}
+          dataSource={list}
+          renderItem={(item) => (
+            <List.Item
+              actions={[
+                <a key="list-loadmore-edit">edit</a>,
+                <a key="list-loadmore-more">more</a>,
+              ]}
+            >
+              <Skeleton avatar title={false} loading={item.loading} active>
+                <List.Item.Meta
+                  avatar={<Avatar icon={<UserOutlined />} />}
+                  title={<a href="https://ant.design">{item.name?.last}</a>}
+                  description="1Lbcfr7sAHTD9CgdQo3HTMTkV8LK4ZnX71"
+                />
+                <div>wallet address</div>
+              </Skeleton>
+            </List.Item>
+          )}
+        />
+      </div>
+    </div>
+  );
+}

front/src/app/organization/dashboard/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+import React from "react";
+import { OrgProfile } from "./OrgProfile";
+
+export default function Home() {
+  return <OrgProfile />;
+}

front/src/app/organization/employees/Employee.tsx

@@ -0,0 +1,43 @@
+// 3. Страница приглашения сотрудников (Employee Invitation Page)
+// Генерация ссылки: Реализовать функционал для генерации и отправки пригласительной ссылки сотрудникам.
+// Ввод SEED_KEY: Предоставить поле для ввода SEED_KEY при регистрации сотрудника, с возможностью генерации нового SEED_KEY для новых пользователей.
+
+"use client";
+import React, { useState, useEffect } from "react";
+import { Input, Button, Typography, Space } from "antd";
+import { MailOutlined, CopyOutlined } from "@ant-design/icons";
+export function EmployeePage() {
+  const { Text } = Typography;
+  return (
+    <div className="flex relative  overflow-hidden flex-col w-2/3 h-3/4 items-center justify-center gap-10 bg-white border-solid border rounded-md border-neutral-300 text-neutral-500">
+      <div className="w-full h-20    bg-[#1677FF] absolute top-0 flex items-center justify-center">
+        <h1 className="text-white text-xl font-semibold">Invite</h1>
+      </div>
+      <div className="flex flex-col  w-9/12 pb-36 gap-5 items-start ">
+        <Text type="secondary">Invite new Employee</Text>
+        <Space.Compact style={{ width: "100%" }}>
+          <Input size="large" addonBefore="E-mail" />
+          <Button
+            size="large"
+            icon={<MailOutlined />}
+            style={{ width: 210 }}
+            type="primary"
+          >
+            Send Invite
+          </Button>
+        </Space.Compact>
+        <Space.Compact style={{ width: "100%" }}>
+          <Input size="large" placeholder="invitation link" />
+          <Button
+            size="large"
+            icon={<CopyOutlined />}
+            style={{ width: 210 }}
+            type="primary"
+          >
+            Copy Link Invite
+          </Button>
+        </Space.Compact>
+      </div>
+    </div>
+  );
+}

front/src/app/organization/employees/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+import React from "react";
+import { EmployeePage } from "./Employee";
+
+export default function Home() {
+  return (
+    <div className="flex w-full h-screen items-center justify-center bg-white">
+      <EmployeePage />
+    </div>
+  );
+}

front/src/app/organization/multiSig/MultiSigPage.tsx

@@ -0,0 +1,80 @@
+"use client";
+import React, { useState } from "react";
+import { Input } from "antd";
+import { Typography } from "antd";
+import { Card } from "antd";
+import type { InputNumberProps } from "antd";
+import { Col, InputNumber, Row, Slider, Space, Button } from "antd";
+
+const { Title } = Typography;
+
+export function MultisigPage() {
+  const [inputValue, setInputValue] = useState(1);
+  const onChange: InputNumberProps["onChange"] = (newValue) => {
+    setInputValue(newValue as number);
+  };
+  return (
+    <div className="flex flex-col w-full h-full px-28 py-20 gap-10 ">
+      <div className="flex flex-col w-1/3">
+        <Title level={3}>Create a new Multisig</Title>
+        <Input size="large" placeholder="Multisig Name/Label" />
+      </div>
+      <div className="flex  w-full  ">
+        <Card style={{ width: "100%" }}>
+          <Title level={4}>Signers</Title>
+          <div className="flex flex-row gap-5">
+            <div className="flex flex-col gap-2 w-1/4">
+              <Input placeholder="Name" />
+              <Input placeholder="Name" />
+              <Input placeholder="Name" />
+            </div>
+            <div className="flex flex-col gap-2 w-full">
+              <Input placeholder="Pubic Key" />
+              <Input placeholder="Pubic Key" />
+              <Input placeholder="Pubic Key" />
+            </div>
+          </div>
+          <div className="flex  w-full justify-end mt-5">
+            <Button size={"large"} type="primary">
+              Add Signer
+            </Button>
+          </div>
+        </Card>
+      </div>
+      <div className="mt-20">
+        <Card style={{ width: "100%" }}>
+          <Row
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+            }}
+          >
+            <Col span={12}>
+              <Slider
+                min={1}
+                max={20}
+                onChange={onChange}
+                value={typeof inputValue === "number" ? inputValue : 0}
+              />
+            </Col>
+            <Col span={4}>
+              <InputNumber
+                min={1}
+                max={20}
+                style={{ margin: "0 16px" }}
+                value={inputValue}
+                onChange={onChange}
+              />
+            </Col>
+          </Row>
+        </Card>
+      </div>
+      <div className="flex  w-full justify-end pr-5">
+        <Button size={"large"} type="primary">
+          Create Multisig
+        </Button>
+      </div>
+    </div>
+  );
+}

front/src/app/organization/multiSig/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+import React from "react";
+import { MultisigPage } from "./MultiSigPage";
+
+export default function Home() {
+  return (
+    <div className="flex flex-col w-full h-screen bg-slate-50">
+      <MultisigPage />
+    </div>
+  );
+}

front/src/app/organization/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+import React from "react";
+import { OrgCreatePage } from "./OrgCreatePage";
+// вместо этого надо класть большие компоненты
+
+export default function organization() {
+  return (
+    <div className="flex w-full h-screen items-center justify-center bg-white">
+      <OrgCreatePage />
+    </div>
+  );
+}

front/src/app/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+import { LoginPage } from "./login/LoginPage";
+
+export default function Home() {
+  return (
+    <div className="flex w-full h-screen items-center justify-center bg-white">
+      <LoginPage />
+    </div>
+  );
+}

front/src/app/seedItem/SeedItem.tsx

@@ -0,0 +1,20 @@
+"use client";
+import { useState, useEffect, FC } from "react";
+
+import { Card } from "antd";
+import React from "react";
+// type SeedData = {
+//   seed: string;
+// };
+type SeedItemProps = {
+  seed: string;
+};
+export const SeedItem: FC<SeedItemProps> = ({ seed }) => {
+  console.log(seed);
+
+  return (
+    <Card size="small" style={{ minWidth: 100 }}>
+      <p>{seed}</p>
+    </Card>
+  );
+};

front/src/hooks/login.tsx

@@ -0,0 +1,15 @@
+import { useState } from "react";
+
+export default function useLoginHooks() {
+  const [passwordVisible, setPasswordVisible] = useState([]);
+  const [seed, setSeed] = useState<string[]>([]);
+
+  const getSeed = (string: string) => {
+    if (seed.length < 12) {
+      setSeed((prev) => [...prev, string]);
+    }
+  };
+  console.log(seed);
+
+  return { passwordVisible, setPasswordVisible, seed, getSeed };
+}

front/tailwind.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

front/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}