From 730cae825c08314741ed1e16ef1632c4de99d71e Mon Sep 17 00:00:00 2001
From: Edgar Mendez Mendoza <edgar.mendez@golsystems.local>
Date: Fri, 30 Jan 2026 10:50:11 -0600
Subject: [PATCH] feat: Implement Store Details page with navigation and
 display of store information

---
 .../stores/components/StoreDetails.vue        | 495 ++++++++++++++++++
 src/modules/stores/components/StoresIndex.vue |  18 +
 src/modules/stores/components/index.html      | 363 +++++++++++++
 .../stores/services/terminalServices.ts       |   3 +
 src/modules/stores/types/store.d.ts           |   9 +-
 src/router/index.ts                           |  12 +-
 6 files changed, 896 insertions(+), 4 deletions(-)
 create mode 100644 src/modules/stores/components/StoreDetails.vue
 create mode 100644 src/modules/stores/components/index.html
 create mode 100644 src/modules/stores/services/terminalServices.ts

diff --git a/src/modules/stores/components/StoreDetails.vue b/src/modules/stores/components/StoreDetails.vue
new file mode 100644
index 0000000..a0d7561
--- /dev/null
+++ b/src/modules/stores/components/StoreDetails.vue
@@ -0,0 +1,495 @@
+<template>
+    <div class="space-y-6">
+        <!-- Toast Notifications -->
+        <Toast position="bottom-right" />
+
+        <!-- Breadcrumb -->
+        <Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
+
+        <!-- Header -->
+        <div class="flex flex-wrap items-center justify-between gap-4">
+            <div class="flex flex-col gap-1">
+                <h1
+                    class="text-surface-900 dark:text-white text-3xl md:text-4xl font-black leading-tight tracking-tight">
+                    {{ storeData?.name || 'Cargando...' }}
+                </h1>
+                <p class="text-surface-500 dark:text-surface-400 text-base font-normal leading-normal">
+                    Visualiza y gestiona la información de este punto de venta.
+                </p>
+            </div>
+        </div>
+
+        <!-- General Information Card -->
+        <Card class="shadow-sm">
+            <template #header>
+                <div class="flex items-center justify-between p-4">
+                    <div>
+                        <h2 class="text-xl font-bold text-surface-900 dark:text-white">Información General</h2>
+                        <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+                            Datos principales del punto de venta.
+                        </p>
+                    </div>
+                    <Button label="Editar Información" icon="pi pi-pencil" outlined @click="editStore" />
+                </div>
+            </template>
+
+            <template #content>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <!-- Store ID -->
+                    <div class="space-y-1">
+                        <label class="text-sm font-medium text-surface-500 dark:text-surface-400">
+                            ID del Punto de Venta
+                        </label>
+                        <p class="text-sm font-semibold text-surface-900 dark:text-white">
+                            {{ storeData?.id || 'N/A' }}
+                        </p>
+                    </div>
+
+                    <!-- Address -->
+                    <div class="space-y-1">
+                        <label class="text-sm font-medium text-surface-500 dark:text-surface-400">
+                            Dirección
+                        </label>
+                        <p class="text-sm font-semibold text-surface-900 dark:text-white">
+                            {{ storeData?.location || 'No especificada' }}
+                        </p>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="space-y-1">
+                        <label class="text-sm font-medium text-surface-500 dark:text-surface-400">
+                            Estado
+                        </label>
+                        <div class="flex items-center">
+                            <Tag :value="storeData?.is_active ? 'Activo' : 'Inactivo'"
+                                :severity="storeData?.is_active ? 'success' : 'danger'" />
+                        </div>
+                    </div>
+
+                    <!-- Created Date -->
+                    <div class="space-y-1">
+                        <label class="text-sm font-medium text-surface-500 dark:text-surface-400">
+                            Fecha de Creación
+                        </label>
+                        <p class="text-sm font-semibold text-surface-900 dark:text-white">
+                            {{ formatDate(storeData?.created_at) }}
+                        </p>
+                    </div>
+
+                    <!-- Updated Date -->
+                    <div class="space-y-1">
+                        <label class="text-sm font-medium text-surface-500 dark:text-surface-400">
+                            Última Actualización
+                        </label>
+                        <p class="text-sm font-semibold text-surface-900 dark:text-white">
+                            {{ formatDate(storeData?.updated_at) }}
+                        </p>
+                    </div>
+                </div>
+            </template>
+        </Card>
+
+        <!-- Configuration Card -->
+        <Card class="shadow-sm">
+            <template #header>
+                <div class="flex items-center justify-between p-4">
+                    <div>
+                        <h2 class="text-xl font-bold text-surface-900 dark:text-white">Configuración</h2>
+                        <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+                            Ajustes de inventario y catálogo para este punto de venta.
+                        </p>
+                    </div>
+                    <Button label="Guardar Cambios" icon="pi pi-save" :loading="isSaving" @click="saveConfiguration" />
+                </div>
+            </template>
+
+            <template #content>
+                <div class="space-y-6">
+                    <!-- Source Selection -->
+                    <div class="space-y-4">
+                        <h3 class="text-base font-semibold text-surface-900 dark:text-white">
+                            Fuente de Productos y Stock
+                        </h3>
+
+                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <!-- Catalog Option -->
+                            <div class="flex items-start space-x-3 p-4 border rounded-lg cursor-pointer"
+                                :class="sourceType === 'catalog' ? 'border-primary bg-primary/5' : 'border-surface-300 dark:border-surface-600'"
+                                @click="sourceType = 'catalog'">
+                                <RadioButton v-model="sourceType" inputId="catalog" name="source" value="catalog" />
+                                <div class="flex-1">
+                                    <label for="catalog"
+                                        class="block text-sm font-medium text-surface-900 dark:text-white cursor-pointer">
+                                        Catálogo General
+                                    </label>
+                                    <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+                                        Usar productos asignados directamente a este punto de venta desde el catálogo
+                                        maestro.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <!-- Warehouse Option -->
+                            <div class="flex items-start space-x-3 p-4 border rounded-lg cursor-pointer"
+                                :class="sourceType === 'warehouse' ? 'border-primary bg-primary/5' : 'border-surface-300 dark:border-surface-600'"
+                                @click="sourceType = 'warehouse'">
+                                <RadioButton v-model="sourceType" inputId="warehouse" name="source" value="warehouse" />
+                                <div class="flex-1">
+                                    <label for="warehouse"
+                                        class="block text-sm font-medium text-surface-900 dark:text-white cursor-pointer">
+                                        Extraer de un Almacén
+                                    </label>
+                                    <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+                                        Sincronizar el inventario de productos directamente desde un almacén específico.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Warehouse Selector -->
+                        <div class="space-y-2">
+                            <label class="text-sm font-medium text-surface-700 dark:text-surface-300">
+                                Seleccionar Almacén
+                            </label>
+                            <Dropdown v-model="selectedWarehouse" :options="warehouseOptions" optionLabel="name"
+                                optionValue="id" placeholder="Selecciona un almacén..."
+                                :disabled="sourceType !== 'warehouse'" class="w-full" />
+                            <small class="text-surface-500 dark:text-surface-400">
+                                Esta opción se habilita al seleccionar "Extraer de un Almacén".
+                            </small>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </Card>
+
+        
+
+        <!-- Terminals Section -->
+        <Card class="shadow-sm">
+            <template #header>
+                <div class="flex items-center justify-between p-4">
+                    <div>
+                        <h2 class="text-xl font-bold text-surface-900 dark:text-white">Gestionar Terminales</h2>
+                        <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+                            Lista de terminales asociadas a este punto de venta.
+                        </p>
+                    </div>
+                    <Button label="Añadir Terminal" icon="pi pi-plus" @click="addTerminal" />
+                </div>
+            </template>
+
+            <template #content>
+                <!-- Search Bar -->
+                <div class="mb-4">
+                    <IconField iconPosition="left">
+                        <InputIcon class="pi pi-search" />
+                        <InputText v-model="terminalSearchQuery"
+                            placeholder="Buscar terminal por ID, nombre o modelo..." class="w-full" />
+                    </IconField>
+                </div>
+
+                <!-- Terminals Table -->
+                <DataTable :value="terminals" :loading="loadingTerminals" responsiveLayout="scroll" stripedRows
+                    class="p-datatable-sm">
+                    <Column field="id" header="ID Terminal" sortable>
+                        <template #body="{ data }">
+                            <span class="font-medium">{{ data.id }}</span>
+                        </template>
+                    </Column>
+
+                    <Column field="alias" header="Alias" sortable>
+                        <template #body="{ data }">
+                            {{ data.alias }}
+                        </template>
+                    </Column>
+
+                    <Column field="model" header="Modelo" sortable>
+                        <template #body="{ data }">
+                            {{ data.model }}
+                        </template>
+                    </Column>
+
+                    <Column field="status" header="Estado" sortable>
+                        <template #body="{ data }">
+                            <Tag :value="getTerminalStatusLabel(data.status)"
+                                :severity="getTerminalStatusSeverity(data.status)" />
+                        </template>
+                    </Column>
+
+                    <Column header="Acciones" style="width: 10rem">
+                        <template #body="{ data }">
+                            <div class="flex gap-2">
+                                <Button icon="pi pi-pencil" severity="secondary" text rounded
+                                    @click="editTerminal(data)" v-tooltip="'Editar terminal'" />
+                                <Button icon="pi pi-trash" severity="danger" text rounded @click="deleteTerminal(data)"
+                                    v-tooltip="'Eliminar terminal'" />
+                            </div>
+                        </template>
+                    </Column>
+                </DataTable>
+            </template>
+        </Card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useToast } from 'primevue/usetoast';
+import Breadcrumb from 'primevue/breadcrumb';
+import Button from 'primevue/button';
+import Card from 'primevue/card';
+import InputText from 'primevue/inputtext';
+import IconField from 'primevue/iconfield';
+import InputIcon from 'primevue/inputicon';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Tag from 'primevue/tag';
+import RadioButton from 'primevue/radiobutton';
+import Dropdown from 'primevue/dropdown';
+import Toast from 'primevue/toast';
+import { storesService } from '../services/storesServices';
+import type { Store } from '../types/store';
+
+const route = useRoute();
+const toast = useToast();
+
+// Reactive data
+const storeData = ref<Store | null>(null);
+const loading = ref(false);
+const isSaving = ref(false);
+const loadingProducts = ref(false);
+const loadingTerminals = ref(false);
+
+// Configuration
+const sourceType = ref('catalog');
+const selectedWarehouse = ref(null);
+const productSearchQuery = ref('');
+const terminalSearchQuery = ref('');
+
+// Breadcrumb
+const breadcrumbHome = ref({
+    icon: 'pi pi-home',
+    route: '/'
+});
+
+const breadcrumbItems = ref([
+    { label: 'Puntos de Venta', route: '/stores' },
+    { label: 'Detalles' }
+]);
+
+// Mock data - Replace with real API calls
+const warehouseOptions = ref([
+    { id: 1, name: 'Almacén Central' },
+    { id: 2, name: 'Almacén Norte' },
+    { id: 3, name: 'Almacén Sur' }
+]);
+
+const products = ref([
+    {
+        id: 1,
+        sku: 'CAFE-GRN-01',
+        name: 'Café Grano Entero 1kg',
+        category: 'Café',
+        price: 250.00
+    },
+    {
+        id: 2,
+        sku: 'ACC-TZA-05',
+        name: 'Taza de Cerámica Blanca',
+        category: 'Accesorios',
+        price: 120.00
+    },
+    {
+        id: 3,
+        sku: 'PST-CHC-12',
+        name: 'Pastel de Chocolate',
+        category: 'Repostería',
+        price: 45.00
+    }
+]);
+
+const terminals = ref([
+    {
+        id: 'TERM-01A',
+        alias: 'Caja Principal',
+        model: 'Verifone VX520',
+        status: 'online'
+    },
+    {
+        id: 'TERM-02B',
+        alias: 'Mostrador',
+        model: 'Ingenico ICT250',
+        status: 'offline'
+    },
+    {
+        id: 'TERM-03C',
+        alias: 'Autoservicio',
+        model: 'Verifone VX520',
+        status: 'inactive'
+    }
+]);
+
+// Methods
+const loadStoreData = async () => {
+    const storeId = route.params.id as string;
+    if (!storeId) return;
+
+    try {
+        loading.value = true;
+
+        // Call the real API service
+        const response = await storesService.getStoreById(parseInt(storeId));
+
+        // The API response structure should be: { status: string, data: { point_of_sale: Store } }
+        if (response.data && response.data.data && response.data.data.point_of_sale) {
+            storeData.value = response.data.data.point_of_sale;
+
+            // Update breadcrumb with store name
+            if (storeData.value && breadcrumbItems.value[1]) {
+                breadcrumbItems.value[1].label = storeData.value.name;
+            }
+        } else {
+            throw new Error('Datos de tienda no encontrados en la respuesta');
+        }
+
+    } catch (error) {
+        console.error('Error loading store data:', error);
+
+        let errorMessage = 'No se pudo cargar la información de la tienda';
+        if (error instanceof Error) {
+            errorMessage = error.message;
+        }
+
+        toast.add({
+            severity: 'error',
+            summary: 'Error al Cargar Tienda',
+            detail: errorMessage,
+            life: 5000
+        });
+    } finally {
+        loading.value = false;
+    }
+};
+
+const formatDate = (dateString: string | undefined) => {
+    if (!dateString) return 'N/A';
+    return new Date(dateString).toLocaleDateString('es-ES', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    });
+};
+
+const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('es-MX', {
+        style: 'currency',
+        currency: 'MXN'
+    }).format(amount);
+};
+
+const getTerminalStatusLabel = (status: string) => {
+    const labels = {
+        'online': 'Online',
+        'offline': 'Offline',
+        'inactive': 'Inactiva'
+    };
+    return labels[status as keyof typeof labels] || status;
+};
+
+const getTerminalStatusSeverity = (status: string) => {
+    const severities = {
+        'online': 'success',
+        'offline': 'danger',
+        'inactive': 'warning'
+    };
+    return severities[status as keyof typeof severities] || 'secondary';
+};
+
+// Action methods
+const editStore = () => {
+    // TODO: Implement edit functionality
+    // This could navigate to edit route or open a modal
+    toast.add({
+        severity: 'info',
+        summary: 'Editar Tienda',
+        detail: 'Funcionalidad de edición próximamente',
+        life: 3000
+    });
+};
+
+const saveConfiguration = async () => {
+    try {
+        isSaving.value = true;
+        // TODO: Implement save configuration API call
+        await new Promise(resolve => setTimeout(resolve, 1000));
+
+        toast.add({
+            severity: 'success',
+            summary: 'Configuración Guardada',
+            detail: 'La configuración se ha guardado exitosamente',
+            life: 3000
+        });
+    } catch (error) {
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudo guardar la configuración',
+            life: 3000
+        });
+    } finally {
+        isSaving.value = false;
+    }
+};
+
+const addProduct = () => {
+    toast.add({
+        severity: 'info',
+        summary: 'Añadir Producto',
+        detail: 'Funcionalidad próximamente',
+        life: 3000
+    });
+};
+
+const removeProduct = (product: any) => {
+    toast.add({
+        severity: 'warn',
+        summary: 'Quitar Producto',
+        detail: `¿Quitar ${product.name}?`,
+        life: 3000
+    });
+};
+
+const addTerminal = () => {
+    toast.add({
+        severity: 'info',
+        summary: 'Añadir Terminal',
+        detail: 'Funcionalidad próximamente',
+        life: 3000
+    });
+};
+
+const editTerminal = (terminal: any) => {
+    toast.add({
+        severity: 'info',
+        summary: 'Editar Terminal',
+        detail: `Editando ${terminal.alias}`,
+        life: 3000
+    });
+};
+
+const deleteTerminal = (terminal: any) => {
+    toast.add({
+        severity: 'warn',
+        summary: 'Eliminar Terminal',
+        detail: `¿Eliminar ${terminal.alias}?`,
+        life: 3000
+    });
+};
+
+// Lifecycle
+onMounted(() => {
+    loadStoreData();
+});
+</script>
\ No newline at end of file
diff --git a/src/modules/stores/components/StoresIndex.vue b/src/modules/stores/components/StoresIndex.vue
index a096907..9396db8 100644
--- a/src/modules/stores/components/StoresIndex.vue
+++ b/src/modules/stores/components/StoresIndex.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue';
+import { useRouter } from 'vue-router';
 import { useToast } from 'primevue/usetoast';
 import { useConfirm } from 'primevue/useconfirm';
 import Card from 'primevue/card';
