feat: SAT sync improvements and documentation

- Add custom date range support for SAT synchronization
- Fix UUID cast in SQL queries for sat_sync_job_id
- Fix processInitialSync to respect custom dateFrom/dateTo parameters
- Add date picker UI for custom period sync
- Add comprehensive documentation for SAT sync implementation

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

apps/web/components/sat/SyncStatus.tsx

@@ -3,6 +3,8 @@
 import { useEffect, useState } from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { getSyncStatus, startSync } from '@/lib/api/sat';
 import type { SatSyncStatusResponse } from '@horux/shared';
 
@@ -30,6 +32,9 @@ export function SyncStatus({ fielConfigured, onSyncStarted }: SyncStatusProps) {
   const [loading, setLoading] = useState(true);
   const [startingSync, setStartingSync] = useState(false);
   const [error, setError] = useState('');
+  const [showCustomDate, setShowCustomDate] = useState(false);
+  const [dateFrom, setDateFrom] = useState('');
+  const [dateTo, setDateTo] = useState('');
 
   const fetchStatus = async () => {
     try {
@@ -53,12 +58,21 @@ export function SyncStatus({ fielConfigured, onSyncStarted }: SyncStatusProps) {
     }
   }, [fielConfigured]);
 
-  const handleStartSync = async (type: 'initial' | 'daily') => {
+  const handleStartSync = async (type: 'initial' | 'daily', customDates?: boolean) => {
     setStartingSync(true);
     setError('');
     try {
-      await startSync({ type });
+      const params: { type: 'initial' | 'daily'; dateFrom?: string; dateTo?: string } = { type };
+
+      if (customDates && dateFrom && dateTo) {
+        // Convertir a formato completo con hora
+        params.dateFrom = `${dateFrom}T00:00:00`;
+        params.dateTo = `${dateTo}T23:59:59`;
+      }
+
+      await startSync(params);
       await fetchStatus();
+      setShowCustomDate(false);
       onSyncStarted?.();
     } catch (err: any) {
       setError(err.response?.data?.error || 'Error al iniciar sincronizacion');
@@ -162,6 +176,49 @@ export function SyncStatus({ fielConfigured, onSyncStarted }: SyncStatusProps) {
           <p className="text-sm text-red-500">{error}</p>
         )}
 
+        {/* Formulario de fechas personalizadas */}
+        {showCustomDate && (
+          <div className="p-4 bg-gray-50 rounded-lg space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label htmlFor="dateFrom">Fecha inicio</Label>
+                <Input
+                  id="dateFrom"
+                  type="date"
+                  value={dateFrom}
+                  onChange={(e) => setDateFrom(e.target.value)}
+                  max={dateTo || undefined}
+                />
+              </div>
+              <div>
+                <Label htmlFor="dateTo">Fecha fin</Label>
+                <Input
+                  id="dateTo"
+                  type="date"
+                  value={dateTo}
+                  onChange={(e) => setDateTo(e.target.value)}
+                  min={dateFrom || undefined}
+                />
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <Button
+                disabled={startingSync || status?.hasActiveSync || !dateFrom || !dateTo}
+                onClick={() => handleStartSync('initial', true)}
+                className="flex-1"
+              >
+                {startingSync ? 'Iniciando...' : 'Sincronizar periodo'}
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => setShowCustomDate(false)}
+              >
+                Cancelar
+              </Button>
+            </div>
+          </div>
+        )}
+
         <div className="flex gap-3">
           <Button
             variant="outline"
@@ -169,18 +226,27 @@ export function SyncStatus({ fielConfigured, onSyncStarted }: SyncStatusProps) {
             onClick={() => handleStartSync('daily')}
             className="flex-1"
           >
-            {startingSync ? 'Iniciando...' : 'Sincronizar ahora'}
+            {startingSync ? 'Iniciando...' : 'Sincronizar mes actual'}
+          </Button>
+          <Button
+            variant="outline"
+            disabled={startingSync || status?.hasActiveSync}
+            onClick={() => setShowCustomDate(!showCustomDate)}
+            className="flex-1"
+          >
+            Periodo personalizado
           </Button>
-          {!status?.lastCompletedJob && (
-            <Button
-              disabled={startingSync || status?.hasActiveSync}
-              onClick={() => handleStartSync('initial')}
-              className="flex-1"
-            >
-              {startingSync ? 'Iniciando...' : 'Sincronizacion inicial (10 anos)'}
-            </Button>
-          )}
         </div>
+
+        {!status?.lastCompletedJob && (
+          <Button
+            disabled={startingSync || status?.hasActiveSync}
+            onClick={() => handleStartSync('initial')}
+            className="w-full"
+          >
+            {startingSync ? 'Iniciando...' : 'Sincronizacion inicial (6 anos)'}
+          </Button>
+        )}
       </CardContent>
     </Card>
   );