feature: create Table component and integrate it into all the pages that required it

Author: marcmarfer

app/Http/Controllers/DeliveryNoteController.php

@@ -3,6 +3,8 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use App\Models\DeliveryNote;
+use Inertia\Inertia;
 
 class DeliveryNoteController extends Controller
 {
@@ -11,7 +13,10 @@ class DeliveryNoteController extends Controller
      */
     public function index()
     {
-        //
+        $deliveryNotes = DeliveryNote::all();
+        return Inertia::render('DeliveryNotes/Show', [
+            'delivery_notes' => $deliveryNotes
+        ]);
     }
 
     /**

resources/js/Components/DataTable.vue

@@ -0,0 +1,171 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+
+const props = defineProps({
+  data: {
+    type: Array,
+    required: true
+  },
+  columns: {
+    type: Array,
+    required: true
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 10
+  }
+});
+
+const currentPage = ref(1);
+
+const totalItems = computed(() => props.data.length);
+const totalPages = computed(() => Math.ceil(totalItems.value / props.itemsPerPage));
+
+const startIndex = computed(() => (currentPage.value - 1) * props.itemsPerPage);
+const endIndex = computed(() => Math.min(startIndex.value + props.itemsPerPage, totalItems.value));
+
+const paginatedData = computed(() => {
+  return props.data.slice(startIndex.value, endIndex.value);
+});
+
+const displayedPages = computed(() => {
+  const delta = 2;
+  const range = [];
+  const rangeWithDots = [];
+  let l;
+
+  for (let i = 1; i <= totalPages.value; i++) {
+    if (i === 1 || i === totalPages.value || 
+        (i >= currentPage.value - delta && i <= currentPage.value + delta)) {
+      range.push(i);
+    }
+  }
+
+  range.forEach(i => {
+    if (l) {
+      if (i - l === 2) {
+        rangeWithDots.push(l + 1);
+      } else if (i - l !== 1) {
+        rangeWithDots.push('...');
+      }
+    }
+    rangeWithDots.push(i);
+    l = i;
+  });
+
+  return rangeWithDots;
+});
+
+const previousPage = () => {
+  if (currentPage.value > 1) {
+    currentPage.value--;
+  }
+};
+
+const nextPage = () => {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++;
+  }
+};
+
+const goToPage = (page) => {
+  if (typeof page === 'number') {
+    currentPage.value = page;
+  }
+};
+
+watch(() => props.data, () => {
+  currentPage.value = 1;
+});
+</script>
+
+<template>
+  <div class="overflow-x-auto bg-white rounded-lg shadow">
+    <table class="min-w-full border-collapse rounded-lg overflow-hidden">
+      <thead class="bg-red-500">
+        <tr>
+          <th v-for="(column, index) in columns" 
+              :key="column.key"
+              class="px-6 py-3 text-left text-xs text-white font-medium text-gray-700 uppercase tracking-wider border-b border-gray-200">
+            {{ column.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody class="bg-white">
+        <tr v-for="item in paginatedData" 
+            :key="item.id"
+            class="hover:bg-gray-50 border-b border-gray-200">
+          <td v-for="column in columns" 
+              :key="column.key"
+              class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+            {{ item[column.key] }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- Paginación -->
+    <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+      <div class="flex-1 flex justify-between sm:hidden">
+        <button @click="previousPage"
+                :disabled="currentPage === 1"
+                class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }">
+          Anterior
+        </button>
+        <button @click="nextPage"
+                :disabled="currentPage >= totalPages"
+                class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                :class="{ 'opacity-50 cursor-not-allowed': currentPage >= totalPages }">
+          Siguiente
+        </button>
+      </div>
+      <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+        <div>
+          <p class="text-sm text-gray-700">
+            Mostrando
+            <span class="font-medium">{{ startIndex + 1 }}</span>
+            a
+            <span class="font-medium">{{ endIndex }}</span>
+            de
+            <span class="font-medium">{{ totalItems }}</span>
+            resultados
+          </p>
+        </div>
+        <div>
+          <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
+            <button @click="previousPage"
+                    :disabled="currentPage === 1"
+                    class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                    :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }">
+              <span class="sr-only">Anterior</span>
+              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+              </svg>
+            </button>
+            <button v-for="page in displayedPages"
+                    :key="page"
+                    @click="goToPage(page)"
+                    :class="[
+                      currentPage === page
+                        ? 'z-10 bg-gray-50 border-gray-300 text-gray-600'
+                        : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50',
+                      'relative inline-flex items-center px-4 py-2 border text-sm font-medium'
+                    ]">
+              {{ page }}
+            </button>
+            <button @click="nextPage"
+                    :disabled="currentPage >= totalPages"
+                    class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                    :class="{ 'opacity-50 cursor-not-allowed': currentPage >= totalPages }">
+              <span class="sr-only">Siguiente</span>
+              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+              </svg>
+            </button>
+          </nav>
+        </div>
+      </div>
+    </div>
+  </div>
+</template> 

resources/js/Pages/Buys.vue

@@ -1,11 +1,39 @@
 <script setup>
+import { Head } from '@inertiajs/vue3';
+import DataTable from '@/Components/DataTable.vue';
+
 const props = defineProps({
-    clients: Array
+    clients: {
+        type: Array,
+        required: true
+    }
 });
+
+const columns = [
+    { key: 'id', label: 'ID' },
+    { key: 'name', label: 'Nombre' },
+    { key: 'email', label: 'Email' },
+    { key: 'telephone', label: 'Teléfono' },
+    { key: 'city', label: 'Ciudad' },
+    { key: 'postal_code', label: 'Código Postal' },
+    { key: 'DNI', label: 'DNI' },
+    { key: 'registered_at', label: 'Fecha de Registro' },
+    { key: 'created_at', label: 'Fecha de Creación' }
+];
 </script>
 
 <template>
-    <div class="clients" v-for="client in clients" :key="client.id">
-        <span>name: {{ client.name }}, email: {{ client.email }}, vehicle count: {{ client.vehicle_count }}</span>
+    <Head title="Clientes" />
+
+    <div class="container mx-auto py-8 px-4">
+        <h1 class="text-2xl font-bold text-gray-800 mb-6">
+            Clientes
+        </h1>
+
+        <DataTable 
+            :data="clients"
+            :columns="columns"
+            :items-per-page="10"
+        />
     </div>
 </template>

resources/js/Pages/Clients.vue

@@ -10,7 +10,7 @@ const props = defineProps({
 const navigateToClients = () => router.get('/clients');
 const navigateToVehicles = () => router.get('/vehicles');
 const navigateToRepairs = () => router.get('/repairs');
-const navigateToBuys = () => router.get('/buys');
+const navigateToDeliveryNotes = () => router.get('/delivery-notes');
 </script>
 
 <template>
@@ -41,17 +41,17 @@ const navigateToBuys = () => router.get('/buys');
                 <Tile
                     title="Compras"
                     description="Gestión de compras"
-                    @click="navigateToBuys"
+                    @click="navigateToDeliveryNotes"
                 />
                 <Tile
                     title="Compras"
                     description="Gestión de reparaciones"
-                    @click="navigateToBuys"
+                    @click="navigateToDeliveryNotes"
                 />
                 <Tile
                     title="Compras"
                     description="Gestión de compras"
-                    @click="navigateToBuys"
+                    @click="navigateToDeliveryNotes"
                 />
             </div>
         </div>

resources/js/Pages/Dashboard/Show.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { Head } from '@inertiajs/vue3';
+import DataTable from '@/Components/DataTable.vue';
+
+const props = defineProps({
+    delivery_notes: {
+        type: Array,
+        required: true
+    }
+});
+
+const columns = [
+    { key: 'id', label: 'ID' },
+    { key: 'type', label: 'Tipo' },
+    { key: 'supplier', label: 'Proveedor' },
+    { key: 'family', label: 'Familia' },
+    { key: 'RRP', label: 'PVP' },
+    { key: 'cost', label: 'Coste' },
+    { key: 'margin', label: 'Margen' },
+    { key: 'profit', label: 'Beneficio' },
+    { key: 'added_at', label: 'Fecha de Alta' },
+    { key: 'created_at', label: 'Fecha de Creación' }
+];
+</script>
+
+<template>
+    <Head title="Albaranes" />
+
+    <div class="container mx-auto py-8 px-4">
+        <h1 class="text-2xl font-bold text-gray-800 mb-6">
+            Albaranes
+        </h1>
+
+        <DataTable 
+            :data="delivery_notes"
+            :columns="columns"
+            :items-per-page="10"
+        />
+    </div>
+</template> 

resources/js/Pages/DeliveryNotes/Show.vue

@@ -1,11 +1,37 @@
 <script setup>
+import { Head } from '@inertiajs/vue3';
+import DataTable from '@/Components/DataTable.vue';
+
 const props = defineProps({
-    repairs: Array
+    repairs: {
+        type: Array,
+        required: true
+    }
 });
+
+const columns = [
+    { key: 'id', label: 'ID' },
+    { key: 'repair_type_id', label: 'Tipo de Reparación' },
+    { key: 'vehicle_id', label: 'ID Vehículo' },
+    { key: 'observations', label: 'Observaciones' },
+    { key: 'status', label: 'Estado' },
+    { key: 'started_at', label: 'Fecha de Inicio' },
+    { key: 'created_at', label: 'Fecha de Creación' }
+];
 </script>
 
 <template>
-    <div class="repairs" v-for="repair in repairs" :key="repair.id">
-        <span>id: {{ repair.id }}, state: {{ repair.status }}</span>
+    <Head title="Reparaciones" />
+
+    <div class="container mx-auto py-8 px-4">
+        <h1 class="text-2xl font-bold text-gray-800 mb-6">
+            Reparaciones
+        </h1>
+
+        <DataTable 
+            :data="repairs"
+            :columns="columns"
+            :items-per-page="10"
+        />
     </div>
 </template>