Perfecto, voy a replicar el diseño de la imagen con el sidebar y header similares, y reorganizar el contenido con las dos filas antes de la tabla:

Cambios Implementados Según la Imagen de Referencia

1. Header Replicado

• Logo: Diseño similar con círculo amarillo y texto "Red Amarilla"
• Barra de Búsqueda: Centrada con icono de búsqueda
• Área de Usuario: Notificaciones y avatar en la esquina derecha
• Estilo: Fondo blanco con bordes sutiles

2. Sidebar Estructurado

• Secciones Organizadas: SERVICIOS, ADMINISTRACIÓN, GENERACIÓN DE SERVICIOS
• Iconos Apropiados: Cada elemento con su icono correspondiente
• Estado Activo: "Preoperativa Flota" marcada como activa con fondo amarillo
• Navegación Vertical: Estructura similar a la imagen de referencia

3. Dos Filas Antes de la Tabla

Primera Fila - Service Header

• Título del Servicio: "Preoperativa Flota" como título principal
• Contador de Registros: Muestra total de registros
• Filtros de Fecha: Selectores de empresa, mes y año
• Botones de Acción: "Agregar" y "Servicio Realizado"

Segunda Fila - Statistics Row

• Tarjeta de Progreso: Circular con porcentaje de completitud
• Tarjetas de Estado: Una por cada tipo de estado de inspección
• Grid Responsivo: Se adapta a diferentes tamaños de pantalla
• Información Visual: Iconos, colores y porcentajes

4. Tabla con Paginación Mantenida

• Estructura de Calendario: Mantiene la vista de calendario con días del mes

• Paginación Completa:

  • Selector de filas por página (5, 10, 20, 50)
  • Navegación entre páginas
  • Indicador de página actual
• Interactividad: Click en celdas para cambiar estados
• Tooltips: Información detallada al hacer hover

5. Footer Replicado

• Copyright: Texto similar al de la imagen
• Enlaces: Política de privacidad, términos de servicio, contacto
• Estilo: Fondo blanco con texto gris

6. Mejoras Visuales

• Colores Consistentes: Esquema de colores amarillo/azul similar a la referencia
• Espaciado: Padding y margins apropiados
• Bordes y Sombras: Elementos sutiles para profundidad
• Responsividad: Adaptación a diferentes tamaños de pantalla

El diseño ahora replica fielmente la estructura de la imagen de referencia, con las estadísticas movidas arriba de la tabla en una fila dedicada, manteniendo la paginación funcional y organizando el contenido en las dos filas solicitadas antes de la tabla principal.

Perfecto, voy a refactorizar el código siguiendo la metodología Atomic Design, dividiendo los componentes en átomos y moléculas:

Refactorización Completa con Atomic Design

Átomos (Atoms)- Componentes más básicos

• Logo: Logo de la aplicación
• SearchInput: Campo de búsqueda con icono
• UserAvatar: Avatar del usuario con iniciales
• NotificationButton: Botón de notificaciones
• MenuItem: Elemento individual del menú
• SectionTitle: Título de sección del sidebar
• StatusIcon: Icono de estado con color
• ProgressCircle: Círculo de progreso SVG
• PaginationInfo: Información de paginación

Moléculas (Molecules)- Combinaciones de átomos

• UserActions: Combinación de notificaciones + avatar
• NavigationSection: Sección completa del menú con título e items
• FilterControls: Controles de filtrado (empresa, mes, año)
• ActionButtons: Botones de acción (Agregar + Servicio Realizado)
• ServiceInfo: Información del servicio (título + contador)
• ProgressCard: Tarjeta de progreso con círculo y datos
• StatusCard: Tarjeta de estado individual
• VehicleInfo: Información del vehículo (placa, conductor, ruta)
• CalendarCell: Celda individual del calendario con tooltip
• PaginationControls: Controles completos de paginación

Organismos (Organisms)- Secciones completas

• Header: Header completo con logo, búsqueda y acciones de usuario
• Sidebar: Sidebar completo con todas las secciones de navegación
• ServiceHeader: Header del servicio con info, filtros y botones
• StatisticsRow: Fila completa de estadísticas con todas las tarjetas
• CalendarTable: Tabla completa del calendario con paginación
• Footer: Footer completo con enlaces

Templates- Layout completo

• MainLayout: Layout principal que combina todos los organismos

Beneficios de la Refactorización

1. Reutilización

• Los átomos pueden usarse en múltiples contextos
• Las moléculas encapsulan lógica específica
• Los organismos son independientes y modulares

2. Mantenibilidad

• Cada componente tiene una responsabilidad específica
• Fácil localización y modificación de funcionalidades
• Testing más granular y específico

3. Escalabilidad

• Nuevas funcionalidades se pueden construir combinando componentes existentes
• Consistencia visual automática al reutilizar átomos
• Fácil adición de nuevas variantes

4. Separación de Responsabilidades

• Átomos: Solo presentación y estilos básicos
• Moléculas: Lógica de interacción simple
• Organismos: Lógica de negocio y estado
• Templates: Estructura y layout

5. Desarrollo en Equipo

• Diferentes desarrolladores pueden trabajar en diferentes niveles
• Componentes bien definidos facilitan la colaboración
• Documentación implícita a través de la estructura

Esta refactorización mantiene toda la funcionalidad existente mientras proporciona una base sólida y escalable para futuras mejoras y expansiones del sistema.