From c6eaa2ef756e4d2e4dc8fd6c8353b0e9f22e27f4 Mon Sep 17 00:00:00 2001
From: Edgar Mendez Mendoza <edgar.mendez@golsystems.local>
Date: Tue, 11 Nov 2025 11:31:42 -0600
Subject: [PATCH] feat: Implement Stores management page with search, filters,
 and data table

---
 src/modules/stores/components/StoresIndex.vue | 317 +++++++++++++++++-
 1 file changed, 313 insertions(+), 4 deletions(-)

diff --git a/src/modules/stores/components/StoresIndex.vue b/src/modules/stores/components/StoresIndex.vue
index 93216b8..79917cd 100644
--- a/src/modules/stores/components/StoresIndex.vue
+++ b/src/modules/stores/components/StoresIndex.vue
@@ -1,5 +1,314 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import Card from 'primevue/card';
+import InputText from 'primevue/inputtext';
+import Button from 'primevue/button';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Tag from 'primevue/tag';
+import IconField from 'primevue/iconfield';
+import InputIcon from 'primevue/inputicon';
+import Dropdown from 'primevue/dropdown';
+
+// Search and filters
+const searchQuery = ref('');
+const selectedStatus = ref('all');
+const selectedType = ref('all');
+const selectedLocation = ref('all');
+
+// Filter options
+const statusOptions = [
+    { label: 'Todos', value: 'all' },
+    { label: 'Activo', value: 'active' },
+    { label: 'Inactivo', value: 'inactive' },
+    { label: 'Archivado', value: 'archived' },
+];
+
+const typeOptions = [
+    { label: 'Todos', value: 'all' },
+    { label: 'Tienda', value: 'store' },
+    { label: 'Kiosco', value: 'kiosk' },
+    { label: 'Almacén', value: 'warehouse' },
+];
+
+const locationOptions = [
+    { label: 'Todas', value: 'all' },
+    { label: 'Centro', value: 'centro' },
+    { label: 'Norte', value: 'norte' },
+    { label: 'Sur', value: 'sur' },
+];
+
+// Sample data
+const stores = ref([
+    {
+        id: 1,
+        name: 'Tienda Principal',
+        location: 'Av. Siempre Viva 742',
+        status: 'active',
+        terminals: 5,
+        lastActivity: 'Hoy, 10:45 AM'
+    },
+    {
+        id: 2,
+        name: 'Sucursal Centro',
+        location: 'Calle Falsa 123',
+        status: 'active',
+        terminals: 3,
+        lastActivity: 'Ayer, 08:15 PM'
+    },
+    {
+        id: 3,
+        name: 'Kiosco del Parque',
+        location: 'Parque Central, Stand 4',
+        status: 'inactive',
+        terminals: 1,
+        lastActivity: '25/08/2023'
+    },
+    {
+        id: 4,
+        name: 'Almacén Norte',
+        location: 'Blvd. Industrial 500',
+        status: 'active',
+        terminals: 8,
+        lastActivity: 'Hoy, 11:00 AM'
+    },
+    {
+        id: 5,
+        name: 'Pop-Up de Verano',
+        location: 'Playa Grande, Paseo Marítimo',
+        status: 'archived',
+        terminals: 2,
+        lastActivity: '15/07/2023'
+    }
+]);
+
+// Methods
+const handleCreateStore = () => {
+    console.log('Create new store');
+};
+
+const handleEdit = (store: any) => {
+    console.log('Edit store:', store);
+};
+
+const handleView = (store: any) => {
+    console.log('View store:', store);
+};
+
+const handleToggleStatus = (store: any) => {
+    console.log('Toggle status:', store);
+};
+
+const clearFilters = () => {
+    searchQuery.value = '';
+    selectedStatus.value = 'all';
+    selectedType.value = 'all';
+    selectedLocation.value = 'all';
+};
+
+// Get status label
+const getStatusLabel = (status: string) => {
+    const statusMap: Record<string, string> = {
+        active: 'Activo',
+        inactive: 'Inactivo',
+        archived: 'Archivado'
+    };
+    return statusMap[status] || status;
+};
+
+// Get status severity
+const getStatusSeverity = (status: string) => {
+    const severityMap: Record<string, 'success' | 'warning' | 'secondary'> = {
+        active: 'success',
+        inactive: 'warning',
+        archived: 'secondary'
+    };
+    return severityMap[status] || 'secondary';
+};
+</script>
+
 <template>
