feat: bulk XML upload, period selector, and session persistence

- Add bulk XML CFDI upload support (up to 300MB)
- Add period selector component for month/year navigation
- Fix session persistence on page refresh (Zustand hydration)
- Fix income/expense classification based on tenant RFC
- Fix IVA calculation from XML (correct Impuestos element)
- Add error handling to reportes page
- Support multiple CORS origins
- Update reportes service with proper Decimal/BigInt handling
- Add RFC to tenant view store for proper CFDI classification
- Update README with changelog and new features

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/web/components/layouts/dashboard-shell.tsx

@@ -4,14 +4,15 @@ import { Header } from './header';
 interface DashboardShellProps {
   children: React.ReactNode;
   title: string;
+  headerContent?: React.ReactNode;
 }
 
-export function DashboardShell({ children, title }: DashboardShellProps) {
+export function DashboardShell({ children, title, headerContent }: DashboardShellProps) {
   return (
     <div className="min-h-screen bg-background">
       <Sidebar />
       <div className="pl-64">
-        <Header title={title} />
+        <Header title={title}>{headerContent}</Header>
         <main className="p-6">{children}</main>
       </div>
     </div>

apps/web/components/layouts/header.tsx

@@ -15,7 +15,12 @@ const themeIcons: Record<ThemeName, React.ReactNode> = {
 
 const themeOrder: ThemeName[] = ['light', 'vibrant', 'corporate', 'dark'];
 
-export function Header({ title }: { title: string }) {
+interface HeaderProps {
+  title: string;
+  children?: React.ReactNode;
+}
+
+export function Header({ title, children }: HeaderProps) {
   const { theme, setTheme } = useThemeStore();
 
   const cycleTheme = () => {
@@ -26,7 +31,10 @@ export function Header({ title }: { title: string }) {
 
   return (
     <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b bg-background/95 backdrop-blur px-6">
-      <h1 className="text-xl font-semibold">{title}</h1>
+      <div className="flex items-center gap-4">
+        <h1 className="text-xl font-semibold">{title}</h1>
+        {children}
+      </div>
 
       <div className="flex items-center gap-3">
         <TenantSelector />

apps/web/components/period-selector.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+const meses = [
+  'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
+  'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'
+];
+
+interface PeriodSelectorProps {
+  año: number;
+  mes?: number;
+  onAñoChange: (año: number) => void;
+  onMesChange?: (mes: number) => void;
+  showMonth?: boolean;
+  minYear?: number;
+  maxYear?: number;
+}
+
+export function PeriodSelector({
+  año,
+  mes,
+  onAñoChange,
+  onMesChange,
+  showMonth = true,
+  minYear = 2020,
+  maxYear = new Date().getFullYear(),
+}: PeriodSelectorProps) {
+
+  const handlePrev = () => {
+    if (showMonth && mes && onMesChange) {
+      if (mes === 1) {
+        if (año > minYear) {
+          onMesChange(12);
+          onAñoChange(año - 1);
+        }
+      } else {
+        onMesChange(mes - 1);
+      }
+    } else {
+      if (año > minYear) {
+        onAñoChange(año - 1);
+      }
+    }
+  };
+
+  const handleNext = () => {
+    if (showMonth && mes && onMesChange) {
+      if (mes === 12) {
+        if (año < maxYear) {
+          onMesChange(1);
+          onAñoChange(año + 1);
+        }
+      } else {
+        onMesChange(mes + 1);
+      }
+    } else {
+      if (año < maxYear) {
+        onAñoChange(año + 1);
+      }
+    }
+  };
+
+  const canGoPrev = showMonth && mes
+    ? !(año === minYear && mes === 1)
+    : año > minYear;
+
+  const canGoNext = showMonth && mes
+    ? !(año === maxYear && mes === 12)
+    : año < maxYear;
+
+  const displayText = showMonth && mes
+    ? `${meses[mes - 1]} ${año}`
+    : `${año}`;
+
+  return (
+    <div className="flex items-center gap-1">
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-8 w-8"
+        onClick={handlePrev}
+        disabled={!canGoPrev}
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </Button>
+
+      <span className="min-w-[90px] text-center text-sm font-medium">
+        {displayText}
+      </span>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-8 w-8"
+        onClick={handleNext}
+        disabled={!canGoNext}
+      >
+        <ChevronRight className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}

apps/web/components/tenant-selector.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { getTenants, type Tenant } from '@/lib/api/tenants';
 import { useTenantViewStore } from '@/stores/tenant-view-store';
 import { useAuthStore } from '@/stores/auth-store';
@@ -11,6 +11,7 @@ import { cn } from '@/lib/utils';
 export function TenantSelector() {
   const [open, setOpen] = useState(false);
   const { user } = useAuthStore();
+  const queryClient = useQueryClient();
   const { viewingTenantId, viewingTenantName, setViewingTenant, clearViewingTenant } = useTenantViewStore();
 
   const { data: tenants, isLoading } = useQuery({
@@ -57,17 +58,26 @@ export function TenantSelector() {
         <Building className="h-4 w-4" />
         <span className="max-w-[150px] truncate">{displayName}</span>
         {isViewingOther && (
-          <button
+          <span
+            role="button"
+            tabIndex={0}
             onClick={(e) => {
               e.stopPropagation();
               clearViewingTenant();
-              window.location.reload();
+              queryClient.invalidateQueries();
             }}
-            className="ml-1 p-0.5 rounded hover:bg-primary/20"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.stopPropagation();
+                clearViewingTenant();
+                queryClient.invalidateQueries();
+              }
+            }}
+            className="ml-1 p-0.5 rounded hover:bg-primary/20 cursor-pointer"
             title="Volver a mi empresa"
           >
             <X className="h-3 w-3" />
-          </button>
+          </span>
         )}
         <ChevronDown className={cn('h-4 w-4 transition-transform', open && 'rotate-180')} />
       </button>
@@ -87,7 +97,7 @@ export function TenantSelector() {
                   onClick={() => {
                     clearViewingTenant();
                     setOpen(false);
-                    window.location.reload();
+                    queryClient.invalidateQueries();
                   }}
                   className={cn(
                     'flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm hover:bg-accent transition-colors',
@@ -113,9 +123,9 @@ export function TenantSelector() {
                     <button
                       key={tenant.id}
                       onClick={() => {
-                        setViewingTenant(tenant.id, tenant.nombre);
+                        setViewingTenant(tenant.id, tenant.nombre, tenant.rfc);
                         setOpen(false);
-                        window.location.reload();
+                        queryClient.invalidateQueries();
                       }}
                       className={cn(
                         'flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm hover:bg-accent transition-colors',