initial commit

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtWelcome />
+  </div>
+</template>

components/ApprovedStatus.vue

@@ -0,0 +1,3 @@
+<template>
+    <div class="badge bg-green-200 text-green-600">APPROVED</div>
+</template>

components/FilterButtons.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="flex space-x-4 ">
+    <button class="btn btn-sm">All</button>
+    <button class="btn btn-sm bg-green-200 text-green-600 hover:bg-green-300">Approved</button>
+    <button class="btn btn-sm bg-amber-200 text-amber-600 hover:bg-amber-300">Pending</button>
+    <button class="btn btn-sm bg-red-200 text-red-500 hover:bg-red-300">Rejected</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+</style>

components/GenerateLinkModal.vue

@@ -0,0 +1,159 @@
+<template>
+  <Teleport to="body">
+    <div class="fixed z-10 inset-0 overflow-y-auto" @click.self="$emit('close')">
+      <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 sm:p-0">
+        <div class="fixed inset-0 transition-opacity">
+          <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+        </div>
+
+        <div class="bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all w-1200 h-1200 p-6"
+          role="dialog" aria-modal="true" aria-labelledby="modal-headline">
+          <!-- Centered title -->
+          <h3 class="text-lg leading-6 font-medium text-gray-900 text-center mb-6" id="modal-headline">
+            Incomming invoce
+          </h3>
+
+          <!-- Option buttons aligned horizontally -->
+          <div class="mb-6">
+            <h4 class="font-semibold text-gray-700 mb-2">1. Select the options to include in the Invoice for thorough
+              validation.</h4>
+            <div class="mt-2 space-x-4">
+              <button :class="option1Selected ? 'bg-selected text-selected-text' : 'bg-white text-gray-500'"
+                @click="option1Selected = !option1Selected" class="px-4 py-2 border rounded">
+                SWIFT
+              </button>
+              <button :class="option2Selected ? 'bg-selected text-selected-text' : 'bg-white text-gray-500'"
+                @click="option2Selected = !option2Selected" class="px-4 py-2 border rounded">
+                EUR
+              </button>
+              <button :class="option3Selected ? 'bg-selected text-selected-text' : 'bg-white text-gray-500'"
+                @click="option3Selected = !option3Selected" class="px-4 py-2 border rounded">
+                Address
+              </button>
+              <button :class="option4Selected ? 'bg-selected text-selected-text' : 'bg-white text-gray-500'"
+                @click="option4Selected = !option4Selected" class="px-4 py-2 border rounded">
+                Name
+              </button>
+
+            </div>
+          </div>
+
+          <!-- Select bank account -->
+          <div class="mb-6">
+            <h4>2. Select you Bank Account to pay this Invoice. *</h4>
+            <div class="mt-2 flex space-x-4 overflow-x-auto">
+              <div v-for="account in accounts" :key="account.id" @click="toggleSelection(account.id)"
+                class="card w-60 h-40 bg-base-100 border border-gray-300 relative cursor-pointer">
+                <!-- Checkbox -->
+                <input type="checkbox" :checked="account.selected" @change="toggleSelection(account.id)" class="checkbox checkbox-primary absolute top-2 right-2" />
+
+                <!-- Icon and Content -->
+                <div class="card-body flex">
+                  <!-- Icon Placeholder -->
+                  <i class="fas fa-bank text-xl mr-4 self-center"></i>
+                  <div>
+                    <h2 class="card-title">UBS</h2>
+                    <p>IBM LLC</p>
+                    <p>DE***7896</p>
+                    <hr>
+                    <div class="card-actions justify-end">
+                      <p>EUR</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Input fields for amount and currency -->
+          <div class="mb-6">
+            <h4 class="font-semibold text-gray-700 mb-2">4. Please specify both the amount and currency for this invoice:
+              *</h4>
+            <div class="flex space-x-4">
+              <input type="text" placeholder="Amount" class="mt-1 form-input w-1/2 border-gray-300 rounded">
+              <div class="relative w-1/2">
+                <select class="form-select block w-full mt-1 border-gray-300 rounded">
+                  <option>USD</option>
+                  <option>EUR</option>
+                  <option>JPY</option>
+                  <!-- Add more currencies as needed -->
+                </select>
+              </div>
+            </div>
+          </div>
+
+          <!-- Input fields for Suppliers name and Description -->
+          <div class="mb-6 flex space-x-4">
+            <div class="w-1/2">
+              <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">5. Invoice description</label>
+              <input type="text"
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                placeholder="Describe what the invoice is for">
+            </div>
+
+            <div class="w-1/2">
+              <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">6. Suppliers name</label>
+              <input type="text"
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                placeholder="First and Last Name">
+            </div>
+          </div>
+
+          <!-- Centered Generate Link button -->
+          <div class="flex justify-center mt-6 mb-4">
+            <button class="px-4 py-2 bg-blue-600 text-white rounded shadow">Generate link</button>
+          </div>
+
+          <!-- Close button -->
+          <button @click="$emit('close')"
+            class="absolute top-0 right-0 m-4 p-1 bg-gray-200 hover:bg-gray-300 rounded-full">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+              class="h-6 w-6 text-gray-600">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const emits = defineEmits(["close"]);
+
+const option1Selected = ref(false);
+const option2Selected = ref(false);
+const option3Selected = ref(false);
+const option4Selected = ref(false);
+
+// Sample bank accounts
+const accounts = ref([
+  { id: 1, selected: false },
+  { id: 2, selected: false }
+]);
+
+function toggleSelection(id: number) {
+  const account = accounts.value.find(acc => acc.id === id);
+  if (account) {
+    account.selected = !account.selected;
+  }
+}
+</script>
+
+<style scoped>
+.bg-selected {
+  background-color: #D7DCFF;
+}
+
+.text-selected-text {
+  color: #3751FF;
+}
+
+/* Custom checkbox */
+input[type="checkbox"] {
+  height: 20px;
+  width: 20px;
+  cursor: pointer;
+}
+</style>

