feat: implement catalog modules for routes, risk factors, and route segments with supporting services and UI components.

src/components/layout/Sidebar.vue

@@ -81,6 +81,42 @@ const menuItems = ref<MenuItem[]>([
                     'locations.destroy',
                 ],
             },
+            {
+                label: 'Segmentos de Ruta',
+                icon: 'pi pi-map',
+                to: '/catalog/route-segments',
+                permission: [
+                    'route-segments.index',
+                    'route-segments.show',
+                    'route-segments.store',
+                    'route-segments.update',
+                    'route-segments.destroy',
+                ],
+            },
+            {
+                label: 'Catálogo de Rutas',
+                icon: 'pi pi-sitemap',
+                to: '/catalog/routes',
+                permission: [
+                    'routes.index',
+                    'routes.show',
+                    'routes.store',
+                    'routes.update',
+                    'routes.destroy',
+                ],
+            },
+            {
+                label: 'Factores de Riesgo',
+                icon: 'pi pi-exclamation-triangle',
+                to: '/catalog/risk-factors',
+                permission: [
+                    'risk-factors.index',
+                    'risk-factors.show',
+                    'risk-factors.store',
+                    'risk-factors.update',
+                    'risk-factors.destroy',
+                ],
+            },
         ]
     },
     {

src/modules/catalog/components/locations/LocationForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
 import mapboxgl from 'mapbox-gl';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import 'mapbox-gl/dist/mapbox-gl.css';
@@ -11,7 +11,8 @@ import InputText from 'primevue/inputtext';
 import Button from 'primevue/button';
 import Textarea from 'primevue/textarea';
 
-import type { LocationCreateRequest, LocationFormErrors, LocationGeofenceGeoJSON } from '../../types/locations.interfaces';
+import { locationServices } from '../../services/location.services';
+import type { LocationCreateRequest, LocationFormErrors, LocationGeofenceGeoJSON, Location } from '../../types/locations.interfaces';
 
 type GeofenceFeature = Feature<Polygon, GeoJsonProperties>;
 
@@ -31,6 +32,7 @@ type FormData = {
 
 const props = defineProps<{
     initialData?: Partial<LocationCreateRequest> & {
+        id?: number;
         name?: string;
         description?: string | null;
         address?: string | null;
@@ -53,11 +55,14 @@ const emit = defineEmits<{
 
 const mapToken = import.meta.env.VITE_MAPBOX_TOKEN as string | undefined;
 const mapContainer = ref<HTMLElement | null>(null);
-const mapRef = ref<any>(null);
+const mapRef = shallowRef<any>(null);
-const markerRef = ref<any>(null);
+const markerRef = shallowRef<any>(null);
-const drawRef = ref<MapboxDraw | null>(null);
+const drawRef = shallowRef<MapboxDraw | null>(null);
 const mapReady = ref(false);
 
+const locations = ref<Location[]>([]);
+const locationMarkersOnMap = shallowRef<mapboxgl.Marker[]>([]);
+
 const form = ref<FormData>({
     name: props.initialData?.name ?? '',
     description: props.initialData?.description ?? '',
@@ -149,6 +154,36 @@ const parseCoordinates = (value?: string | null): { lat: number; lng: number } |
     return parseHexEwkbPoint(normalized);
 };
 
+const renderLocationMarkers = () => {
+    if (!mapReady.value || !mapRef.value || !locations.value?.length) return;
+
+    locationMarkersOnMap.value.forEach(m => m.remove());
+    locationMarkersOnMap.value = [];
+
+    locations.value.forEach(loc => {
+        if (loc.id === props.initialData?.id) return; // Ignore current if editing
+
+        const locCoords = parseCoordinates(loc.coordinates);
+        if (!locCoords) return;
+
+        const el = document.createElement('div');
+        el.className = 'existing-location-marker';
+
+        const marker = new mapboxgl.Marker({ element: el })
+            .setLngLat([locCoords.lng, locCoords.lat])
+            .addTo(mapRef.value!);
+
+        if (loc.name) {
+            const popup = new mapboxgl.Popup({ offset: 25 }).setText(loc.name);
+            marker.setPopup(popup);
+            el.addEventListener('mouseenter', () => marker.togglePopup());
+            el.addEventListener('mouseleave', () => marker.togglePopup());
+        }
+
+        locationMarkersOnMap.value.push(marker);
+    });
+};
+
 const cloneGeofenceFeature = (feature: GeofenceFeature): GeofenceFeature => {
     return JSON.parse(JSON.stringify(feature)) as GeofenceFeature;
 };
@@ -595,6 +630,7 @@ const initializeMap = () => {
 
     mapRef.value.on('load', () => {
         mapReady.value = true;
+        renderLocationMarkers();
         if (form.value.geofence) {
             setDrawGeofence(form.value.geofence);
             fitMapToGeofence(form.value.geofence);
@@ -660,11 +696,23 @@ watch(
     }
 );
 
-onMounted(() => {
+const loadLocations = async () => {
+    try {
+        const response = await locationServices.getLocations(false);
+        locations.value = ('data' in response) ? response.data : [];
+    } catch (e) {
+        console.error('Error loading locations:', e);
+    }
+};
+
+onMounted(async () => {
+    await loadLocations();
     initializeMap();
 });
 
 onBeforeUnmount(() => {
+    locationMarkersOnMap.value.forEach(m => m.remove());
+    locationMarkersOnMap.value = [];
     drawRef.value = null;
     if (mapRef.value) {
         mapRef.value.remove();
@@ -801,6 +849,22 @@ onBeforeUnmount(() => {
     flex-direction: column;
     min-height: 0;
 }
+
+:global(.existing-location-marker) {
+    cursor: pointer;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background-color: #3b82f6;
+    border: 2px solid white;
+    box-shadow: 0 0 0 2px white, 0 0 0 4px #3b82f6;
+    transition: all 0.2s ease;
+}
+
+:global(.existing-location-marker:hover) {
+    transform: scale(1.3);
+    box-shadow: 0 0 0 2px white, 0 0 0 5px #3b82f6;
+}
 .lg\:flex-1 :deep(.p-card-content > div) {
     flex: 1;
     display: flex;

src/modules/catalog/components/risk-factors/RiskFactorModal.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="risk-factor-form">
+    <Card>
+      <template #title>
+        <div class="flex justify-between items-center">
+          <span>{{ form.id ? (isDuplicating ? 'Duplicar Factor' : 'Editar Factor') : 'Nuevo Factor de Riesgo' }}</span>
+          <div class="flex gap-2">
+            <Button v-if="form.id && !isDuplicating" 
+                    label="Duplicar" 
+                    icon="pi pi-copy" 
+                    severity="secondary" 
+                    outlined
+                    @click="handleDuplicate" 
+                    :loading="loading" />
+            <Button label="Guardar" 
+                    icon="pi pi-save" 
+                    @click="handleSave" 
+                    :loading="loading" />
+          </div>
+        </div>
+      </template>
+
+      <template #content>
+        <!-- Formulario Maestro -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+          <div class="flex flex-col gap-2">
+            <label for="name" class="font-semibold">Nombre del Factor</label>
+            <InputText id="name" 
+                       v-model="form.name" 
+                       placeholder="Ej. Condiciones Climáticas"
+                       :class="{ 'p-invalid': errors.name }" />
+            <small v-if="errors.name" class="p-error">{{ errors.name[0] }}</small>
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <label for="context" class="font-semibold">Contexto de Evaluación</label>
+            <Dropdown id="context" 
+                      v-model="form.evaluation_context" 
+                      :options="contextOptions" 
+                      optionLabel="label" 
+                      optionValue="value" 
+                      placeholder="Seleccione Contexto"
+                      :class="{ 'p-invalid': errors.evaluation_context }" />
+            <small v-if="errors.evaluation_context" class="p-error">{{ errors.evaluation_context[0] }}</small>
+          </div>
+
+          <div class="flex flex-col gap-2 md:col-span-2">
+            <label for="description" class="font-semibold">Descripción (Opcional)</label>
+            <Textarea id="description" 
+                      v-model="form.description" 
+                      rows="3" 
+                      autoResize 
+                      placeholder="Detalles sobre este factor de riesgo..." />
+          </div>
+        </div>
+
+        <!-- Formulario Detalle (DataTable) -->
+        <div class="mt-8 border-t pt-6">
+          <div class="flex justify-between items-center mb-4">
+            <h3 class="text-xl font-bold">Opciones de Evaluación</h3>
+            <Button label="Agregar Opción" 
+                    icon="pi pi-plus" 
+                    size="small" 
+                    severity="success" 
+                    outlined
+                    @click="addOption" />
+          </div>
+
+          <DataTable :value="form.options" 
+                     editMode="row" 
+                     v-model:editingRows="editingRows" 
+                     @row-edit-save="onRowEditSave"
+                     dataKey="tempId"
+                     responsiveLayout="scroll"
+                     class="p-datatable-sm overflow-hidden rounded-lg shadow-sm">
+            
+            <Column field="name" header="Nombre de la Opción" style="width: 60%">
+              <template #editor="{ data, field }">
+                <InputText v-model="data[field]" class="w-full" autofocus />
+              </template>
+              <template #body="{ data }">
+                {{ data.name || '---' }}
+              </template>
+            </Column>
+
+            <Column field="value" header="Valor de Riesgo" style="width: 20%">
+              <template #editor="{ data, field }">
+                <InputNumber v-model="data[field]" :min="0" :max="100" class="w-full" />
+              </template>
+              <template #body="{ data }">
+                <Tag :value="data.value" :severity="getRiskSeverity(data.value)" />
+              </template>
+            </Column>
+
+            <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
+            
+            <Column style="width: 10%; min-width: 4rem" bodyStyle="text-align:center">
+              <template #body="{ index }">
+                <Button icon="pi pi-trash" 
+                        severity="danger" 
+                        text 
+                        rounded 
+                        @click="removeOption(index)" />
+              </template>
+            </Column>
+
+            <template #empty>
+              <div class="text-center p-4 italic text-gray-500">
+                No hay opciones definidas. Debe agregar al menos una.
+              </div>
+            </template>
+          </DataTable>
+          <small v-if="errors.options" class="p-error block mt-2 text-center">{{ errors.options[0] }}</small>
+        </div>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import Card from 'primevue/card';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import Dropdown from 'primevue/dropdown';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Button from 'primevue/button';
+import InputNumber from 'primevue/inputnumber';
+import Tag from 'primevue/tag';
+import { riskFactorServices } from '../../services/risk-factors.services';
+import type { RiskFactor, RiskOption, RiskFactorFormErrors } from '../../types/risk-factors.interfaces';
+
+interface ExtendedRiskOption extends RiskOption {
+  tempId?: number; // Para facilitar el manejo reactivo en la tabla
+}
+
+const props = defineProps<{
+  initialData?: RiskFactor;
+}>();
+
+const emit = defineEmits(['saved', 'cancel']);
+
+const toast = useToast();
+const loading = ref(false);
+const isDuplicating = ref(false);
+const editingRows = ref([]);
+const errors = ref<RiskFactorFormErrors>({});
+
+const contextOptions = [
+  { label: 'Ruta', value: 1 },
+  { label: 'Programa', value: 2 }
+];
+
+const form = reactive<RiskFactor & { options: ExtendedRiskOption[] }>({
+  id: undefined,
+  name: '',
+  description: '',
+  evaluation_context: 1,
+  options: []
+});
+
+onMounted(() => {
+  if (props.initialData) {
+    Object.assign(form, JSON.parse(JSON.stringify(props.initialData)));
+    // Asegurar que cada opción tenga un tempId para PrimeVue
+    form.options = form.options.map((opt, i) => ({ ...opt, tempId: i }));
+  }
+});
+
+const addOption = () => {
+    const newOption: ExtendedRiskOption = {
+        name: '',
+        value: 1, // Valor por defecto solicitado
+        tempId: Date.now() + Math.random()
+    };
+    form.options.push(newOption);
+};
+
+const removeOption = (index: number) => {
+    form.options.splice(index, 1);
+};
+
+const onRowEditSave = (event: any) => {
+    let { newData, index } = event;
+    form.options[index] = newData;
+};
+
+const getRiskSeverity = (val: number) => {
+  if (val <= 2) return 'success';
+  if (val <= 5) return 'warning';
+  return 'danger';
+};
+
+const validate = (): boolean => {
+    errors.value = {};
+    let isValid = true;
+
+    if (!form.name.trim()) {
+        errors.value.name = ['El nombre es obligatorio'];
+        isValid = false;
+    }
+
+    if (form.options.length === 0) {
+        errors.value.options = ['Debe agregar al menos una opción'];
+        isValid = false;
+    }
+
+    return isValid;
+};
+
+const handleSave = async () => {
+    if (!validate()) {
+        toast.add({ severity: 'warn', summary: 'Validación', detail: 'Revise los campos obligatorios', life: 3000 });
+        return;
+    }
+
+    loading.value = true;
+    try {
+        const payload = JSON.parse(JSON.stringify(form));
+        let response;
+
+        if (form.id && !isDuplicating.value) {
+            response = await riskFactorServices.updateRiskFactor(form.id, payload);
+        } else {
+            response = await riskFactorServices.createRiskFactor(payload);
+        }
+
+        toast.add({ severity: 'success', summary: 'Éxito', detail: response.message, life: 3000 });
+        emit('saved', response.data);
+    } catch (error: any) {
+        if (error.response?.data?.errors) {
+            errors.value = error.response.data.errors;
+        }
+        toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudo guardar el factor de riesgo', life: 3000 });
+    } finally {
+        loading.value = false;
+    }
+};
+
+const handleDuplicate = async () => {
+    if (!form.id) return;
+
+    loading.value = true;
+    try {
+        const response = await riskFactorServices.duplicateRiskFactor(form.id);
+        toast.add({ severity: 'success', summary: 'Duplicado', detail: 'Factor clonado correctamente', life: 3000 });
+        
+        // Cargar los datos del duplicado en el form
+        Object.assign(form, response.data);
+        form.options = form.options.map((opt, i) => ({ ...opt, tempId: i }));
+        isDuplicating.value = true; // Avisar que ahora estamos en modo "clon"
+        
+        emit('saved', response.data);
+    } catch (error) {
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Error al duplicar el factor', life: 3000 });
+    } finally {
+        loading.value = false;
+    }
+};
+</script>
+
+<style scoped>
+.risk-factor-form {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+:deep(.p-dropdown), :deep(.p-inputtext) {
+  width: 100%;
+}
+
+:deep(.p-datatable.p-datatable-sm .p-datatable-thead > tr > th) {
+  padding: 0.5rem 0.5rem;
+  background-color: var(--surface-100);
+}
+
+:deep(.p-card) {
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  border-radius: 1rem;
+}
+</style>

src/modules/catalog/components/risk-factors/RiskFactors.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="risk-factors-view p-4">
+    <div class="flex justify-between items-center mb-6">
+      <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-0">Factores de Riesgo</h1>
+      <Button label="Nuevo Factor" 
+              icon="pi pi-plus" 
+              @click="openNew" 
+              v-if="hasPermission('risk-factors.store')" />
+    </div>
+
+    <Card>
+      <template #content>
+        <DataTable :value="factors" 
+                   :loading="loading" 
+                   paginator 
+                   :rows="10" 
+                   dataKey="id" 
+                   responsiveLayout="scroll"
+                   class="p-datatable-sm">
+          
+          <template #header>
+            <div class="flex justify-end">
+              <span class="p-input-icon-left">
+                <i class="pi pi-search" />
+                <InputText v-model="filters.name" placeholder="Buscar por nombre..." @input="fetchFactors" />
+              </span>
+            </div>
+          </template>
+
+          <Column field="name" header="Nombre" sortable />
+          
+          <Column field="evaluation_context" header="Contexto" sortable>
+            <template #body="{ data }">
+              <Tag :value="data.evaluation_context === 1 ? 'Ruta' : 'Programa'" 
+                   :severity="data.evaluation_context === 1 ? 'info' : 'success'" />
+            </template>
+          </Column>
+
+          <Column field="description" header="Descripción">
+            <template #body="{ data }">
+              <span class="text-sm text-surface-600 dark:text-surface-400">
+                {{ data.description || 'Sin descripción' }}
+              </span>
+            </template>
+          </Column>
+
+          <Column field="options" header="Opciones">
+            <template #body="{ data }">
+              <span class="font-medium">{{ data.options?.length || 0 }} niveles</span>
+            </template>
+          </Column>
+
+          <Column header="Acciones" headerStyle="min-width:10rem">
+            <template #body="{ data }">
+              <div class="flex gap-2">
+                <Button icon="pi pi-pencil" 
+                        severity="info" 
+                        text 
+                        rounded 
+                        @click="editFactor(data)" 
+                        v-if="hasPermission('risk-factors.update')" />
+                
+                <Button icon="pi pi-copy" 
+                        severity="secondary" 
+                        text 
+                        rounded 
+                        @click="duplicateFactor(data)" 
+                        v-if="hasPermission('risk-factors.store')" 
+                        title="Duplicar" />
+
+                <Button icon="pi pi-trash" 
+                        severity="danger" 
+                        text 
+                        rounded 
+                        @click="confirmDelete(data)" 
+                        v-if="hasPermission('risk-factors.destroy')" />
+              </div>
+            </template>
+          </Column>
+
+          <template #empty>
+            <div class="text-center p-8">
+              No se encontraron factores de riesgo.
+            </div>
+          </template>
+        </DataTable>
+      </template>
+    </Card>
+
+    <!-- Modal del Formulario -->
+    <Dialog v-model:visible="formDialog" 
+            :header="dialogTitle" 
+            modal 
+            :style="{ width: '800px' }"
+            :breakpoints="{ '960px': '75vw', '641px': '90vw' }"
+            dismissableMask
+            @hide="onDialogHide">
+      <RiskFactorModal v-if="formDialog" 
+                      :initialData="selectedFactor" 
+                      @saved="onSaved" 
+                      @cancel="formDialog = false" />
+    </Dialog>
+
+    <!-- Confirmación de Eliminación -->
+    <ConfirmDialog />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, reactive } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useConfirm } from 'primevue/useconfirm';
+import Button from 'primevue/button';
+import Card from 'primevue/card';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import InputText from 'primevue/inputtext';
+import Tag from 'primevue/tag';
+import Dialog from 'primevue/dialog';
+import ConfirmDialog from 'primevue/confirmdialog';
+import RiskFactorModal from './RiskFactorModal.vue';
+import { riskFactorServices } from '../../services/risk-factors.services';
+import type { RiskFactor } from '../../types/risk-factors.interfaces';
+import { useAuth } from '../../../auth/composables/useAuth';
+
+const { hasPermission } = useAuth();
+const toast = useToast();
+const confirm = useConfirm();
+
+const factors = ref<RiskFactor[]>([]);
+const loading = ref(false);
+const formDialog = ref(false);
+const selectedFactor = ref<RiskFactor | undefined>(undefined);
+const dialogTitle = ref('Nuevo Factor');
+
+const filters = reactive({
+  name: ''
+});
+
+const fetchFactors = async () => {
+    loading.value = true;
+    try {
+        const response = await riskFactorServices.getRiskFactors({ name: filters.name });
+        factors.value = response.data;
+    } catch (error) {
+        toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudieron cargar los datos', life: 3000 });
+    } finally {
+        loading.value = false;
+    }
+};
+
+onMounted(fetchFactors);
+
+const openNew = () => {
+    selectedFactor.value = undefined;
+    dialogTitle.value = 'Nuevo Factor de Riesgo';
+    formDialog.value = true;
+};
+
+const editFactor = (factor: RiskFactor) => {
+    selectedFactor.value = JSON.parse(JSON.stringify(factor));
+    dialogTitle.value = 'Editar Factor de Riesgo';
+    formDialog.value = true;
+};
+
+const duplicateFactor = (factor: RiskFactor) => {
+    // Para duplicar, cargamos los datos pero limpiamos el ID
+    const clone = JSON.parse(JSON.stringify(factor));
+    delete clone.id;
+    clone.name = clone.name + ' (Copia)';
+    // También limpiamos los IDs de las opciones
+    clone.options = clone.options.map((opt: any) => {
+        delete opt.id;
+        delete opt.risk_factor_id;
+        return opt;
+    });
+    
+    selectedFactor.value = clone;
+    dialogTitle.value = 'Duplicar Factor de Riesgo';
+    formDialog.value = true;
+};
+
+const confirmDelete = (factor: RiskFactor) => {
+    confirm.require({
+        message: `¿Está seguro de eliminar el factor "${factor.name}"?`,
+        header: 'Confirmación de Eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        acceptLabel: 'Sí, eliminar',
+        rejectLabel: 'No',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                await riskFactorServices.deleteRiskFactor(factor.id!);
+                toast.add({ severity: 'success', summary: 'Eliminado', detail: 'Factor eliminado correctamente', life: 3000 });
+                fetchFactors();
+            } catch (error) {
+                toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudo eliminar el factor', life: 3000 });
+            }
+        }
+    });
+};
+
+const onSaved = () => {
+    formDialog.value = false;
+    fetchFactors();
+};
+
+const onDialogHide = () => {
+    selectedFactor.value = undefined;
+};
+</script>
+
+<style scoped>
+.risk-factors-view {
+    animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+</style>

src/modules/catalog/components/route-segments/RouteSegmentForm.vue

@@ -0,0 +1,672 @@
+<script setup lang="ts">
+/**
+ * Formulario de creación/edición de Segmentos de Ruta
+ *
+ * Layout dividido: panel lateral (formulario + puntos) y panel principal (mapa Mapbox)
+ * Los puntos se agregan haciendo clic en el mapa o manualmente.
+ * La ruta se calcula automáticamente con Mapbox Directions API.
+ *
+ * @author Raul Rene Velazco Narvaez <raul310882@gmail.com>
+ * @version 1.0.0
+ */
+
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import InputNumber from 'primevue/inputnumber';
+import Select from 'primevue/select';
+
+import { locationServices } from '../../services/location.services';
+import type { Location } from '../../types/locations.interfaces';
+import type {
+    RouteSegment,
+    RouteSegmentCreateRequest,
+    RouteSegmentFormErrors,
+    RoutePoint,
+    GeoJSONLineString,
+    NavigationLeg,
+} from '../../types/routeSegments.interfaces';
+
+// ─── Props y Emits ───────────────────────────────────────────
+
+const props = defineProps<{
+    initialData?: RouteSegment;
+    formErrors?: RouteSegmentFormErrors;
+    isEditing?: boolean;
+    loading?: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'submit', payload: RouteSegmentCreateRequest): void;
+    (e: 'cancel'): void;
+}>();
+
+// ─── Estado del mapa ─────────────────────────────────────────
+
+const mapToken = import.meta.env.VITE_MAPBOX_TOKEN as string | undefined;
+const mapContainer = ref<HTMLElement | null>(null);
+const mapRef = ref<mapboxgl.Map | null>(null);
+const mapReady = ref(false);
+const markersOnMap = ref<mapboxgl.Marker[]>([]);
+const locationMarkersOnMap = ref<mapboxgl.Marker[]>([]);
+
+// ─── Estado del formulario ───────────────────────────────────
+
+const locations = ref<Location[]>([]);
+const originLocation = ref<Location | null>(null);
+const destinationLocation = ref<Location | null>(null);
+const points = ref<RoutePoint[]>([]);
+const routeGeometry = ref<GeoJSONLineString | null>(null);
+const navigationMetadata = ref<NavigationLeg[] | null>(null);
+const metersDistance = ref<number | null>(null);
+const secondsDuration = ref<number | null>(null);
+const isLoadingRoute = ref(false);
+const routeError = ref<string | null>(null);
+
+const manualLatitude = ref('');
+const manualLongitude = ref('');
+
+let activeFetchToken = 0;
+
+// ─── Inicialización ──────────────────────────────────────────
+
+onMounted(async () => {
+    await loadLocations();
+
+    if (props.initialData) {
+        loadInitialData(props.initialData);
+    }
+
+    initMap();
+});
+
+onBeforeUnmount(() => {
+    markersOnMap.value.forEach(m => m.remove());
+    markersOnMap.value = [];
+    locationMarkersOnMap.value.forEach(m => m.remove());
+    locationMarkersOnMap.value = [];
+    if (mapRef.value) {
+        mapRef.value.remove();
+        mapRef.value = null;
+    }
+});
+
+async function loadLocations() {
+    try {
+        const response = await locationServices.getLocations(false);
+        locations.value = ('data' in response) ? response.data : [];
+    } catch (e) {
+        console.error('Error loading locations:', e);
+    }
+}
+
+function loadInitialData(segment: RouteSegment) {
+    originLocation.value = segment.origin ?? null;
+    destinationLocation.value = segment.destination ?? null;
+    metersDistance.value = segment.meters_distance;
+    secondsDuration.value = segment.seconds_duration;
+    navigationMetadata.value = segment.navigation_metadata ?? null;
+
+    if (segment.route_points?.length) {
+        points.value = segment.route_points.map(normalizePoint).filter(Boolean) as RoutePoint[];
+    }
+
+    if (segment.path_geojson) {
+        routeGeometry.value = segment.path_geojson;
+    }
+}
+
+// ─── Mapa ────────────────────────────────────────────────────
+
+function initMap() {
+    if (!mapToken || !mapContainer.value) return;
+
+    mapboxgl.accessToken = mapToken;
+
+    const map = new mapboxgl.Map({
+        container: mapContainer.value,
+        style: 'mapbox://styles/mapbox/streets-v12',
+        center: [-92.579, 18.039],
+        zoom: 6,
+    });
+
+    map.addControl(new mapboxgl.NavigationControl(), 'top-right');
+
+    map.on('load', () => {
+        mapRef.value = map;
+        mapReady.value = true;
+        renderLocationMarkers();
+        renderMarkers();
+
+        if (routeGeometry.value) {
+            drawRoute(routeGeometry.value);
+        }
+    });
+
+    map.on('click', (event: mapboxgl.MapMouseEvent) => {
+        addPoint({
+            lng: Number(event.lngLat.lng.toFixed(6)),
+            lat: Number(event.lngLat.lat.toFixed(6)),
+        });
+    });
+}
+
+// ─── Coordenadas auxiliares para locaciones ───────────────────
+
+function parseLocationCoordinates(coords: string | null | undefined): { lat: number; lng: number } | null {
+    if (!coords) return null;
+    const normalized = coords.trim();
+
+    // WKT: POINT(lng lat) o SRID=4326;POINT(lng lat)
+    const wkt = normalized.replace(/^SRID=\d+;/i, '');
+    const match = wkt.match(/POINT\s*\(\s*([-\d.]+)\s+([-\d.]+)\s*\)/i);
+    if (match) {
+        return { lng: Number(match[1]), lat: Number(match[2]) };
+    }
+
+    // Hex EWKB Point
+    if (/^[0-9a-fA-F]+$/.test(normalized) && normalized.length >= 42) {
+        return parseHexEwkbPoint(normalized);
+    }
+
+    return null;
+}
+
+function parseHexEwkbPoint(hex: string): { lat: number; lng: number } | null {
+    if (hex.length % 2 !== 0) return null;
+    const bytes = new Uint8Array(hex.length / 2);
+    for (let i = 0; i < hex.length; i += 2) {
+        bytes[i / 2] = parseInt(hex.slice(i, i + 2), 16);
+    }
+    if (bytes.length < 21) return null;
+
+    const view = new DataView(bytes.buffer);
+    const le = view.getUint8(0) === 1;
+    const type = view.getUint32(1, le);
+    const hasSrid = (type & 0x20000000) !== 0;
+    const geomType = type & 0x0fffffff;
+    if (geomType !== 1) return null;
+
+    let off = 5;
+    if (hasSrid) off += 4;
+
+    if (bytes.length < off + 16) return null;
+    const lng = view.getFloat64(off, le);
+    const lat = view.getFloat64(off + 8, le);
+    if (isNaN(lat) || isNaN(lng)) return null;
+    return { lat, lng };
+}
+
+// ─── Puntos y marcadores ─────────────────────────────────────
+
+function normalizePoint(point: any): RoutePoint | null {
+    if (!point) return null;
+    const lng = Number(point.lng ?? point.longitude ?? point.lon);
+    const lat = Number(point.lat ?? point.latitude);
+    if (!isFinite(lng) || !isFinite(lat)) return null;
+    return { lng: Number(lng.toFixed(6)), lat: Number(lat.toFixed(6)) };
+}
+
+function findLocationForPoint(point: RoutePoint): Location | null {
+    if (!locations.value?.length) return null;
+
+    for (const loc of locations.value) {
+        const locCoords = parseLocationCoordinates(loc.coordinates);
+        if (!locCoords) continue;
+
+        const dist = haversineDistance(point.lat, point.lng, locCoords.lat, locCoords.lng);
+        // Usar radio de la geocerca o un radio por defecto de 500m
+        const radius = 500;
+        if (dist <= radius) return loc;
+    }
+
+    return null;
+}
+
+function haversineDistance(lat1: number, lng1: number, lat2: number, lng2: number): number {
+    const R = 6378137;
+    const dLat = (lat2 - lat1) * Math.PI / 180;
+    const dLng = (lng2 - lng1) * Math.PI / 180;
+    const a = Math.sin(dLat / 2) ** 2 + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLng / 2) ** 2;
+    return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+}
+
+function addPoint(point: RoutePoint) {
+    const normalized = normalizePoint(point);
+    if (!normalized) {
+        routeError.value = 'No se pudo agregar la coordenada. Verifica latitud y longitud.';
+        return;
+    }
+
+    // Primer punto: auto-detectar locación de origen
+    if (points.value.length === 0) {
+        const locOrigin = findLocationForPoint(normalized);
+        if (locOrigin) {
+            originLocation.value = locOrigin;
+        }
+    }
+
+    // Siempre intenta actualizar el destino con el último punto
+    const locDest = findLocationForPoint(normalized);
+    if (locDest && locDest.id !== originLocation.value?.id) {
+        destinationLocation.value = locDest;
+    }
+
+    routeError.value = null;
+    points.value = [...points.value, normalized];
+}
+
+function removeLastPoint() {
+    if (points.value.length === 0) return;
+    const updated = [...points.value];
+    updated.pop();
+    points.value = updated;
+
+    if (updated.length === 0) {
+        originLocation.value = null;
+        destinationLocation.value = null;
+    }
+}
+
+function clearPoints() {
+    points.value = [];
+    routeError.value = null;
+    originLocation.value = null;
+    destinationLocation.value = null;
+    routeGeometry.value = null;
+    navigationMetadata.value = null;
+    metersDistance.value = null;
+    secondsDuration.value = null;
+    clearRouteLayer();
+}
+
+function handleManualSubmit() {
+    const lat = parseFloat(manualLatitude.value);
+    const lng = parseFloat(manualLongitude.value);
+    if (!isFinite(lat) || !isFinite(lng)) return;
+
+    addPoint({ lat, lng });
+    manualLatitude.value = '';
+    manualLongitude.value = '';
+}
+
+// Trigger route fetch when points change
+watch(points, (newPoints) => {
+    renderMarkers();
+    if (newPoints.length >= 2) {
+        fetchRoute();
+    } else {
+        routeGeometry.value = null;
+        navigationMetadata.value = null;
+        metersDistance.value = null;
+        secondsDuration.value = null;
+        clearRouteLayer();
+    }
+}, { deep: true });
+
+// ─── Renderizado de marcadores ───────────────────────────────
+
+function renderMarkers() {
+    if (!mapReady.value || !mapRef.value) return;
+
+    markersOnMap.value.forEach(m => m.remove());
+    markersOnMap.value = [];
+
+    points.value.forEach((point, index) => {
+        const el = document.createElement('div');
+        el.className = 'route-marker';
+        el.textContent = String(index + 1);
+
+        const marker = new mapboxgl.Marker({ element: el, anchor: 'center' })
+            .setLngLat([point.lng, point.lat])
+            .addTo(mapRef.value!);
+        markersOnMap.value.push(marker);
+    });
+
+    if (points.value.length > 0) {
+        const first = points.value[0];
+        mapRef.value.flyTo({ center: [first.lng, first.lat], zoom: Math.max(mapRef.value.getZoom(), 10), speed: 0.8 });
+    }
+}
+
+function renderLocationMarkers() {
+    if (!mapReady.value || !mapRef.value || !locations.value?.length) return;
+
+    locationMarkersOnMap.value.forEach(m => m.remove());
+    locationMarkersOnMap.value = [];
+
+    locations.value.forEach(loc => {
+        const locCoords = parseLocationCoordinates(loc.coordinates);
+        if (!locCoords) return;
+
+        const el = document.createElement('div');
+        el.className = 'location-marker';
+
+        const marker = new mapboxgl.Marker({ element: el })
+            .setLngLat([locCoords.lng, locCoords.lat])
+            .addTo(mapRef.value!);
+
+        if (loc.name) {
+            const popup = new mapboxgl.Popup({ offset: 25 }).setText(loc.name);
+            marker.setPopup(popup);
+            el.addEventListener('mouseenter', () => marker.togglePopup());
+            el.addEventListener('mouseleave', () => marker.togglePopup());
+        }
+
+        locationMarkersOnMap.value.push(marker);
+    });
+}
+
+// ─── Ruta Mapbox Directions ──────────────────────────────────
+
+async function fetchRoute() {
+    if (!mapToken || points.value.length < 2) return;
+
+    routeError.value = null;
+    const fetchToken = ++activeFetchToken;
+    isLoadingRoute.value = true;
+
+    try {
+        const coordsPath = points.value.map(p => `${p.lng},${p.lat}`).join(';');
+        const params = new URLSearchParams({
+            access_token: mapToken,
+            geometries: 'geojson',
+            overview: 'full',
+            steps: 'true',
+            annotations: 'distance,duration',
+        });
+
+        const url = `https://api.mapbox.com/directions/v5/mapbox/driving-traffic/${coordsPath}?${params.toString()}&language=es`;
+        const response = await fetch(url);
+
+        if (fetchToken !== activeFetchToken) return;
+
+        if (!response.ok) throw new Error(`Error al obtener la ruta (${response.status})`);
+
+        const data = await response.json();
+        const route = data?.routes?.[0];
+
+        if (!route?.geometry) {
+            routeGeometry.value = null;
+            clearRouteLayer();
+            routeError.value = 'No se encontró una ruta para los puntos seleccionados.';
+            return;
+        }
+
+        routeGeometry.value = route.geometry;
+        metersDistance.value = Math.round(route.distance ?? 0);
+        secondsDuration.value = Math.round(route.duration ?? 0);
+
+        // Extraer solo instrucciones de navegación (legs)
+        navigationMetadata.value = (route.legs ?? []).map((leg: any) => ({
+            steps: (leg.steps ?? []).map((step: any) => ({
+                maneuver: { instruction: step.maneuver?.instruction || '' },
+            })),
+        }));
+
+        drawRoute(route.geometry);
+    } catch (error: any) {
+        if (fetchToken !== activeFetchToken) return;
+        routeGeometry.value = null;
+        clearRouteLayer();
+        routeError.value = error instanceof Error ? error.message : String(error);
+    } finally {
+        if (fetchToken === activeFetchToken) isLoadingRoute.value = false;
+    }
+}
+
+function drawRoute(geometry: GeoJSONLineString) {
+    if (!mapReady.value || !mapRef.value || !geometry) return;
+
+    const map = mapRef.value;
+    const sourceId = 'route-source';
+    const layerId = 'route-layer';
+
+    if (map.getLayer(layerId)) map.removeLayer(layerId);
+    if (map.getSource(sourceId)) map.removeSource(sourceId);
+
+    map.addSource(sourceId, {
+        type: 'geojson',
+        data: { type: 'Feature', properties: {}, geometry },
+    });
+
+    map.addLayer({
+        id: layerId,
+        type: 'line',
+        source: sourceId,
+        layout: { 'line-join': 'round', 'line-cap': 'round' },
+        paint: { 'line-color': '#1a73e8', 'line-width': 4, 'line-opacity': 0.8 },
+    });
+}
+
+function clearRouteLayer() {
+    if (!mapRef.value) return;
+    const map = mapRef.value;
+    if (map.getLayer('route-layer')) map.removeLayer('route-layer');
+    if (map.getSource('route-source')) map.removeSource('route-source');
+}
+
+function focusPoint(point: RoutePoint) {
+    if (!mapRef.value) return;
+    mapRef.value.flyTo({
+        center: [point.lng, point.lat],
+        zoom: Math.max(mapRef.value.getZoom(), 13),
+        speed: 0.8,
+    });
+}
+
+// ─── Submit ──────────────────────────────────────────────────
+
+const canSubmit = computed(() => {
+    return originLocation.value && destinationLocation.value && points.value.length >= 2;
+});
+
+function handleSubmit() {
+    if (!canSubmit.value) return;
+
+    const payload: RouteSegmentCreateRequest = {
+        origin_location_id: originLocation.value!.id,
+        destination_location_id: destinationLocation.value!.id,
+        meters_distance: metersDistance.value,
+        seconds_duration: secondsDuration.value,
+        path_geometry: routeGeometry.value ?? undefined,
+        navigation_metadata: navigationMetadata.value ?? undefined,
+        route_points: points.value,
+    };
+
+    emit('submit', payload);
+}
+
+// ─── Helpers formato ─────────────────────────────────────────
+
+const formatDistanceKm = (meters: number | null): string => {
+    if (!meters || meters <= 0) return '—';
+    return `${(meters / 1000).toFixed(2)} km`;
+};
+
+const formatDuration = (seconds: number | null): string => {
+    if (!seconds || seconds <= 0) return '—';
+    const totalMinutes = Math.round(seconds / 60);
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    if (hours === 0) return `${minutes} min`;
+    return `${hours} h ${minutes} min`;
+};
+</script>
+
+<template>
+    <div class="grid h-[calc(100vh-10rem)] gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,3fr)]">
+        <!-- ━━━ Panel Lateral ━━━ -->
+        <div class="flex flex-col gap-4 overflow-y-auto pr-1">
+            <!-- Locaciones detectadas -->
+            <Card>
+                <template #content>
+                    <div class="space-y-3">
+                        <div>
+                            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-1">Origen</label>
+                            <InputText :modelValue="originLocation?.name || '(se detecta del mapa)'" readonly class="w-full" />
+                        </div>
+                        <div>
+                            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-1">Destino</label>
+                            <InputText :modelValue="destinationLocation?.name || '(se detecta del mapa)'" readonly class="w-full" />
+                        </div>
+                        <div class="flex justify-end gap-2 pt-2">
+                            <Button
+                                label="Guardar"
+                                icon="pi pi-check"
+                                :disabled="!canSubmit || loading"
+                                :loading="loading"
+                                @click="handleSubmit"
+                            />
+                        </div>
+                    </div>
+                </template>
+            </Card>
+
+            <!-- Agregar coordenadas manualmente -->
+            <Card>
+                <template #content>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
+                        Haz clic en el mapa o agrega coordenadas manualmente para trazar el segmento.
+                    </p>
+                    <form class="grid grid-cols-2 gap-3" @submit.prevent="handleManualSubmit">
+                        <div>
+                            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-1">Latitud</label>
+                            <InputText v-model="manualLatitude" placeholder="19.4326" class="w-full" />
+                        </div>
+                        <div>
+                            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-1">Longitud</label>
+                            <InputText v-model="manualLongitude" placeholder="-99.1332" class="w-full" />
+                        </div>
+                        <div class="col-span-2 flex justify-end gap-2">
+                            <Button
+                                label="Limpiar"
+                                icon="pi pi-times"
+                                severity="danger"
+                                text
+                                :disabled="points.length === 0"
+                                @click="clearPoints"
+                            />
+                            <Button label="Agregar" icon="pi pi-plus" type="submit" text />
+                        </div>
+                    </form>
+                </template>
+            </Card>
+
+            <!-- Lista de puntos -->
+            <Card>
+                <template #content>
+                    <div class="flex items-center justify-between mb-3">
+                        <span class="text-xs font-bold text-gray-500 dark:text-gray-400 uppercase">Coordenadas Trazadas</span>
+                        <span class="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                            {{ points.length }} puntos
+                        </span>
+                    </div>
+
+                    <p v-if="points.length === 0" class="text-xs text-gray-500 dark:text-gray-400">
+                        Agrega al menos dos puntos para trazar el segmento.
+                    </p>
+
+                    <ul v-else class="space-y-2 max-h-[200px] overflow-y-auto">
+                        <li
+                            v-for="(point, index) in points"
+                            :key="`${point.lat}-${point.lng}-${index}`"
+                            class="flex items-center justify-between rounded-md border border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-surface-800 px-3 py-2 text-xs"
+                        >
+                            <div>
+                                <span class="font-semibold text-primary">#{{ index + 1 }}</span>
+                                <span class="ml-2 font-mono">{{ point.lat }}, {{ point.lng }}</span>
+                            </div>
+                            <div class="flex items-center gap-1">
+                                <Button icon="pi pi-map-marker" text rounded size="small" @click="focusPoint(point)" />
+                                <Button
+                                    v-if="index === points.length - 1"
+                                    icon="pi pi-trash"
+                                    text rounded size="small"
+                                    severity="danger"
+                                    @click="removeLastPoint"
+                                />
+                            </div>
+                        </li>
+                    </ul>
+                </template>
+            </Card>
+
+            <!-- Datos de ruta -->
+            <Card>
+                <template #content>
+                    <h3 class="text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-3">Datos de la Ruta</h3>
+
+                    <div v-if="isLoadingRoute" class="text-xs text-primary flex items-center gap-2">
+                        <i class="pi pi-spin pi-spinner"></i> Consultando ruta...
+                    </div>
+                    <div v-else-if="routeError" class="text-xs text-red-500">{{ routeError }}</div>
+                    <div v-else-if="metersDistance" class="space-y-2 text-xs text-surface-700 dark:text-surface-200">
+                        <div class="flex gap-4">
+                            <p><span class="font-semibold">Distancia:</span> {{ formatDistanceKm(metersDistance) }}</p>
+                            <p><span class="font-semibold">Duración:</span> {{ formatDuration(secondsDuration) }}</p>
+                        </div>
+                        <details v-if="navigationMetadata?.length" class="mt-2 rounded-md border border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-surface-800 p-3 text-[11px]">
+                            <summary class="cursor-pointer font-semibold">Ver pasos de navegación</summary>
+                            <ol class="mt-2 space-y-2 list-decimal pl-4">
+                                <li v-for="(leg, legIndex) in navigationMetadata" :key="legIndex">
+                                    <p class="font-semibold">Tramo {{ legIndex + 1 }}</p>
+                                    <ul class="mt-1 space-y-1">
+                                        <li v-for="(step, stepIndex) in leg.steps" :key="stepIndex">
+                                            {{ step.maneuver?.instruction }}
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ol>
+                        </details>
+                    </div>
+                    <div v-else class="text-xs text-gray-400">Sin datos de ruta.</div>
+                </template>
+            </Card>
+        </div>
+
+        <!-- ━━━ Mapa ━━━ -->
+        <div class="h-full overflow-hidden rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm relative">
+            <div ref="mapContainer" class="h-full w-full" />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+:global(.location-marker) {
+    cursor: pointer;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background-color: #3b82f6;
+    border: 2px solid white;
+    box-shadow: 0 0 0 2px white, 0 0 0 4px #3b82f6;
+    transition: all 0.2s ease;
+}
+
+:global(.location-marker:hover) {
+    transform: scale(1.3);
+    box-shadow: 0 0 0 2px white, 0 0 0 5px #3b82f6;
+}
+
+:global(.route-marker) {
+    width: 24px;
+    height: 24px;
+    background-color: #1a73e8;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+    user-select: none;
+}
+</style>

src/modules/catalog/components/route-segments/RouteSegmentRiskAssessment.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+/**
+ * Evaluación de Riesgo de Segmentos de Ruta
+ *
+ * Muestra los factores de riesgo del contexto "ruta" con sus opciones
+ * y permite seleccionar una opción por cada factor para evaluar el segmento.
+ *
+ * @author Raul Rene Velazco Narvaez <raul310882@gmail.com>
+ * @version 1.0.0
+ */
+
+import { computed, onMounted, ref } from 'vue';
+
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import Select from 'primevue/select';
+import { useToast } from 'primevue/usetoast';
+
+import { routeSegmentServices } from '../../services/routeSegment.services';
+import type {
+    RouteSegment,
+    RiskFactor,
+    RiskOption,
+    RiskEvaluationPayload,
+} from '../../types/routeSegments.interfaces';
+
+// ─── Props y Emits ───────────────────────────────────────────
+
+const props = defineProps<{
+    segment: RouteSegment;
+}>();
+
+const emit = defineEmits<{
+    (e: 'saved'): void;
+    (e: 'cancel'): void;
+}>();
+
+const toast = useToast();
+
+// ─── Estado ──────────────────────────────────────────────────
+
+const loadingFactors = ref(true);
+const saving = ref(false);
+const riskFactors = ref<RiskFactor[]>([]);
+const selectedOptions = ref<Record<number, RiskOption | null>>({});
+
+// ─── Inicialización ──────────────────────────────────────────
+
+onMounted(async () => {
+    await fetchRiskFactors();
+});
+
+async function fetchRiskFactors() {
+    loadingFactors.value = true;
+    try {
+        const response = await routeSegmentServices.getRiskFactors(props.segment.id);
+        riskFactors.value = (response.data ?? []).map((factor: RiskFactor) => ({
+            ...factor,
+            options: factor.options ?? [],
+        }));
+
+        // Pre-seleccionar opciones ya evaluadas
+        riskFactors.value.forEach(factor => {
+            if (factor.selected_option_id && factor.options) {
+                const selected = factor.options.find(o => o.id === factor.selected_option_id) ?? null;
+                selectedOptions.value[factor.id] = selected;
+            } else {
+                selectedOptions.value[factor.id] = null;
+            }
+        });
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudieron cargar los factores de riesgo.', life: 3000 });
+    } finally {
+        loadingFactors.value = false;
+    }
+}
+
+// ─── Computados ──────────────────────────────────────────────
+
+const isSaveDisabled = computed(() => {
+    if (!riskFactors.value.length) return true;
+    return riskFactors.value.some(factor => !selectedOptions.value[factor.id]);
+});
+
+const evaluationsPayload = computed((): RiskEvaluationPayload[] => {
+    return riskFactors.value
+        .map(factor => {
+            const option = selectedOptions.value[factor.id];
+            if (!option) return null;
+            return {
+                risk_factor_id: factor.id,
+                risk_option_id: option.id,
+            };
+        })
+        .filter(Boolean) as RiskEvaluationPayload[];
+});
+
+// ─── Guardar ─────────────────────────────────────────────────
+
+async function saveEvaluations() {
+    if (!evaluationsPayload.value.length) {
+        toast.add({ severity: 'warn', summary: 'Advertencia', detail: 'Selecciona una opción para cada factor de riesgo.', life: 3000 });
+        return;
+    }
+
+    saving.value = true;
+    try {
+        await routeSegmentServices.updateRiskEvaluations(props.segment.id, {
+            evaluations: evaluationsPayload.value,
+        });
+        toast.add({ severity: 'success', summary: 'Guardado', detail: 'Evaluaciones de riesgo actualizadas correctamente.', life: 3000 });
+        emit('saved');
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudieron guardar las evaluaciones.', life: 3000 });
+    } finally {
+        saving.value = false;
+    }
+}
+
+// ─── Helpers ─────────────────────────────────────────────────
+
+const formatDistanceKm = (meters: number | null): string => {
+    if (!meters || meters <= 0) return '—';
+    return `${(meters / 1000).toFixed(2)} km`;
+};
+
+const formatDuration = (seconds: number | null): string => {
+    if (!seconds || seconds <= 0) return '—';
+    const totalMinutes = Math.round(seconds / 60);
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    if (hours === 0) return `${minutes} min`;
+    return `${hours} h ${minutes} min`;
+};
+
+const formatOptionLabel = (option: RiskOption): string => {
+    return `${option.name} — ${option.value}`;
+};
+</script>
+
+<template>
+    <div class="space-y-4">
+        <!-- Datos del segmento -->
+        <Card>
+            <template #content>
+                <h3 class="text-sm font-semibold text-surface-900 dark:text-white mb-3">Datos del Segmento</h3>
+
+                <div v-if="loadingFactors" class="text-sm text-gray-500 dark:text-gray-400">
+                    <i class="pi pi-spin pi-spinner mr-2"></i> Cargando...
+                </div>
+                <div v-else class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm text-surface-700 dark:text-surface-200">
+                    <p>
+                        <span class="font-semibold">Origen:</span>
+                        {{ segment.origin?.name ?? '—' }}
+                    </p>
+                    <p>
+                        <span class="font-semibold">Destino:</span>
+                        {{ segment.destination?.name ?? '—' }}
+                    </p>
+                    <p>
+                        <span class="font-semibold">Distancia:</span>
+                        {{ formatDistanceKm(segment.meters_distance) }}
+                    </p>
+                    <p>
+                        <span class="font-semibold">Duración est.:</span>
+                        {{ formatDuration(segment.seconds_duration) }}
+                    </p>
+                </div>
+            </template>
+        </Card>
+
+        <!-- Factores de riesgo -->
+        <Card>
+            <template #content>
+                <h3 class="text-sm font-semibold text-surface-900 dark:text-white mb-4">Factores de Riesgo de Ruta</h3>
+
+                <div v-if="loadingFactors" class="text-sm text-gray-500 dark:text-gray-400">
+                    <i class="pi pi-spin pi-spinner mr-2"></i> Cargando factores...
+                </div>
+
+                <div v-else-if="!riskFactors.length" class="text-sm text-gray-500 dark:text-gray-400">
+                    No hay factores de riesgo configurados para el contexto de rutas.
+                </div>
+
+                <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div v-for="factor in riskFactors" :key="factor.id">
+                        <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-1">
+                            {{ factor.name }}
+                        </label>
+                        <Select
+                            v-model="selectedOptions[factor.id]"
+                            :options="factor.options"
+                            :optionLabel="(opt: RiskOption) => formatOptionLabel(opt)"
+                            :disabled="saving"
+                            placeholder="Seleccionar..."
+                            class="w-full"
+                        />
+                    </div>
+                </div>
+
+                <div class="flex justify-end gap-3 mt-6">
+                    <Button
+                        label="Cancelar"
+                        severity="secondary"
+                        text
+                        @click="emit('cancel')"
+                    />
+                    <Button
+                        label="Guardar Evaluación"
+                        icon="pi pi-check"
+                        :disabled="isSaveDisabled || saving"
+                        :loading="saving"
+                        @click="saveEvaluations"
+                    />
+                </div>
+            </template>
+        </Card>
+    </div>
+
+    <Toast />
+</template>

src/modules/catalog/components/route-segments/RouteSegments.vue

@@ -0,0 +1,410 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import InputText from 'primevue/inputtext';
+import Paginator from 'primevue/paginator';
+import Tag from 'primevue/tag';
+import { useConfirm } from 'primevue/useconfirm';
+import { useToast } from 'primevue/usetoast';
+
+import { routeSegmentServices } from '../../services/routeSegment.services';
+import type {
+    RouteSegment,
+    RouteSegmentCreateRequest,
+    RouteSegmentFormErrors,
+    RouteSegmentPaginatedResponse,
+} from '../../types/routeSegments.interfaces';
+import RouteSegmentForm from './RouteSegmentForm.vue';
+import RouteSegmentRiskAssessment from './RouteSegmentRiskAssessment.vue';
+import { useAuth } from '@/modules/auth/composables/useAuth';
+
+// ─── Estado ──────────────────────────────────────────────────
+
+const segments = ref<RouteSegment[]>([]);
+const pagination = ref({
+    first: 0,
+    rows: 15,
+    total: 0,
+    page: 1,
+    lastPage: 1,
+});
+const loading = ref(false);
+const submitting = ref(false);
+
+const searchOrigin = ref('');
+const searchDestination = ref('');
+
+// Vistas: 'list' | 'form' | 'risk'
+type ViewMode = 'list' | 'form' | 'risk';
+const currentView = ref<ViewMode>('list');
+const isEditMode = ref(false);
+const currentSegment = ref<RouteSegment | null>(null);
+const formErrors = ref<RouteSegmentFormErrors>({});
+
+const confirm = useConfirm();
+const toast = useToast();
+const { hasPermission } = useAuth();
+
+// ─── Permisos ────────────────────────────────────────────────
+
+const canViewSegments = computed(() =>
+    hasPermission([
+        'route-segments.index',
+        'route-segments.show',
+        'route-segments.store',
+        'route-segments.update',
+        'route-segments.destroy',
+    ])
+);
+const canCreateSegment = computed(() => hasPermission('route-segments.store'));
+const canUpdateSegment = computed(() => hasPermission('route-segments.update'));
+const canDeleteSegment = computed(() => hasPermission('route-segments.destroy'));
+
+// ─── Navegación entre vistas ─────────────────────────────────
+
+const handleCreateClick = () => {
+    if (!canCreateSegment.value) {
+        toast.add({ severity: 'warn', summary: 'Sin permisos', detail: 'No puedes crear segmentos de ruta.', life: 4000 });
+        return;
+    }
+    isEditMode.value = false;
+    currentSegment.value = null;
+    formErrors.value = {};
+    currentView.value = 'form';
+};
+
+const handleEditClick = async (segment: RouteSegment) => {
+    if (!canUpdateSegment.value) {
+        toast.add({ severity: 'warn', summary: 'Sin permisos', detail: 'No puedes editar segmentos de ruta.', life: 4000 });
+        return;
+    }
+    isEditMode.value = true;
+    formErrors.value = {};
+    try {
+        const response = await routeSegmentServices.getSegmentById(segment.id);
+        currentSegment.value = response.data;
+        currentView.value = 'form';
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudo cargar el segmento.', life: 3000 });
+    }
+};
+
+const handleRiskClick = (segment: RouteSegment) => {
+    currentSegment.value = segment;
+    currentView.value = 'risk';
+};
+
+const backToList = () => {
+    currentView.value = 'list';
+    isEditMode.value = false;
+    currentSegment.value = null;
+    formErrors.value = {};
+    fetchSegments(pagination.value.page);
+};
+
+// ─── CRUD ────────────────────────────────────────────────────
+
+const handleFormSubmit = async (payload: RouteSegmentCreateRequest) => {
+    formErrors.value = {};
+    submitting.value = true;
+
+    try {
+        if (isEditMode.value && currentSegment.value) {
+            await routeSegmentServices.updateSegment(currentSegment.value.id, payload, 'patch');
+            toast.add({ severity: 'success', summary: 'Segmento actualizado', detail: 'El segmento se actualizó correctamente.', life: 3000 });
+        } else {
+            await routeSegmentServices.createSegment(payload);
+            toast.add({ severity: 'success', summary: 'Segmento creado', detail: 'El segmento se registró correctamente.', life: 3000 });
+        }
+        backToList();
+    } catch (e: any) {
+        if (e?.response?.data?.errors) {
+            formErrors.value = e.response.data.errors;
+        }
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: e?.response?.data?.message || 'No se pudo guardar el segmento.',
+            life: 3500,
+        });
+    } finally {
+        submitting.value = false;
+    }
+};
+
+const handleDelete = (segmentId: number) => {
+    if (!canDeleteSegment.value) {
+        toast.add({ severity: 'warn', summary: 'Sin permisos', detail: 'No puedes eliminar segmentos de ruta.', life: 4000 });
+        return;
+    }
+
+    confirm.require({
+        message: '¿Seguro que deseas eliminar este segmento de ruta?',
+        header: 'Confirmar eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        acceptLabel: 'Sí, eliminar',
+        rejectLabel: 'Cancelar',
+        accept: async () => {
+            try {
+                await routeSegmentServices.deleteSegment(segmentId);
+                toast.add({ severity: 'success', summary: 'Eliminado', detail: 'Segmento eliminado correctamente.', life: 3000 });
+                fetchSegments(pagination.value.page);
+            } catch (e) {
+                toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudo eliminar el segmento.', life: 3000 });
+            }
+        },
+    });
+};
+
+// ─── Fetch y Paginación ──────────────────────────────────────
+
+const fetchSegments = async (page = 1) => {
+    if (!canViewSegments.value) {
+        segments.value = [];
+        pagination.value = { ...pagination.value, page: 1, total: 0, first: 0 };
+        return;
+    }
+
+    pagination.value.page = page;
+    loading.value = true;
+
+    try {
+        const origin = searchOrigin.value || undefined;
+        const destination = searchDestination.value || undefined;
+
+        const response = await routeSegmentServices.getSegments(true, origin, destination, page, pagination.value.rows);
+        const paginated = response as RouteSegmentPaginatedResponse;
+
+        segments.value = paginated.data;
+        pagination.value.total = paginated.total;
+        pagination.value.page = paginated.current_page;
+        pagination.value.lastPage = paginated.last_page;
+        pagination.value.first = (paginated.current_page - 1) * paginated.per_page;
+        pagination.value.rows = paginated.per_page;
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudieron cargar los segmentos.', life: 3000 });
+    } finally {
+        loading.value = false;
+    }
+};
+
+watch(
+    () => canViewSegments.value,
+    (allowed) => {
+        if (allowed) fetchSegments();
+        else segments.value = [];
+    },
+    { immediate: true }
+);
+
+const clearFilters = () => {
+    searchOrigin.value = '';
+    searchDestination.value = '';
+    fetchSegments(1);
+};
+
+const onFilter = () => fetchSegments(1);
+
+const onPageChange = (event: any) => {
+    const newPage = Math.floor(event.first / event.rows) + 1;
+    fetchSegments(newPage);
+};
+
+// ─── Helpers de formato ──────────────────────────────────────
+
+const formatDistanceKm = (meters: number | null): string => {
+    if (!meters || meters <= 0) return '—';
+    return `${(meters / 1000).toFixed(2)} km`;
+};
+
+const formatDuration = (seconds: number | null): string => {
+    if (!seconds || seconds <= 0) return '—';
+    const totalMinutes = Math.round(seconds / 60);
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    if (hours === 0) return `${minutes} min`;
+    return `${hours} h ${minutes} min`;
+};
+
+const hasRiskEvaluations = (segment: RouteSegment): boolean => {
+    return (segment.risk_evaluations?.length ?? 0) > 0;
+};
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- ━━━ Vista: Formulario ━━━ -->
+        <template v-if="currentView === 'form'">
+            <div class="flex items-center gap-3 mb-6">
+                <Button icon="pi pi-arrow-left" text rounded @click="backToList" />
+                <div>
+                    <h2 class="text-3xl font-black text-surface-900 dark:text-white tracking-tight">
+                        {{ isEditMode ? 'Editar Segmento de Ruta' : 'Nuevo Segmento de Ruta' }}
+                    </h2>
+                    <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">
+                        Traza el recorrido entre dos locaciones usando el mapa interactivo.
+                    </p>
+                </div>
+            </div>
+            <RouteSegmentForm
+                :initialData="currentSegment || undefined"
+                :formErrors="formErrors"
+                :isEditing="isEditMode"
+                :loading="submitting"
+                @submit="handleFormSubmit"
+                @cancel="backToList"
+            />
+        </template>
+
+        <!-- ━━━ Vista: Evaluación de Riesgo ━━━ -->
+        <template v-else-if="currentView === 'risk' && currentSegment">
+            <div class="flex items-center gap-3 mb-6">
+                <Button icon="pi pi-arrow-left" text rounded @click="backToList" />
+                <div>
+                    <h2 class="text-3xl font-black text-surface-900 dark:text-white tracking-tight">
+                        Evaluación de Riesgo
+                    </h2>
+                    <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">
+                        {{ currentSegment.origin?.name ?? '—' }} → {{ currentSegment.destination?.name ?? '—' }}
+                    </p>
+                </div>
+            </div>
+            <RouteSegmentRiskAssessment
+                :segment="currentSegment"
+                @saved="backToList"
+                @cancel="backToList"
+            />
+        </template>
+
+        <!-- ━━━ Vista: Listado ━━━ -->
+        <template v-else>
+            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
+                <div>
+                    <h2 class="text-3xl font-black text-surface-900 dark:text-white tracking-tight">
+                        Segmentos de Ruta
+                    </h2>
+                    <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">
+                        Administra los tramos individuales que componen las rutas de servicio.
+                    </p>
+                </div>
+                <Button
+                    v-if="canCreateSegment"
+                    label="Nuevo Segmento"
+                    icon="pi pi-plus"
+                    @click="handleCreateClick"
+                />
+            </div>
+
+            <!-- Filtros -->
+            <Card v-if="canViewSegments">
+                <template #content>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
+                        <div>
+                            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">Origen</label>
+                            <InputText v-model="searchOrigin" placeholder="Nombre del origen" class="w-full" @keyup.enter="onFilter" />
+                        </div>
+                        <div>
+                            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">Destino</label>
+                            <InputText v-model="searchDestination" placeholder="Nombre del destino" class="w-full" @keyup.enter="onFilter" />
+                        </div>
+                        <div class="flex gap-2">
+                            <Button icon="pi pi-search" text rounded @click="onFilter" />
+                            <Button icon="pi pi-times" text rounded severity="secondary" label="Limpiar" @click="clearFilters" />
+                        </div>
+                    </div>
+                </template>
+            </Card>
+
+            <!-- Tabla -->
+            <Card v-if="canViewSegments">
+                <template #content>
+                    <DataTable :value="segments" :loading="loading" stripedRows responsiveLayout="scroll" class="p-datatable-sm">
+                        <Column header="Origen" style="min-width: 180px">
+                            <template #body="{ data }">
+                                <span class="font-semibold">{{ data.origin?.name ?? '—' }}</span>
+                            </template>
+                        </Column>
+                        <Column header="Destino" style="min-width: 180px">
+                            <template #body="{ data }">
+                                <span class="font-semibold">{{ data.destination?.name ?? '—' }}</span>
+                            </template>
+                        </Column>
+                        <Column header="Distancia" style="min-width: 120px">
+                            <template #body="{ data }">
+                                <span class="font-mono text-sm">{{ formatDistanceKm(data.meters_distance) }}</span>
+                            </template>
+                        </Column>
+                        <Column header="Duración" style="min-width: 120px">
+                            <template #body="{ data }">
+                                <span class="font-mono text-sm">{{ formatDuration(data.seconds_duration) }}</span>
+                            </template>
+                        </Column>
+                        <Column header="Riesgo" style="min-width: 100px" bodyStyle="text-align: center">
+                            <template #body="{ data }">
+                                <Tag
+                                    :value="hasRiskEvaluations(data) ? 'Evaluado' : 'Pendiente'"
+                                    :severity="hasRiskEvaluations(data) ? 'success' : 'danger'"
+                                    class="cursor-pointer"
+                                    @click="handleRiskClick(data)"
+                                />
+                            </template>
+                        </Column>
+                        <Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right" style="min-width: 160px">
+                            <template #body="{ data }">
+                                <div class="flex items-center justify-end gap-1">
+                                    <Button
+                                        v-if="canUpdateSegment"
+                                        icon="pi pi-pencil"
+                                        text rounded size="small"
+                                        v-tooltip.top="'Editar'"
+                                        @click="handleEditClick(data)"
+                                    />
+                                    <Button
+                                        icon="pi pi-shield"
+                                        text rounded size="small"
+                                        :severity="hasRiskEvaluations(data) ? 'success' : 'danger'"
+                                        v-tooltip.top="'Evaluación de riesgo'"
+                                        @click="handleRiskClick(data)"
+                                    />
+                                    <Button
+                                        v-if="canDeleteSegment"
+                                        icon="pi pi-trash"
+                                        text rounded size="small"
+                                        severity="danger"
+                                        v-tooltip.top="'Eliminar'"
+                                        @click="handleDelete(data.id)"
+                                    />
+                                </div>
+                            </template>
+                        </Column>
+                    </DataTable>
+                    <div class="mt-4">
+                        <Paginator
+                            :first="pagination.first"
+                            :rows="pagination.rows"
+                            :totalRecords="pagination.total"
+                            :rowsPerPageOptions="[5, 10, 15, 25]"
+                            @page="onPageChange"
+                        />
+                    </div>
+                </template>
+            </Card>
+
+            <Card v-else>
+                <template #content>
+                    <div class="text-center py-10 text-surface-500 dark:text-surface-400">
+                        <i class="pi pi-lock text-4xl mb-3"></i>
+                        <p>No tienes permisos para visualizar este módulo.</p>
+                    </div>
+                </template>
+            </Card>
+        </template>
+
+        <ConfirmDialog />
+        <Toast />
+    </div>
+</template>

src/modules/catalog/components/routes/RouteForm.vue

@@ -0,0 +1,404 @@
+<script setup lang="ts">
+/**
+ * Formulario de creación/edición de Rutas (Colección de Segmentos)
+ *
+ * Permite encadenar segmentos eligiendo orígenes y destinos.
+ *
+ * @author Raul Rene Velazco Narvaez <raul310882@gmail.com>
+ * @version 1.0.0
+ */
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import Select from 'primevue/select';
+import Message from 'primevue/message';
+import ToggleSwitch from 'primevue/toggleswitch';
+
+import api from '../../../../services/api'; // direct api use for filters
+import type { Location } from '../../types/locations.interfaces';
+import type { RouteSegment } from '../../types/routeSegments.interfaces';
+import type {
+    Route,
+    RouteCreateRequest,
+    RouteFormErrors,
+} from '../../types/routes.interfaces';
+
+// ─── Props y Emits ───────────────────────────────────────────
+
+const props = defineProps<{
+    initialData?: Route;
+    formErrors?: RouteFormErrors;
+    isEditing?: boolean;
+    loading?: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'submit', payload: RouteCreateRequest): void;
+    (e: 'cancel'): void;
+}>();
+
+// ─── Estado ──────────────────────────────────────────────────
+
+const active = ref(true);
+const segmentsChain = ref<RouteSegment[]>([]);
+
+// Selectores para el siguiente segmento
+const availableOrigins = ref<Location[]>([]);
+const availableDestinations = ref<Location[]>([]);
+
+const selectedOrigin = ref<Location | null>(null);
+const selectedDestination = ref<Location | null>(null);
+
+const loadingOrigins = ref(false);
+const loadingDestinations = ref(false);
+const addingSegment = ref(false);
+
+const backendError = ref('');
+
+// ─── Inicialización ──────────────────────────────────────────
+
+onMounted(() => {
+    if (props.initialData) {
+        active.value = props.initialData.active;
+        if (props.initialData.segments) {
+            segmentsChain.value = [...props.initialData.segments];
+        }
+    }
+    
+    updateAvailableOrigins();
+});
+
+// ─── Lógica de Encadenamiento ────────────────────────────────
+
+// Actualiza los orígenes disponibles dependiendo de si hay una cadena existente
+async function updateAvailableOrigins() {
+    loadingOrigins.value = true;
+    selectedOrigin.value = null;
+    selectedDestination.value = null;
+    availableDestinations.value = [];
+
+    try {
+        if (segmentsChain.value.length === 0) {
+            // No hay segmentos, descargar todos los origenes libres
+            const res = await api.get('/api/route-segments-origins');
+            availableOrigins.value = res.data?.data || [];
+        } else {
+            // Ya hay segmentos, el origen obligatorio es el destino del último segmento
+            const lastSegment = segmentsChain.value[segmentsChain.value.length - 1];
+            if (lastSegment.destination) {
+                availableOrigins.value = [lastSegment.destination];
+                selectedOrigin.value = lastSegment.destination; // Auto select
+            }
+        }
+    } catch (e) {
+        console.error('Error fetching origins:', e);
+    } finally {
+        loadingOrigins.value = false;
+    }
+}
+
+// Escuchar cambios en selectedOrigin para descargar sus posibles destinos
+watch(selectedOrigin, async (newOrigin) => {
+    selectedDestination.value = null;
+    availableDestinations.value = [];
+
+    if (!newOrigin) return;
+
+    loadingDestinations.value = true;
+    try {
+        const res = await api.get(`/api/route-segments-destinations/${newOrigin.id}`);
+        availableDestinations.value = res.data?.data || [];
+    } catch (e) {
+        console.error('Error fetching destinations:', e);
+    } finally {
+        loadingDestinations.value = false;
+    }
+});
+
+// Agregar segmento a la cadena
+async function handleAddSegment() {
+    if (!selectedOrigin.value || !selectedDestination.value) return;
+
+    backendError.value = '';
+    addingSegment.value = true;
+
+    try {
+        const res = await api.post('/api/route-segments-find', {
+            origin_location_id: selectedOrigin.value.id,
+            destination_location_id: selectedDestination.value.id,
+        });
+
+        const segmentFound = res.data?.data;
+        if (segmentFound) {
+            segmentsChain.value.push(segmentFound);
+            await updateAvailableOrigins(); // Resetear para el proximo
+        } else {
+            backendError.value = 'No se encontró un segmento validado entre el origen y destino seleccionados.';
+        }
+    } catch (e) {
+        backendError.value = 'Hubo un error al buscar el segmento en la base de datos.';
+    } finally {
+        addingSegment.value = false;
+    }
+}
+
+// Remover segmento de la cadena
+function removeSegment(index: number) {
+    // Si quitamos uno del medio, todos los subsecuentes tambien deben quitarse 
+    // porque la cadena se romperia.
+    segmentsChain.value.splice(index);
+    updateAvailableOrigins();
+}
+
+// ─── Totalizadores ───────────────────────────────────────────
+
+const totalDistance = computed(() => {
+    const meters = segmentsChain.value.reduce((sum, s) => sum + (s.meters_distance || 0), 0);
+    return formatDistanceKm(meters);
+});
+
+const totalDuration = computed(() => {
+    const secs = segmentsChain.value.reduce((sum, s) => sum + (s.seconds_duration || 0), 0);
+    return formatDuration(secs);
+});
+
+const calculatedCheckpoints = computed(() => {
+    if (segmentsChain.value.length === 0) return [];
+    
+    const cps: Location[] = [];
+    segmentsChain.value.forEach((seg, i) => {
+        if (i === 0 && seg.origin) {
+            cps.push(seg.origin);
+        }
+        if (seg.destination) {
+            cps.push(seg.destination);
+        }
+    });
+    return cps;
+});
+
+// ─── Submit ──────────────────────────────────────────────────
+
+function handleSubmit() {
+    if (segmentsChain.value.length === 0) return;
+
+    const payload: RouteCreateRequest = {
+        active: active.value,
+        route_segments: segmentsChain.value.map(s => s.id),
+    };
+
+    emit('submit', payload);
+}
+
+// ─── Helpers ─────────────────────────────────────────────────
+
+const formatDistanceKm = (meters: number | null): string => {
+    if (!meters || meters <= 0) return '0 km';
+    return `${(meters / 1000).toFixed(2)} km`;
+};
+
+const formatDuration = (seconds: number | null): string => {
+    if (!seconds || seconds <= 0) return '0 min';
+    const totalMinutes = Math.round(seconds / 60);
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    if (hours === 0) return `${minutes} min`;
+    return `${hours} h ${minutes} min`;
+};
+</script>
+
+<template>
+    <div class="grid lg:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)] gap-6">
+        
+        <!-- Panel Izquierdo: Constructor de Ruta -->
+        <div class="flex flex-col gap-4">
+            <Card>
+                <template #content>
+                    <h3 class="text-sm font-semibold text-surface-900 dark:text-white mb-4">Añadir Tramo</h3>
+                    
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-end bg-surface-50 dark:bg-surface-800 p-4 rounded-lg border border-surface-200 dark:border-surface-700">
+                        <div>
+                            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">Origen</label>
+                            <Select
+                                v-model="selectedOrigin"
+                                :options="availableOrigins"
+                                optionLabel="name"
+                                :loading="loadingOrigins"
+                                placeholder="Seleccionar origen..."
+                                class="w-full"
+                                :disabled="segmentsChain.length > 0"
+                                filter
+                            >
+                                <template #value="slotProps">
+                                    <div v-if="slotProps.value" class="flex items-center">
+                                        <i class="pi pi-map-marker text-xs mr-2 text-primary"></i>
+                                        <div>{{ slotProps.value.name }}</div>
+                                    </div>
+                                    <span v-else>{{ slotProps.placeholder }}</span>
+                                </template>
+                            </Select>
+                        </div>
+                        <div>
+                            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">Destino</label>
+                            <Select
+                                v-model="selectedDestination"
+                                :options="availableDestinations"
+                                optionLabel="name"
+                                :loading="loadingDestinations"
+                                placeholder="Seleccionar destino..."
+                                class="w-full"
+                                :disabled="!selectedOrigin"
+                                filter
+                            >
+                                <template #value="slotProps">
+                                    <div v-if="slotProps.value" class="flex items-center">
+                                        <i class="pi pi-flag text-xs mr-2 text-green-500"></i>
+                                        <div>{{ slotProps.value.name }}</div>
+                                    </div>
+                                    <span v-else>{{ slotProps.placeholder }}</span>
+                                </template>
+                            </Select>
+                        </div>
+                        <div class="md:col-span-2 flex flex-col items-end gap-2">
+                            <Message v-if="backendError" severity="error" size="small" :closable="false" class="w-full m-0">{{ backendError }}</Message>
+                            <Button 
+                                label="Agregar Tramo" 
+                                icon="pi pi-plus" 
+                                :disabled="!selectedOrigin || !selectedDestination || addingSegment"
+                                :loading="addingSegment"
+                                @click="handleAddSegment"
+                            />
+                        </div>
+                    </div>
+                </template>
+            </Card>
+
+            <Card>
+                <template #content>
+                    <div class="flex items-center justify-between mb-4">
+                        <h3 class="text-sm font-semibold text-surface-900 dark:text-white mb-0">Cadena de Tramos (Segmentos)</h3>
+                        <span class="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                            {{ segmentsChain.length }} tramos
+                        </span>
+                    </div>
+
+                    <Message v-if="formErrors?.route_segments" severity="error" size="small" :closable="false" class="mb-3">
+                        {{ formErrors.route_segments[0] }}
+                    </Message>
+
+                    <div v-if="segmentsChain.length === 0" class="text-center py-6 text-gray-400 text-sm border-2 border-dashed border-surface-200 dark:border-surface-700 rounded-lg">
+                        La ruta está vacía. Selecciona y agrega un tramo para comenzar.
+                    </div>
+
+                    <div v-else class="space-y-0">
+                        <div 
+                            v-for="(seg, index) in segmentsChain" 
+                            :key="index"
+                            class="relative flex items-center justify-between p-3 bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-700 hover:border-primary transition-colors hover:shadow-sm"
+                            :class="[
+                                index === 0 ? 'rounded-t-lg' : '',
+                                index === segmentsChain.length - 1 ? 'rounded-b-lg' : 'border-b-0'
+                            ]"
+                        >
+                            <div class="flex items-center gap-3 w-full">
+                                <div class="flex flex-col items-center justify-center w-6 text-surface-400 font-bold text-xs">
+                                    {{ index + 1 }}
+                                </div>
+                                <div class="flex flex-col flex-grow text-sm">
+                                    <div class="flex items-center gap-2 mb-1">
+                                        <span class="font-semibold">{{ seg.origin?.name }}</span>
+                                        <i class="pi pi-arrow-right text-xs text-gray-400"></i>
+                                        <span class="font-semibold">{{ seg.destination?.name }}</span>
+                                    </div>
+                                    <div class="flex items-center gap-4 text-xs text-gray-500 font-mono">
+                                        <span><i class="pi pi-code text-[10px] mr-1"></i>ID {{ seg.id }}</span>
+                                        <span><i class="pi pi-map-marker text-[10px] mr-1"></i>{{ formatDistanceKm(seg.meters_distance) }}</span>
+                                        <span><i class="pi pi-clock text-[10px] mr-1"></i>{{ formatDuration(seg.seconds_duration) }}</span>
+                                    </div>
+                                </div>
+                                <Button 
+                                    icon="pi pi-times" 
+                                    text rounded size="small" severity="danger" 
+                                    v-tooltip.top="'Quitar tramo y subsecuentes'"
+                                    @click="removeSegment(index)" 
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Card>
+        </div>
+
+        <!-- Panel Derecho: Checkpoints y Guardar -->
+        <div class="flex flex-col gap-4">
+            <Card>
+                <template #content>
+                    <h3 class="text-sm font-semibold text-surface-900 dark:text-white mb-4">Resumen y Guardado</h3>
+
+                    <div class="mb-5 flex flex-col gap-2">
+                        <div class="flex items-center justify-between p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+                            <div>
+                                <span class="block text-xs font-bold text-gray-500 uppercase">Distancia Total</span>
+                                <span class="font-mono font-semibold">{{ totalDistance }}</span>
+                            </div>
+                            <div class="text-right">
+                                <span class="block text-xs font-bold text-gray-500 uppercase">Duración Total</span>
+                                <span class="font-mono font-semibold">{{ totalDuration }}</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="flex items-center justify-between mb-6">
+                        <label class="text-sm font-semibold text-surface-700 dark:text-surface-200 mb-0">Ruta Activa</label>
+                        <ToggleSwitch v-model="active" />
+                    </div>
+
+                    <div class="flex justify-end gap-2">
+                        <Button
+                            label="Cancelar"
+                            severity="secondary"
+                            text
+                            @click="emit('cancel')"
+                        />
+                        <Button
+                            label="Guardar Ruta"
+                            icon="pi pi-save"
+                            :disabled="segmentsChain.length === 0 || loading"
+                            :loading="loading"
+                            @click="handleSubmit"
+                        />
+                    </div>
+                </template>
+            </Card>
+
+            <Card v-if="calculatedCheckpoints.length > 0">
+                <template #content>
+                    <div class="flex items-center justify-between mb-4">
+                        <h3 class="text-sm font-semibold text-surface-900 dark:text-white mb-0">Ruta de Checkpoints</h3>
+                        <i class="pi pi-info-circle text-gray-400" v-tooltip.top="'Estos checkpoints se generarán automáticamente al guardar.'"></i>
+                    </div>
+
+                    <div class="relative pl-3 border-l-2 border-surface-200 dark:border-surface-700 ml-2 space-y-4">
+                        <div v-for="(cp, i) in calculatedCheckpoints" :key="i" class="relative">
+                            <span 
+                                class="absolute -left-[18px] top-0.5 w-3 h-3 rounded-full border-2 border-white dark:border-surface-900 shadow"
+                                :class="[
+                                    i === 0 ? 'bg-primary' : 
+                                    i === calculatedCheckpoints.length - 1 ? 'bg-green-500' : 'bg-surface-400'
+                                ]"
+                            ></span>
+                            <div class="text-sm -mt-0.5">
+                                <span class="font-semibold block">{{ cp.name }}</span>
+                                <span class="text-xs text-gray-500" v-if="i === 0">Punto de Partida (Origen)</span>
+                                <span class="text-xs text-gray-500" v-else-if="i === calculatedCheckpoints.length - 1">Punto de Entrega (Destino)</span>
+                                <span class="text-xs text-gray-500" v-else>Parada / Checkpoint</span>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Card>
+        </div>
+    </div>
+</template>

src/modules/catalog/components/routes/Routes.vue

@@ -0,0 +1,343 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Paginator from 'primevue/paginator';
+import Tag from 'primevue/tag';
+import { useConfirm } from 'primevue/useconfirm';
+import { useToast } from 'primevue/usetoast';
+
+import { routeServices } from '../../services/route.services';
+import type {
+    Route,
+    RouteCreateRequest,
+    RouteFormErrors,
+    RoutePaginatedResponse,
+} from '../../types/routes.interfaces';
+import RouteForm from './RouteForm.vue';
+import { useAuth } from '@/modules/auth/composables/useAuth';
+
+// ─── Estado ──────────────────────────────────────────────────
+
+const routes = ref<Route[]>([]);
+const pagination = ref({
+    first: 0,
+    rows: 15,
+    total: 0,
+    page: 1,
+    lastPage: 1,
+});
+const loading = ref(false);
+const submitting = ref(false);
+
+const filterActive = ref<boolean | undefined>(undefined);
+
+// Vistas: 'list' | 'form'
+type ViewMode = 'list' | 'form';
+const currentView = ref<ViewMode>('list');
+const isEditMode = ref(false);
+const currentRoute = ref<Route | null>(null);
+const formErrors = ref<RouteFormErrors>({});
+
+const confirm = useConfirm();
+const toast = useToast();
+const { hasPermission } = useAuth();
+
+// ─── Permisos ────────────────────────────────────────────────
+
+const canViewRoutes = computed(() =>
+    hasPermission([
+        'routes.index',
+        'routes.show',
+        'routes.store',
+        'routes.update',
+        'routes.destroy',
+    ])
+);
+const canCreateRoute = computed(() => hasPermission('routes.store'));
+const canUpdateRoute = computed(() => hasPermission('routes.update'));
+const canDeleteRoute = computed(() => hasPermission('routes.destroy'));
+
+// ─── Navegación entre vistas ─────────────────────────────────
+
+const handleCreateClick = () => {
+    if (!canCreateRoute.value) {
+        toast.add({ severity: 'warn', summary: 'Sin permisos', detail: 'No puedes crear rutas.', life: 4000 });
+        return;
+    }
+    isEditMode.value = false;
+    currentRoute.value = null;
+    formErrors.value = {};
+    currentView.value = 'form';
+};
+
+const handleEditClick = async (routeObj: Route) => {
+    if (!canUpdateRoute.value) {
+        toast.add({ severity: 'warn', summary: 'Sin permisos', detail: 'No puedes editar rutas.', life: 4000 });
+        return;
+    }
+    isEditMode.value = true;
+    formErrors.value = {};
+    try {
+        const response = await routeServices.getRouteById(routeObj.id);
+        currentRoute.value = response.data;
+        currentView.value = 'form';
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudo cargar la ruta.', life: 3000 });
+    }
+};
+
+const backToList = () => {
+    currentView.value = 'list';
+    isEditMode.value = false;
+    currentRoute.value = null;
+    formErrors.value = {};
+    fetchRoutes(pagination.value.page);
+};
+
+// ─── CRUD ────────────────────────────────────────────────────
+
+const handleFormSubmit = async (payload: RouteCreateRequest) => {
+    formErrors.value = {};
+    submitting.value = true;
+
+    try {
+        if (isEditMode.value && currentRoute.value) {
+            await routeServices.updateRoute(currentRoute.value.id, payload, 'patch');
+            toast.add({ severity: 'success', summary: 'Ruta actualizada', detail: 'La ruta se actualizó correctamente.', life: 3000 });
+        } else {
+            await routeServices.createRoute(payload);
+            toast.add({ severity: 'success', summary: 'Ruta creada', detail: 'La ruta se originó correctamente.', life: 3000 });
+        }
+        backToList();
+    } catch (e: any) {
+        if (e?.response?.data?.errors) {
+            formErrors.value = e.response.data.errors;
+        }
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: e?.response?.data?.message || 'No se pudo guardar la ruta.',
+            life: 3500,
+        });
+    } finally {
+        submitting.value = false;
+    }
+};
+
+const handleDelete = (routeId: number) => {
+    if (!canDeleteRoute.value) {
+        toast.add({ severity: 'warn', summary: 'Sin permisos', detail: 'No puedes eliminar rutas.', life: 4000 });
+        return;
+    }
+
+    confirm.require({
+        message: '¿Seguro que deseas eliminar esta ruta?',
+        header: 'Confirmar eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        acceptLabel: 'Sí, eliminar',
+        rejectLabel: 'Cancelar',
+        accept: async () => {
+            try {
+                await routeServices.deleteRoute(routeId);
+                toast.add({ severity: 'success', summary: 'Eliminada', detail: 'Ruta eliminada correctamente.', life: 3000 });
+                fetchRoutes(pagination.value.page);
+            } catch (e) {
+                toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudo eliminar la ruta.', life: 3000 });
+            }
+        },
+    });
+};
+
+// ─── Fetch y Paginación ──────────────────────────────────────
+
+const fetchRoutes = async (page = 1) => {
+    if (!canViewRoutes.value) {
+        routes.value = [];
+        pagination.value = { ...pagination.value, page: 1, total: 0, first: 0 };
+        return;
+    }
+
+    pagination.value.page = page;
+    loading.value = true;
+
+    try {
+        const response = await routeServices.getRoutes(true, filterActive.value, page, pagination.value.rows);
+        const paginated = response as RoutePaginatedResponse;
+
+        routes.value = paginated.data;
+        pagination.value.total = paginated.total;
+        pagination.value.page = paginated.current_page;
+        pagination.value.lastPage = paginated.last_page;
+        pagination.value.first = (paginated.current_page - 1) * paginated.per_page;
+        pagination.value.rows = paginated.per_page;
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudieron cargar las rutas.', life: 3000 });
+    } finally {
+        loading.value = false;
+    }
+};
+
+watch(
+    () => canViewRoutes.value,
+    (allowed) => {
+        if (allowed) fetchRoutes();
+        else routes.value = [];
+    },
+    { immediate: true }
+);
+
+const onPageChange = (event: any) => {
+    const newPage = Math.floor(event.first / event.rows) + 1;
+    fetchRoutes(newPage);
+};
+
+// ─── Helpers de formato ──────────────────────────────────────
+
+const formatDistanceKm = (meters: number | null): string => {
+    if (!meters || meters <= 0) return '—';
+    return `${(meters / 1000).toFixed(2)} km`;
+};
+
+const formatDuration = (seconds: number | null): string => {
+    if (!seconds || seconds <= 0) return '—';
+    const totalMinutes = Math.round(seconds / 60);
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    if (hours === 0) return `${minutes} min`;
+    return `${hours} h ${minutes} min`;
+};
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- ━━━ Vista: Formulario ━━━ -->
+        <template v-if="currentView === 'form'">
+            <div class="flex items-center gap-3 mb-6">
+                <Button icon="pi pi-arrow-left" text rounded @click="backToList" />
+                <div>
+                    <h2 class="text-3xl font-black text-surface-900 dark:text-white tracking-tight">
+                        {{ isEditMode ? 'Editar Ruta Maestro' : 'Nueva Ruta Maestro' }}
+                    </h2>
+                    <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">
+                        Encadena segmentos de ruta individuales para formar una ruta transaccional completa.
+                    </p>
+                </div>
+            </div>
+            <RouteForm
+                :initialData="currentRoute || undefined"
+                :formErrors="formErrors"
+                :isEditing="isEditMode"
+                :loading="submitting"
+                @submit="handleFormSubmit"
+                @cancel="backToList"
+            />
+        </template>
+
+        <!-- ━━━ Vista: Listado ━━━ -->
+        <template v-else>
+            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
+                <div>
+                    <h2 class="text-3xl font-black text-surface-900 dark:text-white tracking-tight">
+                        Catálogo de Rutas
+                    </h2>
+                    <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">
+                        Administra maestras de trayectos predefinidos compuestos por uno o más segmentos secuenciales.
+                    </p>
+                </div>
+                <Button
+                    v-if="canCreateRoute"
+                    label="Nueva Ruta"
+                    icon="pi pi-plus"
+                    @click="handleCreateClick"
+                />
+            </div>
+
+            <!-- Tabla -->
+            <Card v-if="canViewRoutes">
+                <template #content>
+                    <DataTable :value="routes" :loading="loading" stripedRows responsiveLayout="scroll" class="p-datatable-sm">
+                        <Column header="ID Ruta" style="width: 100px">
+                            <template #body="{ data }">
+                                <span class="font-bold text-primary">#{{ data.id }}</span>
+                            </template>
+                        </Column>
+                        <Column header="Origen Global">
+                            <template #body="{ data }">
+                                <span class="font-semibold">{{ data.origin?.name ?? '—' }}</span>
+                            </template>
+                        </Column>
+                        <Column header="Destino Global">
+                            <template #body="{ data }">
+                                <span class="font-semibold">{{ data.destination?.name ?? '—' }}</span>
+                            </template>
+                        </Column>
+                        <Column header="Dist. Total">
+                            <template #body="{ data }">
+                                <span class="font-mono text-sm">{{ formatDistanceKm(data.meters_distance) }}</span>
+                            </template>
+                        </Column>
+                        <Column header="Dur. Total">
+                            <template #body="{ data }">
+                                <span class="font-mono text-sm">{{ formatDuration(data.seconds_duration) }}</span>
+                            </template>
+                        </Column>
+                        <Column header="Estado" bodyStyle="text-align: center">
+                            <template #body="{ data }">
+                                <Tag
+                                    :value="data.active ? 'Activa' : 'Inactiva'"
+                                    :severity="data.active ? 'success' : 'danger'"
+                                />
+                            </template>
+                        </Column>
+                        <Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right">
+                            <template #body="{ data }">
+                                <div class="flex items-center justify-end gap-1">
+                                    <Button
+                                        v-if="canUpdateRoute"
+                                        icon="pi pi-pencil"
+                                        text rounded size="small"
+                                        v-tooltip.top="'Editar'"
+                                        @click="handleEditClick(data)"
+                                    />
+                                    <Button
+                                        v-if="canDeleteRoute"
+                                        icon="pi pi-trash"
+                                        text rounded size="small"
+                                        severity="danger"
+                                        v-tooltip.top="'Eliminar'"
+                                        @click="handleDelete(data.id)"
+                                    />
+                                </div>
+                            </template>
+                        </Column>
+                    </DataTable>
+                    <div class="mt-4">
+                        <Paginator
+                            :first="pagination.first"
+                            :rows="pagination.rows"
+                            :totalRecords="pagination.total"
+                            :rowsPerPageOptions="[5, 10, 15, 25]"
+                            @page="onPageChange"
+                        />
+                    </div>
+                </template>
+            </Card>
+
+            <Card v-else>
+                <template #content>
+                    <div class="text-center py-10 text-surface-500 dark:text-surface-400">
+                        <i class="pi pi-lock text-4xl mb-3"></i>
+                        <p>No tienes permisos para visualizar este módulo.</p>
+                    </div>
+                </template>
+            </Card>
+        </template>
+
+        <ConfirmDialog />
+        <Toast />
+    </div>
+</template>

src/modules/catalog/services/location.services.ts

@@ -19,7 +19,7 @@ const locationServices = {
     ): Promise<LocationPaginatedResponse | LocationListResponse> {
         try {
             const params: any = {};
-            if (paginated === false) params.paginated = false;
+            if (paginated === false) params.paginate = false;
             if (name) params.name = name;
             if (city) params.city = city;
             if (state) params.state = state;

src/modules/catalog/services/risk-factors.services.ts

@@ -0,0 +1,69 @@
+import api from '../../../services/api';
+import type { 
+    RiskFactor, 
+    RiskFactorPaginatedResponse 
+} from '../types/risk-factors.interfaces';
+
+const riskFactorServices = {
+    async getRiskFactors(params?: any): Promise<RiskFactorPaginatedResponse> {
+        try {
+            const response = await api.get('/api/risk-factors', { params });
+            return response.data;
+        } catch (error) {
+            console.error('Error fetching risk factors:', error);
+            throw error;
+        }
+    },
+
+    async getRiskFactorById(id: number): Promise<{ data: RiskFactor }> {
+        try {
+            const response = await api.get(`/api/risk-factors/${id}`);
+            return response.data;
+        } catch (error) {
+            console.error(`Error fetching risk factor ${id}:`, error);
+            throw error;
+        }
+    },
+
+    async createRiskFactor(data: RiskFactor): Promise<{ data: RiskFactor; message: string }> {
+        try {
+            const response = await api.post('/api/risk-factors', data);
+            return response.data;
+        } catch (error) {
+            console.error('Error creating risk factor:', error);
+            throw error;
+        }
+    },
+
+    async updateRiskFactor(id: number, data: RiskFactor): Promise<{ data: RiskFactor; message: string }> {
+        try {
+            const response = await api.put(`/api/risk-factors/${id}`, data);
+            return response.data;
+        } catch (error) {
+            console.error(`Error updating risk factor ${id}:`, error);
+            throw error;
+        }
+    },
+
+    async duplicateRiskFactor(id: number): Promise<{ data: RiskFactor; message: string }> {
+        try {
+            const response = await api.post(`/api/risk-factors/${id}/duplicate`);
+            return response.data;
+        } catch (error) {
+            console.error(`Error duplicating risk factor ${id}:`, error);
+            throw error;
+        }
+    },
+
+    async deleteRiskFactor(id: number): Promise<{ message: string }> {
+        try {
+            const response = await api.delete(`/api/risk-factors/${id}`);
+            return response.data;
+        } catch (error) {
+            console.error(`Error deleting risk factor ${id}:`, error);
+            throw error;
+        }
+    }
+};
+
+export { riskFactorServices };

src/modules/catalog/services/route.services.ts

@@ -0,0 +1,94 @@
+import api from '../../../services/api';
+import type {
+    RouteCreateRequest,
+    RouteCreateResponse,
+    RouteDeleteResponse,
+    RouteListResponse,
+    RoutePaginatedResponse,
+    RouteUpdateRequest,
+    RouteUpdateResponse,
+} from '../types/routes.interfaces';
+
+const routeServices = {
+    /**
+     * Listar rutas (paginadas o todas)
+     */
+    async getRoutes(
+        paginated?: boolean,
+        active?: boolean,
+        page?: number,
+        perPage?: number,
+    ): Promise<RoutePaginatedResponse | RouteListResponse> {
+        try {
+            const params: Record<string, any> = {};
+            if (paginated === false) params.paginate = false;
+            if (active !== undefined) params.active = active;
+            if (page) params.page = page;
+            if (perPage) params.per_page = perPage;
+
+            const response = await api.get('/api/routes', { params });
+            return response.data;
+        } catch (error) {
+            console.error('Error fetching routes:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Obtener una ruta por ID
+     */
+    async getRouteById(routeId: number): Promise<RouteCreateResponse> {
+        try {
+            const response = await api.get(`/api/routes/${routeId}`);
+            return response.data;
+        } catch (error) {
+            console.error(`Error fetching route with ID ${routeId}:`, error);
+            throw error;
+        }
+    },
+
+    /**
+     * Crear una nueva ruta
+     */
+    async createRoute(data: RouteCreateRequest): Promise<RouteCreateResponse> {
+        try {
+            const response = await api.post('/api/routes', data);
+            return response.data;
+        } catch (error) {
+            console.error('Error creating route:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Actualizar una ruta existente
+     */
+    async updateRoute(
+        routeId: number,
+        data: RouteUpdateRequest,
+        method: 'patch' | 'put' = 'patch',
+    ): Promise<RouteUpdateResponse> {
+        try {
+            const response = await api[method](`/api/routes/${routeId}`, data);
+            return response.data;
+        } catch (error) {
+            console.error(`Error updating route with ID ${routeId}:`, error);
+            throw error;
+        }
+    },
+
+    /**
+     * Eliminar una ruta (soft delete)
+     */
+    async deleteRoute(routeId: number): Promise<RouteDeleteResponse> {
+        try {
+            const response = await api.delete(`/api/routes/${routeId}`);
+            return response.data;
+        } catch (error) {
+            console.error(`Error deleting route with ID ${routeId}:`, error);
+            throw error;
+        }
+    },
+};
+
+export { routeServices };

src/modules/catalog/services/routeSegment.services.ts

@@ -0,0 +1,127 @@
+import api from '../../../services/api';
+import type {
+    RouteSegmentCreateRequest,
+    RouteSegmentCreateResponse,
+    RouteSegmentDeleteResponse,
+    RouteSegmentListResponse,
+    RouteSegmentPaginatedResponse,
+    RouteSegmentUpdateRequest,
+    RouteSegmentUpdateResponse,
+    UpdateRiskEvaluationsRequest,
+    RiskFactorsResponse,
+} from '../types/routeSegments.interfaces';
+
+const routeSegmentServices = {
+    /**
+     * Listar segmentos de ruta (paginados o todos)
+     */
+    async getSegments(
+        paginated?: boolean,
+        originName?: string,
+        destinationName?: string,
+        page?: number,
+        perPage?: number,
+    ): Promise<RouteSegmentPaginatedResponse | RouteSegmentListResponse> {
+        try {
+            const params: Record<string, any> = {};
+            if (paginated === false) params.paginate = false;
+            if (originName) params.origin_name = originName;
+            if (destinationName) params.destination_name = destinationName;
+            if (page) params.page = page;
+            if (perPage) params.per_page = perPage;
+
+            const response = await api.get('/api/route-segments', { params });
+            return response.data;
+        } catch (error) {
+            console.error('Error fetching route segments:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Obtener un segmento por ID
+     */
+    async getSegmentById(segmentId: number): Promise<RouteSegmentCreateResponse> {
+        try {
+            const response = await api.get(`/api/route-segments/${segmentId}`);
+            return response.data;
+        } catch (error) {
+            console.error(`Error fetching route segment with ID ${segmentId}:`, error);
+            throw error;
+        }
+    },
+
+    /**
+     * Crear un nuevo segmento
+     */
+    async createSegment(data: RouteSegmentCreateRequest): Promise<RouteSegmentCreateResponse> {
+        try {
+            const response = await api.post('/api/route-segments', data);
+            return response.data;
+        } catch (error) {
+            console.error('Error creating route segment:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Actualizar un segmento existente
+     */
+    async updateSegment(
+        segmentId: number,
+        data: RouteSegmentUpdateRequest,
+        method: 'patch' | 'put' = 'patch',
+    ): Promise<RouteSegmentUpdateResponse> {
+        try {
+            const response = await api[method](`/api/route-segments/${segmentId}`, data);
+            return response.data;
+        } catch (error) {
+            console.error(`Error updating route segment with ID ${segmentId}:`, error);
+            throw error;
+        }
+    },
+
+    /**
+     * Eliminar un segmento (soft delete)
+     */
+    async deleteSegment(segmentId: number): Promise<RouteSegmentDeleteResponse> {
+        try {
+            const response = await api.delete(`/api/route-segments/${segmentId}`);
+            return response.data;
+        } catch (error) {
+            console.error(`Error deleting route segment with ID ${segmentId}:`, error);
+            throw error;
+        }
+    },
+
+    /**
+     * Obtener factores de riesgo para un segmento (con evaluación actual)
+     */
+    async getRiskFactors(segmentId: number): Promise<RiskFactorsResponse> {
+        try {
+            const response = await api.get(`/api/route-segments/${segmentId}/risk-factors`);
+            return response.data;
+        } catch (error) {
+            console.error(`Error fetching risk factors for segment ${segmentId}:`, error);
+            throw error;
+        }
+    },
+
+    /**
+     * Guardar/actualizar evaluaciones de riesgo de un segmento
+     */
+    async updateRiskEvaluations(
+        segmentId: number,
+        data: UpdateRiskEvaluationsRequest,
+    ): Promise<RouteSegmentCreateResponse> {
+        try {
+            const response = await api.post(`/api/route-segments/${segmentId}/risk-evaluations`, data);
+            return response.data;
+        } catch (error) {
+            console.error(`Error updating risk evaluations for segment ${segmentId}:`, error);
+            throw error;
+        }
+    },
+};
+
+export { routeSegmentServices };

src/modules/catalog/types/risk-factors.interfaces.ts

@@ -0,0 +1,45 @@
+/**
+ * @copyright (c) 2025 Notsoweb Software (https://notsoweb.com) - All Rights Reserved
+ */
+
+export interface RiskOption {
+    id?: number;
+    risk_factor_id?: number;
+    name: string;
+    value: number;
+}
+
+export interface RiskFactor {
+    id?: number;
+    name: string;
+    description: string | null;
+    evaluation_context: number;
+    tenant_id?: number;
+    options?: RiskOption[];
+    created_at?: string;
+    updated_at?: string;
+}
+
+export interface RiskFactorFormErrors {
+    name?: string[];
+    description?: string[];
+    evaluation_context?: string[];
+    options?: string[];
+    [key: string]: string[] | undefined;
+}
+
+export interface RiskFactorPaginatedResponse {
+    current_page: number;
+    data: RiskFactor[];
+    first_page_url: string;
+    from: number;
+    last_page: number;
+    last_page_url: string;
+    links: { url: string | null; label: string; active: boolean }[];
+    next_page_url: string | null;
+    path: string;
+    per_page: number;
+    prev_page_url: string | null;
+    to: number;
+    total: number;
+}

src/modules/catalog/types/routeSegments.interfaces.ts

@@ -0,0 +1,150 @@
+import type { Location } from './locations.interfaces';
+
+// ─── Entidades principales ───────────────────────────────────
+
+export interface RoutePoint {
+    lat: number;
+    lng: number;
+}
+
+export interface NavigationStep {
+    maneuver: {
+        instruction: string;
+    };
+}
+
+export interface NavigationLeg {
+    steps: NavigationStep[];
+}
+
+export interface RiskOption {
+    id: number;
+    risk_factor_id: number;
+    name: string;
+    value: number;
+}
+
+export interface RiskFactor {
+    id: number;
+    name: string;
+    description: string | null;
+    evaluation_context: number;
+    options?: RiskOption[];
+    selected_option_id?: number | null;
+}
+
+export interface RouteRiskEvaluation {
+    id: number;
+    route_segment_id: number;
+    risk_factor_id: number;
+    risk_option_id: number;
+    risk_factor?: RiskFactor;
+    risk_option?: RiskOption;
+}
+
+export interface GeoJSONLineString {
+    type: 'LineString';
+    coordinates: [number, number][];
+}
+
+export interface RouteSegment {
+    id: number;
+    origin_location_id: number;
+    destination_location_id: number;
+    sales_service_type_id: number | null;
+    meters_distance: number | null;
+    seconds_duration: number | null;
+    path_geojson: GeoJSONLineString | null;
+    navigation_metadata: NavigationLeg[] | null;
+    route_points: RoutePoint[] | null;
+    tenant_id: number;
+    created_at: string;
+    updated_at: string;
+    deleted_at: string | null;
+    // Relaciones cargadas
+    origin?: Location;
+    destination?: Location;
+    risk_evaluations?: RouteRiskEvaluation[];
+}
+
+// ─── Errores de formulario ───────────────────────────────────
+
+export interface RouteSegmentFormErrors {
+    origin_location_id?: string[];
+    destination_location_id?: string[];
+    sales_service_type_id?: string[];
+    meters_distance?: string[];
+    seconds_duration?: string[];
+    path_geometry?: string[];
+    navigation_metadata?: string[];
+    route_points?: string[];
+}
+
+// ─── Paginación ──────────────────────────────────────────────
+
+export interface PaginationLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+export interface RouteSegmentPaginatedResponse {
+    current_page: number;
+    data: RouteSegment[];
+    first_page_url: string;
+    from: number;
+    last_page: number;
+    last_page_url: string;
+    links: PaginationLink[];
+    next_page_url: string | null;
+    path: string;
+    per_page: number;
+    prev_page_url: string | null;
+    to: number;
+    total: number;
+}
+
+export interface RouteSegmentListResponse {
+    data: RouteSegment[];
+}
+
+// ─── Request/Response ────────────────────────────────────────
+
+export interface RouteSegmentCreateRequest {
+    origin_location_id: number;
+    destination_location_id: number;
+    sales_service_type_id?: number | null;
+    meters_distance?: number | null;
+    seconds_duration?: number | null;
+    path_geometry?: GeoJSONLineString | null;
+    navigation_metadata?: NavigationLeg[] | null;
+    route_points?: RoutePoint[] | null;
+}
+
+export type RouteSegmentUpdateRequest = Partial<RouteSegmentCreateRequest>;
+
+export interface RouteSegmentCreateResponse {
+    data: RouteSegment;
+}
+
+export type RouteSegmentUpdateResponse = RouteSegmentCreateResponse;
+
+export interface RouteSegmentDeleteResponse {
+    message: string;
+    data: null;
+}
+
+// ─── Evaluaciones de Riesgo ──────────────────────────────────
+
+export interface RiskEvaluationPayload {
+    risk_factor_id: number;
+    risk_option_id: number;
+}
+
+export interface UpdateRiskEvaluationsRequest {
+    evaluations: RiskEvaluationPayload[];
+}
+
+export interface RiskFactorsResponse {
+    data: RiskFactor[];
+}

src/modules/catalog/types/routes.interfaces.ts

@@ -0,0 +1,77 @@
+import type { Location } from './locations.interfaces';
+import type { RouteSegment } from './routeSegments.interfaces';
+
+export interface RouteCheckpoint {
+    id: number;
+    route_id: number;
+    location_id: number;
+    sequence: number;
+    location?: Location;
+}
+
+export interface Route {
+    id: number;
+    sales_service_type_id: number | null;
+    meters_distance: number | null;
+    seconds_duration: number | null;
+    active: boolean;
+    tenant_id: number;
+    created_at: string;
+    updated_at: string;
+    deleted_at: string | null;
+    origin?: Location;
+    destination?: Location;
+    checkpoints?: RouteCheckpoint[];
+    segments?: RouteSegment[];
+}
+
+export interface RouteCreateRequest {
+    sales_service_type_id?: number | null;
+    active?: boolean;
+    route_segments: number[]; // Array of RouteSegment IDs
+}
+
+export type RouteUpdateRequest = Partial<RouteCreateRequest>;
+
+export interface RouteFormErrors {
+    sales_service_type_id?: string[];
+    active?: string[];
+    route_segments?: string[];
+}
+
+export interface PaginationLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+export interface RoutePaginatedResponse {
+    current_page: number;
+    data: Route[];
+    first_page_url: string;
+    from: number;
+    last_page: number;
+    last_page_url: string;
+    links: PaginationLink[];
+    next_page_url: string | null;
+    path: string;
+    per_page: number;
+    prev_page_url: string | null;
+    to: number;
+    total: number;
+}
+
+export interface RouteListResponse {
+    data: Route[];
+}
+
+export interface RouteCreateResponse {
+    data: Route;
+}
+
+export type RouteUpdateResponse = RouteCreateResponse;
+
+export interface RouteDeleteResponse {
+    message: string;
+    data: null;
+}

src/router/index.ts

@@ -32,6 +32,8 @@ import Companies from '../modules/catalog/components/companies/Companies.vue';
 import '../modules/catalog/components/suppliers/Suppliers.vue';
 import Suppliers from '../modules/catalog/components/suppliers/Suppliers.vue';
 import Locations from '../modules/catalog/components/locations/Locations.vue';
+import RouteSegments from '../modules/catalog/components/route-segments/RouteSegments.vue';
+import Routes from '../modules/catalog/components/routes/Routes.vue';
 import Purchases from '../modules/purchases/components/Purchases.vue';
 import PurchaseDetails from '../modules/purchases/components/PurchaseDetails.vue';
 import PurchaseForm from '../modules/purchases/components/PurchaseForm.vue';
@@ -205,6 +207,24 @@ const routes: RouteRecordRaw[] = [
                             requiresAuth: true
                         }
                     },
+                    {
+                        path: 'route-segments',
+                        name: 'RouteSegments',
+                        component: RouteSegments,
+                        meta: {
+                            title: 'Segmentos de Ruta',
+                            requiresAuth: true
+                        }
+                    },
+                    {
+                        path: 'routes',
+                        name: 'Routes',
+                        component: Routes,
+                        meta: {
+                            title: 'Catálogo de Rutas',
+                            requiresAuth: true
+                        }
+                    },
                     {
                         path: 'model-documents',
                         name: 'ModelDocuments',
@@ -224,6 +244,16 @@ const routes: RouteRecordRaw[] = [
                             permission: 'document_concepts.index'
                         }
                     },
+                    {
+                        path: 'risk-factors',
+                        name: 'RiskFactors',
+                        component: () => import('@/modules/catalog/components/risk-factors/RiskFactors.vue'),
+                        meta: {
+                            title: 'Factores de Riesgo',
+                            requiresAuth: true,
+                            permission: 'risk-factors.index'
+                        }
+                    },
                     companiesRouter
                 ]
             },