Diligency App - Sistema de Gestión de Proveedores

Descripción General

Diligency App es una aplicación web desarrollada con React y TypeScript que permite gestionar proveedores de manera eficiente. La aplicación incluye funcionalidades de autenticación, CRUD completo de proveedores, búsqueda avanzada, paginación, y screening de proveedores contra listas de alto riesgo.

Características Principales

• 🔐 Autenticación segura con gestión de sesiones
• 👥 Gestión completa de proveedores (crear, leer, actualizar, eliminar)
• 🔍 Búsqueda avanzada por múltiples campos
• 📄 Paginación inteligente con navegación fluida
• 🛡️ Screening de proveedores contra listas de riesgo (OFAC, World Bank, Offshore Leaks)

Tecnologías Empleadas

Categoría	Tecnología	Versión	Propósito
Frontend Framework	React	18.x	Biblioteca para construir interfaces de usuario
Lenguaje	TypeScript	5.x	Superset de JavaScript con tipado estático
Build Tool	Vite	5.x	Herramienta de build rápida y moderna
UI Library	Fluent UI v9	9.x	Sistema de diseño de Microsoft
Styling	Tailwind CSS	3.x	Framework CSS utilitario
Routing	React Router DOM	6.x	Enrutamiento del lado del cliente
HTTP Client	Axios	1.x	Cliente HTTP para llamadas a API
Validación	Zod	3.x	Validación de esquemas con TypeScript
Formateo de Fechas	date-fns	2.x	Utilidades para manejo de fechas
Linting	ESLint	8.x	Herramienta de análisis de código

Casos de Uso

1. Gestión de Proveedores

• Crear nuevos proveedores con información completa (razón social, RUC, contacto, facturación)
• Visualizar listado paginado de proveedores con búsqueda en tiempo real
• Editar información de proveedores existentes
• Eliminar proveedores con confirmación de seguridad
• Ver detalles completos en panel lateral deslizable

2. Búsqueda y Filtrado

• Búsqueda global por razón social, nombre comercial, ID tributario o país
• Filtrado en tiempo real sin necesidad de recargar la página
• Paginación inteligente que se ajusta automáticamente a los resultados filtrados

3. Screening de Proveedores

• Consulta contra múltiples fuentes de listas de alto riesgo
• Selección de fuentes específicas (OFAC, World Bank, Offshore Leaks)
• Visualización de resultados en formato tabular scrolleable
• Integración directa desde la tabla de proveedores

4. Autenticación y Seguridad

• Login seguro con validación de credenciales
• Gestión de sesiones automática
• Rutas protegidas que requieren autenticación
• Logout con confirmación y limpieza de sesión

Despliegue Local

Prerrequisitos

• Node.js 18.x o superior
• npm 9.x o superior
• Git

Pasos para Despliegue

1. Clonar el repositorio

git clone https://github.com/thvx/Frontend_providers.git
cd diligency-app

2. Instalar dependencias

npm install

3. Configurar variables de entorno

# Crear archivo .env.local
cp .env.example .env.local

# Editar las variables necesarias
API_BASE_URL=http://localhost:5003
VITE_API_BASE_URL=http://localhost:5003

4. Ejecutar en modo desarrollo

npm run dev

5. Acceder a la aplicación

• Abrir navegador en http://localhost:3000
• Usar credenciales de prueba o registrar nuevo usuario

Estructura del Proyecto

diligency-app/
├── public/                 # Archivos estáticos
├── src/
│   ├── api/               # Clientes de API
│   ├── assets/            # Recursos (imágenes, iconos)
│   ├── components/        # Componentes React
│   │   ├── atoms/         # Componentes básicos
│   │   ├── molecules/     # Componentes compuestos
│   │   └── templates/     # Plantillas de layout
│   ├── hooks/             # Custom hooks
│   ├── pages/             # Páginas principales
│   ├── services/          # Servicios de negocio
│   ├── state/             # Gestión de estado
│   ├── types/             # Definiciones de tipos
│   └── validations/       # Esquemas de validación
├── .env.local             # Variables de entorno
├── package.json           # Dependencias del proyecto
├── tsconfig.json          # Configuración TypeScript
└── vite.config.ts         # Configuración Vite