From 92d159681c89999219dd56d7760ae799da300564 Mon Sep 17 00:00:00 2001
From: TDLaouer <tdlaouer@protonmail.com>
Date: Mon, 31 Aug 2026 23:51:21 +0200
Subject: [PATCH] wip: list items

---
 src/components/ItemColumn/ItemColumn.vue     | 22 ++++++++++++++++++++
 src/components/SpendColumns/SpendColumns.vue | 13 +++++++++++-
 src/components/SpendInput/SpendInput.spec.ts |  0
 src/components/SpendInput/SpendInput.vue     |  1 -
 src/pages/DashboardPage.vue                  |  2 --
 5 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ItemColumn/ItemColumn.vue
 delete mode 100644 src/components/SpendInput/SpendInput.spec.ts
 delete mode 100644 src/components/SpendInput/SpendInput.vue

diff --git a/src/components/ItemColumn/ItemColumn.vue b/src/components/ItemColumn/ItemColumn.vue
new file mode 100644
index 0000000..0443480
--- /dev/null
+++ b/src/components/ItemColumn/ItemColumn.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="flex flex-col gap-2 border-2 rounded p-2">
+    <h1 class="font-bold">Title</h1>
+
+    <div class="w-full max-h-100 overflow-y-auto">
+      <ul>
+        <li v-for="i in 100" :key="i">thing</li>
+      </ul>
+    </div>
+    <form class="flex w-full sm:w-auto min-w-0 gap-2" @submit.prevent="addItem">
+      <input
+        v-model="newItem"
+        type="text"
+        placeholder="Add an item..."
+        class="flex-1 min-w-0 border rounded-md px-2 py-1"
+      />
+      <button type="submit" class="px-3 py-1 border rounded-md">Add</button>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/src/components/SpendColumns/SpendColumns.vue b/src/components/SpendColumns/SpendColumns.vue
index 439348b..62f93b4 100644
--- a/src/components/SpendColumns/SpendColumns.vue
+++ b/src/components/SpendColumns/SpendColumns.vue
@@ -1 +1,12 @@
-<template>Spend Columns</template>
+<script setup lang="ts">
+import ItemColumn from '../ItemColumn/ItemColumn.vue'
+</script>
+
+<template>
+  <div class="flex flex-col sm:flex-row items-start justify-around gap-4 my-4">
+    <ItemColumn id="revenue"></ItemColumn>
+    <ItemColumn id="investments"></ItemColumn>
+    <ItemColumn id="mandatory"></ItemColumn>
+    <ItemColumn id="personal"></ItemColumn>
+  </div>
+</template>
diff --git a/src/components/SpendInput/SpendInput.spec.ts b/src/components/SpendInput/SpendInput.spec.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/SpendInput/SpendInput.vue b/src/components/SpendInput/SpendInput.vue
deleted file mode 100644
index c137549..0000000
--- a/src/components/SpendInput/SpendInput.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template>Spend Input</template>
diff --git a/src/pages/DashboardPage.vue b/src/pages/DashboardPage.vue
index a376add..5632aa8 100644
--- a/src/pages/DashboardPage.vue
+++ b/src/pages/DashboardPage.vue
@@ -2,7 +2,6 @@
 import Navbar from '@/components/Navbar/Navbar.vue'
 import RemainingAmount from '@/components/RemainingAmount/RemainingAmount.vue'
 import SpendColumns from '@/components/SpendColumns/SpendColumns.vue'
-import SpendInput from '@/components/SpendInput/SpendInput.vue'
 </script>
 
 <template>
@@ -10,6 +9,5 @@ import SpendInput from '@/components/SpendInput/SpendInput.vue'
     <div class="w-full rounded"><Navbar /></div>
     <div class="h-12 w-full rounded"><RemainingAmount /></div>
     <div class="h-128 w-full rounded"><SpendColumns /></div>
-    <div class="h-16 w-full rounded"><SpendInput /></div>
   </div>
 </template>