diff --git a/web/src/App.tsx b/web/src/App.tsx
index 7f35f83..cb72843 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -17,7 +17,7 @@ import { DashboardPage } from './pages/admin/dashboard';
 import { ConceptosPage, PresupuestosPage, EstimacionesPage } from './pages/admin/presupuestos';
 import { OpportunitiesPage, TendersPage, ProposalsPage, VendorsPage } from './pages/admin/bidding';
 import { IncidentesPage, CapacitacionesPage, InspeccionesPage, InspeccionDetailPage } from './pages/admin/hse';
-import { AvancesObraPage, BitacoraObraPage } from './pages/admin/obras';
+import { AvancesObraPage, BitacoraObraPage, ProgramaObraPage, ControlAvancePage } from './pages/admin/obras';
 
 function App() {
   return (
@@ -73,8 +73,10 @@ function App() {
 
             {/* Control de Obra */}
             <Route path="obras">
-              <Route index element={<Navigate to="avances" replace />} />
+              <Route index element={<Navigate to="control" replace />} />
+              <Route path="control" element={<ControlAvancePage />} />
               <Route path="avances" element={<AvancesObraPage />} />
+              <Route path="programa" element={<ProgramaObraPage />} />
               <Route path="bitacora" element={<BitacoraObraPage />} />
             </Route>
           </Route>
diff --git a/web/src/hooks/useProgress.ts b/web/src/hooks/useProgress.ts
index 52451f6..631e544 100644
--- a/web/src/hooks/useProgress.ts
+++ b/web/src/hooks/useProgress.ts
@@ -18,6 +18,15 @@ import {
   CreateBitacoraObraDto,
   UpdateBitacoraObraDto,
 } from '../services/progress/bitacora-obra.api';
+import {
+  programaObraApi,
+  ProgramaObraFilters,
+  CreateProgramaObraDto,
+  UpdateProgramaObraDto,
+  CreateActividadProgramaDto,
+  UpdateActividadProgramaDto,
+  ReorderActividadDto,
+} from '../services/progress/programa-obra.api';
 
 export const progressKeys = {
   avances: {
@@ -38,6 +47,19 @@ export const progressKeys = {
     latest: (fraccionamientoId: string) =>
       [...progressKeys.bitacora.all, 'latest', fraccionamientoId] as const,
   },
+  programaObra: {
+    all: ['progress', 'programaObra'] as const,
+    list: (filters?: ProgramaObraFilters) =>
+      [...progressKeys.programaObra.all, 'list', filters] as const,
+    detail: (id: string) => [...progressKeys.programaObra.all, 'detail', id] as const,
+    versions: (fraccionamientoId: string) =>
+      [...progressKeys.programaObra.all, 'versions', fraccionamientoId] as const,
+    stats: (fraccionamientoId?: string) =>
+      [...progressKeys.programaObra.all, 'stats', fraccionamientoId] as const,
+    sCurve: (id: string) => [...progressKeys.programaObra.all, 'sCurve', id] as const,
+    actividades: (programaId: string) =>
+      [...progressKeys.programaObra.all, 'actividades', programaId] as const,
+  },
 };
 
 const handleError = (error: AxiosError<ApiError>) => {
@@ -258,3 +280,229 @@ export function useDeleteBitacora() {
     onError: handleError,
   });
 }
+
+// ==================== PROGRAMA DE OBRA ====================
+
+export function useProgramasObra(filters?: ProgramaObraFilters) {
+  return useQuery({
+    queryKey: progressKeys.programaObra.list(filters),
+    queryFn: () => programaObraApi.list(filters),
+  });
+}
+
+export function useProgramaObra(id: string) {
+  return useQuery({
+    queryKey: progressKeys.programaObra.detail(id),
+    queryFn: () => programaObraApi.get(id),
+    enabled: !!id,
+  });
+}
+
+export function useProgramaObraVersions(fraccionamientoId: string) {
+  return useQuery({
+    queryKey: progressKeys.programaObra.versions(fraccionamientoId),
+    queryFn: () => programaObraApi.getVersions(fraccionamientoId),
+    enabled: !!fraccionamientoId,
+  });
+}
+
+export function useProgramaObraStats(fraccionamientoId?: string) {
+  return useQuery({
+    queryKey: progressKeys.programaObra.stats(fraccionamientoId),
+    queryFn: () => programaObraApi.getStats(fraccionamientoId),
+  });
+}
+
+export function useProgramaObraSCurve(id: string) {
+  return useQuery({
+    queryKey: progressKeys.programaObra.sCurve(id),
+    queryFn: () => programaObraApi.getSCurve(id),
+    enabled: !!id,
+  });
+}
+
+export function useProgramaObraActividades(programaId: string) {
+  return useQuery({
+    queryKey: progressKeys.programaObra.actividades(programaId),
+    queryFn: () => programaObraApi.getActividades(programaId),
+    enabled: !!programaId,
+  });
+}
+
+export function useCreateProgramaObra() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: CreateProgramaObraDto) => programaObraApi.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.all });
+      toast.success('Programa de obra creado exitosamente');
+    },
+    onError: handleError,
+  });
+}
+
+export function useUpdateProgramaObra() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: UpdateProgramaObraDto }) =>
+      programaObraApi.update(id, data),
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.all });
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.detail(id) });
+      toast.success('Programa de obra actualizado');
+    },
+    onError: handleError,
+  });
+}
+
+export function useDeleteProgramaObra() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => programaObraApi.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.all });
+      toast.success('Programa de obra eliminado');
+    },
+    onError: handleError,
+  });
+}
+
+export function useDuplicateProgramaObra() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => programaObraApi.duplicate(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.all });
+      toast.success('Programa de obra duplicado exitosamente');
+    },
+    onError: handleError,
+  });
+}
+
+export function useActivateProgramaObra() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => programaObraApi.activate(id),
+    onSuccess: (_, id) => {
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.all });
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.detail(id) });
+      toast.success('Programa de obra activado');
+    },
+    onError: handleError,
+  });
+}
+
+export function useDeactivateProgramaObra() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => programaObraApi.deactivate(id),
+    onSuccess: (_, id) => {
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.all });
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.detail(id) });
+      toast.success('Programa de obra desactivado');
+    },
+    onError: handleError,
+  });
+}
+
+export function useAddActividadPrograma() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ programaId, data }: { programaId: string; data: CreateActividadProgramaDto }) =>
+      programaObraApi.addActividad(programaId, data),
+    onSuccess: (_, { programaId }) => {
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.detail(programaId) });
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.actividades(programaId) });
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.sCurve(programaId) });
+      toast.success('Actividad agregada');
+    },
+    onError: handleError,
+  });
+}
+
+export function useUpdateActividadPrograma() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      programaId,
+      actividadId,
+      data,
+    }: {
+      programaId: string;
+      actividadId: string;
+      data: UpdateActividadProgramaDto;
+    }) => programaObraApi.updateActividad(programaId, actividadId, data),
+    onSuccess: (_, { programaId }) => {
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.detail(programaId) });
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.actividades(programaId) });
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.sCurve(programaId) });
+      toast.success('Actividad actualizada');
+    },
+    onError: handleError,
+  });
+}
+
+export function useDeleteActividadPrograma() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ programaId, actividadId }: { programaId: string; actividadId: string }) =>
+      programaObraApi.deleteActividad(programaId, actividadId),
+    onSuccess: (_, { programaId }) => {
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.detail(programaId) });
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.actividades(programaId) });
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.sCurve(programaId) });
+      toast.success('Actividad eliminada');
+    },
+    onError: handleError,
+  });
+}
+
+export function useReorderActividadesPrograma() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ programaId, items }: { programaId: string; items: ReorderActividadDto[] }) =>
+      programaObraApi.reorderActividades(programaId, items),
+    onSuccess: (_, { programaId }) => {
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.detail(programaId) });
+      queryClient.invalidateQueries({ queryKey: progressKeys.programaObra.actividades(programaId) });
+      toast.success('Orden actualizado');
+    },
+    onError: handleError,
+  });
+}
+
+export function useExportProgramaObraPdf() {
+  return useMutation({
+    mutationFn: (id: string) => programaObraApi.exportPdf(id),
+    onSuccess: (blob, id) => {
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `programa-obra-${id}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+      toast.success('PDF exportado');
+    },
+    onError: handleError,
+  });
+}
+
+export function useExportProgramaObraExcel() {
+  return useMutation({
+    mutationFn: (id: string) => programaObraApi.exportExcel(id),
+    onSuccess: (blob, id) => {
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `programa-obra-${id}.xlsx`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+      toast.success('Excel exportado');
+    },
+    onError: handleError,
+  });
+}
diff --git a/web/src/layouts/AdminLayout.tsx b/web/src/layouts/AdminLayout.tsx
index 87814aa..4b16a6f 100644
--- a/web/src/layouts/AdminLayout.tsx
+++ b/web/src/layouts/AdminLayout.tsx
@@ -25,6 +25,8 @@ import {
   ClipboardCheck,
   TrendingUp,
   BookOpen,
+  Gauge,
+  CalendarDays,
 } from 'lucide-react';
 import clsx from 'clsx';
 import { useAuthStore } from '../stores/authStore';
@@ -64,7 +66,9 @@ const navSections: NavSection[] = [
     title: 'Control de Obra',
     defaultOpen: false,
     items: [
+      { label: 'Control', href: '/admin/obras/control', icon: Gauge },
       { label: 'Avances', href: '/admin/obras/avances', icon: TrendingUp },
+      { label: 'Programa', href: '/admin/obras/programa', icon: CalendarDays },
       { label: 'Bitácora', href: '/admin/obras/bitacora', icon: BookOpen },
     ],
   },
diff --git a/web/src/pages/admin/obras/ControlAvancePage.tsx b/web/src/pages/admin/obras/ControlAvancePage.tsx
new file mode 100644
index 0000000..8de81bd
--- /dev/null
+++ b/web/src/pages/admin/obras/ControlAvancePage.tsx
@@ -0,0 +1,957 @@
+import { useState, useMemo } from 'react';
+import {
+  TrendingUp,
+  TrendingDown,
+  Calendar,
+  Clock,
+  CheckCircle,
+  BarChart3,
+  Grid3X3,
+  List,
+  ChevronRight,
+  User,
+  RefreshCw,
+} from 'lucide-react';
+import clsx from 'clsx';
+import {
+  useAvances,
+  useAvanceStats,
+  useAvanceAccumulated,
+} from '../../../hooks/useProgress';
+import {
+  useFraccionamientos,
+  useEtapas,
+  useManzanas,
+  useLotes,
+} from '../../../hooks/useConstruccion';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+type ProgressStatus = 'ahead' | 'on-track' | 'behind';
+
+interface DateRange {
+  from: string;
+  to: string;
+}
+
+interface WeeklyProgress {
+  week: string;
+  weekLabel: string;
+  captured: number;
+  avancesCount: number;
+}
+
+// =============================================================================
+// Utility Functions
+// =============================================================================
+
+function formatPercent(value: number, decimals: number = 1): string {
+  return `${value.toFixed(decimals)}%`;
+}
+
+function formatNumber(value: number, decimals: number = 2): string {
+  return new Intl.NumberFormat('es-MX', {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(value);
+}
+
+function formatDateShort(dateString: string): string {
+  return new Date(dateString).toLocaleDateString('es-MX', {
+    day: '2-digit',
+    month: 'short',
+  });
+}
+
+function getProgressStatus(actual: number, planned: number): ProgressStatus {
+  const variance = actual - planned;
+  if (variance >= 0) return 'ahead';
+  if (variance >= -5) return 'on-track';
+  return 'behind';
+}
+
+function getProgressStatusColor(status: ProgressStatus): {
+  bg: string;
+  text: string;
+  border: string;
+} {
+  switch (status) {
+    case 'ahead':
+      return {
+        bg: 'bg-green-100',
+        text: 'text-green-800',
+        border: 'border-green-200',
+      };
+    case 'on-track':
+      return {
+        bg: 'bg-yellow-100',
+        text: 'text-yellow-800',
+        border: 'border-yellow-200',
+      };
+    case 'behind':
+      return {
+        bg: 'bg-red-100',
+        text: 'text-red-800',
+        border: 'border-red-200',
+      };
+  }
+}
+
+function getProgressStatusLabel(status: ProgressStatus): string {
+  switch (status) {
+    case 'ahead':
+      return 'Adelantado';
+    case 'on-track':
+      return 'En Tiempo';
+    case 'behind':
+      return 'Atrasado';
+  }
+}
+
+function getLotProgressColor(progress: number): string {
+  if (progress >= 90) return 'bg-green-500';
+  if (progress >= 60) return 'bg-yellow-500';
+  return 'bg-red-500';
+}
+
+function getLotProgressBgColor(progress: number): string {
+  if (progress >= 90) return 'bg-green-100';
+  if (progress >= 60) return 'bg-yellow-100';
+  return 'bg-red-100';
+}
+
+function getWeeksArray(weeksBack: number = 8): { start: Date; end: Date; label: string }[] {
+  const weeks: { start: Date; end: Date; label: string }[] = [];
+  const now = new Date();
+  const currentDay = now.getDay();
+  const mondayOffset = currentDay === 0 ? -6 : 1 - currentDay;
+  const currentMonday = new Date(now);
+  currentMonday.setDate(now.getDate() + mondayOffset);
+  currentMonday.setHours(0, 0, 0, 0);
+
+  for (let i = weeksBack - 1; i >= 0; i--) {
+    const weekStart = new Date(currentMonday);
+    weekStart.setDate(currentMonday.getDate() - i * 7);
+    const weekEnd = new Date(weekStart);
+    weekEnd.setDate(weekStart.getDate() + 6);
+    weekEnd.setHours(23, 59, 59, 999);
+
+    const label = `${weekStart.getDate()}/${weekStart.getMonth() + 1}`;
+    weeks.push({ start: weekStart, end: weekEnd, label });
+  }
+
+  return weeks;
+}
+
+function getDefaultDateRange(): DateRange {
+  const now = new Date();
+  const threeMonthsAgo = new Date(now);
+  threeMonthsAgo.setMonth(now.getMonth() - 3);
+
+  return {
+    from: threeMonthsAgo.toISOString().split('T')[0],
+    to: now.toISOString().split('T')[0],
+  };
+}
+
+// =============================================================================
+// Sub-Components
+// =============================================================================
+
+interface KPICardProps {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  icon: typeof TrendingUp;
+  color: 'blue' | 'green' | 'purple' | 'orange' | 'red' | 'gray';
+  trend?: 'up' | 'down' | 'neutral';
+  isWarning?: boolean;
+}
+
+function KPICard({ title, value, subtitle, icon: Icon, color, trend, isWarning }: KPICardProps) {
+  const colorClasses = {
+    blue: { bg: 'bg-blue-500', light: 'bg-blue-50' },
+    green: { bg: 'bg-green-500', light: 'bg-green-50' },
+    purple: { bg: 'bg-purple-500', light: 'bg-purple-50' },
+    orange: { bg: 'bg-orange-500', light: 'bg-orange-50' },
+    red: { bg: 'bg-red-500', light: 'bg-red-50' },
+    gray: { bg: 'bg-gray-500', light: 'bg-gray-50' },
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm p-4">
+      <div className="flex items-start justify-between">
+        <div className="flex-1">
+          <p className="text-sm font-medium text-gray-500">{title}</p>
+          <div className="flex items-center gap-2 mt-1">
+            <p
+              className={clsx(
+                'text-2xl font-bold',
+                isWarning ? 'text-red-600' : 'text-gray-900'
+              )}
+            >
+              {value}
+            </p>
+            {trend && trend !== 'neutral' && (
+              <span
+                className={clsx(
+                  'flex items-center text-sm',
+                  trend === 'up' ? 'text-green-600' : 'text-red-600'
+                )}
+              >
+                {trend === 'up' ? (
+                  <TrendingUp className="w-4 h-4" />
+                ) : (
+                  <TrendingDown className="w-4 h-4" />
+                )}
+              </span>
+            )}
+          </div>
+          {subtitle && <p className="text-xs text-gray-400 mt-1">{subtitle}</p>}
+        </div>
+        <div className={clsx('p-3 rounded-lg', colorClasses[color].bg)}>
+          <Icon className="w-5 h-5 text-white" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface ProgressBarProps {
+  value: number;
+  max?: number;
+  showLabel?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  colorByValue?: boolean;
+}
+
+function ProgressBar({
+  value,
+  max = 100,
+  showLabel = true,
+  size = 'md',
+  colorByValue = true,
+}: ProgressBarProps) {
+  const percentage = Math.min((value / max) * 100, 100);
+  const heightClass = size === 'sm' ? 'h-1.5' : size === 'md' ? 'h-2' : 'h-3';
+
+  let barColor = 'bg-blue-500';
+  if (colorByValue) {
+    if (percentage >= 80) barColor = 'bg-green-500';
+    else if (percentage >= 50) barColor = 'bg-yellow-500';
+    else if (percentage >= 25) barColor = 'bg-orange-500';
+    else barColor = 'bg-red-500';
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className={clsx('flex-1 bg-gray-200 rounded-full overflow-hidden', heightClass)}>
+        <div
+          className={clsx(barColor, 'h-full rounded-full transition-all duration-300')}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+      {showLabel && (
+        <span className="text-sm font-medium text-gray-700 w-12 text-right">
+          {formatPercent(value, 1)}
+        </span>
+      )}
+    </div>
+  );
+}
+
+interface SimpleBarChartProps {
+  data: WeeklyProgress[];
+  height?: number;
+}
+
+function SimpleBarChart({ data, height = 200 }: SimpleBarChartProps) {
+  const maxValue = Math.max(...data.map((d) => d.captured), 1);
+
+  return (
+    <div className="relative" style={{ height }}>
+      <div className="absolute inset-0 flex items-end justify-around gap-2 pb-6">
+        {data.map((item, index) => {
+          const barHeight = (item.captured / maxValue) * (height - 40);
+          return (
+            <div
+              key={index}
+              className="flex flex-col items-center justify-end flex-1"
+              title={`Semana ${item.weekLabel}: ${item.captured.toFixed(1)}% (${item.avancesCount} avances)`}
+            >
+              <div className="text-xs text-gray-600 mb-1">
+                {item.captured > 0 ? `${item.captured.toFixed(0)}%` : ''}
+              </div>
+              <div
+                className={clsx(
+                  'w-full rounded-t transition-all duration-300',
+                  item.captured > 0 ? 'bg-blue-500 hover:bg-blue-600' : 'bg-gray-200'
+                )}
+                style={{ height: Math.max(barHeight, 4) }}
+              />
+            </div>
+          );
+        })}
+      </div>
+      <div className="absolute bottom-0 left-0 right-0 flex justify-around">
+        {data.map((item, index) => (
+          <div key={index} className="text-xs text-gray-500 text-center flex-1">
+            {item.weekLabel}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface LotGridViewProps {
+  lots: Array<{
+    id: string;
+    code: string;
+    progress: number;
+    manzanaName?: string;
+  }>;
+}
+
+function LotGridView({ lots }: LotGridViewProps) {
+  if (lots.length === 0) {
+    return (
+      <div className="text-center text-gray-500 py-8">
+        No hay lotes con avance registrado
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-2">
+      {lots.map((lot) => (
+        <div
+          key={lot.id}
+          className={clsx(
+            'relative p-2 rounded-lg text-center cursor-pointer transition-all hover:scale-105',
+            getLotProgressBgColor(lot.progress)
+          )}
+          title={`${lot.code}${lot.manzanaName ? ` - ${lot.manzanaName}` : ''}: ${formatPercent(lot.progress)}`}
+        >
+          <div
+            className={clsx(
+              'absolute inset-0 rounded-lg opacity-20',
+              getLotProgressColor(lot.progress)
+            )}
+          />
+          <div className="relative z-10">
+            <div className="text-xs font-medium text-gray-800 truncate">{lot.code}</div>
+            <div className="text-xs font-bold text-gray-900">{Math.round(lot.progress)}%</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+export function ControlAvancePage() {
+  const [dateRange, setDateRange] = useState<DateRange>(getDefaultDateRange);
+  const [selectedFraccionamiento, setSelectedFraccionamiento] = useState<string>('');
+  const [selectedEtapa, setSelectedEtapa] = useState<string>('');
+  const [lotViewMode, setLotViewMode] = useState<'grid' | 'list'>('grid');
+
+  // Data hooks
+  const { data: fraccionamientosData, isLoading: fraccionamientosLoading } = useFraccionamientos();
+  const { data: etapasData } = useEtapas({
+    fraccionamientoId: selectedFraccionamiento || undefined,
+  });
+  useManzanas({
+    etapaId: selectedEtapa || undefined,
+  });
+  useLotes({
+    manzanaId: undefined,
+  });
+  const { data: statsData, isLoading: statsLoading, refetch: refetchStats } = useAvanceStats();
+  const { data: accumulatedData, isLoading: accumulatedLoading } = useAvanceAccumulated({
+    fraccionamientoId: selectedFraccionamiento || undefined,
+    etapaId: selectedEtapa || undefined,
+    dateFrom: dateRange.from,
+    dateTo: dateRange.to,
+  });
+  const { data: avancesData, isLoading: avancesLoading } = useAvances({
+    fraccionamientoId: selectedFraccionamiento || undefined,
+    dateFrom: dateRange.from,
+    dateTo: dateRange.to,
+    limit: 100,
+  });
+
+  // Derived data (memoized to avoid useMemo dependency issues)
+  const fraccionamientos = useMemo(
+    () => fraccionamientosData?.items || [],
+    [fraccionamientosData?.items]
+  );
+  const etapas = useMemo(() => etapasData?.items || [], [etapasData?.items]);
+  const avances = useMemo(() => avancesData?.items || [], [avancesData?.items]);
+  const accumulated = useMemo(() => accumulatedData || [], [accumulatedData]);
+
+  // Calculate KPIs
+  const kpis = useMemo(() => {
+    const totalAvances = avances.length;
+    if (totalAvances === 0) {
+      return {
+        avanceGlobal: 0,
+        avancePlanificado: 0,
+        variacion: 0,
+        diasRestantes: 0,
+        spi: 1,
+        cpi: 1,
+      };
+    }
+
+    const totalProgress = accumulated.reduce(
+      (sum, item) => sum + item.porcentajeEjecutado,
+      0
+    );
+    const avanceGlobal = accumulated.length > 0 ? totalProgress / accumulated.length : 0;
+
+    const today = new Date();
+    const selectedFrac = fraccionamientos.find((f) => f.id === selectedFraccionamiento);
+    let diasRestantes = 0;
+    let avancePlanificado = 50;
+
+    if (selectedFrac?.fechaFinEstimada) {
+      const endDate = new Date(selectedFrac.fechaFinEstimada);
+      const startDate = selectedFrac.fechaInicio
+        ? new Date(selectedFrac.fechaInicio)
+        : new Date(today.getTime() - 90 * 24 * 60 * 60 * 1000);
+
+      const totalDays = Math.max(
+        (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24),
+        1
+      );
+      const elapsedDays = Math.max(
+        (today.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24),
+        0
+      );
+
+      diasRestantes = Math.max(
+        Math.ceil((endDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24)),
+        0
+      );
+      avancePlanificado = Math.min((elapsedDays / totalDays) * 100, 100);
+    }
+
+    const variacion = avanceGlobal - avancePlanificado;
+    const spi = avancePlanificado > 0 ? avanceGlobal / avancePlanificado : 1;
+    const cpi = 1.0;
+
+    return {
+      avanceGlobal,
+      avancePlanificado,
+      variacion,
+      diasRestantes,
+      spi,
+      cpi,
+    };
+  }, [accumulated, avances, fraccionamientos, selectedFraccionamiento]);
+
+  // Calculate weekly progress
+  const weeklyProgress = useMemo((): WeeklyProgress[] => {
+    const weeks = getWeeksArray(8);
+
+    return weeks.map(({ start, end, label }) => {
+      const weekAvances = avances.filter((a) => {
+        const captureDate = new Date(a.captureDate);
+        return captureDate >= start && captureDate <= end;
+      });
+
+      const totalCaptured = weekAvances.reduce(
+        (sum, a) => sum + (a.percentageExecuted || 0),
+        0
+      );
+
+      return {
+        week: start.toISOString(),
+        weekLabel: label,
+        captured: totalCaptured,
+        avancesCount: weekAvances.length,
+      };
+    });
+  }, [avances]);
+
+  // Calculate lot progress for grid view
+  const lotProgressData = useMemo(() => {
+    const lotProgressMap = new Map<
+      string,
+      { id: string; code: string; progress: number; manzanaName?: string }
+    >();
+
+    avances.forEach((avance) => {
+      if (avance.lote) {
+        const existing = lotProgressMap.get(avance.lote.id);
+        const progress = avance.percentageAccumulated || 0;
+        if (!existing || existing.progress < progress) {
+          lotProgressMap.set(avance.lote.id, {
+            id: avance.lote.id,
+            code: avance.lote.numero || 'N/A',
+            progress,
+            manzanaName: avance.lote.manzanaNumero
+              ? `Mz. ${avance.lote.manzanaNumero}`
+              : undefined,
+          });
+        }
+      }
+    });
+
+    return Array.from(lotProgressMap.values()).sort((a, b) => {
+      const aNum = parseInt(a.code) || 0;
+      const bNum = parseInt(b.code) || 0;
+      return aNum - bNum;
+    });
+  }, [avances]);
+
+  // Pending approvals counts
+  const pendingCounts = useMemo(() => {
+    if (!statsData) {
+      return { pendingReview: 0, pendingApproval: 0 };
+    }
+    return {
+      pendingReview: (statsData.porStatus.captured || 0) + (statsData.porStatus.pending || 0),
+      pendingApproval: statsData.porStatus.reviewed || 0,
+    };
+  }, [statsData]);
+
+  // Recent activity (last 10 avances)
+  const recentActivity = useMemo(() => {
+    return [...avances]
+      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+      .slice(0, 10);
+  }, [avances]);
+
+  const handleRefresh = () => {
+    refetchStats();
+  };
+
+  const isLoading = fraccionamientosLoading || statsLoading || accumulatedLoading || avancesLoading;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Control de Avance</h1>
+          <p className="text-gray-600">
+            Dashboard de seguimiento y KPIs de avance de obra
+          </p>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Calendar className="w-4 h-4 text-gray-500" />
+            <input
+              type="date"
+              className="px-3 py-2 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500"
+              value={dateRange.from}
+              onChange={(e) => setDateRange({ ...dateRange, from: e.target.value })}
+            />
+            <span className="text-gray-500">-</span>
+            <input
+              type="date"
+              className="px-3 py-2 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500"
+              value={dateRange.to}
+              onChange={(e) => setDateRange({ ...dateRange, to: e.target.value })}
+            />
+          </div>
+          <button
+            onClick={handleRefresh}
+            className="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+            title="Actualizar datos"
+          >
+            <RefreshCw className={clsx('w-5 h-5', isLoading && 'animate-spin')} />
+          </button>
+        </div>
+      </div>
+
+      {/* Project Selector */}
+      <div className="bg-white rounded-lg shadow-sm p-4">
+        <div className="flex flex-col sm:flex-row gap-4">
+          <div className="flex-1">
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Fraccionamiento
+            </label>
+            <select
+              className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+              value={selectedFraccionamiento}
+              onChange={(e) => {
+                setSelectedFraccionamiento(e.target.value);
+                setSelectedEtapa('');
+              }}
+            >
+              <option value="">Todos los fraccionamientos</option>
+              {fraccionamientos.map((frac) => (
+                <option key={frac.id} value={frac.id}>
+                  {frac.nombre}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="flex-1">
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Etapa (opcional)
+            </label>
+            <select
+              className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+              value={selectedEtapa}
+              onChange={(e) => setSelectedEtapa(e.target.value)}
+              disabled={!selectedFraccionamiento}
+            >
+              <option value="">Todas las etapas</option>
+              {etapas.map((etapa) => (
+                <option key={etapa.id} value={etapa.id}>
+                  {etapa.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </div>
+
+      {/* KPI Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
+        <KPICard
+          title="Avance Global"
+          value={formatPercent(kpis.avanceGlobal)}
+          subtitle="Progreso real acumulado"
+          icon={TrendingUp}
+          color={kpis.avanceGlobal >= 50 ? 'green' : kpis.avanceGlobal >= 25 ? 'orange' : 'red'}
+          trend={kpis.variacion >= 0 ? 'up' : 'down'}
+        />
+        <KPICard
+          title="Avance Planificado"
+          value={formatPercent(kpis.avancePlanificado)}
+          subtitle="Segun programa de obra"
+          icon={Calendar}
+          color="blue"
+        />
+        <KPICard
+          title="Variacion"
+          value={`${kpis.variacion >= 0 ? '+' : ''}${formatPercent(kpis.variacion)}`}
+          subtitle="Real - Planificado"
+          icon={kpis.variacion >= 0 ? TrendingUp : TrendingDown}
+          color={kpis.variacion >= 0 ? 'green' : 'red'}
+          isWarning={kpis.variacion < -5}
+        />
+        <KPICard
+          title="Dias Restantes"
+          value={kpis.diasRestantes}
+          subtitle="Para fecha fin estimada"
+          icon={Clock}
+          color={kpis.diasRestantes > 30 ? 'gray' : kpis.diasRestantes > 7 ? 'orange' : 'red'}
+          isWarning={kpis.diasRestantes <= 7}
+        />
+        <KPICard
+          title="SPI"
+          value={formatNumber(kpis.spi)}
+          subtitle="Schedule Performance Index"
+          icon={BarChart3}
+          color={kpis.spi >= 0.95 ? 'green' : kpis.spi >= 0.85 ? 'orange' : 'red'}
+          isWarning={kpis.spi < 0.85}
+        />
+        <KPICard
+          title="CPI"
+          value={formatNumber(kpis.cpi)}
+          subtitle="Cost Performance Index"
+          icon={BarChart3}
+          color={kpis.cpi >= 0.95 ? 'green' : kpis.cpi >= 0.85 ? 'orange' : 'red'}
+          isWarning={kpis.cpi < 0.85}
+        />
+      </div>
+
+      {/* Main Content Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Progress by Concept Table */}
+        <div className="lg:col-span-2 bg-white rounded-lg shadow-sm">
+          <div className="p-4 border-b">
+            <h2 className="text-lg font-semibold text-gray-900">Avance por Concepto</h2>
+            <p className="text-sm text-gray-500">
+              Desglose de avance por partida presupuestal
+            </p>
+          </div>
+          <div className="overflow-x-auto">
+            {accumulatedLoading ? (
+              <div className="p-8 text-center text-gray-500">Cargando conceptos...</div>
+            ) : accumulated.length === 0 ? (
+              <div className="p-8 text-center text-gray-500">
+                No hay datos de avance para mostrar
+              </div>
+            ) : (
+              <table className="min-w-full divide-y divide-gray-200">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                      Concepto
+                    </th>
+                    <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">
+                      Presupuestado
+                    </th>
+                    <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">
+                      Ejecutado
+                    </th>
+                    <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-40">
+                      % Avance
+                    </th>
+                    <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">
+                      Estado
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200">
+                  {accumulated.slice(0, 15).map((item) => {
+                    const status = getProgressStatus(item.porcentajeEjecutado, 50);
+                    const statusColors = getProgressStatusColor(status);
+
+                    return (
+                      <tr key={item.conceptoId} className="hover:bg-gray-50">
+                        <td className="px-4 py-3">
+                          <div className="text-sm font-medium text-gray-900">
+                            {item.conceptoCodigo}
+                          </div>
+                          <div className="text-xs text-gray-500 truncate max-w-xs">
+                            {item.conceptoNombre}
+                          </div>
+                        </td>
+                        <td className="px-4 py-3 text-right text-sm text-gray-600">
+                          {item.cantidadPresupuestada.toLocaleString()} {item.unidad}
+                        </td>
+                        <td className="px-4 py-3 text-right text-sm text-gray-900 font-medium">
+                          {item.cantidadEjecutada.toLocaleString()} {item.unidad}
+                        </td>
+                        <td className="px-4 py-3">
+                          <ProgressBar value={item.porcentajeEjecutado} />
+                        </td>
+                        <td className="px-4 py-3 text-center">
+                          <span
+                            className={clsx(
+                              'inline-flex items-center px-2 py-1 text-xs font-medium rounded-full',
+                              statusColors.bg,
+                              statusColors.text
+                            )}
+                          >
+                            {getProgressStatusLabel(status)}
+                          </span>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            )}
+            {accumulated.length > 15 && (
+              <div className="p-4 text-center border-t">
+                <button className="text-sm text-blue-600 hover:text-blue-800 font-medium flex items-center justify-center gap-1 mx-auto">
+                  Ver todos los conceptos ({accumulated.length})
+                  <ChevronRight className="w-4 h-4" />
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Right Sidebar */}
+        <div className="space-y-6">
+          {/* Pending Approvals */}
+          <div className="bg-white rounded-lg shadow-sm">
+            <div className="p-4 border-b">
+              <h2 className="text-lg font-semibold text-gray-900">Aprobaciones Pendientes</h2>
+            </div>
+            <div className="p-4 space-y-4">
+              <div className="flex items-center justify-between p-3 bg-yellow-50 rounded-lg border border-yellow-200">
+                <div className="flex items-center gap-3">
+                  <Clock className="w-5 h-5 text-yellow-600" />
+                  <div>
+                    <p className="text-sm font-medium text-yellow-800">Pendientes de Revision</p>
+                    <p className="text-xs text-yellow-600">Avances sin revisar</p>
+                  </div>
+                </div>
+                <span className="text-2xl font-bold text-yellow-700">
+                  {pendingCounts.pendingReview}
+                </span>
+              </div>
+              <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg border border-blue-200">
+                <div className="flex items-center gap-3">
+                  <CheckCircle className="w-5 h-5 text-blue-600" />
+                  <div>
+                    <p className="text-sm font-medium text-blue-800">Pendientes de Aprobacion</p>
+                    <p className="text-xs text-blue-600">Avances revisados</p>
+                  </div>
+                </div>
+                <span className="text-2xl font-bold text-blue-700">
+                  {pendingCounts.pendingApproval}
+                </span>
+              </div>
+              {(pendingCounts.pendingReview > 0 || pendingCounts.pendingApproval > 0) && (
+                <a
+                  href="/admin/obras/avances"
+                  className="block w-full text-center px-4 py-2 text-sm text-blue-600 hover:text-blue-800 font-medium border border-blue-200 rounded-lg hover:bg-blue-50 transition-colors"
+                >
+                  Ir a Cola de Aprobacion
+                </a>
+              )}
+            </div>
+          </div>
+
+          {/* Recent Activity */}
+          <div className="bg-white rounded-lg shadow-sm">
+            <div className="p-4 border-b">
+              <h2 className="text-lg font-semibold text-gray-900">Actividad Reciente</h2>
+            </div>
+            <div className="divide-y divide-gray-100 max-h-80 overflow-y-auto">
+              {avancesLoading ? (
+                <div className="p-4 text-center text-gray-500">Cargando actividad...</div>
+              ) : recentActivity.length === 0 ? (
+                <div className="p-8 text-center text-gray-500">
+                  No hay actividad reciente
+                </div>
+              ) : (
+                recentActivity.map((avance) => (
+                  <div key={avance.id} className="p-3 hover:bg-gray-50">
+                    <div className="flex items-start gap-3">
+                      <div className="flex-shrink-0 mt-1">
+                        <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
+                          <User className="w-4 h-4 text-blue-600" />
+                        </div>
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium text-gray-900 truncate">
+                          {avance.concepto?.codigo || 'N/A'} - {avance.concepto?.nombre || 'Sin concepto'}
+                        </p>
+                        <div className="flex items-center gap-2 mt-1">
+                          <span className="text-xs text-gray-500">
+                            {formatDateShort(avance.captureDate)}
+                          </span>
+                          <span className="text-xs text-gray-400">|</span>
+                          <span className="text-xs font-medium text-blue-600">
+                            {formatPercent(avance.percentageExecuted || 0)}
+                          </span>
+                        </div>
+                        {avance.capturedByName && (
+                          <p className="text-xs text-gray-400 mt-1">
+                            Por: {avance.capturedByName}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom Section */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Weekly Progress Chart */}
+        <div className="bg-white rounded-lg shadow-sm">
+          <div className="p-4 border-b">
+            <h2 className="text-lg font-semibold text-gray-900">Avance Semanal</h2>
+            <p className="text-sm text-gray-500">Progreso capturado en las ultimas 8 semanas</p>
+          </div>
+          <div className="p-4">
+            <SimpleBarChart data={weeklyProgress} height={220} />
+          </div>
+        </div>
+
+        {/* Lot/Manzana Progress View */}
+        <div className="bg-white rounded-lg shadow-sm">
+          <div className="p-4 border-b flex items-center justify-between">
+            <div>
+              <h2 className="text-lg font-semibold text-gray-900">Avance por Lote</h2>
+              <p className="text-sm text-gray-500">Vista de progreso por ubicacion</p>
+            </div>
+            <div className="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
+              <button
+                className={clsx(
+                  'p-1.5 rounded transition-colors',
+                  lotViewMode === 'grid'
+                    ? 'bg-white shadow-sm text-blue-600'
+                    : 'text-gray-500 hover:text-gray-700'
+                )}
+                onClick={() => setLotViewMode('grid')}
+                title="Vista de cuadricula"
+              >
+                <Grid3X3 className="w-4 h-4" />
+              </button>
+              <button
+                className={clsx(
+                  'p-1.5 rounded transition-colors',
+                  lotViewMode === 'list'
+                    ? 'bg-white shadow-sm text-blue-600'
+                    : 'text-gray-500 hover:text-gray-700'
+                )}
+                onClick={() => setLotViewMode('list')}
+                title="Vista de lista"
+              >
+                <List className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+          <div className="p-4">
+            {/* Color Legend */}
+            <div className="flex items-center gap-4 mb-4 text-xs text-gray-600">
+              <div className="flex items-center gap-1">
+                <div className="w-3 h-3 rounded bg-green-500" />
+                <span>&gt;90%</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <div className="w-3 h-3 rounded bg-yellow-500" />
+                <span>60-90%</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <div className="w-3 h-3 rounded bg-red-500" />
+                <span>&lt;60%</span>
+              </div>
+            </div>
+
+            {lotViewMode === 'grid' ? (
+              <LotGridView lots={lotProgressData} />
+            ) : (
+              <div className="space-y-2 max-h-64 overflow-y-auto">
+                {lotProgressData.length === 0 ? (
+                  <div className="text-center text-gray-500 py-8">
+                    No hay lotes con avance registrado
+                  </div>
+                ) : (
+                  lotProgressData.map((lot) => (
+                    <div
+                      key={lot.id}
+                      className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50"
+                    >
+                      <div
+                        className={clsx(
+                          'w-10 h-10 rounded-lg flex items-center justify-center text-white text-xs font-bold',
+                          getLotProgressColor(lot.progress)
+                        )}
+                      >
+                        {Math.round(lot.progress)}%
+                      </div>
+                      <div className="flex-1">
+                        <div className="text-sm font-medium text-gray-900">
+                          Lote {lot.code}
+                        </div>
+                        {lot.manzanaName && (
+                          <div className="text-xs text-gray-500">{lot.manzanaName}</div>
+                        )}
+                      </div>
+                      <ProgressBar value={lot.progress} size="sm" showLabel={false} />
+                    </div>
+                  ))
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/pages/admin/obras/ProgramaObraPage.tsx b/web/src/pages/admin/obras/ProgramaObraPage.tsx
new file mode 100644
index 0000000..cf4a79f
--- /dev/null
+++ b/web/src/pages/admin/obras/ProgramaObraPage.tsx
@@ -0,0 +1,1528 @@
+import { useState, useMemo } from 'react';
+import {
+  Plus,
+  Pencil,
+  Trash2,
+  FileSpreadsheet,
+  FileText,
+  Calendar,
+  Clock,
+  ChevronRight,
+  ChevronDown,
+  AlertCircle,
+  History,
+  Copy,
+  Power,
+  PowerOff,
+  TrendingUp,
+  Target,
+  Activity,
+} from 'lucide-react';
+import {
+  useProgramaObra,
+  useProgramaObraVersions,
+  useProgramaObraStats,
+  useProgramaObraSCurve,
+  useProgramaObraActividades,
+  useCreateProgramaObra,
+  useUpdateProgramaObra,
+  useDeleteProgramaObra,
+  useDuplicateProgramaObra,
+  useActivateProgramaObra,
+  useDeactivateProgramaObra,
+  useAddActividadPrograma,
+  useUpdateActividadPrograma,
+  useDeleteActividadPrograma,
+  useExportProgramaObraPdf,
+  useExportProgramaObraExcel,
+} from '../../../hooks/useProgress';
+import { useFraccionamientos } from '../../../hooks/useConstruccion';
+import { useConceptos } from '../../../hooks/usePresupuestos';
+import {
+  ProgramaObra,
+  ProgramaObraStatus,
+  ActividadPrograma,
+  CreateProgramaObraDto,
+  UpdateProgramaObraDto,
+  CreateActividadProgramaDto,
+  UpdateActividadProgramaDto,
+  SCurveDataPoint,
+} from '../../../services/progress/programa-obra.api';
+import { Concepto } from '../../../services/presupuestos/presupuestos.api';
+import clsx from 'clsx';
+
+const statusColors: Record<ProgramaObraStatus, string> = {
+  activo: 'bg-green-100 text-green-800',
+  inactivo: 'bg-gray-100 text-gray-800',
+  borrador: 'bg-yellow-100 text-yellow-800',
+  cerrado: 'bg-blue-100 text-blue-800',
+};
+
+const statusLabels: Record<ProgramaObraStatus, string> = {
+  activo: 'Activo',
+  inactivo: 'Inactivo',
+  borrador: 'Borrador',
+  cerrado: 'Cerrado',
+};
+
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('es-MX', {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+  });
+}
+
+function formatShortDate(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('es-MX', {
+    day: '2-digit',
+    month: '2-digit',
+    year: '2-digit',
+  });
+}
+
+function calculateDurationDays(startDate: string, endDate: string): number {
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+  const diffTime = Math.abs(end.getTime() - start.getTime());
+  return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+}
+
+export function ProgramaObraPage() {
+  const [selectedFraccionamientoId, setSelectedFraccionamientoId] = useState('');
+  const [selectedProgramaId, setSelectedProgramaId] = useState('');
+  const [showProgramaModal, setShowProgramaModal] = useState(false);
+  const [showActividadModal, setShowActividadModal] = useState(false);
+  const [editingPrograma, setEditingPrograma] = useState<ProgramaObra | null>(null);
+  const [editingActividad, setEditingActividad] = useState<ActividadPrograma | null>(null);
+  const [parentActividadId, setParentActividadId] = useState<string | undefined>(undefined);
+  const [deleteConfirmPrograma, setDeleteConfirmPrograma] = useState<string | null>(null);
+  const [deleteConfirmActividad, setDeleteConfirmActividad] = useState<{
+    programaId: string;
+    actividadId: string;
+  } | null>(null);
+  const [expandedActividades, setExpandedActividades] = useState<Set<string>>(new Set());
+
+  const { data: fraccionamientosData } = useFraccionamientos();
+  const fraccionamientos = fraccionamientosData?.items || [];
+
+  const { data: versionsData, isLoading: versionsLoading } = useProgramaObraVersions(
+    selectedFraccionamientoId
+  );
+  const versions = versionsData || [];
+
+  const { data: programaData, isLoading: programaLoading } = useProgramaObra(selectedProgramaId);
+  const programa = programaData;
+
+  const { data: actividadesData } = useProgramaObraActividades(selectedProgramaId);
+  const actividades = useMemo(() => actividadesData || [], [actividadesData]);
+
+  const { data: sCurveData } = useProgramaObraSCurve(selectedProgramaId);
+  const sCurve = sCurveData || [];
+
+  const { data: statsData } = useProgramaObraStats(selectedFraccionamientoId || undefined);
+
+  const { data: conceptosData } = useConceptos({ tipo: 'concepto' });
+  const conceptos = conceptosData?.items || [];
+
+  const createProgramaMutation = useCreateProgramaObra();
+  const updateProgramaMutation = useUpdateProgramaObra();
+  const deleteProgramaMutation = useDeleteProgramaObra();
+  const duplicateProgramaMutation = useDuplicateProgramaObra();
+  const activateProgramaMutation = useActivateProgramaObra();
+  const deactivateProgramaMutation = useDeactivateProgramaObra();
+  const addActividadMutation = useAddActividadPrograma();
+  const updateActividadMutation = useUpdateActividadPrograma();
+  const deleteActividadMutation = useDeleteActividadPrograma();
+  const exportPdfMutation = useExportProgramaObraPdf();
+  const exportExcelMutation = useExportProgramaObraExcel();
+
+  const handleSelectFraccionamiento = (fracId: string) => {
+    setSelectedFraccionamientoId(fracId);
+    setSelectedProgramaId('');
+  };
+
+  const handleSelectPrograma = (programaId: string) => {
+    setSelectedProgramaId(programaId);
+  };
+
+  const handleCreatePrograma = async (formData: CreateProgramaObraDto) => {
+    const result = await createProgramaMutation.mutateAsync(formData);
+    setShowProgramaModal(false);
+    setSelectedProgramaId(result.id);
+  };
+
+  const handleUpdatePrograma = async (id: string, formData: UpdateProgramaObraDto) => {
+    await updateProgramaMutation.mutateAsync({ id, data: formData });
+    setShowProgramaModal(false);
+    setEditingPrograma(null);
+  };
+
+  const handleDeletePrograma = async (id: string) => {
+    await deleteProgramaMutation.mutateAsync(id);
+    setDeleteConfirmPrograma(null);
+    if (selectedProgramaId === id) {
+      setSelectedProgramaId('');
+    }
+  };
+
+  const handleDuplicatePrograma = async (id: string) => {
+    await duplicateProgramaMutation.mutateAsync(id);
+  };
+
+  const handleActivatePrograma = async (id: string) => {
+    await activateProgramaMutation.mutateAsync(id);
+  };
+
+  const handleDeactivatePrograma = async (id: string) => {
+    await deactivateProgramaMutation.mutateAsync(id);
+  };
+
+  const handleCreateActividad = async (formData: CreateActividadProgramaDto) => {
+    await addActividadMutation.mutateAsync({ programaId: selectedProgramaId, data: formData });
+    setShowActividadModal(false);
+    setParentActividadId(undefined);
+  };
+
+  const handleUpdateActividad = async (actividadId: string, formData: UpdateActividadProgramaDto) => {
+    await updateActividadMutation.mutateAsync({
+      programaId: selectedProgramaId,
+      actividadId,
+      data: formData,
+    });
+    setShowActividadModal(false);
+    setEditingActividad(null);
+  };
+
+  const handleDeleteActividad = async (programaId: string, actividadId: string) => {
+    await deleteActividadMutation.mutateAsync({ programaId, actividadId });
+    setDeleteConfirmActividad(null);
+  };
+
+  const toggleActividadExpanded = (id: string) => {
+    setExpandedActividades((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const openAddChildActivity = (parentId: string) => {
+    setParentActividadId(parentId);
+    setEditingActividad(null);
+    setShowActividadModal(true);
+  };
+
+  const openEditActivity = (actividad: ActividadPrograma) => {
+    setEditingActividad(actividad);
+    setParentActividadId(undefined);
+    setShowActividadModal(true);
+  };
+
+  const openNewPrograma = () => {
+    setEditingPrograma(null);
+    setShowProgramaModal(true);
+  };
+
+  const openEditPrograma = () => {
+    if (programa) {
+      setEditingPrograma(programa);
+      setShowProgramaModal(true);
+    }
+  };
+
+  const hierarchicalActividades = useMemo(() => {
+    const buildTree = (items: ActividadPrograma[], parentId?: string): ActividadPrograma[] => {
+      return items
+        .filter((item) => item.parentId === parentId)
+        .sort((a, b) => a.orden - b.orden)
+        .map((item) => ({
+          ...item,
+          children: buildTree(items, item.id),
+        }));
+    };
+    return buildTree(actividades, undefined);
+  }, [actividades]);
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Programa de Obra</h1>
+          <p className="text-gray-600">Gestion de programas y actividades de construccion</p>
+        </div>
+        <div className="flex items-center gap-2">
+          {selectedProgramaId && (
+            <>
+              <button
+                className="flex items-center px-3 py-2 text-gray-700 border rounded-lg hover:bg-gray-50"
+                onClick={() => exportPdfMutation.mutate(selectedProgramaId)}
+                disabled={exportPdfMutation.isPending}
+              >
+                <FileText className="w-4 h-4 mr-2" />
+                PDF
+              </button>
+              <button
+                className="flex items-center px-3 py-2 text-gray-700 border rounded-lg hover:bg-gray-50"
+                onClick={() => exportExcelMutation.mutate(selectedProgramaId)}
+                disabled={exportExcelMutation.isPending}
+              >
+                <FileSpreadsheet className="w-4 h-4 mr-2" />
+                Excel
+              </button>
+            </>
+          )}
+          <button
+            className={clsx(
+              'flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg transition-colors',
+              selectedFraccionamientoId ? 'hover:bg-blue-700' : 'opacity-50 cursor-not-allowed'
+            )}
+            onClick={openNewPrograma}
+            disabled={!selectedFraccionamientoId}
+          >
+            <Plus className="w-5 h-5 mr-2" />
+            Nuevo Programa
+          </button>
+        </div>
+      </div>
+
+      {statsData && selectedFraccionamientoId && (
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+          <div className="bg-white rounded-lg shadow-sm p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600">Total Programas</p>
+                <p className="text-2xl font-bold text-gray-900">{statsData.totalProgramas}</p>
+              </div>
+              <Calendar className="w-10 h-10 text-blue-500" />
+            </div>
+          </div>
+          <div className="bg-white rounded-lg shadow-sm p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600">Programas Activos</p>
+                <p className="text-2xl font-bold text-green-600">{statsData.programasActivos}</p>
+              </div>
+              <Activity className="w-10 h-10 text-green-500" />
+            </div>
+          </div>
+          <div className="bg-white rounded-lg shadow-sm p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600">Avance Real Promedio</p>
+                <p className="text-2xl font-bold text-blue-600">
+                  {statsData.avancePromedioReal.toFixed(1)}%
+                </p>
+              </div>
+              <TrendingUp className="w-10 h-10 text-blue-500" />
+            </div>
+          </div>
+          <div className="bg-white rounded-lg shadow-sm p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600">Varianza Promedio</p>
+                <p
+                  className={clsx(
+                    'text-2xl font-bold',
+                    statsData.varianzaPromedio >= 0 ? 'text-green-600' : 'text-red-600'
+                  )}
+                >
+                  {statsData.varianzaPromedio >= 0 ? '+' : ''}
+                  {statsData.varianzaPromedio.toFixed(1)}%
+                </p>
+              </div>
+              <Target className="w-10 h-10 text-purple-500" />
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="bg-white rounded-lg shadow-sm p-4 mb-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Fraccionamiento *
+            </label>
+            <select
+              className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+              value={selectedFraccionamientoId}
+              onChange={(e) => handleSelectFraccionamiento(e.target.value)}
+            >
+              <option value="">Seleccione un fraccionamiento</option>
+              {fraccionamientos.map((frac) => (
+                <option key={frac.id} value={frac.id}>
+                  {frac.nombre}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Programa de Obra
+              {versions.length > 0 && (
+                <span className="ml-2 text-xs text-gray-500">
+                  <History className="w-3 h-3 inline mr-1" />
+                  {versions.length} version(es)
+                </span>
+              )}
+            </label>
+            <select
+              className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+              value={selectedProgramaId}
+              onChange={(e) => handleSelectPrograma(e.target.value)}
+              disabled={!selectedFraccionamientoId || versionsLoading}
+            >
+              <option value="">
+                {versionsLoading
+                  ? 'Cargando...'
+                  : versions.length === 0
+                    ? 'Sin programas'
+                    : 'Seleccione un programa'}
+              </option>
+              {versions.map((v) => (
+                <option key={v.id} value={v.id}>
+                  {v.codigo} - {v.nombre} (v{v.version}) - {statusLabels[v.status]}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </div>
+
+      {!selectedFraccionamientoId ? (
+        <div className="bg-white rounded-lg shadow-sm p-8 text-center text-gray-500">
+          Seleccione un fraccionamiento para ver los programas de obra
+        </div>
+      ) : !selectedProgramaId ? (
+        <div className="bg-white rounded-lg shadow-sm p-8 text-center text-gray-500">
+          {versions.length === 0
+            ? 'No hay programas de obra. Cree uno nuevo para comenzar.'
+            : 'Seleccione un programa de obra para ver los detalles'}
+        </div>
+      ) : programaLoading ? (
+        <div className="bg-white rounded-lg shadow-sm p-8 text-center text-gray-500">
+          Cargando programa...
+        </div>
+      ) : programa ? (
+        <div className="space-y-6">
+          <GeneralInfoCard
+            programa={programa}
+            onEdit={openEditPrograma}
+            onDuplicate={() => handleDuplicatePrograma(programa.id)}
+            onActivate={() => handleActivatePrograma(programa.id)}
+            onDeactivate={() => handleDeactivatePrograma(programa.id)}
+            onDelete={() => setDeleteConfirmPrograma(programa.id)}
+            isActivating={activateProgramaMutation.isPending}
+            isDeactivating={deactivateProgramaMutation.isPending}
+          />
+
+          <ActividadesSection
+            actividades={hierarchicalActividades}
+            expandedActividades={expandedActividades}
+            onToggleExpand={toggleActividadExpanded}
+            onAddChild={openAddChildActivity}
+            onEdit={openEditActivity}
+            onDelete={(actividadId) =>
+              setDeleteConfirmActividad({ programaId: programa.id, actividadId })
+            }
+            onAddRoot={() => {
+              setParentActividadId(undefined);
+              setEditingActividad(null);
+              setShowActividadModal(true);
+            }}
+            programaFechaInicio={programa.fechaInicio}
+            programaFechaFin={programa.fechaFin}
+          />
+
+          <GanttChart
+            actividades={actividades}
+            programaFechaInicio={programa.fechaInicio}
+            programaFechaFin={programa.fechaFin}
+          />
+
+          <SCurveChart sCurveData={sCurve} />
+        </div>
+      ) : null}
+
+      {showProgramaModal && (
+        <ProgramaModal
+          programa={editingPrograma}
+          fraccionamientoId={selectedFraccionamientoId}
+          onClose={() => {
+            setShowProgramaModal(false);
+            setEditingPrograma(null);
+          }}
+          onCreate={handleCreatePrograma}
+          onUpdate={handleUpdatePrograma}
+          isLoading={createProgramaMutation.isPending || updateProgramaMutation.isPending}
+        />
+      )}
+
+      {showActividadModal && (
+        <ActividadModal
+          actividad={editingActividad}
+          parentId={parentActividadId}
+          conceptos={conceptos}
+          actividades={actividades}
+          onClose={() => {
+            setShowActividadModal(false);
+            setEditingActividad(null);
+            setParentActividadId(undefined);
+          }}
+          onCreate={handleCreateActividad}
+          onUpdate={handleUpdateActividad}
+          isLoading={addActividadMutation.isPending || updateActividadMutation.isPending}
+        />
+      )}
+
+      {deleteConfirmPrograma && (
+        <DeleteConfirmModal
+          title="Eliminar Programa de Obra"
+          message="Esta seguro de eliminar este programa? Esta accion eliminara todas las actividades asociadas y no se puede deshacer."
+          onConfirm={() => handleDeletePrograma(deleteConfirmPrograma)}
+          onCancel={() => setDeleteConfirmPrograma(null)}
+          isLoading={deleteProgramaMutation.isPending}
+        />
+      )}
+
+      {deleteConfirmActividad && (
+        <DeleteConfirmModal
+          title="Eliminar Actividad"
+          message="Esta seguro de eliminar esta actividad? Las actividades hijas tambien seran eliminadas."
+          onConfirm={() =>
+            handleDeleteActividad(deleteConfirmActividad.programaId, deleteConfirmActividad.actividadId)
+          }
+          onCancel={() => setDeleteConfirmActividad(null)}
+          isLoading={deleteActividadMutation.isPending}
+        />
+      )}
+    </div>
+  );
+}
+
+interface GeneralInfoCardProps {
+  programa: ProgramaObra;
+  onEdit: () => void;
+  onDuplicate: () => void;
+  onActivate: () => void;
+  onDeactivate: () => void;
+  onDelete: () => void;
+  isActivating: boolean;
+  isDeactivating: boolean;
+}
+
+function GeneralInfoCard({
+  programa,
+  onEdit,
+  onDuplicate,
+  onActivate,
+  onDeactivate,
+  onDelete,
+  isActivating,
+  isDeactivating,
+}: GeneralInfoCardProps) {
+  return (
+    <div className="bg-white rounded-lg shadow-sm p-6">
+      <div className="flex items-start justify-between mb-4">
+        <div>
+          <div className="flex items-center gap-3">
+            <h2 className="text-xl font-semibold text-gray-900">{programa.nombre}</h2>
+            <span
+              className={clsx(
+                'px-2 py-1 text-xs font-medium rounded-full',
+                statusColors[programa.status]
+              )}
+            >
+              {statusLabels[programa.status]}
+            </span>
+          </div>
+          <p className="text-sm text-gray-500 mt-1">
+            Codigo: {programa.codigo} | Version: {programa.version}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          {programa.status === 'activo' ? (
+            <button
+              className="p-2 text-gray-500 hover:text-orange-600 hover:bg-orange-50 rounded-lg"
+              title="Desactivar"
+              onClick={onDeactivate}
+              disabled={isDeactivating}
+            >
+              <PowerOff className="w-4 h-4" />
+            </button>
+          ) : programa.status !== 'cerrado' ? (
+            <button
+              className="p-2 text-gray-500 hover:text-green-600 hover:bg-green-50 rounded-lg"
+              title="Activar"
+              onClick={onActivate}
+              disabled={isActivating}
+            >
+              <Power className="w-4 h-4" />
+            </button>
+          ) : null}
+          <button
+            className="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg"
+            title="Duplicar"
+            onClick={onDuplicate}
+          >
+            <Copy className="w-4 h-4" />
+          </button>
+          <button
+            className="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg"
+            title="Editar"
+            onClick={onEdit}
+          >
+            <Pencil className="w-4 h-4" />
+          </button>
+          <button
+            className="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-lg"
+            title="Eliminar"
+            onClick={onDelete}
+          >
+            <Trash2 className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      {programa.descripcion && <p className="text-gray-600 mb-4">{programa.descripcion}</p>}
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div className="bg-gray-50 rounded-lg p-3">
+          <div className="flex items-center gap-2 text-gray-500 text-sm mb-1">
+            <Calendar className="w-4 h-4" />
+            Fecha Inicio
+          </div>
+          <p className="font-medium text-gray-900">{formatDate(programa.fechaInicio)}</p>
+        </div>
+        <div className="bg-gray-50 rounded-lg p-3">
+          <div className="flex items-center gap-2 text-gray-500 text-sm mb-1">
+            <Calendar className="w-4 h-4" />
+            Fecha Fin
+          </div>
+          <p className="font-medium text-gray-900">{formatDate(programa.fechaFin)}</p>
+        </div>
+        <div className="bg-gray-50 rounded-lg p-3">
+          <div className="flex items-center gap-2 text-gray-500 text-sm mb-1">
+            <Clock className="w-4 h-4" />
+            Duracion
+          </div>
+          <p className="font-medium text-gray-900">{programa.duracionDias} dias</p>
+        </div>
+        <div className="bg-gray-50 rounded-lg p-3">
+          <div className="flex items-center gap-2 text-gray-500 text-sm mb-1">
+            <Activity className="w-4 h-4" />
+            Actividades
+          </div>
+          <p className="font-medium text-gray-900">{programa.actividades?.length || 0}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface ActividadesSectionProps {
+  actividades: ActividadPrograma[];
+  expandedActividades: Set<string>;
+  onToggleExpand: (id: string) => void;
+  onAddChild: (parentId: string) => void;
+  onEdit: (actividad: ActividadPrograma) => void;
+  onDelete: (actividadId: string) => void;
+  onAddRoot: () => void;
+  programaFechaInicio: string;
+  programaFechaFin: string;
+}
+
+function ActividadesSection({
+  actividades,
+  expandedActividades,
+  onToggleExpand,
+  onAddChild,
+  onEdit,
+  onDelete,
+  onAddRoot,
+}: ActividadesSectionProps) {
+  const renderActividad = (actividad: ActividadPrograma, depth: number = 0): JSX.Element => {
+    const hasChildren = actividad.children && actividad.children.length > 0;
+    const isExpanded = expandedActividades.has(actividad.id);
+    const varianza = actividad.avanceReal - actividad.avancePlaneado;
+
+    return (
+      <div key={actividad.id}>
+        <div
+          className={clsx(
+            'flex items-center py-2 px-3 hover:bg-gray-50 border-b border-gray-100',
+            actividad.esCritico && 'bg-red-50'
+          )}
+          style={{ paddingLeft: `${depth * 24 + 12}px` }}
+        >
+          <div className="w-6 flex-shrink-0">
+            {hasChildren && (
+              <button
+                className="p-0.5 hover:bg-gray-200 rounded"
+                onClick={() => onToggleExpand(actividad.id)}
+              >
+                {isExpanded ? (
+                  <ChevronDown className="w-4 h-4 text-gray-500" />
+                ) : (
+                  <ChevronRight className="w-4 h-4 text-gray-500" />
+                )}
+              </button>
+            )}
+          </div>
+
+          <div className="flex-1 grid grid-cols-8 gap-2 items-center text-sm">
+            <div className="col-span-1 font-mono text-gray-600">{actividad.wbsCode}</div>
+            <div className="col-span-2 font-medium text-gray-900 truncate" title={actividad.nombre}>
+              {actividad.nombre}
+              {actividad.esCritico && (
+                <span title="Ruta Critica">
+                  <AlertCircle className="w-3 h-3 text-red-500 inline ml-1" />
+                </span>
+              )}
+            </div>
+            <div className="col-span-1 text-gray-600 truncate">
+              {actividad.concepto?.codigo || '-'}
+            </div>
+            <div className="col-span-1 text-gray-600">{formatShortDate(actividad.fechaInicioPlaneada)}</div>
+            <div className="col-span-1 text-gray-600">{formatShortDate(actividad.fechaFinPlaneada)}</div>
+            <div className="col-span-1 text-gray-600">{actividad.duracionPlaneada}d</div>
+            <div className="col-span-1">
+              <div className="flex items-center gap-1">
+                <span className="text-gray-600">{actividad.pesoRelativo.toFixed(1)}%</span>
+                <span
+                  className={clsx(
+                    'text-xs',
+                    varianza >= 0 ? 'text-green-600' : 'text-red-600'
+                  )}
+                >
+                  ({varianza >= 0 ? '+' : ''}{varianza.toFixed(1)}%)
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-1 ml-2">
+            <button
+              className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded"
+              title="Agregar sub-actividad"
+              onClick={() => onAddChild(actividad.id)}
+            >
+              <Plus className="w-4 h-4" />
+            </button>
+            <button
+              className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded"
+              title="Editar"
+              onClick={() => onEdit(actividad)}
+            >
+              <Pencil className="w-4 h-4" />
+            </button>
+            <button
+              className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded"
+              title="Eliminar"
+              onClick={() => onDelete(actividad.id)}
+            >
+              <Trash2 className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+
+        {hasChildren && isExpanded && actividad.children!.map((child) => renderActividad(child, depth + 1))}
+      </div>
+    );
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm overflow-hidden">
+      <div className="flex items-center justify-between p-4 border-b">
+        <h3 className="font-semibold text-gray-900">Actividades del Programa</h3>
+        <button
+          className="flex items-center px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+          onClick={onAddRoot}
+        >
+          <Plus className="w-4 h-4 mr-1" />
+          Agregar Actividad
+        </button>
+      </div>
+
+      <div className="bg-gray-100 px-3 py-2 border-b">
+        <div className="flex items-center text-xs font-medium text-gray-500 uppercase">
+          <div className="w-6 flex-shrink-0" />
+          <div className="flex-1 grid grid-cols-8 gap-2">
+            <div className="col-span-1">WBS</div>
+            <div className="col-span-2">Actividad</div>
+            <div className="col-span-1">Concepto</div>
+            <div className="col-span-1">Inicio Plan.</div>
+            <div className="col-span-1">Fin Plan.</div>
+            <div className="col-span-1">Duracion</div>
+            <div className="col-span-1">Peso %</div>
+          </div>
+          <div className="w-24 text-right">Acciones</div>
+        </div>
+      </div>
+
+      <div className="max-h-96 overflow-y-auto">
+        {actividades.length === 0 ? (
+          <div className="p-8 text-center text-gray-500">
+            No hay actividades. Agregue la primera actividad para comenzar.
+          </div>
+        ) : (
+          actividades.map((act) => renderActividad(act))
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface GanttChartProps {
+  actividades: ActividadPrograma[];
+  programaFechaInicio: string;
+  programaFechaFin: string;
+}
+
+function GanttChart({ actividades, programaFechaInicio, programaFechaFin }: GanttChartProps) {
+  const startDate = useMemo(() => new Date(programaFechaInicio), [programaFechaInicio]);
+  const endDate = useMemo(() => new Date(programaFechaFin), [programaFechaFin]);
+  const totalDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
+  const today = new Date();
+  const todayPosition =
+    ((today.getTime() - startDate.getTime()) / (endDate.getTime() - startDate.getTime())) * 100;
+
+  const getBarStyle = (act: ActividadPrograma) => {
+    const actStart = new Date(act.fechaInicioPlaneada);
+    const actEnd = new Date(act.fechaFinPlaneada);
+    const left =
+      ((actStart.getTime() - startDate.getTime()) / (endDate.getTime() - startDate.getTime())) * 100;
+    const width =
+      ((actEnd.getTime() - actStart.getTime()) / (endDate.getTime() - startDate.getTime())) * 100;
+    return { left: `${Math.max(0, left)}%`, width: `${Math.min(100 - left, width)}%` };
+  };
+
+  const getBarColor = (act: ActividadPrograma) => {
+    if (act.esCritico) return 'bg-red-500';
+    const varianza = act.avanceReal - act.avancePlaneado;
+    if (varianza >= 0) return 'bg-green-500';
+    if (varianza >= -5) return 'bg-yellow-500';
+    return 'bg-orange-500';
+  };
+
+  const flatActividades = useMemo(() => {
+    const flatten = (items: ActividadPrograma[], depth: number = 0): (ActividadPrograma & { depth: number })[] => {
+      const result: (ActividadPrograma & { depth: number })[] = [];
+      for (const item of items) {
+        result.push({ ...item, depth });
+        if (item.children) {
+          result.push(...flatten(item.children, depth + 1));
+        }
+      }
+      return result;
+    };
+
+    const buildTree = (items: ActividadPrograma[], parentId?: string): ActividadPrograma[] => {
+      return items
+        .filter((item) => item.parentId === parentId)
+        .sort((a, b) => a.orden - b.orden)
+        .map((item) => ({
+          ...item,
+          children: buildTree(items, item.id),
+        }));
+    };
+
+    const tree = buildTree(actividades, undefined);
+    return flatten(tree);
+  }, [actividades]);
+
+  const months = useMemo(() => {
+    const result: { label: string; width: number }[] = [];
+    const current = new Date(startDate);
+    while (current <= endDate) {
+      const monthStart = new Date(current.getFullYear(), current.getMonth(), 1);
+      const monthEnd = new Date(current.getFullYear(), current.getMonth() + 1, 0);
+      const effectiveStart = monthStart < startDate ? startDate : monthStart;
+      const effectiveEnd = monthEnd > endDate ? endDate : monthEnd;
+      const daysInRange = Math.ceil(
+        (effectiveEnd.getTime() - effectiveStart.getTime()) / (1000 * 60 * 60 * 24)
+      ) + 1;
+      const width = (daysInRange / totalDays) * 100;
+      result.push({
+        label: current.toLocaleDateString('es-MX', { month: 'short', year: '2-digit' }),
+        width,
+      });
+      current.setMonth(current.getMonth() + 1);
+    }
+    return result;
+  }, [startDate, endDate, totalDays]);
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm overflow-hidden">
+      <div className="p-4 border-b">
+        <h3 className="font-semibold text-gray-900">Diagrama de Gantt</h3>
+        <div className="flex items-center gap-4 mt-2 text-xs">
+          <div className="flex items-center gap-1">
+            <div className="w-3 h-3 bg-green-500 rounded" />
+            <span>A tiempo</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <div className="w-3 h-3 bg-yellow-500 rounded" />
+            <span>Leve retraso</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <div className="w-3 h-3 bg-orange-500 rounded" />
+            <span>Retraso</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <div className="w-3 h-3 bg-red-500 rounded" />
+            <span>Ruta Critica</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <div className="min-w-[800px]">
+          <div className="flex bg-gray-100 border-b">
+            <div className="w-48 flex-shrink-0 px-3 py-2 text-xs font-medium text-gray-500 uppercase border-r">
+              Actividad
+            </div>
+            <div className="flex-1 flex">
+              {months.map((month, idx) => (
+                <div
+                  key={idx}
+                  className="text-center text-xs font-medium text-gray-500 py-2 border-r border-gray-200"
+                  style={{ width: `${month.width}%` }}
+                >
+                  {month.label}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="relative">
+            {todayPosition >= 0 && todayPosition <= 100 && (
+              <div
+                className="absolute top-0 bottom-0 w-0.5 bg-blue-500 z-10"
+                style={{ left: `calc(192px + ${todayPosition}% * (100% - 192px) / 100)` }}
+              >
+                <div className="absolute -top-1 -left-2 text-xs bg-blue-500 text-white px-1 rounded">
+                  Hoy
+                </div>
+              </div>
+            )}
+
+            {flatActividades.slice(0, 15).map((act) => {
+              const barStyle = getBarStyle(act);
+              const barColor = getBarColor(act);
+
+              return (
+                <div key={act.id} className="flex border-b border-gray-100 hover:bg-gray-50">
+                  <div
+                    className="w-48 flex-shrink-0 px-3 py-2 text-sm text-gray-700 truncate border-r"
+                    style={{ paddingLeft: `${act.depth * 12 + 12}px` }}
+                    title={act.nombre}
+                  >
+                    {act.nombre}
+                  </div>
+                  <div className="flex-1 relative h-8">
+                    <div
+                      className={clsx('absolute top-1.5 h-5 rounded', barColor)}
+                      style={barStyle}
+                    >
+                      <div
+                        className="absolute inset-0 bg-black/20 rounded"
+                        style={{ width: `${act.avanceReal}%` }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+
+            {flatActividades.length > 15 && (
+              <div className="p-3 text-center text-sm text-gray-500 border-t">
+                + {flatActividades.length - 15} actividades mas
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface SCurveChartProps {
+  sCurveData: SCurveDataPoint[];
+}
+
+function SCurveChart({ sCurveData }: SCurveChartProps) {
+  if (sCurveData.length === 0) {
+    return (
+      <div className="bg-white rounded-lg shadow-sm p-6">
+        <h3 className="font-semibold text-gray-900 mb-4">Curva S</h3>
+        <div className="text-center text-gray-500 py-8">
+          No hay datos suficientes para mostrar la curva S
+        </div>
+      </div>
+    );
+  }
+
+  const chartHeight = 200;
+  const chartWidth = 100;
+
+  const getY = (value: number) => chartHeight - (value / 100) * chartHeight;
+
+  const plannedPath = sCurveData
+    .map((d, i) => {
+      const x = (i / (sCurveData.length - 1)) * chartWidth;
+      const y = getY(d.avancePlaneadoAcumulado);
+      return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
+    })
+    .join(' ');
+
+  const actualPath = sCurveData
+    .map((d, i) => {
+      const x = (i / (sCurveData.length - 1)) * chartWidth;
+      const y = getY(d.avanceRealAcumulado);
+      return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
+    })
+    .join(' ');
+
+  const lastPoint = sCurveData[sCurveData.length - 1];
+  const varianza = lastPoint ? lastPoint.varianza : 0;
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="font-semibold text-gray-900">Curva S (Avance Acumulado)</h3>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <div className="w-4 h-0.5 bg-blue-500" />
+            <span className="text-sm text-gray-600">Planeado</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="w-4 h-0.5 bg-green-500" />
+            <span className="text-sm text-gray-600">Real</span>
+          </div>
+          <div
+            className={clsx(
+              'px-2 py-1 rounded text-sm font-medium',
+              varianza >= 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+            )}
+          >
+            Varianza: {varianza >= 0 ? '+' : ''}
+            {varianza.toFixed(1)}%
+          </div>
+        </div>
+      </div>
+
+      <div className="relative">
+        <svg viewBox={`0 0 ${chartWidth} ${chartHeight}`} className="w-full h-48" preserveAspectRatio="none">
+          {[0, 25, 50, 75, 100].map((v) => (
+            <g key={v}>
+              <line
+                x1="0"
+                y1={getY(v)}
+                x2={chartWidth}
+                y2={getY(v)}
+                stroke="#e5e7eb"
+                strokeWidth="0.5"
+              />
+              <text x="-2" y={getY(v)} textAnchor="end" fontSize="3" fill="#6b7280" dominantBaseline="middle">
+                {v}%
+              </text>
+            </g>
+          ))}
+
+          <path d={plannedPath} fill="none" stroke="#3b82f6" strokeWidth="1" />
+
+          <path d={actualPath} fill="none" stroke="#22c55e" strokeWidth="1" />
+        </svg>
+
+        <div className="flex justify-between text-xs text-gray-500 mt-2 px-4">
+          <span>{formatShortDate(sCurveData[0]?.fecha || '')}</span>
+          <span>{formatShortDate(sCurveData[Math.floor(sCurveData.length / 2)]?.fecha || '')}</span>
+          <span>{formatShortDate(sCurveData[sCurveData.length - 1]?.fecha || '')}</span>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-3 gap-4 mt-4">
+        <div className="bg-blue-50 rounded-lg p-3 text-center">
+          <p className="text-sm text-blue-600">Avance Planeado</p>
+          <p className="text-xl font-bold text-blue-700">
+            {lastPoint?.avancePlaneadoAcumulado.toFixed(1) || 0}%
+          </p>
+        </div>
+        <div className="bg-green-50 rounded-lg p-3 text-center">
+          <p className="text-sm text-green-600">Avance Real</p>
+          <p className="text-xl font-bold text-green-700">
+            {lastPoint?.avanceRealAcumulado.toFixed(1) || 0}%
+          </p>
+        </div>
+        <div
+          className={clsx(
+            'rounded-lg p-3 text-center',
+            varianza >= 0 ? 'bg-green-50' : 'bg-red-50'
+          )}
+        >
+          <p className={clsx('text-sm', varianza >= 0 ? 'text-green-600' : 'text-red-600')}>
+            Varianza
+          </p>
+          <p
+            className={clsx(
+              'text-xl font-bold',
+              varianza >= 0 ? 'text-green-700' : 'text-red-700'
+            )}
+          >
+            {varianza >= 0 ? '+' : ''}
+            {varianza.toFixed(1)}%
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface ProgramaModalProps {
+  programa: ProgramaObra | null;
+  fraccionamientoId: string;
+  onClose: () => void;
+  onCreate: (data: CreateProgramaObraDto) => Promise<void>;
+  onUpdate: (id: string, data: UpdateProgramaObraDto) => Promise<void>;
+  isLoading: boolean;
+}
+
+function ProgramaModal({
+  programa,
+  fraccionamientoId,
+  onClose,
+  onCreate,
+  onUpdate,
+  isLoading,
+}: ProgramaModalProps) {
+  const [codigo, setCodigo] = useState(programa?.codigo || '');
+  const [nombre, setNombre] = useState(programa?.nombre || '');
+  const [descripcion, setDescripcion] = useState(programa?.descripcion || '');
+  const [fechaInicio, setFechaInicio] = useState(
+    programa?.fechaInicio?.split('T')[0] || new Date().toISOString().split('T')[0]
+  );
+  const [fechaFin, setFechaFin] = useState(
+    programa?.fechaFin?.split('T')[0] ||
+      new Date(Date.now() + 90 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
+  );
+  const [status, setStatus] = useState<ProgramaObraStatus>(programa?.status || 'borrador');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (programa) {
+      await onUpdate(programa.id, {
+        codigo,
+        nombre,
+        descripcion: descripcion || undefined,
+        fechaInicio,
+        fechaFin,
+        status,
+      });
+    } else {
+      await onCreate({
+        fraccionamientoId,
+        codigo,
+        nombre,
+        descripcion: descripcion || undefined,
+        fechaInicio,
+        fechaFin,
+        status,
+      });
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
+        <h3 className="text-lg font-semibold mb-4">
+          {programa ? 'Editar Programa de Obra' : 'Nuevo Programa de Obra'}
+        </h3>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Codigo *</label>
+              <input
+                type="text"
+                required
+                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+                placeholder="PO-001"
+                value={codigo}
+                onChange={(e) => setCodigo(e.target.value)}
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Estado</label>
+              <select
+                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+                value={status}
+                onChange={(e) => setStatus(e.target.value as ProgramaObraStatus)}
+              >
+                {Object.entries(statusLabels).map(([value, label]) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Nombre *</label>
+            <input
+              type="text"
+              required
+              className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+              placeholder="Nombre del programa"
+              value={nombre}
+              onChange={(e) => setNombre(e.target.value)}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Descripcion</label>
+            <textarea
+              rows={3}
+              className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+              placeholder="Descripcion del programa..."
+              value={descripcion}
+              onChange={(e) => setDescripcion(e.target.value)}
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Fecha Inicio *</label>
+              <input
+                type="date"
+                required
+                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+                value={fechaInicio}
+                onChange={(e) => setFechaInicio(e.target.value)}
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Fecha Fin *</label>
+              <input
+                type="date"
+                required
+                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+                value={fechaFin}
+                onChange={(e) => setFechaFin(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="bg-gray-50 rounded-lg p-3">
+            <p className="text-sm text-gray-600">
+              <strong>Duracion:</strong> {calculateDurationDays(fechaInicio, fechaFin)} dias
+            </p>
+          </div>
+
+          <div className="flex justify-end gap-3 pt-4">
+            <button
+              type="button"
+              className="px-4 py-2 text-gray-700 border rounded-lg hover:bg-gray-50"
+              onClick={onClose}
+            >
+              Cancelar
+            </button>
+            <button
+              type="submit"
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
+              disabled={isLoading}
+            >
+              {isLoading ? 'Guardando...' : programa ? 'Guardar Cambios' : 'Crear Programa'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+interface ActividadModalProps {
+  actividad: ActividadPrograma | null;
+  parentId?: string;
+  conceptos: Concepto[];
+  actividades: ActividadPrograma[];
+  onClose: () => void;
+  onCreate: (data: CreateActividadProgramaDto) => Promise<void>;
+  onUpdate: (actividadId: string, data: UpdateActividadProgramaDto) => Promise<void>;
+  isLoading: boolean;
+}
+
+function ActividadModal({
+  actividad,
+  parentId,
+  conceptos,
+  actividades,
+  onClose,
+  onCreate,
+  onUpdate,
+  isLoading,
+}: ActividadModalProps) {
+  const [wbsCode, setWbsCode] = useState(actividad?.wbsCode || '');
+  const [nombre, setNombre] = useState(actividad?.nombre || '');
+  const [conceptoId, setConceptoId] = useState(actividad?.conceptoId || '');
+  const [selectedParentId, setSelectedParentId] = useState(parentId || actividad?.parentId || '');
+  const [fechaInicioPlaneada, setFechaInicioPlaneada] = useState(
+    actividad?.fechaInicioPlaneada?.split('T')[0] || new Date().toISOString().split('T')[0]
+  );
+  const [fechaFinPlaneada, setFechaFinPlaneada] = useState(
+    actividad?.fechaFinPlaneada?.split('T')[0] ||
+      new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
+  );
+  const [pesoRelativo, setPesoRelativo] = useState(actividad?.pesoRelativo?.toString() || '1');
+  const [esCritico, setEsCritico] = useState(actividad?.esCritico || false);
+  const [avanceReal, setAvanceReal] = useState(actividad?.avanceReal?.toString() || '0');
+
+  const parentOptions = useMemo(() => {
+    if (actividad) {
+      return actividades.filter((a) => a.id !== actividad.id);
+    }
+    return actividades;
+  }, [actividades, actividad]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (actividad) {
+      await onUpdate(actividad.id, {
+        wbsCode,
+        nombre,
+        conceptoId: conceptoId || undefined,
+        parentId: selectedParentId || undefined,
+        fechaInicioPlaneada,
+        fechaFinPlaneada,
+        pesoRelativo: parseFloat(pesoRelativo) || 1,
+        esCritico,
+        avanceReal: parseFloat(avanceReal) || 0,
+      });
+    } else {
+      await onCreate({
+        wbsCode,
+        nombre,
+        conceptoId: conceptoId || undefined,
+        parentId: selectedParentId || undefined,
+        fechaInicioPlaneada,
+        fechaFinPlaneada,
+        pesoRelativo: parseFloat(pesoRelativo) || 1,
+        esCritico,
+      });
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
+        <h3 className="text-lg font-semibold mb-4">
+          {actividad ? 'Editar Actividad' : 'Nueva Actividad'}
+        </h3>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Codigo WBS *</label>
+              <input
+                type="text"
+                required
+                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+                placeholder="1.1.1"
+                value={wbsCode}
+                onChange={(e) => setWbsCode(e.target.value)}
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Peso % *</label>
+              <input
+                type="number"
+                required
+                min="0"
+                max="100"
+                step="0.1"
+                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+                value={pesoRelativo}
+                onChange={(e) => setPesoRelativo(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Nombre *</label>
+            <input
+              type="text"
+              required
+              className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+              placeholder="Nombre de la actividad"
+              value={nombre}
+              onChange={(e) => setNombre(e.target.value)}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Actividad Padre (opcional)
+            </label>
+            <select
+              className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+              value={selectedParentId}
+              onChange={(e) => setSelectedParentId(e.target.value)}
+            >
+              <option value="">Sin padre (actividad raiz)</option>
+              {parentOptions.map((act) => (
+                <option key={act.id} value={act.id}>
+                  {act.wbsCode} - {act.nombre}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Concepto (opcional)
+            </label>
+            <select
+              className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+              value={conceptoId}
+              onChange={(e) => setConceptoId(e.target.value)}
+            >
+              <option value="">Sin concepto asociado</option>
+              {conceptos.map((concepto) => (
+                <option key={concepto.id} value={concepto.id}>
+                  {concepto.codigo} - {concepto.descripcion}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Fecha Inicio Planeada *
+              </label>
+              <input
+                type="date"
+                required
+                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+                value={fechaInicioPlaneada}
+                onChange={(e) => setFechaInicioPlaneada(e.target.value)}
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Fecha Fin Planeada *
+              </label>
+              <input
+                type="date"
+                required
+                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+                value={fechaFinPlaneada}
+                onChange={(e) => setFechaFinPlaneada(e.target.value)}
+              />
+            </div>
+          </div>
+
+          {actividad && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Avance Real (%)
+              </label>
+              <input
+                type="number"
+                min="0"
+                max="100"
+                step="0.1"
+                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+                value={avanceReal}
+                onChange={(e) => setAvanceReal(e.target.value)}
+              />
+            </div>
+          )}
+
+          <div className="flex items-center">
+            <label className="flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-red-500"
+                checked={esCritico}
+                onChange={(e) => setEsCritico(e.target.checked)}
+              />
+              <span className="ml-2 text-sm text-gray-700">Marcar como Ruta Critica</span>
+            </label>
+          </div>
+
+          <div className="bg-gray-50 rounded-lg p-3">
+            <p className="text-sm text-gray-600">
+              <strong>Duracion:</strong> {calculateDurationDays(fechaInicioPlaneada, fechaFinPlaneada)}{' '}
+              dias
+            </p>
+          </div>
+
+          <div className="flex justify-end gap-3 pt-4">
+            <button
+              type="button"
+              className="px-4 py-2 text-gray-700 border rounded-lg hover:bg-gray-50"
+              onClick={onClose}
+            >
+              Cancelar
+            </button>
+            <button
+              type="submit"
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
+              disabled={isLoading}
+            >
+              {isLoading ? 'Guardando...' : actividad ? 'Guardar Cambios' : 'Crear Actividad'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+interface DeleteConfirmModalProps {
+  title: string;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  isLoading: boolean;
+}
+
+function DeleteConfirmModal({
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  isLoading,
+}: DeleteConfirmModalProps) {
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+        <h3 className="text-lg font-semibold mb-4">{title}</h3>
+        <p className="text-gray-600 mb-6">{message}</p>
+        <div className="flex justify-end gap-3">
+          <button
+            className="px-4 py-2 text-gray-700 border rounded-lg hover:bg-gray-50"
+            onClick={onCancel}
+          >
+            Cancelar
+          </button>
+          <button
+            className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
+            onClick={onConfirm}
+            disabled={isLoading}
+          >
+            {isLoading ? 'Eliminando...' : 'Eliminar'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/pages/admin/obras/index.ts b/web/src/pages/admin/obras/index.ts
index 20078a4..590f6c0 100644
--- a/web/src/pages/admin/obras/index.ts
+++ b/web/src/pages/admin/obras/index.ts
@@ -1,2 +1,4 @@
 export { AvancesObraPage } from './AvancesObraPage';
 export { BitacoraObraPage } from './BitacoraObraPage';
+export { ControlAvancePage } from './ControlAvancePage';
+export { ProgramaObraPage } from './ProgramaObraPage';
diff --git a/web/src/services/progress/index.ts b/web/src/services/progress/index.ts
index 2ae759e..a3bba79 100644
--- a/web/src/services/progress/index.ts
+++ b/web/src/services/progress/index.ts
@@ -1 +1,3 @@
 export * from './avances-obra.api';
+export * from './bitacora-obra.api';
+export * from './programa-obra.api';
diff --git a/web/src/services/progress/programa-obra.api.ts b/web/src/services/progress/programa-obra.api.ts
new file mode 100644
index 0000000..45cc8d9
--- /dev/null
+++ b/web/src/services/progress/programa-obra.api.ts
@@ -0,0 +1,229 @@
+import api, { PaginatedResponse, PaginationParams } from '../api';
+
+export type ProgramaObraStatus = 'activo' | 'inactivo' | 'borrador' | 'cerrado';
+
+export interface ProgramaObra {
+  id: string;
+  tenantId: string;
+  fraccionamientoId: string;
+  fraccionamientoNombre?: string;
+  codigo: string;
+  nombre: string;
+  version: number;
+  descripcion?: string;
+  fechaInicio: string;
+  fechaFin: string;
+  duracionDias: number;
+  status: ProgramaObraStatus;
+  actividades?: ActividadPrograma[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ActividadPrograma {
+  id: string;
+  programaId: string;
+  parentId?: string;
+  conceptoId?: string;
+  concepto?: {
+    id: string;
+    codigo: string;
+    descripcion: string;
+    unidad?: string;
+  };
+  wbsCode: string;
+  nombre: string;
+  fechaInicioPlaneada: string;
+  fechaFinPlaneada: string;
+  fechaInicioReal?: string;
+  fechaFinReal?: string;
+  duracionPlaneada: number;
+  duracionReal?: number;
+  pesoRelativo: number;
+  avancePlaneado: number;
+  avanceReal: number;
+  esCritico: boolean;
+  orden: number;
+  nivel: number;
+  children?: ActividadPrograma[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface SCurveDataPoint {
+  fecha: string;
+  avancePlaneadoAcumulado: number;
+  avanceRealAcumulado: number;
+  varianza: number;
+}
+
+export interface ProgramaObraStats {
+  totalProgramas: number;
+  programasActivos: number;
+  avancePromedioPlaneado: number;
+  avancePromedioReal: number;
+  varianzaPromedio: number;
+}
+
+export interface ProgramaObraFilters extends PaginationParams {
+  fraccionamientoId?: string;
+  status?: ProgramaObraStatus;
+}
+
+export interface CreateProgramaObraDto {
+  fraccionamientoId: string;
+  codigo: string;
+  nombre: string;
+  descripcion?: string;
+  fechaInicio: string;
+  fechaFin: string;
+  status?: ProgramaObraStatus;
+}
+
+export interface UpdateProgramaObraDto {
+  codigo?: string;
+  nombre?: string;
+  descripcion?: string;
+  fechaInicio?: string;
+  fechaFin?: string;
+  status?: ProgramaObraStatus;
+}
+
+export interface CreateActividadProgramaDto {
+  parentId?: string;
+  conceptoId?: string;
+  wbsCode: string;
+  nombre: string;
+  fechaInicioPlaneada: string;
+  fechaFinPlaneada: string;
+  pesoRelativo: number;
+  esCritico?: boolean;
+  orden?: number;
+}
+
+export interface UpdateActividadProgramaDto {
+  parentId?: string;
+  conceptoId?: string;
+  wbsCode?: string;
+  nombre?: string;
+  fechaInicioPlaneada?: string;
+  fechaFinPlaneada?: string;
+  fechaInicioReal?: string;
+  fechaFinReal?: string;
+  pesoRelativo?: number;
+  avanceReal?: number;
+  esCritico?: boolean;
+  orden?: number;
+}
+
+export interface ReorderActividadDto {
+  actividadId: string;
+  newOrder: number;
+  newParentId?: string;
+}
+
+export const programaObraApi = {
+  list: async (filters?: ProgramaObraFilters): Promise<PaginatedResponse<ProgramaObra>> => {
+    const response = await api.get<PaginatedResponse<ProgramaObra>>('/programas-obra', {
+      params: filters,
+    });
+    return response.data;
+  },
+
+  get: async (id: string): Promise<ProgramaObra> => {
+    const response = await api.get<ProgramaObra>(`/programas-obra/${id}`);
+    return response.data;
+  },
+
+  getVersions: async (fraccionamientoId: string): Promise<ProgramaObra[]> => {
+    const response = await api.get<ProgramaObra[]>('/programas-obra/versions', {
+      params: { fraccionamientoId },
+    });
+    return response.data;
+  },
+
+  getStats: async (fraccionamientoId?: string): Promise<ProgramaObraStats> => {
+    const response = await api.get<ProgramaObraStats>('/programas-obra/stats', {
+      params: fraccionamientoId ? { fraccionamientoId } : undefined,
+    });
+    return response.data;
+  },
+
+  getSCurve: async (id: string): Promise<SCurveDataPoint[]> => {
+    const response = await api.get<SCurveDataPoint[]>(`/programas-obra/${id}/s-curve`);
+    return response.data;
+  },
+
+  create: async (data: CreateProgramaObraDto): Promise<ProgramaObra> => {
+    const response = await api.post<ProgramaObra>('/programas-obra', data);
+    return response.data;
+  },
+
+  update: async (id: string, data: UpdateProgramaObraDto): Promise<ProgramaObra> => {
+    const response = await api.patch<ProgramaObra>(`/programas-obra/${id}`, data);
+    return response.data;
+  },
+
+  delete: async (id: string): Promise<void> => {
+    await api.delete(`/programas-obra/${id}`);
+  },
+
+  duplicate: async (id: string): Promise<ProgramaObra> => {
+    const response = await api.post<ProgramaObra>(`/programas-obra/${id}/duplicate`);
+    return response.data;
+  },
+
+  activate: async (id: string): Promise<ProgramaObra> => {
+    const response = await api.post<ProgramaObra>(`/programas-obra/${id}/activate`);
+    return response.data;
+  },
+
+  deactivate: async (id: string): Promise<ProgramaObra> => {
+    const response = await api.post<ProgramaObra>(`/programas-obra/${id}/deactivate`);
+    return response.data;
+  },
+
+  getActividades: async (programaId: string): Promise<ActividadPrograma[]> => {
+    const response = await api.get<ActividadPrograma[]>(`/programas-obra/${programaId}/actividades`);
+    return response.data;
+  },
+
+  addActividad: async (programaId: string, data: CreateActividadProgramaDto): Promise<ActividadPrograma> => {
+    const response = await api.post<ActividadPrograma>(`/programas-obra/${programaId}/actividades`, data);
+    return response.data;
+  },
+
+  updateActividad: async (
+    programaId: string,
+    actividadId: string,
+    data: UpdateActividadProgramaDto
+  ): Promise<ActividadPrograma> => {
+    const response = await api.patch<ActividadPrograma>(
+      `/programas-obra/${programaId}/actividades/${actividadId}`,
+      data
+    );
+    return response.data;
+  },
+
+  deleteActividad: async (programaId: string, actividadId: string): Promise<void> => {
+    await api.delete(`/programas-obra/${programaId}/actividades/${actividadId}`);
+  },
+
+  reorderActividades: async (programaId: string, reorderData: ReorderActividadDto[]): Promise<void> => {
+    await api.post(`/programas-obra/${programaId}/actividades/reorder`, { items: reorderData });
+  },
+
+  exportPdf: async (id: string): Promise<Blob> => {
+    const response = await api.get(`/programas-obra/${id}/export/pdf`, {
+      responseType: 'blob',
+    });
+    return response.data;
+  },
+
+  exportExcel: async (id: string): Promise<Blob> => {
+    const response = await api.get(`/programas-obra/${id}/export/excel`, {
+      responseType: 'blob',
+    });
+    return response.data;
+  },
+};