@@ -18,6 +19,7 @@ import { storesService } from '../services/storesServices';
 import StoreForm from './StoreForm.vue';
 import type { Store, CreateStoreData } from '../types/store';
 
+const router = useRouter();
 const toast = useToast();
 const confirm = useConfirm();
 
@@ -106,6 +108,14 @@ const openCreateDialog = () => {
     showDialog.value = true;
 };
 
+const handleViewDetails = (store: Store) => {
+    // Navigate to store details page
+    router.push({ 
+        name: 'StoreDetails', 
+        params: { id: store.id } 
+    });
+};
+
 const handleEdit = (store: Store) => {
     selectedStore.value = store;
     isEditing.value = true;
@@ -337,6 +347,14 @@ onMounted(() => {
                     <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-eye"
+                                    severity="info"
+                                    text
+                                    rounded
+                                    @click="handleViewDetails(data)"
+                                    v-tooltip.top="'Ver Detalles'"
+                                />
                                 <Button
                                     icon="pi pi-pencil"
                                     severity="secondary"
diff --git a/src/modules/stores/components/index.html b/src/modules/stores/components/index.html
new file mode 100644
index 0000000..6b699f8
--- /dev/null
+++ b/src/modules/stores/components/index.html
@@ -0,0 +1,363 @@
+<main class="w-full flex-1 p-6 lg:p-8">
+    <div class="mx-auto max-w-7xl">
+        <div class="flex flex-wrap items-center gap-2">
+            <a class="text-sm font-medium text-primary hover:underline" href="#">Puntos de Venta</a>
+            <span class="text-sm font-medium text-gray-500 dark:text-gray-400">/</span>
+            <span class="text-sm font-medium text-gray-800 dark:text-gray-200">Sucursal Centro</span>
+        </div>
+        <div class="mt-4 flex flex-wrap items-center justify-between gap-4">
+            <div class="flex flex-col gap-1">
+                <h1 class="text-3xl font-black tracking-tight text-[#111418] dark:text-white">Sucursal Centro</h1>
+                <p class="text-base text-[#617589] dark:text-gray-400">Visualiza y gestiona la información de este punto
+                    de venta.</p>
+            </div>
+        </div>
+        <div class="mt-8 rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
+            <div class="flex flex-wrap items-start justify-between gap-4">
+                <div>
+                    <h2 class="text-lg font-bold text-[#111418] dark:text-white">Información General</h2>
+                    <p class="mt-1 text-sm text-[#617589] dark:text-gray-400">Datos principales del punto de venta.</p>
+                </div>
+                <button
+                    class="flex h-10 cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-lg bg-gray-100 px-4 text-sm font-bold text-[#111418] hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
+                    <span class="material-symbols-outlined text-lg">edit</span>
+                    <span class="truncate">Editar Información</span>
+                </button>
+            </div>
+            <div
+                class="mt-6 grid grid-cols-1 gap-x-4 gap-y-6 border-t border-gray-200 pt-6 sm:grid-cols-2 lg:grid-cols-3 dark:border-gray-700">
+                <div class="flex flex-col gap-1">
+                    <p class="text-sm text-[#617589] dark:text-gray-400">ID del Punto de Venta</p>
+                    <p class="text-sm font-medium text-[#111418] dark:text-white">POS-00123</p>
+                </div>
+                <div class="flex flex-col gap-1">
+                    <p class="text-sm text-[#617589] dark:text-gray-400">Dirección</p>
+                    <p class="text-sm font-medium text-[#111418] dark:text-white">Av. Principal 123, Ciudad Capital</p>
+                </div>
+                <div class="flex flex-col gap-1">
+                    <p class="text-sm text-[#617589] dark:text-gray-400">Estado</p>
+                    <div class="flex items-center">
+                        <span
+                            class="inline-flex items-center gap-1.5 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-200">
+                            <span class="size-1.5 rounded-full bg-green-500"></span> Activo
+                        </span>
+                    </div>
+                </div>
+                <div class="flex flex-col gap-1">
+                    <p class="text-sm text-[#617589] dark:text-gray-400">Teléfono</p>
+                    <p class="text-sm font-medium text-[#111418] dark:text-white">+52 55 1234 5678</p>
+                </div>
+                <div class="flex flex-col gap-1">
+                    <p class="text-sm text-[#617589] dark:text-gray-400">Fecha de Creación</p>
+                    <p class="text-sm font-medium text-[#111418] dark:text-white">15 de Enero, 2023</p>
+                </div>
+                <div class="flex flex-col gap-1">
+                    <p class="text-sm text-[#617589] dark:text-gray-400">Última Actualización</p>
+                    <p class="text-sm font-medium text-[#111418] dark:text-white">02 de Julio, 2024</p>
+                </div>
+            </div>
+        </div>
+        <div class="mt-8 rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
+            <div class="flex flex-wrap items-center justify-between gap-4">
+                <div>
+                    <h2 class="text-lg font-bold text-[#111418] dark:text-white">Configuración</h2>
+                    <p class="mt-1 text-sm text-[#617589] dark:text-gray-400">Ajustes de inventario y catálogo para este
+                        punto de venta.</p>
+                </div>
+                <button
+                    class="flex h-10 cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-lg bg-gray-100 px-4 text-sm font-bold text-[#111418] hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
+                    <span class="material-symbols-outlined text-lg">save</span>
+                    <span class="truncate">Guardar Cambios</span>
+                </button>
+            </div>
+            <div class="mt-6 border-t border-gray-200 pt-6 dark:border-gray-700">
+                <fieldset class="space-y-6">
+                    <legend class="text-base font-semibold text-[#111418] dark:text-white">Fuente de Productos y Stock
+                    </legend>
+                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                        <label
+                            class="flex cursor-pointer flex-col rounded-lg border border-primary bg-primary/5 p-4 ring-2 ring-primary dark:border-primary dark:bg-primary/20"
+                            for="catalogo-general">
+                            <div class="flex items-center">
+                                <input checked=""
+                                    class="h-4 w-4 border-gray-300 text-primary focus:ring-primary dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-900"
+                                    id="catalogo-general" name="fuente-stock" type="radio" value="catalogo" />
+                                <span class="ml-3 text-sm font-medium text-gray-900 dark:text-white">Catálogo
+                                    General</span>
+                            </div>
+                            <p class="ml-7 mt-1 text-sm text-gray-500 dark:text-gray-400">Usar productos asignados
+                                directamente a este punto de venta desde el catálogo maestro.</p>
+                        </label>
+                        <label
+                            class="flex cursor-pointer flex-col rounded-lg border border-gray-300 bg-white p-4 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700/50"
+                            for="almacen-especifico">
+                            <div class="flex items-center">
+                                <input
+                                    class="h-4 w-4 border-gray-300 text-primary focus:ring-primary dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-900"
+                                    id="almacen-especifico" name="fuente-stock" type="radio" value="almacen" />
+                                <span class="ml-3 text-sm font-medium text-gray-900 dark:text-white">Extraer de un
+                                    Almacén</span>
+                            </div>
+                            <p class="ml-7 mt-1 text-sm text-gray-500 dark:text-gray-400">Sincronizar el inventario de
+                                productos directamente desde un almacén específico.</p>
+                        </label>
+                    </div>
+                    <div>
+                        <label class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                            for="almacen-selector">Seleccionar Almacén</label>
+                        <select
+                            class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-primary focus:ring-primary disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:disabled:bg-gray-800"
+                            disabled="" id="almacen-selector">
+                            <option>Selecciona un almacén...</option>
+                            <option>Almacén Central</option>
+                            <option>Almacén Norte</option>
+                            <option>Almacén Sur</option>
+                        </select>
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Esta opción se habilita al seleccionar
+                            "Extraer de un Almacén".</p>
+                    </div>
+                </fieldset>
+            </div>
+        </div>
+        <div class="mt-8">
+            <div class="flex flex-wrap items-center justify-between gap-4">
+                <div>
+                    <h2 class="text-lg font-bold text-[#111418] dark:text-white">Productos Asignados</h2>
+                    <p class="mt-1 text-sm text-[#617589] dark:text-gray-400">Catálogo de productos disponibles en esta
+                        sucursal.</p>
+                </div>
+                <button
+                    class="flex h-10 min-w-[84px] cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-lg bg-primary px-4 text-sm font-bold text-white shadow-sm hover:bg-primary/90">
+                    <span class="material-symbols-outlined text-lg">add_circle</span>
+                    <span class="truncate">Añadir Producto</span>
+                </button>
+            </div>
+            <div class="relative mt-4">
+                <span
+                    class="material-symbols-outlined pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">search</span>
+                <input
+                    class="w-full rounded-lg border border-gray-300 bg-white py-2 pl-10 pr-4 text-sm focus:border-primary focus:ring-primary dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:focus:border-primary"
+                    placeholder="Buscar producto por SKU, nombre o categoría..." type="text" />
+            </div>
+            <div class="mt-4 flow-root">
+                <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                    <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+                        <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-800">
+                            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
+                                <thead class="bg-gray-50 dark:bg-gray-900">
+                                    <tr>
+                                        <th class="px-6 py-3.5 text-left text-xs font-semibold text-gray-600 dark:text-gray-300"
+                                            scope="col">SKU</th>
+                                        <th class="px-3 py-3.5 text-left text-xs font-semibold text-gray-600 dark:text-gray-300"
+                                            scope="col">Producto</th>
+                                        <th class="px-3 py-3.5 text-left text-xs font-semibold text-gray-600 dark:text-gray-300"
+                                            scope="col">Categoría</th>
+                                        <th class="px-3 py-3.5 text-left text-xs font-semibold text-gray-600 dark:text-gray-300"
+                                            scope="col">Precio</th>
+                                        <th class="relative py-3.5 pl-3 pr-4 sm:pr-6" scope="col"><span
+                                                class="sr-only">Acciones</span></th>
+                                    </tr>
+                                </thead>
+                                <tbody
+                                    class="divide-y divide-gray-200 bg-white dark:divide-gray-800 dark:bg-gray-900/50">
+                                    <tr>
+                                        <td
+                                            class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-800 dark:text-gray-200">
+                                            CAFE-GRN-01</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Café Grano Entero 1kg</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Café</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            $250.00</td>
+                                        <td
+                                            class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                            <div class="flex items-center justify-end gap-2">
+                                                <button
+                                                    class="text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-500"><span
+                                                        class="material-symbols-outlined text-xl">remove_circle</span></button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td
+                                            class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-800 dark:text-gray-200">
+                                            ACC-TZA-05</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Taza de Cerámica Blanca</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Accesorios</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            $120.00</td>
+                                        <td
+                                            class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                            <div class="flex items-center justify-end gap-2">
+                                                <button
+                                                    class="text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-500"><span
+                                                        class="material-symbols-outlined text-xl">remove_circle</span></button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td
+                                            class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-800 dark:text-gray-200">
+                                            PST-CHC-12</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Pastel de Chocolate</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Repostería</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            $45.00</td>
+                                        <td
+                                            class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                            <div class="flex items-center justify-end gap-2">
+                                                <button
+                                                    class="text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-500"><span
+                                                        class="material-symbols-outlined text-xl">remove_circle</span></button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="mt-8">
+            <div class="flex flex-wrap items-center justify-between gap-4">
+                <div>
+                    <h2 class="text-lg font-bold text-[#111418] dark:text-white">Gestionar Terminales</h2>
+                    <p class="mt-1 text-sm text-[#617589] dark:text-gray-400">Lista de terminales asociadas a este punto
+                        de venta.</p>
+                </div>
+                <button
+                    class="flex h-10 min-w-[84px] cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-lg bg-primary px-4 text-sm font-bold text-white shadow-sm hover:bg-primary/90">
+                    <span class="material-symbols-outlined text-lg">add_circle</span>
+                    <span class="truncate">Añadir Terminal</span>
+                </button>
+            </div>
+            <div class="relative mt-4">
+                <span
+                    class="material-symbols-outlined pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">search</span>
+                <input
+                    class="w-full rounded-lg border border-gray-300 bg-white py-2 pl-10 pr-4 text-sm focus:border-primary focus:ring-primary dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:focus:border-primary"
+                    placeholder="Buscar terminal por ID, nombre o modelo..." type="text" />
+            </div>
+            <div class="mt-4 flow-root">
+                <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                    <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+                        <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-800">
+                            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
+                                <thead class="bg-gray-50 dark:bg-gray-900">
+                                    <tr>
+                                        <th class="px-6 py-3.5 text-left text-xs font-semibold text-gray-600 dark:text-gray-300"
+                                            scope="col">ID Terminal</th>
+                                        <th class="px-3 py-3.5 text-left text-xs font-semibold text-gray-600 dark:text-gray-300"
+                                            scope="col">Alias</th>
+                                        <th class="px-3 py-3.5 text-left text-xs font-semibold text-gray-600 dark:text-gray-300"
+                                            scope="col">Modelo</th>
+                                        <th class="px-3 py-3.5 text-left text-xs font-semibold text-gray-600 dark:text-gray-300"
+                                            scope="col">Estado</th>
+                                        <th class="relative py-3.5 pl-3 pr-4 sm:pr-6" scope="col"><span
+                                                class="sr-only">Acciones</span></th>
+                                    </tr>
+                                </thead>
+                                <tbody
+                                    class="divide-y divide-gray-200 bg-white dark:divide-gray-800 dark:bg-gray-900/50">
+                                    <tr>
+                                        <td
+                                            class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-800 dark:text-gray-200">
+                                            TERM-01A</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Caja Principal</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Verifone VX520</td>
+                                        <td class="whitespace-nowrap px-3 py-4 text-sm">
+                                            <span
+                                                class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-200">Online</span>
+                                        </td>
+                                        <td
+                                            class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                            <div class="flex items-center justify-end gap-2">
+                                                <button
+                                                    class="text-gray-500 hover:text-primary dark:text-gray-400 dark:hover:text-primary"><span
+                                                        class="material-symbols-outlined text-xl">edit</span></button>
+                                                <button
+                                                    class="text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-500"><span
+                                                        class="material-symbols-outlined text-xl">delete</span></button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td
+                                            class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-800 dark:text-gray-200">
+                                            TERM-02B</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Mostrador</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Ingenico ICT250</td>
+                                        <td class="whitespace-nowrap px-3 py-4 text-sm">
+                                            <span
+                                                class="inline-flex items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800 dark:bg-red-900 dark:text-red-200">Offline</span>
+                                        </td>
+                                        <td
+                                            class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                            <div class="flex items-center justify-end gap-2">
+                                                <button
+                                                    class="text-gray-500 hover:text-primary dark:text-gray-400 dark:hover:text-primary"><span
+                                                        class="material-symbols-outlined text-xl">edit</span></button>
+                                                <button
+                                                    class="text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-500"><span
+                                                        class="material-symbols-outlined text-xl">delete</span></button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td
+                                            class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-800 dark:text-gray-200">
+                                            TERM-03C</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Autoservicio</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Verifone VX520</td>
+                                        <td class="whitespace-nowrap px-3 py-4 text-sm">
+                                            <span
+                                                class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">Inactiva</span>
+                                        </td>
+                                        <td
+                                            class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                            <div class="flex items-center justify-end gap-2">
+                                                <button
+                                                    class="text-gray-500 hover:text-primary dark:text-gray-400 dark:hover:text-primary"><span
+                                                        class="material-symbols-outlined text-xl">edit</span></button>
+                                                <button
+                                                    class="text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-500"><span
+                                                        class="material-symbols-outlined text-xl">delete</span></button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
\ No newline at end of file
diff --git a/src/modules/stores/services/terminalServices.ts b/src/modules/stores/services/terminalServices.ts
new file mode 100644
index 0000000..82a5c31
--- /dev/null
+++ b/src/modules/stores/services/terminalServices.ts
@@ -0,0 +1,3 @@
+export const terminalServices = {
+    
+};
\ No newline at end of file
diff --git a/src/modules/stores/types/store.d.ts b/src/modules/stores/types/store.d.ts
index a7e05ca..bd80a73 100644
--- a/src/modules/stores/types/store.d.ts
+++ b/src/modules/stores/types/store.d.ts
@@ -7,6 +7,7 @@ export interface Store {
     name: string;
     location: string;
     is_active: boolean;
+    phone?: string;
     created_at: string;
     updated_at: string;
     deleted_at: string | null;
@@ -53,9 +54,11 @@ export interface StoreResponse {
     data: StoreData;
 }
 
+export interface SingleStoreData {
+    point_of_sale: Store;
+}
+
 export interface SingleStoreResponse {
     status: string;
-    data: {
-        point_of_sale: Store;
-    };
+    data: SingleStoreData;
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 5b27322..8cc977a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -17,6 +17,7 @@ import StoresIndex from '../modules/stores/components/StoresIndex.vue';
 import RolesIndex from '../modules/users/components/RoleIndex.vue';
 import RoleForm from '../modules/users/components/RoleForm.vue';
 import UserIndex from '../modules/users/components/UserIndex.vue';
+import StoreDetails from '../modules/stores/components/StoreDetails.vue';
 
 const routes: RouteRecordRaw[] = [
     {
@@ -154,7 +155,16 @@ const routes: RouteRecordRaw[] = [
                 meta: {
                     title: 'Tiendas',
                     requiresAuth: true
-                },
+                }
+            },
+            {
+                path: 'stores/:id',
+                name: 'StoreDetails',
+                component: StoreDetails,
+                meta: {
+                    title: 'Detalles de la Tienda',
+                    requiresAuth: true
+                }
             },
             {
                 path: 'users',