Create endpoint for fetching transactions

app/Http/Controllers/Api/TransactionController.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Resources\TransactionResource;
+use App\Models\Earning;
+use App\Models\Spending;
+
+class TransactionController extends Controller
+{
+    public function index()
+    {
+        $transactions = collect();
+
+        foreach (Earning::all() as $earning) {
+            $transactions->push($earning);
+        }
+
+        foreach (Spending::all() as $spending) {
+            $transactions->push($spending);
+        }
+
+        return TransactionResource::collection($transactions);
+    }
+}

app/Http/Resources/TransactionResource.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Models\Earning;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class TransactionResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        $isEarning = get_class($this->resource) === Earning::class;
+
+        return [
+            'id' => $this->id,
+            'type' => $isEarning ? 'earning' : 'spending',
+            'happened_on' => $this->happened_on,
+            'description' => $this->description,
+            'amount' => $this->amount,
+        ];
+    }
+}

app/Providers/AppServiceProvider.php

@@ -4,13 +4,16 @@
 
 use App\Helper;
 use App\Models\Space;
+use Illuminate\Http\Resources\Json\JsonResource;
 use Illuminate\Support\ServiceProvider;
 use Auth;
 
 class AppServiceProvider extends ServiceProvider
 {
     public function boot()
     {
+        JsonResource::withoutWrapping();
+
         view()->composer('*', function ($view) {
             $selectedSpace = session('space_id') ? Space::find(session('space_id')) : null;
 

resources/assets/js/prototype/app.js

@@ -5,6 +5,7 @@ import App from './components/App.vue';
 
 import Login from './screens/Login.vue';
 import Dashboard from './screens/Dashboard.vue';
+import TransactionsIndex from './screens/Transactions/Index.vue';
 
 Vue.use(VueRouter);
 
@@ -17,6 +18,10 @@ const routes = [
         path: '/prototype/dashboard',
         name: 'dashboard',
         component: Dashboard,
+    }, {
+        path: '/prototype/transactions',
+        name: 'transactions.index',
+        component: TransactionsIndex,
     },
 ];
 

resources/assets/js/prototype/components/Navigation.vue

@@ -0,0 +1,14 @@
+<script setup>
+//
+</script>
+
+<template>
+    <div class="py-4 border-b border-gray-100">
+        <div class="max-w-5xl mx-auto">
+            <div class="flex space-x-4">
+                <router-link class="py-2 px-3 block text-gray-700 rounded-md hover:bg-gray-100 hover:text-black" :to="{ name: 'dashboard' }">Dashboard</router-link>
+                <router-link class="py-2 px-3 block text-gray-700 rounded-md hover:bg-gray-100 hover:text-black" :to="{ name: 'transactions.index' }">Transactions</router-link>
+            </div>
+        </div>
+    </div>
+</template>

resources/assets/js/prototype/screens/Dashboard.vue

@@ -1,9 +1,10 @@
 <script setup>
-//
+import Navigation from '../components/Navigation.vue';
 </script>
 
 <template>
     <div>
+        <Navigation />
         <div class="max-w-5xl mx-auto my-10">
             Hello world
         </div>

resources/assets/js/prototype/screens/Transactions/Index.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+
+import Navigation from '../../components/Navigation.vue';
+
+const transactions = ref([]);
+
+const spans = computed(() => {
+    return transactions
+        .value
+        .map(transaction => {
+            const happenedOn = new Date(transaction.happened_on);
+
+            return {
+                month: happenedOn.getMonth() + 1,
+                year: happenedOn.getFullYear(),
+            };
+        })
+        .filter((span, i, spans) => {
+            return i === spans.findIndex(other => other.year === span.year && other.month === span.month);
+        })
+        .sort((a, b) => {
+            if (a.year === b.year) {
+                return b.month - a.month;
+            }
+
+            return b.year - a.year;
+        });
+});
+
+const getMonthName = (month) => {
+    const months = [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ];
+
+    return months[month - 1];
+};
+
+const getTransactionsBySpan = (span) => {
+    return transactions.value.filter(transaction => {
+        const happenedOn = new Date(transaction.happened_on);
+
+        return happenedOn.getMonth() + 1 === span.month && happenedOn.getFullYear() === span.year;
+    });
+};
+
+const fetchTransactions = () => {
+    fetch('/api/transactions')
+        .then(response => response.json())
+        .then(data => {
+            transactions.value = data;
+        });
+};
+
+onMounted(() => {
+    fetchTransactions();
+});
+</script>
+
+<template>
+    <div>
+        <Navigation />
+        <div class="max-w-3xl mx-auto my-10 space-y-10">
+            <div v-for="span in spans" class="flex">
+                <div class="w-48">
+                    <div class="font-medium">{{ getMonthName(span.month) }}</div>
+                    <div class="mt-1 text-sm text-gray-500">{{ span.year }}</div>
+                </div>
+                <div class="flex-1 space-y-1">
+                    <div class="flex items-center justify-between" v-for="transaction in getTransactionsBySpan(span)">
+                        <div class="text-sm text-gray-500">{{ transaction.description }}</div>
+                        <div class="text-sm" :class="'text-' + (transaction.type === 'earning' ? 'green' : 'red') + '-600'">+{{ (transaction.amount / 100).toFixed(2) }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

routes/api.php

@@ -1,6 +1,9 @@
 <?php
 
 use App\Http\Controllers\Api\LogInController;
+use App\Http\Controllers\Api\TransactionController;
 use Illuminate\Support\Facades\Route;
 
 Route::post('/log-in', LogInController::class);
+
+Route::get('/transactions', [TransactionController::class, 'index']);