diff --git a/src/pages/Customer/components/RiskEvaluation.vue b/src/pages/Customer/components/RiskEvaluation.vue
new file mode 100644
index 000000000..98401023e
--- /dev/null
+++ b/src/pages/Customer/components/RiskEvaluation.vue
@@ -0,0 +1,87 @@
+<template>
+    <q-card class="q-pa-md">
+        <q-card-section>
+            <q-input
+                filled
+                v-model.number="credito"
+                label="Crédito Asignado (€)"
+                type="number"
+            />
+            <q-input filled v-model.number="riesgo" label="Riesgo (€)" type="number" />
+            <q-input
+                filled
+                v-model.number="sumatorioPedidos"
+                label="Sumatorio Pedidos del Día (€)"
+                type="number"
+            />
+            <q-toggle
+                v-model="esClienteFrances"
+                label="¿Cliente Francés?"
+                color="primary"
+                class="q-mt-md"
+            />
+        </q-card-section>
+        <q-card-section>
+            <q-badge :color="resultado.color" align="center" class="text-bold q-pa-md">
+                {{ resultado.mensaje }}
+            </q-badge>
+        </q-card-section>
+    </q-card>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+// Variables reactivas
+const credito = ref(0);
+const riesgo = ref(0);
+const sumatorioPedidos = ref(0);
+const esClienteFrances = ref(false);
+
+// Cálculo del margen
+const margen = computed(() => {
+    if (credito.value === 0) return esClienteFrances.value ? 500 : 200;
+    if (esClienteFrances.value) {
+        return credito.value > 5000 ? credito.value * 0.1 : 500;
+    }
+    return credito.value > 2000 ? credito.value * 0.1 : 200;
+});
+
+// Evaluación del riesgo
+const resultado = computed(() => {
+    const margenActual = margen.value;
+
+    // Riesgo Naranja
+    if (
+        riesgo.value > 0 &&
+        riesgo.value < margenActual &&
+        riesgo.value < sumatorioPedidos.value
+    ) {
+        return {
+            mensaje: 'Riesgo Naranja: Evaluación en Proceso',
+            color: 'orange',
+        };
+    }
+
+    // Riesgo Rojo
+    if (riesgo.value >= margenActual || riesgo.value >= sumatorioPedidos.value) {
+        return {
+            mensaje: 'Riesgo Rojo: No Preparar Pedido',
+            color: 'red',
+        };
+    }
+
+    // Default
+    return {
+        mensaje: 'Condiciones No Cumplen para Evaluación',
+        color: 'grey',
+    };
+});
+</script>
+
+<style scoped>
+.q-card {
+    max-width: 400px;
+    margin: auto;
+}
+</style>
diff --git a/test/cypress/integration/client/components/RiskEvaluator.spec.js b/test/cypress/integration/client/components/RiskEvaluator.spec.js
new file mode 100644
index 000000000..34ab8aef7
--- /dev/null
+++ b/test/cypress/integration/client/components/RiskEvaluator.spec.js
@@ -0,0 +1,35 @@
+describe('RiskEvaluator Component', () => {
+    beforeEach(() => {
+        cy.visit('/'); // Asegúrate de que esta ruta carga el componente RiskEvaluator
+    });
+
+    it('muestra margen predeterminado para cliente no francés con crédito = 0', () => {
+        cy.get('[label="Crédito Asignado (€)"]').clear().type('0');
+        cy.get('[label="Riesgo (€)"]').clear().type('100');
+        cy.get('[label="Sumatorio Pedidos del Día (€)"]').clear().type('50');
+        cy.get('.q-badge').should('contain', 'Riesgo Naranja');
+    });
+
+    it('muestra margen de 500€ para cliente francés con crédito = 0', () => {
+        cy.get('[label="Crédito Asignado (€)"]').clear().type('0');
+        cy.get('[label="Riesgo (€)"]').clear().type('100');
+        cy.get('[label="Sumatorio Pedidos del Día (€)"]').clear().type('50');
+        cy.get('[type="checkbox"]').check(); // Toggle cliente francés
+        cy.get('.q-badge').should('contain', 'Riesgo Naranja');
+    });
+
+    it('muestra "Riesgo Rojo" si riesgo excede margen y pedidos del día', () => {
+        cy.get('[label="Crédito Asignado (€)"]').clear().type('0');
+        cy.get('[label="Riesgo (€)"]').clear().type('300');
+        cy.get('[label="Sumatorio Pedidos del Día (€)"]').clear().type('200');
+        cy.get('.q-badge').should('contain', 'Riesgo Rojo');
+    });
+
+    it('calcula margen dinámicamente para cliente francés con crédito > 5000€', () => {
+        cy.get('[label="Crédito Asignado (€)"]').clear().type('6000');
+        cy.get('[type="checkbox"]').check(); // Toggle cliente francés
+        cy.get('[label="Riesgo (€)"]').clear().type('6500');
+        cy.get('[label="Sumatorio Pedidos del Día (€)"]').clear().type('7000');
+        cy.get('.q-badge').should('contain', 'Riesgo Naranja');
+    });
+});
diff --git a/test/vitest/__tests__/pages/Customer/RiskEvaluator.spec.js b/test/vitest/__tests__/pages/Customer/RiskEvaluator.spec.js
new file mode 100644
index 000000000..9a26948ed
--- /dev/null
+++ b/test/vitest/__tests__/pages/Customer/RiskEvaluator.spec.js
@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest';
+import { computed, ref } from 'vue';
+
+// Simulación de la lógica del componente
+const createTestLogic = (
+    creditoValue,
+    riesgoValue,
+    sumatorioPedidosValue,
+    esClienteFrancesValue
+) => {
+    const credito = ref(creditoValue);
+    const riesgo = ref(riesgoValue);
+    const sumatorioPedidos = ref(sumatorioPedidosValue);
+    const esClienteFrances = ref(esClienteFrancesValue);
+
+    const margen = computed(() => {
+        if (credito.value === 0) return esClienteFrances.value ? 500 : 200;
+        if (esClienteFrances.value) {
+            return credito.value > 5000 ? credito.value * 0.1 : 500;
+        }
+        return credito.value > 2000 ? credito.value * 0.1 : 200;
+    });
+
+    const resultado = computed(() => {
+        const margenActual = margen.value;
+
+        if (
+            riesgo.value > 0 &&
+            riesgo.value < margenActual &&
+            riesgo.value < sumatorioPedidos.value
+        ) {
+            return 'Riesgo Naranja';
+        }
+
+        if (riesgo.value >= margenActual || riesgo.value >= sumatorioPedidos.value) {
+            return 'Riesgo Rojo';
+        }
+
+        return 'Condiciones No Cumplen';
+    });
+
+    return { margen, resultado };
+};
+
+describe('RiskEvaluator Logic', () => {
+    it('debe calcular margen correctamente para crédito = 0, cliente no francés', () => {
+        const { margen } = createTestLogic(0, 100, 50, false);
+        expect(margen.value).toBe(200);
+    });
+
+    it('debe calcular margen correctamente para crédito = 0, cliente francés', () => {
+        const { margen } = createTestLogic(0, 100, 50, true);
+        expect(margen.value).toBe(500);
+    });
+
+    it('debe retornar "Riesgo Naranja" bajo condiciones válidas', () => {
+        const { resultado } = createTestLogic(0, 100, 200, false);
+        expect(resultado.value).toBe('Riesgo Naranja');
+    });
+
+    it('debe retornar "Riesgo Rojo" si riesgo excede el margen', () => {
+        const { resultado } = createTestLogic(0, 300, 200, false);
+        expect(resultado.value).toBe('Riesgo Rojo');
+    });
+
+    it('debe manejar correctamente el margen para créditos altos (cliente francés)', () => {
+        const { margen } = createTestLogic(6000, 0, 0, true);
+        expect(margen.value).toBe(600);
+    });
+});