some styling

budgit.client/src/components/Category.vue

@@ -1,7 +1,10 @@
 <template>
-  <div class="component">
-    <p>{{category}}</p>
-
+  <div class="component flex justify-between bg-stone-800 hover:bg-green-300 hover:text-stone-900 mb-2 p-2 pr-0">
+    <h3 class="text-2xl">{{category.name}}</h3>
+    <div class="flex">
+    <p class="w-16 px-2 border-l-2 border-stone-900">${{totalSpent()}}</p>
+    <p class="w-16 px-2 border-l-2 border-stone-900">${{category.budgeted}}</p>
+    </div>
   </div>
 </template>
 
@@ -17,6 +20,15 @@ export default {
     }
   },
   setup(props){
+    return {
+      totalSpent() {
+        let total = 0;
+        for (let t = 0; t < props.category.transactions.length; t++) {
+          total += props.category.transactions[t].amount
+        }
+        return total
+      }
+    }
   }
 }
 

budgit.client/src/pages/OverviewPage.vue

@@ -1,10 +1,17 @@
 <template>
   <div class="component">
-    <p class="hover:text-green-300 cursor-pointer">Add Category</p>
+    <p class="hover:text-green-300 hidden md:block cursor-pointer">Add Category</p>
     <div class="flex md:mx-40 flex-col md:flex-row">
-      <div class="md:w-4/12 md:order-last">analysis container</div>
-      <div class="md:w-8/12">category container
-        <p v-for="c in categories" :key="c._id">{{c.name}}</p>
+      <div class="md:w-4/12 md:order-last my-4 md:my-0 bg-stone-800">analysis container</div>
+      <div class="md:w-8/12 md:mr-4">
+        <div class="flex justify-between bg-stone-700 text-green-300 hover:bg-green-200 hover:text-stone-900 mb-2 p-2 pr-0">
+          <h3 class="text-2xl font-semibold">Category</h3>
+          <div class="flex">
+            <p class="w-16 font-semibold px-2 border-l-2 border-stone-900">Spent</p>
+            <p class="w-16 font-semibold px-2 border-l-2 border-stone-900">Budg</p>
+          </div>
+        </div>
+        <Category v-for="c in categories" :key="c._id" :category="c" />
       </div>
     </div>
   </div>