siesa-ui-kit 1.0.2 → 1.0.4

package/src/views/ListView/ListView.tsx

@@ -1,570 +1,570 @@
-import React, { useState } from 'react';
-import type { ListViewProps, ListViewSortDirection } from './ListView.types';
-import { Badge } from '../../components/Badge/Badge';
-import { Avatar } from '../../components/Avatar/Avatar';
-import { Input } from '../../components/Input/Input';
-import { NavigationRail } from '../../components/NavigationRail/NavigationRail';
-import {
-  HomeIcon,
-  GlobeAltIcon,
-  DocumentTextIcon,
-  CloudIcon,
-  SquaresPlusIcon,
-  MagnifyingGlassIcon,
-  PlusIcon,
-  ListBulletIcon,
-  FunnelIcon,
-  BellIcon,
-  ChevronDownIcon,
-  ArrowLongLeftIcon,
-  ArrowLongRightIcon,
-  EnvelopeIcon,
-} from './icons';
-
-/**
- * ListView - Vista de lista del sistema de diseño Siesa
- *
- * Vista completa que incluye:
- * - Navigation Rail lateral con FAB
- * - Navbar superior con logo, título, notificaciones y dropdown de usuario
- * - Barra de filtros rápidos con badges
- * - Tabla de datos con cabecera, cuerpo y paginación
- * - Botones de acción (Crear, Auditoría, Filtrar)
- * - Buscador integrado
- * - Dropdown de opciones de vista
- *
- * Mejores prácticas implementadas:
- * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
- * - Dark mode con estrategia 'class' (darkMode: 'class')
- * - Tokens de color consistentes con la documentación
- * - Type safety con TypeScript estricto
- * - Accesibilidad con ARIA labels y keyboard navigation
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- * @see docs/shadows.md - Sistema de sombras
- *
- * @example
- * ```tsx
- * <ListView
- *   title="List View"
- *   tableTitle="Usuarios"
- *   columns={columns}
- *   data={users}
- *   userDropdown={{
- *     avatar: '/avatar.jpg',
- *     name: 'John Doe',
- *     role: 'Administrador',
- *   }}
- *   pagination={{
- *     currentPage: 1,
- *     totalPages: 10,
- *     onPageChange: (page) => console.log(page),
- *   }}
- * />
- * ```
- */
-export const ListView = <T extends Record<string, any>>({
-  title = 'List View',
-  navbarTitle = 'List View',
-  tableTitle = 'Usuarios',
-  columns,
-  data,
-  navigationItems,
-  quickFilters,
-  actionButtons,
-  userDropdown,
-  notifications,
-  // environmentBadge - Reserved for future use
-  showFab = true,
-  fabIcon,
-  onFabClick,
-  onSearch,
-  searchPlaceholder = 'Jane Doe',
-  onSort,
-  sortColumn: externalSortColumn,
-  sortDirection: externalSortDirection,
-  pagination,
-  loading = false,
-  loadingRows = 5,
-  emptyMessage = 'No hay datos disponibles',
-  className = '',
-  selectedNavId,
-  onNavSelect,
-  // onCartClick - Reserved for future use
-  onNotificationsClick,
-  viewOptions,
-  selectedViewOption,
-  onViewOptionChange,
-}: ListViewProps<T>) => {
-  // ===== ESTADO INTERNO =====
-  const [internalSortColumn, setInternalSortColumn] = useState<keyof T | string | null>(null);
-  const [internalSortDirection, setInternalSortDirection] = useState<ListViewSortDirection>(null);
-  const [searchValue, setSearchValue] = useState('');
-  const [showViewDropdown, setShowViewDropdown] = useState(false);
-
-  // Usar sort externo si está controlado
-  const sortColumn = externalSortColumn !== undefined ? externalSortColumn : internalSortColumn;
-  const sortDirection = externalSortDirection !== undefined ? externalSortDirection : internalSortDirection;
-
-  // ===== NAVIGATION ITEMS DEFAULT =====
-  const defaultNavigationItems = navigationItems || [
-    { id: 'home', icon: <HomeIcon className="w-4 h-4" />, label: 'Inicio', selected: true },
-    { id: 'option1', icon: <GlobeAltIcon className="w-4 h-4" />, label: 'Opción 1' },
-    { id: 'option2', icon: <DocumentTextIcon className="w-4 h-4" />, label: 'Opción 2' },
-    { id: 'option3', icon: <CloudIcon className="w-4 h-4" />, label: 'Opción 3' },
-    { id: 'more', icon: <SquaresPlusIcon className="w-4 h-4" />, label: 'Ver más...' },
-  ];
-
-  // ===== QUICK FILTERS DEFAULT =====
-  const defaultQuickFilters = quickFilters || [
-    { id: 'paid', label: 'Facturas Pagadas', color: 'lime' as const, icon: undefined },
-    { id: 'pending', label: 'facturas Pendientes por Pago', color: 'rose' as const, icon: undefined },
-    { id: 'orders', label: 'Ordenes de Compra', color: 'sky' as const, icon: undefined },
-  ];
-
-  // ===== ACTION BUTTONS DEFAULT =====
-  const defaultActionButtons = actionButtons || [
-    { id: 'create', label: 'Crear', icon: <PlusIcon className="w-4 h-4" />, variant: 'primary' as const, onClick: undefined },
-    { id: 'audit', label: 'Auditoria', icon: <ListBulletIcon className="w-4 h-4" />, variant: 'primary' as const, onClick: undefined },
-    { id: 'filter', label: 'Filtrar', icon: <FunnelIcon className="w-4 h-4" />, variant: 'primary' as const, onClick: undefined },
-  ];
-
-  // ===== HANDLERS =====
-  const handleSort = (columnAccessor: keyof T | string) => {
-    let newDirection: ListViewSortDirection = 'asc';
-
-    if (sortColumn === columnAccessor) {
-      if (sortDirection === 'asc') {
-        newDirection = 'desc';
-      } else if (sortDirection === 'desc') {
-        newDirection = null;
-      }
-    }
-
-    if (onSort) {
-      onSort(columnAccessor, newDirection);
-    } else {
-      setInternalSortColumn(newDirection ? columnAccessor : null);
-      setInternalSortDirection(newDirection);
-    }
-  };
-
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchValue(e.target.value);
-    onSearch?.(e.target.value);
-  };
-
-  // ===== OBTENER VALOR DE CELDA =====
-  const getCellValue = (row: T, accessor: keyof T | ((row: T) => any)) => {
-    if (typeof accessor === 'function') {
-      return accessor(row);
-    }
-    return row[accessor];
-  };
-
-  // ===== GENERAR PÁGINAS DE PAGINACIÓN =====
-  const getPageNumbers = () => {
-    if (!pagination) return [];
-    const { currentPage, totalPages } = pagination;
-    const pages: (number | string)[] = [];
-    const maxVisible = 5;
-
-    if (totalPages <= maxVisible) {
-      for (let i = 1; i <= totalPages; i++) {
-        pages.push(i);
-      }
-    } else {
-      pages.push(1);
-      if (currentPage <= 3) {
-        pages.push(2, 3);
-      } else if (currentPage >= totalPages - 2) {
-        pages.push('...');
-        pages.push(totalPages - 2, totalPages - 1);
-      } else {
-        pages.push('...');
-        pages.push(currentPage);
-        pages.push('...');
-      }
-      if (totalPages > 1) {
-        pages.push(totalPages);
-      }
-    }
-    return pages;
-  };
-
-  return (
-    <div
-      className={[
-        'bg-bg-tertiary',
-        'dark:bg-dark-bg-tertiary',
-        'flex',
-        'flex-col',
-        'w-full',
-        'h-full',
-        'min-h-screen',
-        className,
-      ].join(' ')}
-    >
-      {/* ===== CONTENEDOR PRINCIPAL ===== */}
-      <div className="flex flex-col grow overflow-hidden w-full">
-        <div className="flex grow overflow-hidden w-full">
-          {/* ===== NAVIGATION RAIL ===== */}
-          <NavigationRail
-            items={defaultNavigationItems.map((item) => ({
-              ...item,
-              selected: selectedNavId ? item.id === selectedNavId : item.selected,
-            }))}
-            alignment="center"
-            showFab={showFab}
-            fabIcon={fabIcon || <MagnifyingGlassIcon className="w-4 h-4" />}
-            onFabClick={onFabClick}
-            fabAriaLabel="Buscar"
-            selectedId={selectedNavId}
-            onItemSelect={onNavSelect}
-          />
-
-          {/* ===== CONTENIDO PRINCIPAL ===== */}
-          <div className="flex flex-col grow overflow-hidden">
-            {/* ===== NAVBAR ===== */}
-            <nav className="flex items-center gap-8 px-4 py-1 w-full bg-bg-primary dark:bg-dark-bg-primary">
-              {/* Leading Section */}
-              <div className="flex items-center gap-4">
-                <img
-                  src="/.Siesa Logo.png"
-                  alt="Siesa"
-                  className="w-[120px] h-[30px] object-contain"
-                />
-                <div className="w-px h-6 bg-border-primary dark:bg-dark-border-primary" />
-                <h1 className="font-bold text-xl leading-7 tracking-[-0.5px] text-content-primary dark:text-dark-content-primary whitespace-nowrap">
-                  {navbarTitle}
-                </h1>
-              </div>
-
-              {/* Trailing Section */}
-              <div className="flex items-center gap-4 grow justify-end">
-                {/* Notification Bell */}
-                <div className="relative">
-                  <button
-                    className="flex flex-col items-center justify-center p-1 rounded-md text-content-primary dark:text-dark-content-primary hover:bg-bg-secondary dark:hover:bg-dark-bg-secondary transition-colors"
-                    onClick={onNotificationsClick}
-                    aria-label="Notificaciones"
-                  >
-                    <BellIcon className="w-4 h-4" />
-                  </button>
-                  {notifications?.bell && (
-                    <span className="absolute -top-0.5 left-[calc(50%+4px)] w-[13px] h-[13px] rounded-full bg-red-700 flex items-center justify-center text-[10px] font-bold text-white">
-                      {notifications.cart && notifications.cart > 99 ? '+99' : notifications.cart}
-                    </span>
-                  )}
-                </div>
-
-                <div className="w-px h-6 bg-border-primary dark:bg-dark-border-primary" />
-
-                {/* User Dropdown */}
-                {userDropdown && (
-                  <button
-                    className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-bg-secondary dark:hover:bg-dark-bg-secondary transition-colors"
-                    onClick={userDropdown.onMenuClick}
-                    aria-label="Menú de usuario"
-                  >
-                    <Avatar
-                      src={userDropdown.avatar}
-                      alt={userDropdown.name}
-                      size="10"
-                      type="rounded"
-                    />
-                    <div className="flex flex-col items-start gap-0.5 w-[123px]">
-                      <span className="text-sm leading-5 text-content-primary dark:text-dark-content-primary whitespace-nowrap">
-                        {userDropdown.name}
-                      </span>
-                      {(userDropdown.email || userDropdown.role) && (
-                        <span className="text-xs leading-4 text-content-secondary dark:text-content-secondary whitespace-nowrap overflow-hidden text-ellipsis w-full">
-                          {userDropdown.role || userDropdown.email}
-                        </span>
-                      )}
-                    </div>
-                    <ChevronDownIcon className="w-5 h-5 text-content-secondary dark:text-content-secondary" />
-                  </button>
-                )}
-              </div>
-            </nav>
-
-            {/* ===== QUICK FILTERS BAR ===== */}
-            <div className="flex items-center gap-2 px-0 py-2 w-full">
-              {defaultQuickFilters.map((filter) => (
-                <Badge
-                  key={filter.id}
-                  color={filter.color}
-                  label={filter.label}
-                  leftIcon={filter.icon}
-                />
-              ))}
-            </div>
-
-            {/* ===== BODY ===== */}
-            <div className="flex grow overflow-hidden">
-              <div className="flex flex-col gap-4 grow bg-bg-primary dark:bg-dark-bg-primary p-4 rounded-tl-3xl overflow-hidden">
-                {/* Header Row */}
-                <div className="flex items-center justify-between w-full">
-                  <h2 className="font-bold text-xl leading-7 tracking-[-0.5px] text-content-primary dark:text-dark-content-primary">
-                    {title}
-                  </h2>
-
-                  {/* Action Buttons */}
-                  <div className="flex items-center gap-2">
-                    {defaultActionButtons.map((btn) => (
-                      <button
-                        key={btn.id}
-                        onClick={btn.onClick}
-                        className={[
-                          'flex',
-                          'items-center',
-                          'justify-center',
-                          'gap-2',
-                          'px-2.5',
-                          'py-1.5',
-                          'rounded-md',
-                          'font-bold',
-                          'text-sm',
-                          'leading-5',
-                          'transition-all',
-                          'duration-150',
-                          btn.variant === 'primary'
-                            ? [
-                                'bg-primary-custom-600',
-                                'text-primary-inverse-content',
-                                'border',
-                                'border-primary-custom-600',
-                                'shadow-button-inset',
-                                'hover:bg-primary-custom-500',
-                                'dark:bg-dark-bg-inverse',
-                                'dark:text-dark-content-inverse',
-                                'dark:border-dark-bg-inverse',
-                              ].join(' ')
-                            : [
-                                'bg-bg-primary',
-                                'text-content-primary',
-                                'border',
-                                'border-border-primary',
-                                'hover:bg-bg-secondary',
-                                'dark:bg-dark-bg-primary',
-                                'dark:text-dark-content-primary',
-                                'dark:border-dark-border-primary',
-                              ].join(' '),
-                        ].join(' ')}
-                      >
-                        {btn.icon}
-                        <span>{btn.label}</span>
-                      </button>
-                    ))}
-                  </div>
-                </div>
-
-                {/* ===== TABLE ===== */}
-                <div className="flex flex-col gap-4 grow bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-xl p-8 overflow-hidden">
-                  {/* Table Header */}
-                  <div className="flex items-center gap-4 w-full">
-                    <h3 className="grow font-bold text-base leading-6 text-content-primary dark:text-dark-content-primary overflow-hidden text-ellipsis whitespace-nowrap">
-                      {tableTitle}
-                    </h3>
-                    <Input
-                      placeholder={searchPlaceholder}
-                      leftIcon={<EnvelopeIcon className="w-4 h-4" />}
-                      value={searchValue}
-                      onChange={handleSearch}
-                      className="w-[200px]"
-                    />
-                    {/* View Dropdown */}
-                    <div className="relative">
-                      <button
-                        onClick={() => setShowViewDropdown(!showViewDropdown)}
-                        className="flex items-center gap-3 px-3 py-2 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg shadow-sm hover:bg-bg-secondary dark:hover:bg-dark-bg-secondary transition-colors"
-                      >
-                        <span className="font-bold text-sm text-content-secondary dark:text-content-secondary">
-                          Ver
-                        </span>
-                        <ChevronDownIcon className="w-5 h-5 text-content-secondary dark:text-content-secondary" />
-                      </button>
-                      {showViewDropdown && viewOptions && (
-                        <div className="absolute top-full right-0 mt-1 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg shadow-lg z-10">
-                          {viewOptions.map((option) => (
-                            <button
-                              key={option.id}
-                              onClick={() => {
-                                onViewOptionChange?.(option.id);
-                                setShowViewDropdown(false);
-                              }}
-                              className={[
-                                'block',
-                                'w-full',
-                                'px-4',
-                                'py-2',
-                                'text-left',
-                                'text-sm',
-                                'hover:bg-bg-secondary',
-                                'dark:hover:bg-dark-bg-secondary',
-                                selectedViewOption === option.id
-                                  ? 'bg-primary-custom-100 dark:bg-primary-custom-600/20'
-                                  : '',
-                              ].join(' ')}
-                            >
-                              {option.label}
-                            </button>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Table Content */}
-                  <div className="flex grow overflow-auto w-full">
-                    {columns.map((column, colIndex) => {
-                      const accessor =
-                        typeof column.accessor === 'function' ? `column_${colIndex}` : String(column.accessor);
-
-                      return (
-                        <div key={accessor} className="flex flex-col flex-1 min-w-0">
-                          {/* Column Header */}
-                          <div
-                            className={[
-                              'flex',
-                              'items-center',
-                              'gap-3',
-                              'px-6',
-                              'py-2.5',
-                              'border-b',
-                              'border-border-primary',
-                              'dark:border-dark-border-primary',
-                              column.sortable ? 'cursor-pointer hover:bg-bg-secondary dark:hover:bg-dark-bg-secondary' : '',
-                            ].join(' ')}
-                            onClick={column.sortable ? () => handleSort(accessor) : undefined}
-                            style={{ width: column.width }}
-                          >
-                            <span className="font-bold text-sm text-content-secondary dark:text-content-secondary overflow-hidden text-ellipsis whitespace-nowrap flex-1">
-                              {column.header}
-                            </span>
-                          </div>
-
-                          {/* Loading Skeleton */}
-                          {loading &&
-                            Array.from({ length: loadingRows }).map((_, rowIndex) => (
-                              <div
-                                key={`loading-${rowIndex}`}
-                                className="flex flex-col px-6 py-4 min-h-[56px] border-b border-border-secondary dark:border-dark-border-primary"
-                                style={{ width: column.width }}
-                              >
-                                <div className="h-4 bg-bg-secondary dark:bg-dark-border-primary rounded animate-pulse" />
-                              </div>
-                            ))}
-
-                          {/* Data Rows */}
-                          {!loading &&
-                            data.map((row, rowIndex) => {
-                              const value = getCellValue(row, column.accessor);
-                              const content = column.render ? column.render(value, row, rowIndex) : value;
-
-                              return (
-                                <div
-                                  key={rowIndex}
-                                  className="flex flex-col justify-center px-6 py-4 min-h-[56px] border-b border-border-secondary dark:border-dark-border-primary"
-                                  style={{ width: column.width }}
-                                >
-                                  <span className="text-sm text-content-primary dark:text-dark-content-primary overflow-hidden text-ellipsis">
-                                    {content}
-                                  </span>
-                                </div>
-                              );
-                            })}
-
-                          {/* Empty State */}
-                          {!loading && data.length === 0 && colIndex === 0 && (
-                            <div className="flex items-center justify-center px-6 py-12 text-sm text-content-secondary dark:text-content-secondary">
-                              {emptyMessage}
-                            </div>
-                          )}
-                        </div>
-                      );
-                    })}
-                  </div>
-
-                  {/* ===== PAGINATION ===== */}
-                  {pagination && (
-                    <div className="flex items-center justify-between w-full h-9">
-                      {/* Previous Button */}
-                      <button
-                        onClick={() => pagination.currentPage > 1 && pagination.onPageChange(pagination.currentPage - 1)}
-                        disabled={pagination.currentPage === 1}
-                        className="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-bold text-primary-custom-600 dark:text-primary-custom-600 hover:bg-primary-custom-100 dark:hover:bg-primary-custom-600/20 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                      >
-                        <ArrowLongLeftIcon className="w-4 h-4" />
-                        <span>{pagination.previousLabel || 'Atrás'}</span>
-                      </button>
-
-                      {/* Page Numbers */}
-                      <div className="flex items-center gap-0">
-                        {getPageNumbers().map((page, index) => {
-                          if (page === '...') {
-                            return (
-                              <div
-                                key={`ellipsis-${index}`}
-                                className="flex items-center justify-center px-3 py-2 text-sm font-bold text-primary-custom-600 dark:text-primary-custom-600"
-                              >
-                                {page}
-                              </div>
-                            );
-                          }
-
-                          const isActive = page === pagination.currentPage;
-
-                          return (
-                            <button
-                              key={page}
-                              onClick={() => pagination.onPageChange(page as number)}
-                              className={[
-                                'flex',
-                                'items-center',
-                                'justify-center',
-                                'px-3',
-                                'py-2',
-                                'rounded-md',
-                                'text-sm',
-                                'font-bold',
-                                'text-primary-custom-600',
-                                'dark:text-primary-custom-600',
-                                'transition-colors',
-                                isActive
-                                  ? 'bg-primary-custom-100 dark:bg-primary-custom-600/20'
-                                  : 'hover:bg-primary-custom-50 dark:hover:bg-primary-custom-600/10',
-                              ].join(' ')}
-                            >
-                              {page}
-                            </button>
-                          );
-                        })}
-                      </div>
-
-                      {/* Next Button */}
-                      <button
-                        onClick={() =>
-                          pagination.currentPage < pagination.totalPages &&
-                          pagination.onPageChange(pagination.currentPage + 1)
-                        }
-                        disabled={pagination.currentPage === pagination.totalPages}
-                        className="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-bold text-primary-custom-600 dark:text-primary-custom-600 hover:bg-primary-custom-100 dark:hover:bg-primary-custom-600/20 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                      >
-                        <span>{pagination.nextLabel || 'Siguiente'}</span>
-                        <ArrowLongRightIcon className="w-4 h-4" />
-                      </button>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
+import React, { useState } from 'react';
+import type { ListViewProps, ListViewSortDirection } from './ListView.types';
+import { Badge } from '../../components/Badge/Badge';
+import { Avatar } from '../../components/Avatar/Avatar';
+import { Input } from '../../components/Input/Input';
+import { NavigationRail } from '../../components/NavigationRail/NavigationRail';
+import {
+  HomeIcon,
+  GlobeAltIcon,
+  DocumentTextIcon,
+  CloudIcon,
+  SquaresPlusIcon,
+  MagnifyingGlassIcon,
+  PlusIcon,
+  ListBulletIcon,
+  FunnelIcon,
+  BellIcon,
+  ChevronDownIcon,
+  ArrowLongLeftIcon,
+  ArrowLongRightIcon,
+  EnvelopeIcon,
+} from './icons';
+
+/**
+ * ListView - Vista de lista del sistema de diseño Siesa
+ *
+ * Vista completa que incluye:
+ * - Navigation Rail lateral con FAB
+ * - Navbar superior con logo, título, notificaciones y dropdown de usuario
+ * - Barra de filtros rápidos con badges
+ * - Tabla de datos con cabecera, cuerpo y paginación
+ * - Botones de acción (Crear, Auditoría, Filtrar)
+ * - Buscador integrado
+ * - Dropdown de opciones de vista
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA labels y keyboard navigation
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras
+ *
+ * @example
+ * ```tsx
+ * <ListView
+ *   title="List View"
+ *   tableTitle="Usuarios"
+ *   columns={columns}
+ *   data={users}
+ *   userDropdown={{
+ *     avatar: '/avatar.jpg',
+ *     name: 'John Doe',
+ *     role: 'Administrador',
+ *   }}
+ *   pagination={{
+ *     currentPage: 1,
+ *     totalPages: 10,
+ *     onPageChange: (page) => console.log(page),
+ *   }}
+ * />
+ * ```
+ */
+export const ListView = <T extends Record<string, any>>({
+  title = 'List View',
+  navbarTitle = 'List View',
+  tableTitle = 'Usuarios',
+  columns,
+  data,
+  navigationItems,
+  quickFilters,
+  actionButtons,
+  userDropdown,
+  notifications,
+  // environmentBadge - Reserved for future use
+  showFab = true,
+  fabIcon,
+  onFabClick,
+  onSearch,
+  searchPlaceholder = 'Jane Doe',
+  onSort,
+  sortColumn: externalSortColumn,
+  sortDirection: externalSortDirection,
+  pagination,
+  loading = false,
+  loadingRows = 5,
+  emptyMessage = 'No hay datos disponibles',
+  className = '',
+  selectedNavId,
+  onNavSelect,
+  // onCartClick - Reserved for future use
+  onNotificationsClick,
+  viewOptions,
+  selectedViewOption,
+  onViewOptionChange,
+}: ListViewProps<T>) => {
+  // ===== ESTADO INTERNO =====
+  const [internalSortColumn, setInternalSortColumn] = useState<keyof T | string | null>(null);
+  const [internalSortDirection, setInternalSortDirection] = useState<ListViewSortDirection>(null);
+  const [searchValue, setSearchValue] = useState('');
+  const [showViewDropdown, setShowViewDropdown] = useState(false);
+
+  // Usar sort externo si está controlado
+  const sortColumn = externalSortColumn !== undefined ? externalSortColumn : internalSortColumn;
+  const sortDirection = externalSortDirection !== undefined ? externalSortDirection : internalSortDirection;
+
+  // ===== NAVIGATION ITEMS DEFAULT =====
+  const defaultNavigationItems = navigationItems || [
+    { id: 'home', icon: <HomeIcon className="w-4 h-4" />, label: 'Inicio', selected: true },
+    { id: 'option1', icon: <GlobeAltIcon className="w-4 h-4" />, label: 'Opción 1' },
+    { id: 'option2', icon: <DocumentTextIcon className="w-4 h-4" />, label: 'Opción 2' },
+    { id: 'option3', icon: <CloudIcon className="w-4 h-4" />, label: 'Opción 3' },
+    { id: 'more', icon: <SquaresPlusIcon className="w-4 h-4" />, label: 'Ver más...' },
+  ];
+
+  // ===== QUICK FILTERS DEFAULT =====
+  const defaultQuickFilters = quickFilters || [
+    { id: 'paid', label: 'Facturas Pagadas', color: 'lime' as const, icon: undefined },
+    { id: 'pending', label: 'facturas Pendientes por Pago', color: 'rose' as const, icon: undefined },
+    { id: 'orders', label: 'Ordenes de Compra', color: 'sky' as const, icon: undefined },
+  ];
+
+  // ===== ACTION BUTTONS DEFAULT =====
+  const defaultActionButtons = actionButtons || [
+    { id: 'create', label: 'Crear', icon: <PlusIcon className="w-4 h-4" />, variant: 'primary' as const, onClick: undefined },
+    { id: 'audit', label: 'Auditoria', icon: <ListBulletIcon className="w-4 h-4" />, variant: 'primary' as const, onClick: undefined },
+    { id: 'filter', label: 'Filtrar', icon: <FunnelIcon className="w-4 h-4" />, variant: 'primary' as const, onClick: undefined },
+  ];
+
+  // ===== HANDLERS =====
+  const handleSort = (columnAccessor: keyof T | string) => {
+    let newDirection: ListViewSortDirection = 'asc';
+
+    if (sortColumn === columnAccessor) {
+      if (sortDirection === 'asc') {
+        newDirection = 'desc';
+      } else if (sortDirection === 'desc') {
+        newDirection = null;
+      }
+    }
+
+    if (onSort) {
+      onSort(columnAccessor, newDirection);
+    } else {
+      setInternalSortColumn(newDirection ? columnAccessor : null);
+      setInternalSortDirection(newDirection);
+    }
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target.value);
+    onSearch?.(e.target.value);
+  };
+
+  // ===== OBTENER VALOR DE CELDA =====
+  const getCellValue = (row: T, accessor: keyof T | ((row: T) => any)) => {
+    if (typeof accessor === 'function') {
+      return accessor(row);
+    }
+    return row[accessor];
+  };
+
+  // ===== GENERAR PÁGINAS DE PAGINACIÓN =====
+  const getPageNumbers = () => {
+    if (!pagination) return [];
+    const { currentPage, totalPages } = pagination;
+    const pages: (number | string)[] = [];
+    const maxVisible = 5;
+
+    if (totalPages <= maxVisible) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push(1);
+      if (currentPage <= 3) {
+        pages.push(2, 3);
+      } else if (currentPage >= totalPages - 2) {
+        pages.push('...');
+        pages.push(totalPages - 2, totalPages - 1);
+      } else {
+        pages.push('...');
+        pages.push(currentPage);
+        pages.push('...');
+      }
+      if (totalPages > 1) {
+        pages.push(totalPages);
+      }
+    }
+    return pages;
+  };
+
+  return (
+    <div
+      className={[
+        'bg-bg-tertiary',
+        'dark:bg-dark-bg-tertiary',
+        'flex',
+        'flex-col',
+        'w-full',
+        'h-full',
+        'min-h-screen',
+        className,
+      ].join(' ')}
+    >
+      {/* ===== CONTENEDOR PRINCIPAL ===== */}
+      <div className="flex flex-col grow overflow-hidden w-full">
+        <div className="flex grow overflow-hidden w-full">
+          {/* ===== NAVIGATION RAIL ===== */}
+          <NavigationRail
+            items={defaultNavigationItems.map((item) => ({
+              ...item,
+              selected: selectedNavId ? item.id === selectedNavId : item.selected,
+            }))}
+            alignment="center"
+            showFab={showFab}
+            fabIcon={fabIcon || <MagnifyingGlassIcon className="w-4 h-4" />}
+            onFabClick={onFabClick}
+            fabAriaLabel="Buscar"
+            selectedId={selectedNavId}
+            onItemSelect={onNavSelect}
+          />
+
+          {/* ===== CONTENIDO PRINCIPAL ===== */}
+          <div className="flex flex-col grow overflow-hidden">
+            {/* ===== NAVBAR ===== */}
+            <nav className="flex items-center gap-8 px-4 py-1 w-full bg-bg-primary dark:bg-dark-bg-primary">
+              {/* Leading Section */}
+              <div className="flex items-center gap-4">
+                <img
+                  src="/.Siesa Logo.png"
+                  alt="Siesa"
+                  className="w-[120px] h-[30px] object-contain"
+                />
+                <div className="w-px h-6 bg-border-primary dark:bg-dark-border-primary" />
+                <h1 className="font-bold text-xl leading-7 tracking-[-0.5px] text-content-primary dark:text-dark-content-primary whitespace-nowrap">
+                  {navbarTitle}
+                </h1>
+              </div>
+
+              {/* Trailing Section */}
+              <div className="flex items-center gap-4 grow justify-end">
+                {/* Notification Bell */}
+                <div className="relative">
+                  <button
+                    className="flex flex-col items-center justify-center p-1 rounded-md text-content-primary dark:text-dark-content-primary hover:bg-bg-secondary dark:hover:bg-dark-bg-secondary transition-colors"
+                    onClick={onNotificationsClick}
+                    aria-label="Notificaciones"
+                  >
+                    <BellIcon className="w-4 h-4" />
+                  </button>
+                  {notifications?.bell && (
+                    <span className="absolute -top-0.5 left-[calc(50%+4px)] w-[13px] h-[13px] rounded-full bg-red-700 flex items-center justify-center text-[10px] font-bold text-white">
+                      {notifications.cart && notifications.cart > 99 ? '+99' : notifications.cart}
+                    </span>
+                  )}
+                </div>
+
+                <div className="w-px h-6 bg-border-primary dark:bg-dark-border-primary" />
+
+                {/* User Dropdown */}
+                {userDropdown && (
+                  <button
+                    className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-bg-secondary dark:hover:bg-dark-bg-secondary transition-colors"
+                    onClick={userDropdown.onMenuClick}
+                    aria-label="Menú de usuario"
+                  >
+                    <Avatar
+                      src={userDropdown.avatar}
+                      alt={userDropdown.name}
+                      size="10"
+                      type="rounded"
+                    />
+                    <div className="flex flex-col items-start gap-0.5 w-[123px]">
+                      <span className="text-sm leading-5 text-content-primary dark:text-dark-content-primary whitespace-nowrap">
+                        {userDropdown.name}
+                      </span>
+                      {(userDropdown.email || userDropdown.role) && (
+                        <span className="text-xs leading-4 text-content-secondary dark:text-content-secondary whitespace-nowrap overflow-hidden text-ellipsis w-full">
+                          {userDropdown.role || userDropdown.email}
+                        </span>
+                      )}
+                    </div>
+                    <ChevronDownIcon className="w-5 h-5 text-content-secondary dark:text-content-secondary" />
+                  </button>
+                )}
+              </div>
+            </nav>
+
+            {/* ===== QUICK FILTERS BAR ===== */}
+            <div className="flex items-center gap-2 px-0 py-2 w-full">
+              {defaultQuickFilters.map((filter) => (
+                <Badge
+                  key={filter.id}
+                  color={filter.color}
+                  label={filter.label}
+                  leftIcon={filter.icon}
+                />
+              ))}
+            </div>
+
+            {/* ===== BODY ===== */}
+            <div className="flex grow overflow-hidden">
+              <div className="flex flex-col gap-4 grow bg-bg-primary dark:bg-dark-bg-primary p-4 rounded-tl-3xl overflow-hidden">
+                {/* Header Row */}
+                <div className="flex items-center justify-between w-full">
+                  <h2 className="font-bold text-xl leading-7 tracking-[-0.5px] text-content-primary dark:text-dark-content-primary">
+                    {title}
+                  </h2>
+
+                  {/* Action Buttons */}
+                  <div className="flex items-center gap-2">
+                    {defaultActionButtons.map((btn) => (
+                      <button
+                        key={btn.id}
+                        onClick={btn.onClick}
+                        className={[
+                          'flex',
+                          'items-center',
+                          'justify-center',
+                          'gap-2',
+                          'px-2.5',
+                          'py-1.5',
+                          'rounded-md',
+                          'font-bold',
+                          'text-sm',
+                          'leading-5',
+                          'transition-all',
+                          'duration-150',
+                          btn.variant === 'primary'
+                            ? [
+                                'bg-primary-custom-600',
+                                'text-primary-inverse-content',
+                                'border',
+                                'border-primary-custom-600',
+                                'shadow-button-inset',
+                                'hover:bg-primary-custom-500',
+                                'dark:bg-dark-bg-inverse',
+                                'dark:text-dark-content-inverse',
+                                'dark:border-dark-bg-inverse',
+                              ].join(' ')
+                            : [
+                                'bg-bg-primary',
+                                'text-content-primary',
+                                'border',
+                                'border-border-primary',
+                                'hover:bg-bg-secondary',
+                                'dark:bg-dark-bg-primary',
+                                'dark:text-dark-content-primary',
+                                'dark:border-dark-border-primary',
+                              ].join(' '),
+                        ].join(' ')}
+                      >
+                        {btn.icon}
+                        <span>{btn.label}</span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* ===== TABLE ===== */}
+                <div className="flex flex-col gap-4 grow bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-xl p-8 overflow-hidden">
+                  {/* Table Header */}
+                  <div className="flex items-center gap-4 w-full">
+                    <h3 className="grow font-bold text-base leading-6 text-content-primary dark:text-dark-content-primary overflow-hidden text-ellipsis whitespace-nowrap">
+                      {tableTitle}
+                    </h3>
+                    <Input
+                      placeholder={searchPlaceholder}
+                      leftIcon={<EnvelopeIcon className="w-4 h-4" />}
+                      value={searchValue}
+                      onChange={handleSearch}
+                      className="w-[200px]"
+                    />
+                    {/* View Dropdown */}
+                    <div className="relative">
+                      <button
+                        onClick={() => setShowViewDropdown(!showViewDropdown)}
+                        className="flex items-center gap-3 px-3 py-2 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg shadow-sm hover:bg-bg-secondary dark:hover:bg-dark-bg-secondary transition-colors"
+                      >
+                        <span className="font-bold text-sm text-content-secondary dark:text-content-secondary">
+                          Ver
+                        </span>
+                        <ChevronDownIcon className="w-5 h-5 text-content-secondary dark:text-content-secondary" />
+                      </button>
+                      {showViewDropdown && viewOptions && (
+                        <div className="absolute top-full right-0 mt-1 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg shadow-lg z-10">
+                          {viewOptions.map((option) => (
+                            <button
+                              key={option.id}
+                              onClick={() => {
+                                onViewOptionChange?.(option.id);
+                                setShowViewDropdown(false);
+                              }}
+                              className={[
+                                'block',
+                                'w-full',
+                                'px-4',
+                                'py-2',
+                                'text-left',
+                                'text-sm',
+                                'hover:bg-bg-secondary',
+                                'dark:hover:bg-dark-bg-secondary',
+                                selectedViewOption === option.id
+                                  ? 'bg-primary-custom-100 dark:bg-primary-custom-600/20'
+                                  : '',
+                              ].join(' ')}
+                            >
+                              {option.label}
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Table Content */}
+                  <div className="flex grow overflow-auto w-full">
+                    {columns.map((column, colIndex) => {
+                      const accessor =
+                        typeof column.accessor === 'function' ? `column_${colIndex}` : String(column.accessor);
+
+                      return (
+                        <div key={accessor} className="flex flex-col flex-1 min-w-0">
+                          {/* Column Header */}
+                          <div
+                            className={[
+                              'flex',
+                              'items-center',
+                              'gap-3',
+                              'px-6',
+                              'py-2.5',
+                              'border-b',
+                              'border-border-primary',
+                              'dark:border-dark-border-primary',
+                              column.sortable ? 'cursor-pointer hover:bg-bg-secondary dark:hover:bg-dark-bg-secondary' : '',
+                            ].join(' ')}
+                            onClick={column.sortable ? () => handleSort(accessor) : undefined}
+                            style={{ width: column.width }}
+                          >
+                            <span className="font-bold text-sm text-content-secondary dark:text-content-secondary overflow-hidden text-ellipsis whitespace-nowrap flex-1">
+                              {column.header}
+                            </span>
+                          </div>
+
+                          {/* Loading Skeleton */}
+                          {loading &&
+                            Array.from({ length: loadingRows }).map((_, rowIndex) => (
+                              <div
+                                key={`loading-${rowIndex}`}
+                                className="flex flex-col px-6 py-4 min-h-[56px] border-b border-border-secondary dark:border-dark-border-primary"
+                                style={{ width: column.width }}
+                              >
+                                <div className="h-4 bg-bg-secondary dark:bg-dark-border-primary rounded animate-pulse" />
+                              </div>
+                            ))}
+
+                          {/* Data Rows */}
+                          {!loading &&
+                            data.map((row, rowIndex) => {
+                              const value = getCellValue(row, column.accessor);
+                              const content = column.render ? column.render(value, row, rowIndex) : value;
+
+                              return (
+                                <div
+                                  key={rowIndex}
+                                  className="flex flex-col justify-center px-6 py-4 min-h-[56px] border-b border-border-secondary dark:border-dark-border-primary"
+                                  style={{ width: column.width }}
+                                >
+                                  <span className="text-sm text-content-primary dark:text-dark-content-primary overflow-hidden text-ellipsis">
+                                    {content}
+                                  </span>
+                                </div>
+                              );
+                            })}
+
+                          {/* Empty State */}
+                          {!loading && data.length === 0 && colIndex === 0 && (
+                            <div className="flex items-center justify-center px-6 py-12 text-sm text-content-secondary dark:text-content-secondary">
+                              {emptyMessage}
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+
+                  {/* ===== PAGINATION ===== */}
+                  {pagination && (
+                    <div className="flex items-center justify-between w-full h-9">
+                      {/* Previous Button */}
+                      <button
+                        onClick={() => pagination.currentPage > 1 && pagination.onPageChange(pagination.currentPage - 1)}
+                        disabled={pagination.currentPage === 1}
+                        className="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-bold text-primary-custom-600 dark:text-primary-custom-600 hover:bg-primary-custom-100 dark:hover:bg-primary-custom-600/20 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                      >
+                        <ArrowLongLeftIcon className="w-4 h-4" />
+                        <span>{pagination.previousLabel || 'Atrás'}</span>
+                      </button>
+
+                      {/* Page Numbers */}
+                      <div className="flex items-center gap-0">
+                        {getPageNumbers().map((page, index) => {
+                          if (page === '...') {
+                            return (
+                              <div
+                                key={`ellipsis-${index}`}
+                                className="flex items-center justify-center px-3 py-2 text-sm font-bold text-primary-custom-600 dark:text-primary-custom-600"
+                              >
+                                {page}
+                              </div>
+                            );
+                          }
+
+                          const isActive = page === pagination.currentPage;
+
+                          return (
+                            <button
+                              key={page}
+                              onClick={() => pagination.onPageChange(page as number)}
+                              className={[
+                                'flex',
+                                'items-center',
+                                'justify-center',
+                                'px-3',
+                                'py-2',
+                                'rounded-md',
+                                'text-sm',
+                                'font-bold',
+                                'text-primary-custom-600',
+                                'dark:text-primary-custom-600',
+                                'transition-colors',
+                                isActive
+                                  ? 'bg-primary-custom-100 dark:bg-primary-custom-600/20'
+                                  : 'hover:bg-primary-custom-50 dark:hover:bg-primary-custom-600/10',
+                              ].join(' ')}
+                            >
+                              {page}
+                            </button>
+                          );
+                        })}
+                      </div>
+
+                      {/* Next Button */}
+                      <button
+                        onClick={() =>
+                          pagination.currentPage < pagination.totalPages &&
+                          pagination.onPageChange(pagination.currentPage + 1)
+                        }
+                        disabled={pagination.currentPage === pagination.totalPages}
+                        className="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-bold text-primary-custom-600 dark:text-primary-custom-600 hover:bg-primary-custom-100 dark:hover:bg-primary-custom-600/20 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                      >
+                        <span>{pagination.nextLabel || 'Siguiente'}</span>
+                        <ArrowLongRightIcon className="w-4 h-4" />
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};