Extension point form

MySQL_conf_pbx/test1/reactcezenpbx/src/App.jsx

@@ -35,20 +35,8 @@ const router = createBrowserRouter([
 ]);
 
 function App() {
-  const [resetNave, navResetFunction] = useState(false);
-
-  const outerUpdate = () => {
-    console.log("Update");
-    navResetFunction((val) => (val = false));
-  };
-
   return (
-    <div
-      className="containment"
-      onClick={() => {
-        outerUpdate();
-      }}
-    >
+    <div className="containment">
       <RouterProvider router={router} />
       {/* <SignInUp /> */}
     </div>

MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/homePage.jsx

@@ -1,4 +1,5 @@
 import NavBar from "./navBar";
+import EndPoints from "../operations/endPoint";
 import "./home-page.css";
 
 import { Outlet } from "react-router-dom";
@@ -11,6 +12,7 @@ export default function LandingPage() {
       <article className="landing_screen">
         <p>Welcome to the landing page !</p>
       </article>
+      <EndPoints />
     </>
   );
 }

MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navBar.jsx

@@ -10,9 +10,12 @@ import { useState } from "react";
 export default function NavBar() {
   const navTo = useNavigate();
 
+  function navigateToHomePage() {
+    navTo("/");
+  }
   return (
     <nav className="navigation">
-      <div>
+      <div onClick={navigateToHomePage}>
         <CezenBanner className="cezen_banner_top" />
       </div>
       <div className="nav-item">

MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navStyleImpl.css

@@ -92,7 +92,7 @@
 .drop-down {
   position: absolute;
   /* the width of the drop down */
-  min-width: 16rem;
+  min-width: 17rem;
   padding: 1.4rem;
   padding-top: 2.4rem;
   background: rgba(0, 137, 133, 0);
@@ -112,12 +112,12 @@
 
 .pos_operations {
   top: 65%;
-  left: -1.5%;
+  left: -2.5%;
   transform: translate(-5%, 1%);
 }
 
 .pos_profile {
   top: 65%;
-  left: 58%;
+  left: 57%;
   transform: translate(-5%, 1%);
 }

MySQL_conf_pbx/test1/reactcezenpbx/src/components/login-logout/signInup.jsx

@@ -6,6 +6,7 @@ import "./logo_and_text.css";
 // admin signup
 // outlet is here displays the child routs
 import { Outlet } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 export default function SignInUp() {
   // user signup

MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/endPoint.jsx

@@ -1,3 +1,137 @@
+import "./end_points.css";
+import phoneSvgLogo from "../../assets/phone.svg";
+
 export default function EndPoints() {
-  return <div>Welcome to the End-Point page !</div>;
+  return (
+    <>
+      <div className="heading">
+        <h1>End point setup</h1>
+      </div>
+      {/* phone container */}
+      <div className="containment">
+        <form className="phone_container phones_spacing">
+          <div className="extension_number  rowSpacing_1to3 pills">
+            <label for="extension">Extension Number</label>
+            <input type="number" id="extension" name="extension_number" />
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
+              alias ab dolor illo voluptates ipsum sunt! Quas animi provident
+              natus corrupti dolores alias ducimus, nisi officiis quo,
+              veritatis, repellendus a!
+            </p>
+          </div>
+          <div className="transport  rowSpacing_1to3 pills">
+            <label for="transport">transport type</label>
+            <input type="text" id="transport" name="transport_type" />
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
+              alias ab dolor illo voluptates ipsum sunt! Quas animi provident
+              natus corrupti dolores alias ducimus, nisi officiis quo,
+              veritatis, repellendus a!
+            </p>
+          </div>
+          <div className="context  rowSpacing_1to3 pills">
+            <label for="context">context</label>
+            <input type="text" id="context" name="context" />
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
+              alias ab dolor illo voluptates ipsum sunt! Quas animi provident
+              natus corrupti dolores alias ducimus, nisi officiis quo,
+              veritatis, repellendus a!
+            </p>
+          </div>
+          <div className="disallow  rowSpacing_1to3 pills">
+            <label for="disallow">disallow</label>
+            <input type="text" id="disallow" name="disallow" />
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
+              alias ab dolor illo voluptates ipsum sunt! Quas animi provident
+              natus corrupti dolores alias ducimus, nisi officiis quo,
+              veritatis, repellendus a!
+            </p>
+          </div>
+          <div className="allow pills">
+            <label for="allow">allow</label>
+            <input type="text" id="allow" name="allow" />
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
+              alias ab dolor illo voluptates ipsum sunt! Quas animi provident
+              natus corrupti dolores alias ducimus, nisi officiis quo,
+              veritatis, repellendus a!
+            </p>
+          </div>
+          <div className="imageSvgPosition">
+            <img src={phoneSvgLogo} alt="sip phone" />
+          </div>
+          <div className="directMedia pills">
+            <label for="directMedia">direct media</label>
+            <input type="checkbox" id="directMedia" name="directMedia" />
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
+              alias ab dolor illo voluptates ipsum sunt! Quas animi provident
+              natus corrupti dolores alias ducimus, nisi officiis quo,
+              veritatis, repellendus a!
+            </p>
+          </div>
+          <div className="connectedLineMethod pills">
+            <label for="connectedLineMethod">connected line method</label>
+            <input
+              type="text"
+              id="connectedLineMethod"
+              name="connectedLineMethod"
+            />
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
+              alias ab dolor illo voluptates ipsum sunt! Quas animi provident
+              natus corrupti dolores alias ducimus, nisi officiis quo,
+              veritatis, repellendus a!
+            </p>
+          </div>
+          <div className="callerid pills">
+            <label for="callerid">Caller Id</label>
+            <input type="text" id="callerid" name="callerid" />
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
+              alias ab dolor illo voluptates ipsum sunt! Quas animi provident
+              natus corrupti dolores alias ducimus, nisi officiis quo,
+              veritatis, repellendus a!
+            </p>
+          </div>
+          <div className="dtmfMode pills">
+            <label for="dtmfMode">DMF Mode</label>
+            <input type="text" id="dtmfMode" name="dtmfMode" />
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
+              alias ab dolor illo voluptates ipsum sunt! Quas animi provident
+              natus corrupti dolores alias ducimus, nisi officiis quo,
+              veritatis, repellendus a!
+            </p>
+          </div>
+          <div className="mohsuggest pills">
+            <label for="mohsuggest">Mohsuggest</label>
+            <input type="text" id="mohsuggest" name="mohsuggest" />
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
+              alias ab dolor illo voluptates ipsum sunt! Quas animi provident
+              natus corrupti dolores alias ducimus, nisi officiis quo,
+              veritatis, repellendus a!
+            </p>
+          </div>
+          <div className="mailboxes pills">
+            <label for="mailboxes">Mail Box</label>
+            <input type="text" id="mailboxes" name="mailboxes" />
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
+              alias ab dolor illo voluptates ipsum sunt! Quas animi provident
+              natus corrupti dolores alias ducimus, nisi officiis quo,
+              veritatis, repellendus a!
+            </p>
+          </div>
+          <div className="extension_button">
+            <button>Create Extension</button>
+          </div>
+        </form>
+      </div>
+    </>
+  );
 }

MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/end_points.css

@@ -0,0 +1,127 @@
+.heading h1 {
+  text-align: center;
+  margin-top: 3rem;
+}
+
+.phone_container {
+  display: grid;
+  gap: 1rem;
+  font-size: 1.6rem;
+  margin-bottom: 2rem;
+}
+
+.phones_spacing {
+  grid-template-columns: repeat(4, 1fr);
+  margin-top: 4rem;
+}
+
+.phones_spacing > div {
+  min-height: 20rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  border: solid #008984a4 0.2rem;
+  border-radius: 1rem;
+}
+.pills label {
+  z-index: -1;
+  position: relative;
+  text-align: center;
+}
+.pills input {
+  padding: 0.8rem 1rem;
+  font-size: 1.6rem;
+  border-style: none;
+  border-radius: 0.6rem;
+  background-color: #0089843b;
+}
+
+.pills p {
+  color: #00898488;
+  transition: all 1s;
+}
+
+.pills:hover p {
+  color: #00635f;
+}
+
+.pills label::before {
+  content: "";
+  position: absolute;
+  top: -15%; /* Distance above the main element */
+  left: 100%;
+  transform: translateX(-50%);
+  font-size: 0.75rem;
+  width: 6px;
+  height: 6px;
+  background-color: #ff0000a1;
+  color: #333;
+  border-radius: 50%;
+}
+/* .phones_spacing > div label {
+  background-color: aqua;
+  margin-bottom: 2rem;
+  padding-bottom: 2rem;
+} */
+
+.rowSpacing_1to3 {
+}
+
+.extension_number {
+}
+
+.transport {
+}
+
+.context {
+}
+
+.disallow {
+}
+
+.allow {
+}
+
+.imageSvgPosition {
+  grid-column: 2/4;
+  grid-row: 2/4;
+  justify-self: center;
+  align-self: center;
+  padding: 0rem;
+  border: none !important;
+}
+
+.imageSvgPosition img {
+  transform: scale(1.9);
+}
+
+.directMedia {
+}
+
+.connectedLineMethod {
+}
+
+.callerid {
+}
+
+.dtmfMode {
+}
+
+.mohsuggest {
+}
+
+.mailboxes {
+}
+
+.extension_button {
+  justify-self: start;
+  align-self: start;
+  border: none !important;
+}
+
+.extension_button button {
+  margin: 0rem;
+  font-size: 1.6rem;
+  max-width: 14rem;
+}