components/GetNewInvoiceButton.vue

@@ -0,0 +1,9 @@
+<template>
+  <button class="btn btn-primary text-white">New Invoice
+  </button>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped></style>

components/InvoicesTable.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <div class="overflow-x-auto">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>
+              <label>
+                <input type="checkbox" class="checkbox" />
+              </label>
+            </th>
+            <th>Name</th>
+            <th>Supplier's name</th>
+            <th>Link</th>
+            <th>Date</th>
+            <th>Status</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- Example row -->
+          <tr>
+            <th>
+              <label>
+                <input type="checkbox" class="checkbox" />
+              </label>
+            </th>
+            <td>Hart Hagerty</td>
+            <td>Zemlak, Daniel and Leannon</td>
+            <td>Purple</td>
+            <td>YYYY-MM-DD</td>
+            <td><ApprovedStatus/></td>
+          </tr>
+          <tr>
+            <th>
+              <label>
+                <input type="checkbox" class="checkbox" />
+              </label>
+            </th>
+            <td>Hart Hagerty</td>
+            <td>Zemlak, Daniel and Leannon</td>
+            <td>Purple</td>
+            <td>YYYY-MM-DD</td>
+            <td><PendingStatus/></td>
+          </tr>
+          <tr>
+            <th>
+              <label>
+                <input type="checkbox" class="checkbox" />
+              </label>
+            </th>
+            <td>Hart Hagerty</td>
+            <td>Zemlak, Daniel and Leannon</td>
+            <td>Purple</td>
+            <td>YYYY-MM-DD</td>
+            <td><RejectedStatus/></td>
+          </tr>
+          <!-- Add more rows as needed -->
+        </tbody>
+        <tfoot>
+          <tr>
+            <th></th>
+            <th>Name</th>
+            <th>Supplier's name</th>
+            <th>Link</th>
+            <th>Date</th>
+            <th>Status</th>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // Add your script here if needed
+</script>
+
+<style scoped>
+  /* Add your styles here */
+</style>