Show imports in SPA prototype

app/Http/Controllers/Api/ImportController.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Resources\ImportResource;
+use App\Models\Import;
+use Illuminate\Http\Request;
+
+class ImportController extends Controller
+{
+    public function index(Request $request)
+    {
+        /** @var ApiKey $apiKey */
+        $apiKey = $request->get('apiKey');
+
+        $imports = Import::query()
+            ->where('space_id', $apiKey->user->spaces()->first()->id)
+            ->latest()
+            ->get();
+
+        return ImportResource::collection($imports);
+    }
+}

app/Http/Resources/ImportResource.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class ImportResource extends JsonResource
+{
+    /** @var Import $resource */
+    public $resource;
+
+    public function toArray(Request $request): array
+    {
+        return [
+            'name' => $this->resource->name,
+            'status' => $this->resource->status,
+            'created_at' => $this->resource->created_at,
+        ];
+    }
+}

resources/assets/js/prototype/app.js

@@ -11,6 +11,7 @@ import Login from './screens/Login.vue';
 import Dashboard from './screens/Dashboard.vue';
 import TransactionsIndex from './screens/Transactions/Index.vue';
 import TransactionsCreate from './screens/Transactions/Create.vue';
+import ImportsIndex from './screens/Imports/Index.vue';
 import Activities from './screens/Activities.vue';
 import SettingsPreferences from './screens/Settings/Preferences.vue';
 
@@ -39,6 +40,10 @@ const routes = [
         path: '/prototype/transactions/create',
         name: 'transactions.create',
         component: TransactionsCreate,
+    }, {
+        path: '/prototype/imports',
+        name: 'imports.index',
+        component: ImportsIndex,
     }, {
         path: '/prototype/activities',
         name: 'activities',

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ArrowRightLeft, Home, LogOut, PlusCircle, RotateCcw, Settings2 } from 'lucide-vue';
+import { ArrowRightLeft, FileSpreadsheet, Home, LogOut, PlusCircle, RotateCcw, Settings2 } from 'lucide-vue';
 import { getCurrentInstance } from 'vue';
 
 const router = getCurrentInstance().proxy.$router;
@@ -28,6 +28,9 @@ const logOut = () => {
                 <router-link class="flex py-1 px-3 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white" :to="{ name: 'transactions.create' }">
                     <PlusCircle :size="20" :strokeWidth="1.6" />
                 </router-link>
+                <router-link class="flex py-1 px-3 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white" :to="{ name: 'imports.index' }">
+                    <FileSpreadsheet :size="16" />
+                </router-link>
                 <router-link class="flex py-1 px-3 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white" :to="{ name: 'activities' }">
                     <RotateCcw :size="16" />
                 </router-link>

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

@@ -0,0 +1,38 @@
+<script setup>
+import { ref } from 'vue';
+
+import Navigation from '../../components/Navigation.vue';
+
+const imports = ref([]);
+
+const fetchImports = () => {
+    fetch('/api/imports', { headers: { 'api-key': localStorage.getItem('api_key') } })
+        .then(response => response.json())
+        .then(data => {
+            imports.value = data;
+        });
+};
+
+fetchImports();
+</script>
+
+<template>
+    <div>
+        <Navigation />
+        <div class="max-w-3xl mx-auto my-10 space-y-10">
+            <div v-for="_import in imports">
+                <div class="py-4 px-5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+                    <div class="text-sm">{{ _import.name }}</div>
+                    <div class="mt-2 text-xs text-gray-500">Uploaded {{ new Intl.RelativeTimeFormat('en', { numeric: 'auto' }).format(Math.round((new Date(_import.created_at) - new Date()) / 86400000), 'day') }}</div>
+                    <div class="mt-4 flex items-center space-x-2">
+                        <div class="text-xs" :class="_import.status >= 0 ? 'text-green-600' : 'text-grey-500'">1. Upload</div>
+                        <div class="w-4 h-px" :class="_import.status >= 1 ? 'bg-green-600' : 'bg-black'"></div>
+                        <div class="text-xs" :class="_import.status >= 1 ? 'text-green-600' : 'text-grey-500'">2. Define columns</div>
+                        <div class="w-4 h-px" :class="_import.status >= 2 ? 'bg-green-600' : 'bg-black'"></div>
+                        <div class="text-xs" :class="_import.status >= 2 ? 'text-green-600' : 'text-grey-500'">3. Import</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

routes/api.php

@@ -2,6 +2,7 @@
 
 use App\Http\Controllers\Api\ActivitiesController;
 use App\Http\Controllers\Api\DashboardController;
+use App\Http\Controllers\Api\ImportController;
 use App\Http\Controllers\Api\LogInController;
 use App\Http\Controllers\Api\RecurringController;
 use App\Http\Controllers\Api\SettingsController;
@@ -26,6 +27,9 @@
 
         Route::get('/activities', ActivitiesController::class);
 
+        Route::resource('imports', ImportController::class)
+            ->only(['index']);
+
         Route::resource('settings', SettingsController::class)
             ->only(['index', 'store']);
     });