feat: add new org creation page

front/pages/organizations/new.tsx

@@ -1,13 +1,45 @@
-import React from 'react'
-import Layout from '../../components/ui/layout'
-import { Title } from '../../components/ui/styles/title'
+import React from "react";
+import Layout from "../../components/ui/layout";
+import { Title } from "../../components/ui/styles/title";
+import { createNewOrganization } from "../../services/orgs";
 
 const Organizations = () => {
+  const [name, setName] = React.useState("");
+  const [description, setDescription] = React.useState("");
+  const [email, setEmail] = React.useState("");
+
+  const handleNameChange = (e: any) => {
+    setName(e.target.value);
+  };
+
+  const handleDescriptionChange = (e: any) => {
+    setDescription(e.target.value);
+  };
+
+  const handleEmailChange = (e: any) => {
+    setEmail(e.target.value);
+  };
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    console.log({ name, description, email });
+    const status = await createNewOrganization({ name, description, email });
+   alert(JSON.stringify(status));
+
+  };
+
   return (
     <Layout>
-        <Title>New Organization</Title> 
+      <Title>New Organization</Title>
+      Name: <input onChange={handleNameChange} type="text" />
+      <br />
+      Description: <input onChange={handleDescriptionChange} type="text" />
+      <br />
+      Email Address: <input onChange={handleEmailChange} type="text" />
+      <br />
+      <button onClick={handleSubmit}>Create</button>
     </Layout>
-  )
-}
+  );
+};
 
-export default Organizations
+export default Organizations;

front/services/orgs.ts

@@ -15,11 +15,25 @@ export async function getUserOrganizations() {
     .catch((error) => console.log("error", error));
 }
 
-// export async function createNewOrganization(user_id) {}
+export async function createNewOrganization(body: any) {
+  const HeadersConfig = new Headers({ "Content-Type": "application/json" });
+
+  const requestOptions: any = {
+    method: "POST",
+    headers: HeadersConfig,
+    redirect: "follow",
+    credentials: "include",
+    body: JSON.stringify(body),
+  };
+
+  return fetch(`${getAPIUrl()}orgs/`, requestOptions)
+    .then((result) => result.json())
+    .catch((error) => console.log("error", error));
+}
 
 // export async function getOrganizationData(org_id) {}
 
-export async function deleteOrganizationFromBackend(org_id:any) {
+export async function deleteOrganizationFromBackend(org_id: any) {
   const HeadersConfig = new Headers({ "Content-Type": "application/json" });
 
   const requestOptions: any = {