add company and employee register forms

Spencer-Sch · Nov 18, 2023 · c2c8605 · c2c8605
1 parent 592d3ff
commit c2c8605
Show file tree

Hide file tree

Showing 3 changed files with 175 additions and 0 deletions.
diff --git a/packages/nextjs/components/web-3-crew/forms/RegisterCompanyForm.tsx b/packages/nextjs/components/web-3-crew/forms/RegisterCompanyForm.tsx
@@ -0,0 +1,78 @@
+import { FormEvent } from "react";
+import BackButton from "../buttons/BackButton";
+import { FormSteps } from "~~/pages/dapp";
+
+interface props {
+  updateFormState: (value: FormSteps) => void;
+}
+
+// interface FormData {
+//   companyName: string;
+//   companyType: string;
+// }
+
+const RegisterCompanyForm = ({ updateFormState }: props) => {
+  // const [formData, setFormData] = useState<FormData>({
+  //   companyName: "",
+  //   companyType: "",
+  // });
+
+  function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+  }
+
+  return (
+    <>
+      <BackButton updateFormState={updateFormState} target="signup" />
+      <form onSubmit={handleSubmit} className="flex flex-col items-center justify-center pt-10 w-1/3">
+        <div className="form-control w-full max-w-md">
+          <label className="label">
+            <span className="label-text">Company Name</span>
+          </label>
+          <input type="text" placeholder="Google" className="input input-bordered w-full max-w-md rounded-lg" />
+        </div>
+
+        <div className="form-control w-full max-w-md">
+          <label className="label">
+            <span className="label-text">Company Type</span>
+          </label>
+          <select className="select select-bordered w-full max-w-md rounded-lg">
+            {/* <option disabled selected>
+              Select One
+            </option> */}
+            <option value={"corporation"}>Corporation</option>
+            <option value={"partnership"}>Partnership</option>
+            <option value={"other"}>Other</option>
+          </select>
+        </div>
+
+        <div className="form-control w-full max-w-md">
+          <label className="label">
+            <span className="label-text"># of Employees</span>
+          </label>
+          <input type="number" placeholder="100" className="input input-bordered w-full max-w-md rounded-lg" />
+        </div>
+
+        <div className="form-control w-full max-w-md">
+          <label className="label">
+            <span className="label-text">Admin Account</span>
+          </label>
+          <input type="text" placeholder="0x..." className="input input-bordered w-full max-w-md rounded-lg" />
+        </div>
+
+        <div className="form-control w-full max-w-md">
+          <label className="label">
+            <span className="label-text">Company Fund Public Address</span>
+          </label>
+          <input type="text" placeholder="0x..." className="input input-bordered w-full rounded-md max-w-md" />
+        </div>
+
+        <button type="submit" className="btn-block btn-square btn-primary rounded-lg mt-5 max-w-lg">
+          Create Company Account
+        </button>
+      </form>
+    </>
+  );
+};
+
+export default RegisterCompanyForm;
diff --git a/packages/nextjs/components/web-3-crew/forms/RegisterEmployeeForm.tsx b/packages/nextjs/components/web-3-crew/forms/RegisterEmployeeForm.tsx
@@ -0,0 +1,71 @@
+import { FormEvent } from "react";
+import BackButton from "../buttons/BackButton";
+import { FormSteps } from "~~/pages/dapp";
+
+interface props {
+  updateFormState: (value: FormSteps) => void;
+}
+
+const RegisterEmployeeForm = ({ updateFormState }: props) => {
+  function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+  }
+  return (
+    <>
+      <BackButton updateFormState={updateFormState} target="signup" />
+      <form onSubmit={handleSubmit} className="flex flex-col items-center justify-center pt-10 w-1/3">
+        <div className="form-control w-full max-w-md">
+          <label className="label">
+            <span className="label-text">First Name</span>
+          </label>
+          <input type="text" placeholder="John" className="input input-bordered w-full max-w-md rounded-lg" />
+        </div>
+
+        <div className="form-control w-full max-w-md">
+          <label className="label">
+            <span className="label-text">Last Name</span>
+          </label>
+          <input type="text" placeholder="Doe" className="input input-bordered w-full max-w-md rounded-lg" />
+        </div>
+
+        <div className="form-control w-full max-w-md">
+          <label className="label">
+            <span className="label-text">Wallet Address</span>
+          </label>
+          <input type="text" placeholder="0x..." className="input input-bordered w-full max-w-md rounded-lg" />
+        </div>
+
+        <div className="form-control w-full max-w-md">
+          <label className="label">
+            <span className="label-text">Employee ID</span>
+          </label>
+          <input type="text" placeholder="5001" className="input input-bordered w-full max-w-md rounded-lg" />
+        </div>
+
+        <div className="form-control w-full max-w-md">
+          <label className="label">
+            <span className="label-text">Company Contract Address</span>
+          </label>
+          <input type="text" placeholder="0x..." className="input input-bordered w-full max-w-md rounded-lg" />
+        </div>
+
+        {/* <div className="form-control w-full max-w-md">
+          <label className="label">
+            <span className="label-text">Frequency of Payment</span>
+          </label>
+          <select className="select select-bordered w-full max-w-md rounded-lg">
+            <option value={"weekly"}>Weekly</option>
+            <option value={"bi-monthly"}>Bi-Monthly</option>
+            <option value={"other"}>Other</option>
+          </select>
+        </div> */}
+
+        <button type="submit" className="btn-block btn-square btn-primary rounded-lg mt-5 max-w-lg">
+          Create Employee Account
+        </button>
+      </form>
+    </>
+  );
+};
+
+export default RegisterEmployeeForm;
diff --git a/packages/nextjs/pages/dapp.tsx b/packages/nextjs/pages/dapp.tsx
@@ -6,6 +6,8 @@ import CleanLayout from "~~/components/layouts/CleanLayout";
 import ExistingOrNewMember from "~~/components/web-3-crew/ExistingOrNewMember";
 import LoginEmailOrWallet from "~~/components/web-3-crew/LoginEmailOrWallet";
 import RegisterCompanyOrEmployee from "~~/components/web-3-crew/RegisterCompanyOrEmployee";
+import RegisterCompanyForm from "~~/components/web-3-crew/forms/RegisterCompanyForm";
+import RegisterEmployeeForm from "~~/components/web-3-crew/forms/RegisterEmployeeForm";
 
 export type FormSteps = "start" | "login" | "signup" | "register-company" | "register-employee";
 
@@ -45,6 +47,30 @@ const LandingPage: NextPageWithLayout = () => {
               <RegisterCompanyOrEmployee updateFormState={updateFormState} />
             </>
           )}
+
+          {/* Register Company Form */}
+          {formState === "register-company" && (
+            <>
+              <div className="px-5">
+                <h2 className="text-center mb-4 block text-3xl font-bold">Enter Company Information</h2>
+              </div>
+              <div className="flex items-center justify-center w-full">
+                <RegisterCompanyForm updateFormState={updateFormState} />
+              </div>
+            </>
+          )}
+
+          {/* Register Employee Form */}
+          {formState === "register-employee" && (
+            <>
+              <div className="px-5">
+                <h2 className="text-center mb-4 block text-3xl font-bold">Enter Your Employee Details</h2>
+              </div>
+              <div className="flex items-center justify-center w-full">
+                <RegisterEmployeeForm updateFormState={updateFormState} />
+              </div>
+            </>
+          )}
         </div>
       </div>
     </>