-    <p>
-        Stores Index Component
-    </p>
-</template>
\ No newline at end of file
+    <div class="space-y-6">
+        <!-- Header -->
+        <div class="flex flex-wrap justify-between gap-4 items-center">
+            <div class="flex min-w-72 flex-col gap-1">
+                <h1 class="text-surface-900 dark:text-white text-3xl md:text-4xl font-black leading-tight tracking-tight">
+                    Gestión de Puntos de Venta
+                </h1>
+                <p class="text-surface-500 dark:text-surface-400 text-base font-normal leading-normal">
+                    Administra, rastrea y organiza todos tus puntos de venta en un solo lugar.
+                </p>
+            </div>
+            <Button
+                label="Crear Nuevo Punto de Venta"
+                icon="pi pi-plus"
+                @click="handleCreateStore"
+                class="min-w-[200px]"
+            />
+        </div>
+
+        <!-- Table Card -->
+        <Card class="shadow-sm">
+            <template #content>
+                <!-- Search and Filters -->
+                <div class="flex flex-col md:flex-row justify-between gap-4 mb-4">
+                    <div class="flex-1">
+                        <IconField iconPosition="left">
+                            <InputIcon class="pi pi-search" />
+                            <InputText
+                                v-model="searchQuery"
+                                placeholder="Buscar por nombre o ID..."
+                                class="w-full"
+                            />
+                        </IconField>
+                    </div>
+                    <div class="flex gap-2 flex-wrap">
+                        <Dropdown
+                            v-model="selectedStatus"
+                            :options="statusOptions"
+                            optionLabel="label"
+                            optionValue="value"
+                            placeholder="Estado: Todos"
+                            class="w-40"
+                        />
+                        <Dropdown
+                            v-model="selectedType"
+                            :options="typeOptions"
+                            optionLabel="label"
+                            optionValue="value"
+                            placeholder="Tipo: Todos"
+                            class="w-40"
+                        />
+                        <Dropdown
+                            v-model="selectedLocation"
+                            :options="locationOptions"
+                            optionLabel="label"
+                            optionValue="value"
+                            placeholder="Ubicación: Todas"
+                            class="w-40"
+                        />
+                        <Button
+                            label="Limpiar"
+                            icon="pi pi-times"
+                            outlined
+                            @click="clearFilters"
+                        />
+                    </div>
+                </div>
+
+                <!-- Table -->
+                <DataTable
+                    :value="stores"
+                    :paginator="true"
+                    :rows="5"
+                    :rowsPerPageOptions="[5, 10, 20, 50]"
+                    stripedRows
+                    responsiveLayout="scroll"
+                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport"
+                    currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} resultados"
+                >
+                    <!-- Name Column -->
+                    <Column field="name" header="Nombre del Punto de Venta" :sortable="true">
+                        <template #body="{ data }">
+                            <span class="font-medium text-surface-900 dark:text-white">
+                                {{ data.name }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <!-- Location Column -->
+                    <Column field="location" header="Ubicación" :sortable="true">
+                        <template #body="{ data }">
+                            <span class="text-surface-500 dark:text-surface-400 text-sm">
+                                {{ data.location }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <!-- Status Column -->
+                    <Column field="status" header="Estado" :sortable="true">
+                        <template #body="{ data }">
+                            <Tag
+                                :value="getStatusLabel(data.status)"
+                                :severity="getStatusSeverity(data.status)"
+                            />
+                        </template>
+                    </Column>
+
+                    <!-- Terminals Column -->
+                    <Column field="terminals" header="Terminales" :sortable="true">
+                        <template #body="{ data }">
+                            <span class="text-center block text-surface-500 dark:text-surface-400 text-sm">
+                                {{ data.terminals }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <!-- Last Activity Column -->
+                    <Column field="lastActivity" header="Última Actividad" :sortable="true">
+                        <template #body="{ data }">
+                            <span class="text-surface-500 dark:text-surface-400 text-sm">
+                                {{ data.lastActivity }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <!-- Actions Column -->
+                    <Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right">
+                        <template #body="{ data }">
+                            <div class="flex gap-2 justify-end">
+                                <Button
+                                    icon="pi pi-pencil"
+                                    severity="secondary"
+                                    text
+                                    rounded
+                                    @click="handleEdit(data)"
+                                    v-tooltip.top="'Editar'"
+                                />
+                                <Button
+                                    icon="pi pi-eye"
+                                    severity="secondary"
+                                    text
+                                    rounded
+                                    @click="handleView(data)"
+                                    v-tooltip.top="'Ver detalles'"
+                                />
+                                <Button
+                                    v-if="data.status === 'active'"
+                                    icon="pi pi-power-off"
+                                    severity="danger"
+                                    text
+                                    rounded
+                                    @click="handleToggleStatus(data)"
+                                    v-tooltip.top="'Desactivar'"
+                                />
+                                <Button
+                                    v-else-if="data.status === 'inactive'"
+                                    icon="pi pi-check"
+                                    severity="success"
+                                    text
+                                    rounded
+                                    @click="handleToggleStatus(data)"
+                                    v-tooltip.top="'Activar'"
+                                />
+                                <Button
+                                    v-else
+                                    icon="pi pi-inbox"
+                                    severity="secondary"
+                                    text
+                                    rounded
+                                    @click="handleToggleStatus(data)"
+                                    v-tooltip.top="'Desarchivar'"
+                                />
+                            </div>
+                        </template>
+                    </Column>
+                </DataTable>
+            </template>
+        </Card>
+    </div>
+</template>
+
+<style scoped>
+/* Custom styles if needed */
+</style>
\ No newline at end of file