4 files changed, 147 insertions, 15 deletions
diff --git a/src/classes/customer.ts b/src/classes/customer.ts
index e5d0fff..b1c2df3 100644
--- a/src/classes/customer.ts
+++ b/src/classes/customer.ts
@@ -1,21 +1,21 @@
 import Address from './address'
 
 export default class Customer {
-  name: string
-  gstin: string
-  contactname: string
-  phone: string
-  email: string
-  website: string
-  billingaddress: Address
+  Name: string
+  Gstin: string
+  ContactName: string
+  Phone: string
+  Email: string
+  Website: string
+  BillingAddress: Address
 
   constructor() {
-    this.name = ''
-    this.gstin = ''
-    this.contactname = ''
-    this.phone = ''
-    this.email = ''
-    this.website = ''
-    this.billingaddress = new Address()
+    this.Name = ''
+    this.Gstin = ''
+    this.ContactName = ''
+    this.Phone = ''
+    this.Email = ''
+    this.Website = ''
+    this.BillingAddress = new Address()
   }
 }
diff --git a/src/components/invoice_header.vue b/src/components/invoice_header.vue
new file mode 100644
index 0000000..2c62f15
--- /dev/null
+++ b/src/components/invoice_header.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ref, toRaw, onMounted } from 'vue'
+import axios from 'axios'
+import { useToast } from 'vue-toast-notification'
+
+const toast = useToast({
+  position: 'top-right'
+})
+
+const isLoading = ref(true)
+const allCustomers = ref([])
+
+const invoiceCustomer = ref(null)
+const invoiceNumber = ref(0)
+const invoiceDate = ref(new Date().toISOString().substr(0, 10))
+
+const handleDateChange = e => {
+  invoiceDate.value = e
+}
+
+const getAllCustomers = async () => {
+  allCustomers.value = []
+  isLoading.value = true
+
+  try {
+    const r = await axios.get('/customer')
+    if (r.status === 200) {
+      allCustomers.value = r.data.data
+    } else if (r.status === 204) {
+      toast.warning('No customers found')
+    }
+  } catch (err) {
+    toast.error('An unhandled exception occoured. Please check logs')
+    console.error(err)
+  }
+
+  isLoading.value = false
+}
+
+const submit = async (e) => {
+  e.preventDefault()
+  isLoading.value = true
+
+  try {
+    const c = toRaw(invoiceCustomer.value)
+
+    await axios.post('/invoice', {
+      "invoicenumber": toRaw(invoiceNumber.value),
+      "invoicedate": new Date(toRaw(invoiceDate.value)).toISOString(),
+      "isdraft": true,
+      "billingaddress": c.BillingAddress,
+      "shippingaddress": c.BillingAddress, // TODO
+      "customername": c.Name,
+      "customergstin": c.Gstin,
+      "customercontactname": c.ContactName,
+      "customerphone": c.Phone,
+      "customeremail": c.Email,
+      "customerwebsite": c.Website,
+    })
+  } catch (err) {
+    const statusCode = err.request.status
+    const res = JSON.parse(err.request.response)
+
+    switch (statusCode) {
+      case (400, 409):
+        toast.error(res.error)
+        break
+      default:
+        console.error(err)
+        toast.error('An unhandled exception occoured. Please check logs')
+    }
+  }
+
+  isLoading.value = false
+}
+
+onMounted(() => {
+  getAllCustomers()
+})
+</script>
+
+<template>
+  <form class="row g-12" v-on:submit="submit">
+    <div class="col-md-4">
+      <label for="item-brand-input" class="form-label">Customer</label>
+      <select
+        v-model="invoiceCustomer"
+        class="form-select"
+        aria-label="Select Brand"
+        id="item-brand-input"
+      >
+        <option selected disabled value="null">Select Customer</option>
+        <option v-for="customer in allCustomers" :value="customer" :key="customer.id">
+          {{ customer.Name }}
+        </option>
+      </select>
+    </div>
+
+    <div class="col-md-4">
+      <label for="invoice-number" class="form-label">Invoice Number</label>
+      <input id="invoice-number" class="form-control" type="number" v-model="invoiceNumber" min="0"/>
+    </div>
+
+    <div class="col-md-4">
+      <label for="invoice-date" class="form-label">Invoice Date</label>
+      <input
+        type="date"
+        id="invoice-date"
+        class="form-control"
+        :value="new Date().toISOString().substr(0, 10)"
+        @input="handleDateChange($event.target.value)" />
+    </div>
+
+    <div class="col-12">
+      <input type="submit" value="Continue" class="btn btn-primary" />
+    </div>
+  </form>
+</template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 568bad8..7719220 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,6 +8,7 @@ import AllCustomers from '../views/AllCustomers.vue'
 import NewCustomer from '../views/NewCustomer.vue'
 import AllItems from '../views/AllItems.vue'
 import NewItem from '../views/NewItem.vue'
+import NewInvoice from '../views/NewInvoice.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -59,7 +60,13 @@ const router = createRouter({
       name: 'new item',
       component: NewItem,
       meta: { isAuth: true }
-    }
+    },
+    {
+      path: '/invoice/new',
+      name: 'new invoice',
+      component: NewInvoice,
+      meta: { isAuth: true }
+    },
   ]
 })
 
diff --git a/src/views/NewInvoice.vue b/src/views/NewInvoice.vue
new file mode 100644
index 0000000..b2f32e2
--- /dev/null
+++ b/src/views/NewInvoice.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import invoiceHeader from './../components/invoice_header.vue'
+</script>
+
+<template>
+  <invoiceHeader />
+</template>