3 files changed, 24 insertions, 25 deletions
diff --git a/src/components/Form/Document/DocumentInfoForm.tsx b/src/components/Form/Document/DocumentInfoForm.tsx
index 7f33046..6193233 100644
--- a/src/components/Form/Document/DocumentInfoForm.tsx
+++ b/src/components/Form/Document/DocumentInfoForm.tsx
@@ -6,7 +6,7 @@
  * Copyright (c) 2021 Vidhu Kant Sharma
 */
 
-import React/*, { useState }*/ from "react";
+import React, { useState } from "react";
 import { Person } from "./../../../interfaces";
 import "./../Form.scss";
 
@@ -14,14 +14,33 @@ import SelectClientForm from "./../People/SelectClientForm";
 
 interface Props {
   savedPeople: Person[]
+  invoiceNumber: number
+  setInvoiceNumber: any
 }
 
 const DocumentInfoForm: React.FC<Props> = (props) => {
+  const [invoiceNumber, setInvoiceNumber] = useState<number>(props.invoiceNumber);
   return (
     <div className={"DocumentInfoForm"}>
       <SelectClientForm 
         savedPeople={props.savedPeople}
       />
+
+      <div className={"documentInfoChild"}>
+        <label>
+          Invoice Number:
+            <input className={"smallInputBox"} type="number" step="0.0" value={invoiceNumber} onInput={
+              (event: React.FormEvent<HTMLInputElement>) => setInvoiceNumber(parseInt(event.currentTarget.value))
+            } required />
+        </label>
+
+        <label>
+          Invoice Date: <span>wtf do i do</span>
+        </label>
+      </div>
+
+      <div className={"documentInfoChild"}>
+      </div>
     </div>
   );
 }
diff --git a/src/components/Form/Document/MetaInfoForm.tsx b/src/components/Form/Document/MetaInfoForm.tsx
deleted file mode 100644
index bcddad6..0000000
--- a/src/components/Form/Document/MetaInfoForm.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * OpenBills - Self hosted browser app to generate and keep track of simple invoices
- * Version - 0
- * Licensed under the MIT license - https://opensource.org/licenses/MIT
- *
- * Copyright (c) 2021 Vidhu Kant Sharma
-*/
-
-import React from "react";
-import "./../Form.scss";
-
-const MetaInfoForm: React.FC = () => {
-  return (
-    <div className={"MetaInfoForm"}>
-      <form>
-      </form>
-    </div>
-  );
-}
-
-export default MetaInfoForm;
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 6a9e747..a850309 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -120,6 +120,10 @@ input {
 
 .DocumentInfoForm {
   @include formPane();
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
   width: 100%;
   min-height: 10rem;
   margin-bottom: 1.5rem;
@@ -148,9 +152,6 @@ input {
   font-size: $fontSize1;
 }*/
 
-.MetaInfoForm {
-  width: 60%;
-}
 
 @media only screen and (max-device-width: 480px) {
   .threePaneForm {