add new frontend

device-app/resources/views/devices/index.blade.php

@@ -1,17 +1,37 @@
 @extends('layout')
 
 @section('content')
-    <h1>Device List</h1>
-    @unless(count($devices) == 0)
-        <ul>
-            @foreach ($devices as $device)
-                <x-device-simple :device="$device" />
-            @endforeach
-        </ul>
+    <h3 class="title is-3 has-text-centered">Device List</h3>
+    @can('admin-only')
+        <div class="buttons is-right">
+            <a class="button is-small" href="devices/create">Create Device</a>
+        </div>
+    @endcan
+    @unless (count($devices) == 0)
+        <div class="table-container">
+            <table class="table is-narrow is-fullwidth is-striped is-hoverable">
+                <thead>
+                    <tr>
+                        <th>device_title</th>
+                        <th>device_type</th>
+                        <th>description</th>
+                        <th>accessories</th>
+                        <th>rz_username_buyer</th>
+                        <th>serial_number</th>
+                        <th>image_url</th>
+                        <th>room_code</th>
+                        <th>rz_username</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @foreach ($devices as $device)
+                        <x-device-simple :device="$device" />
+                    @endforeach
+                </tbody>
+            </table>
+        </div>
     @else
         <p>No devices found</p>
     @endunless
-    @can('admin-only')
-        <button><a href="devices/create">Device</a></button>
-    @endcan
+
 @endsection