diff --git a/web/src/App.tsx b/web/src/App.tsx
index cb72843..e8f26b5 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -14,7 +14,7 @@ import {
 } from './pages/admin/proyectos';
 import { ManzanasPage } from './pages/admin/proyectos/ManzanasPage';
 import { DashboardPage } from './pages/admin/dashboard';
-import { ConceptosPage, PresupuestosPage, EstimacionesPage } from './pages/admin/presupuestos';
+import { ConceptosPage, PresupuestosPage, PresupuestoDetailPage, 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, ProgramaObraPage, ControlAvancePage } from './pages/admin/obras';
@@ -50,6 +50,7 @@ function App() {
               <Route index element={<Navigate to="catalogo" replace />} />
               <Route path="catalogo" element={<ConceptosPage />} />
               <Route path="presupuestos" element={<PresupuestosPage />} />
+              <Route path="presupuestos/:id" element={<PresupuestoDetailPage />} />
               <Route path="estimaciones" element={<EstimacionesPage />} />
             </Route>
 
diff --git a/web/src/hooks/usePresupuestos.ts b/web/src/hooks/usePresupuestos.ts
index 9c6e747..67112ca 100644
--- a/web/src/hooks/usePresupuestos.ts
+++ b/web/src/hooks/usePresupuestos.ts
@@ -11,6 +11,9 @@ import {
   PresupuestoFilters,
   CreatePresupuestoDto,
   UpdatePresupuestoDto,
+  CreatePresupuestoPartidaDto,
+  UpdatePresupuestoPartidaDto,
+  RejectPresupuestoDto,
   estimacionesApi,
   EstimacionFilters,
   CreateEstimacionDto,
@@ -191,6 +194,132 @@ export function useDuplicatePresupuesto() {
   });
 }
 
+export function usePresupuestoWithPartidas(id: string) {
+  return useQuery({
+    queryKey: [...presupuestosKeys.presupuestos.detail(id), 'partidas'],
+    queryFn: () => presupuestosApi.getWithPartidas(id),
+    enabled: !!id,
+  });
+}
+
+export function usePresupuestoVersions(id: string) {
+  return useQuery({
+    queryKey: [...presupuestosKeys.presupuestos.detail(id), 'versions'],
+    queryFn: () => presupuestosApi.getVersions(id),
+    enabled: !!id,
+  });
+}
+
+export function useCreatePresupuestoVersion() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, notas }: { id: string; notas?: string }) =>
+      presupuestosApi.createVersion(id, notas),
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries({ queryKey: presupuestosKeys.presupuestos.all });
+      queryClient.invalidateQueries({ queryKey: presupuestosKeys.presupuestos.detail(id) });
+      toast.success('Nueva version creada exitosamente');
+    },
+    onError: handleError,
+  });
+}
+
+export function useRejectPresupuesto() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: RejectPresupuestoDto }) =>
+      presupuestosApi.reject(id, data),
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries({ queryKey: presupuestosKeys.presupuestos.all });
+      queryClient.invalidateQueries({ queryKey: presupuestosKeys.presupuestos.detail(id) });
+      toast.success('Presupuesto rechazado');
+    },
+    onError: handleError,
+  });
+}
+
+export function useAddPresupuestoPartida() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ presupuestoId, data }: { presupuestoId: string; data: CreatePresupuestoPartidaDto }) =>
+      presupuestosApi.addPartida(presupuestoId, data),
+    onSuccess: (_, { presupuestoId }) => {
+      queryClient.invalidateQueries({ queryKey: presupuestosKeys.presupuestos.detail(presupuestoId) });
+      toast.success('Partida agregada al presupuesto');
+    },
+    onError: handleError,
+  });
+}
+
+export function useUpdatePresupuestoPartida() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      presupuestoId,
+      partidaId,
+      data,
+    }: {
+      presupuestoId: string;
+      partidaId: string;
+      data: UpdatePresupuestoPartidaDto;
+    }) => presupuestosApi.updatePartida(presupuestoId, partidaId, data),
+    onSuccess: (_, { presupuestoId }) => {
+      queryClient.invalidateQueries({ queryKey: presupuestosKeys.presupuestos.detail(presupuestoId) });
+      toast.success('Partida actualizada');
+    },
+    onError: handleError,
+  });
+}
+
+export function useDeletePresupuestoPartida() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ presupuestoId, partidaId }: { presupuestoId: string; partidaId: string }) =>
+      presupuestosApi.deletePartida(presupuestoId, partidaId),
+    onSuccess: (_, { presupuestoId }) => {
+      queryClient.invalidateQueries({ queryKey: presupuestosKeys.presupuestos.detail(presupuestoId) });
+      toast.success('Partida eliminada del presupuesto');
+    },
+    onError: handleError,
+  });
+}
+
+export function useExportPresupuestoPdf() {
+  return useMutation({
+    mutationFn: (id: string) => presupuestosApi.exportPdf(id),
+    onSuccess: (blob) => {
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `presupuesto-${Date.now()}.pdf`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+      toast.success('PDF exportado exitosamente');
+    },
+    onError: handleError,
+  });
+}
+
+export function useExportPresupuestoExcel() {
+  return useMutation({
+    mutationFn: (id: string) => presupuestosApi.exportExcel(id),
+    onSuccess: (blob) => {
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `presupuesto-${Date.now()}.xlsx`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+      toast.success('Excel exportado exitosamente');
+    },
+    onError: handleError,
+  });
+}
+
 // ==================== ESTIMACIONES ====================
 
 export function useEstimaciones(filters?: EstimacionFilters) {
diff --git a/web/src/pages/admin/presupuestos/PresupuestoDetailPage.tsx b/web/src/pages/admin/presupuestos/PresupuestoDetailPage.tsx
new file mode 100644
index 0000000..4ad25dd
--- /dev/null
+++ b/web/src/pages/admin/presupuestos/PresupuestoDetailPage.tsx
@@ -0,0 +1,1174 @@
+import { useState, useMemo } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft,
+  Plus,
+  Pencil,
+  Trash2,
+  CheckCircle,
+  XCircle,
+  Copy,
+  FileDown,
+  FileSpreadsheet,
+  History,
+  ChevronRight,
+  ChevronDown,
+  Calendar,
+  Building2,
+  Home,
+  DollarSign,
+  Package,
+  AlertTriangle,
+  X,
+  Search,
+} from 'lucide-react';
+import {
+  usePresupuestoWithPartidas,
+  usePresupuestoVersions,
+  useApprovePresupuesto,
+  useRejectPresupuesto,
+  useCreatePresupuestoVersion,
+  useAddPresupuestoPartida,
+  useUpdatePresupuestoPartida,
+  useDeletePresupuestoPartida,
+  useExportPresupuestoPdf,
+  useExportPresupuestoExcel,
+  useConceptosTree,
+} from '../../../hooks/usePresupuestos';
+import {
+  PresupuestoEstado,
+  PresupuestoPartida,
+  PresupuestoVersion,
+  Concepto,
+  CreatePresupuestoPartidaDto,
+  UpdatePresupuestoPartidaDto,
+} from '../../../services/presupuestos';
+import clsx from 'clsx';
+
+const estadoColors: Record<PresupuestoEstado, string> = {
+  borrador: 'bg-gray-100 text-gray-800',
+  revision: 'bg-yellow-100 text-yellow-800',
+  aprobado: 'bg-green-100 text-green-800',
+  cerrado: 'bg-blue-100 text-blue-800',
+};
+
+const estadoLabels: Record<PresupuestoEstado, string> = {
+  borrador: 'Borrador',
+  revision: 'En Revision',
+  aprobado: 'Aprobado',
+  cerrado: 'Cerrado',
+};
+
+function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat('es-MX', {
+    style: 'currency',
+    currency: 'MXN',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(amount);
+}
+
+function formatDate(dateString: string): string {
+  return new Date(dateString).toLocaleDateString('es-MX', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+interface PartidaWithChildren extends PresupuestoPartida {
+  children?: PartidaWithChildren[];
+  level: number;
+}
+
+function buildPartidaTree(partidas: PresupuestoPartida[]): PartidaWithChildren[] {
+  const partidaMap = new Map<string, PartidaWithChildren>();
+  const roots: PartidaWithChildren[] = [];
+
+  partidas.forEach((partida) => {
+    partidaMap.set(partida.id, { ...partida, children: [], level: 0 });
+  });
+
+  partidas.forEach((partida) => {
+    const partidaWithChildren = partidaMap.get(partida.id)!;
+    const parentConcepto = partida.concepto?.parentId;
+
+    if (parentConcepto) {
+      const parentPartida = Array.from(partidaMap.values()).find(
+        (p) => p.concepto?.id === parentConcepto
+      );
+      if (parentPartida) {
+        partidaWithChildren.level = parentPartida.level + 1;
+        parentPartida.children = parentPartida.children || [];
+        parentPartida.children.push(partidaWithChildren);
+      } else {
+        roots.push(partidaWithChildren);
+      }
+    } else {
+      roots.push(partidaWithChildren);
+    }
+  });
+
+  return roots;
+}
+
+function flattenPartidaTree(tree: PartidaWithChildren[]): PartidaWithChildren[] {
+  const result: PartidaWithChildren[] = [];
+
+  function traverse(nodes: PartidaWithChildren[]) {
+    nodes.forEach((node) => {
+      result.push(node);
+      if (node.children && node.children.length > 0) {
+        traverse(node.children);
+      }
+    });
+  }
+
+  traverse(tree);
+  return result;
+}
+
+export function PresupuestoDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  const [showVersionSidebar, setShowVersionSidebar] = useState(false);
+  const [showPartidaModal, setShowPartidaModal] = useState(false);
+  const [editingPartida, setEditingPartida] = useState<PresupuestoPartida | null>(null);
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+  const [showApproveModal, setShowApproveModal] = useState(false);
+  const [showRejectModal, setShowRejectModal] = useState(false);
+  const [showVersionModal, setShowVersionModal] = useState(false);
+  const [expandedConceptos, setExpandedConceptos] = useState<Set<string>>(new Set());
+
+  const { data: presupuesto, isLoading, error } = usePresupuestoWithPartidas(id!);
+  const { data: versions } = usePresupuestoVersions(id!);
+
+  const approveMutation = useApprovePresupuesto();
+  const rejectMutation = useRejectPresupuesto();
+  const createVersionMutation = useCreatePresupuestoVersion();
+  const addPartidaMutation = useAddPresupuestoPartida();
+  const updatePartidaMutation = useUpdatePresupuestoPartida();
+  const deletePartidaMutation = useDeletePresupuestoPartida();
+  const exportPdfMutation = useExportPresupuestoPdf();
+  const exportExcelMutation = useExportPresupuestoExcel();
+
+  const partidas = useMemo(() => {
+    if (!presupuesto?.partidas) return [];
+    const tree = buildPartidaTree(presupuesto.partidas);
+    return flattenPartidaTree(tree);
+  }, [presupuesto?.partidas]);
+
+  const grandTotal = useMemo(() => {
+    return partidas.reduce((sum, p) => sum + p.importe, 0);
+  }, [partidas]);
+
+  const handleApprove = async () => {
+    await approveMutation.mutateAsync(id!);
+    setShowApproveModal(false);
+  };
+
+  const handleReject = async (motivo: string) => {
+    await rejectMutation.mutateAsync({ id: id!, data: { motivo } });
+    setShowRejectModal(false);
+  };
+
+  const handleCreateVersion = async (notas?: string) => {
+    await createVersionMutation.mutateAsync({ id: id!, notas });
+    setShowVersionModal(false);
+  };
+
+  const handleAddPartida = async (data: CreatePresupuestoPartidaDto) => {
+    await addPartidaMutation.mutateAsync({ presupuestoId: id!, data });
+    setShowPartidaModal(false);
+  };
+
+  const handleUpdatePartida = async (partidaId: string, data: UpdatePresupuestoPartidaDto) => {
+    await updatePartidaMutation.mutateAsync({ presupuestoId: id!, partidaId, data });
+    setEditingPartida(null);
+  };
+
+  const handleDeletePartida = async (partidaId: string) => {
+    await deletePartidaMutation.mutateAsync({ presupuestoId: id!, partidaId });
+    setDeleteConfirm(null);
+  };
+
+  const handleExportPdf = () => {
+    exportPdfMutation.mutate(id!);
+  };
+
+  const handleExportExcel = () => {
+    exportExcelMutation.mutate(id!);
+  };
+
+  const toggleConcepto = (conceptoId: string) => {
+    setExpandedConceptos((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(conceptoId)) {
+        newSet.delete(conceptoId);
+      } else {
+        newSet.add(conceptoId);
+      }
+      return newSet;
+    });
+  };
+
+  const canEdit = presupuesto?.estado === 'borrador' || presupuesto?.estado === 'revision';
+  const canApprove = presupuesto?.estado === 'revision';
+  const canCreateVersion = presupuesto?.estado === 'aprobado' || presupuesto?.estado === 'cerrado';
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-gray-500">Cargando presupuesto...</div>
+      </div>
+    );
+  }
+
+  if (error || !presupuesto) {
+    return (
+      <div className="flex flex-col items-center justify-center h-64">
+        <AlertTriangle className="w-12 h-12 text-red-500 mb-4" />
+        <p className="text-red-500 text-lg">Error al cargar el presupuesto</p>
+        <button
+          onClick={() => navigate('/admin/presupuestos/presupuestos')}
+          className="mt-4 text-blue-600 hover:text-blue-700"
+        >
+          Volver a la lista
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex">
+      <div className={clsx('flex-1 transition-all duration-300', showVersionSidebar && 'mr-80')}>
+        {/* Breadcrumb */}
+        <nav className="flex items-center text-sm text-gray-500 mb-4">
+          <Link
+            to="/admin/presupuestos"
+            className="flex items-center hover:text-gray-700 transition-colors"
+          >
+            <Home className="w-4 h-4" />
+          </Link>
+          <ChevronRight className="w-4 h-4 mx-2" />
+          <Link
+            to="/admin/presupuestos/presupuestos"
+            className="hover:text-gray-700 transition-colors"
+          >
+            Presupuestos
+          </Link>
+          <ChevronRight className="w-4 h-4 mx-2" />
+          <span className="text-gray-900 font-medium">{presupuesto.codigo}</span>
+        </nav>
+
+        {/* Header */}
+        <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
+          <div className="flex items-start justify-between">
+            <div className="flex-1">
+              <div className="flex items-center gap-3 mb-2">
+                <h1 className="text-2xl font-bold text-gray-900">{presupuesto.nombre}</h1>
+                <span
+                  className={clsx(
+                    'px-3 py-1 text-sm font-medium rounded-full',
+                    estadoColors[presupuesto.estado]
+                  )}
+                >
+                  {estadoLabels[presupuesto.estado]}
+                </span>
+                <span className="px-2 py-1 text-sm font-medium bg-purple-100 text-purple-800 rounded-full">
+                  v{presupuesto.version}
+                </span>
+              </div>
+              <p className="text-gray-500">Codigo: {presupuesto.codigo}</p>
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => navigate('/admin/presupuestos/presupuestos')}
+                className="flex items-center px-4 py-2 text-gray-700 border rounded-lg hover:bg-gray-50 transition-colors"
+              >
+                <ArrowLeft className="w-4 h-4 mr-2" />
+                Volver
+              </button>
+              {canEdit && (
+                <button
+                  onClick={() => navigate(`/admin/presupuestos/presupuestos/${id}/edit`)}
+                  className="flex items-center px-4 py-2 text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 transition-colors"
+                >
+                  <Pencil className="w-4 h-4 mr-2" />
+                  Editar
+                </button>
+              )}
+              {canCreateVersion && (
+                <button
+                  onClick={() => setShowVersionModal(true)}
+                  className="flex items-center px-4 py-2 text-purple-600 border border-purple-600 rounded-lg hover:bg-purple-50 transition-colors"
+                >
+                  <Copy className="w-4 h-4 mr-2" />
+                  Nueva Version
+                </button>
+              )}
+              {canApprove && (
+                <button
+                  onClick={() => setShowApproveModal(true)}
+                  className="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
+                >
+                  <CheckCircle className="w-4 h-4 mr-2" />
+                  Aprobar
+                </button>
+              )}
+              <div className="relative">
+                <button
+                  onClick={handleExportPdf}
+                  disabled={exportPdfMutation.isPending}
+                  className="flex items-center px-4 py-2 text-gray-700 border rounded-lg hover:bg-gray-50 transition-colors"
+                  title="Exportar PDF"
+                >
+                  <FileDown className="w-4 h-4" />
+                </button>
+              </div>
+              <button
+                onClick={handleExportExcel}
+                disabled={exportExcelMutation.isPending}
+                className="flex items-center px-4 py-2 text-gray-700 border rounded-lg hover:bg-gray-50 transition-colors"
+                title="Exportar Excel"
+              >
+                <FileSpreadsheet className="w-4 h-4" />
+              </button>
+              <button
+                onClick={() => setShowVersionSidebar(!showVersionSidebar)}
+                className={clsx(
+                  'flex items-center px-4 py-2 border rounded-lg transition-colors',
+                  showVersionSidebar
+                    ? 'bg-blue-50 text-blue-600 border-blue-600'
+                    : 'text-gray-700 hover:bg-gray-50'
+                )}
+                title="Historial de versiones"
+              >
+                <History className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* General Info Card */}
+        <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
+          <h2 className="text-lg font-semibold text-gray-900 mb-4">Informacion General</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div>
+              <label className="flex items-center text-sm text-gray-500 mb-1">
+                <Building2 className="w-4 h-4 mr-1" />
+                Fraccionamiento
+              </label>
+              <p className="text-gray-900 font-medium">
+                {(presupuesto as any).fraccionamiento?.nombre || 'Sin asignar'}
+              </p>
+            </div>
+            <div>
+              <label className="flex items-center text-sm text-gray-500 mb-1">
+                <Home className="w-4 h-4 mr-1" />
+                Prototipo
+              </label>
+              <p className="text-gray-900 font-medium">
+                {(presupuesto as any).prototipo?.nombre || 'Sin asignar'}
+              </p>
+            </div>
+            <div>
+              <label className="flex items-center text-sm text-gray-500 mb-1">
+                <Calendar className="w-4 h-4 mr-1" />
+                Fecha de Creacion
+              </label>
+              <p className="text-gray-900 font-medium">{formatDate(presupuesto.fechaCreacion)}</p>
+            </div>
+            <div>
+              <label className="flex items-center text-sm text-gray-500 mb-1">
+                <Calendar className="w-4 h-4 mr-1" />
+                Ultima Modificacion
+              </label>
+              <p className="text-gray-900 font-medium">{formatDate(presupuesto.updatedAt)}</p>
+            </div>
+          </div>
+          <div className="mt-6 pt-6 border-t">
+            <div className="flex items-center justify-between">
+              <label className="flex items-center text-sm text-gray-500">
+                <DollarSign className="w-4 h-4 mr-1" />
+                Monto Total
+              </label>
+              <p className="text-2xl font-bold text-gray-900">
+                {formatCurrency(presupuesto.montoTotal)}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Partidas Table */}
+        <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-2">
+              <Package className="w-5 h-5 text-gray-500" />
+              <h2 className="text-lg font-semibold text-gray-900">Partidas del Presupuesto</h2>
+              <span className="text-sm text-gray-500">({partidas.length} partidas)</span>
+            </div>
+            {canEdit && (
+              <button
+                onClick={() => {
+                  setEditingPartida(null);
+                  setShowPartidaModal(true);
+                }}
+                className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+              >
+                <Plus className="w-4 h-4 mr-2" />
+                Agregar Partida
+              </button>
+            )}
+          </div>
+
+          {partidas.length === 0 ? (
+            <div className="text-center py-12">
+              <Package className="w-12 h-12 text-gray-300 mx-auto mb-3" />
+              <p className="text-gray-500 mb-4">No hay partidas en este presupuesto</p>
+              {canEdit && (
+                <button
+                  onClick={() => setShowPartidaModal(true)}
+                  className="text-blue-600 hover:text-blue-700 font-medium"
+                >
+                  Agregar la primera partida
+                </button>
+              )}
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <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 w-40">
+                      Codigo
+                    </th>
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                      Descripcion
+                    </th>
+                    <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-24">
+                      Unidad
+                    </th>
+                    <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase w-28">
+                      Cantidad
+                    </th>
+                    <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase w-36">
+                      Precio Unitario
+                    </th>
+                    <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase w-40">
+                      Importe
+                    </th>
+                    {canEdit && (
+                      <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase w-24">
+                        Acciones
+                      </th>
+                    )}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200">
+                  {partidas.map((partida) => {
+                    const hasChildren =
+                      partida.children && partida.children.length > 0;
+                    const isExpanded = expandedConceptos.has(partida.concepto?.id || '');
+                    const isCapitulo = partida.concepto?.tipo === 'capitulo';
+
+                    return (
+                      <tr
+                        key={partida.id}
+                        className={clsx(
+                          'hover:bg-gray-50 transition-colors',
+                          isCapitulo && 'bg-gray-50 font-semibold'
+                        )}
+                      >
+                        <td className="px-4 py-3 whitespace-nowrap text-sm">
+                          <div
+                            className="flex items-center"
+                            style={{ paddingLeft: `${partida.level * 20}px` }}
+                          >
+                            {hasChildren && (
+                              <button
+                                onClick={() => toggleConcepto(partida.concepto?.id || '')}
+                                className="p-1 mr-1 hover:bg-gray-200 rounded"
+                              >
+                                {isExpanded ? (
+                                  <ChevronDown className="w-4 h-4" />
+                                ) : (
+                                  <ChevronRight className="w-4 h-4" />
+                                )}
+                              </button>
+                            )}
+                            <span className="font-mono text-gray-900">
+                              {partida.concepto?.codigo || '-'}
+                            </span>
+                          </div>
+                        </td>
+                        <td className="px-4 py-3 text-sm text-gray-900">
+                          {partida.concepto?.descripcion || '-'}
+                        </td>
+                        <td className="px-4 py-3 text-sm text-gray-500 text-center">
+                          {partida.concepto?.unidad || '-'}
+                        </td>
+                        <td className="px-4 py-3 text-sm text-gray-900 text-right">
+                          {partida.cantidad.toLocaleString('es-MX', {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 4,
+                          })}
+                        </td>
+                        <td className="px-4 py-3 text-sm text-gray-900 text-right">
+                          {formatCurrency(partida.precioUnitario)}
+                        </td>
+                        <td className="px-4 py-3 text-sm font-medium text-gray-900 text-right">
+                          {formatCurrency(partida.importe)}
+                        </td>
+                        {canEdit && (
+                          <td className="px-4 py-3 text-right">
+                            <div className="flex items-center justify-end gap-1">
+                              <button
+                                onClick={() => {
+                                  setEditingPartida(partida);
+                                  setShowPartidaModal(true);
+                                }}
+                                className="p-1.5 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded"
+                                title="Editar"
+                              >
+                                <Pencil className="w-4 h-4" />
+                              </button>
+                              <button
+                                onClick={() => setDeleteConfirm(partida.id)}
+                                className="p-1.5 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded"
+                                title="Eliminar"
+                              >
+                                <Trash2 className="w-4 h-4" />
+                              </button>
+                            </div>
+                          </td>
+                        )}
+                      </tr>
+                    );
+                  })}
+                </tbody>
+                <tfoot className="bg-gray-100">
+                  <tr>
+                    <td
+                      colSpan={canEdit ? 5 : 4}
+                      className="px-4 py-3 text-right text-sm font-semibold text-gray-900"
+                    >
+                      TOTAL GENERAL:
+                    </td>
+                    <td className="px-4 py-3 text-right text-lg font-bold text-gray-900">
+                      {formatCurrency(grandTotal)}
+                    </td>
+                    {canEdit && <td></td>}
+                  </tr>
+                </tfoot>
+              </table>
+            </div>
+          )}
+        </div>
+
+        {/* Approval Section */}
+        {canApprove && (
+          <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
+            <h2 className="text-lg font-semibold text-gray-900 mb-4">Aprobacion</h2>
+            <p className="text-gray-600 mb-4">
+              Este presupuesto esta en revision y puede ser aprobado o rechazado.
+            </p>
+            <div className="flex gap-3">
+              <button
+                onClick={() => setShowApproveModal(true)}
+                className="flex items-center px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
+              >
+                <CheckCircle className="w-5 h-5 mr-2" />
+                Aprobar Presupuesto
+              </button>
+              <button
+                onClick={() => setShowRejectModal(true)}
+                className="flex items-center px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+              >
+                <XCircle className="w-5 h-5 mr-2" />
+                Rechazar
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Version History Sidebar */}
+      <div
+        className={clsx(
+          'fixed right-0 top-0 h-full w-80 bg-white shadow-lg transform transition-transform duration-300 z-40',
+          showVersionSidebar ? 'translate-x-0' : 'translate-x-full'
+        )}
+      >
+        <div className="p-6 border-b">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-semibold text-gray-900">Historial de Versiones</h3>
+            <button
+              onClick={() => setShowVersionSidebar(false)}
+              className="p-1 text-gray-500 hover:text-gray-700 rounded"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+        <div className="p-6 overflow-y-auto h-[calc(100%-80px)]">
+          {versions && versions.length > 0 ? (
+            <div className="space-y-4">
+              {versions.map((version) => (
+                <VersionCard
+                  key={version.id}
+                  version={version}
+                  isCurrent={version.version === presupuesto.version}
+                  onSelect={() => {
+                    if (version.id !== presupuesto.id) {
+                      navigate(`/admin/presupuestos/presupuestos/${version.id}`);
+                    }
+                  }}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-8">
+              <History className="w-12 h-12 text-gray-300 mx-auto mb-3" />
+              <p className="text-gray-500">No hay versiones anteriores</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Partida Modal */}
+      {showPartidaModal && (
+        <PartidaModal
+          partida={editingPartida}
+          onClose={() => {
+            setShowPartidaModal(false);
+            setEditingPartida(null);
+          }}
+          onSubmit={
+            editingPartida
+              ? (data) => handleUpdatePartida(editingPartida.id, data)
+              : handleAddPartida
+          }
+          isLoading={addPartidaMutation.isPending || updatePartidaMutation.isPending}
+        />
+      )}
+
+      {/* Delete Confirmation */}
+      {deleteConfirm && (
+        <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">Confirmar eliminacion</h3>
+            <p className="text-gray-600 mb-6">
+              ¿Esta seguro de eliminar esta partida del presupuesto?
+            </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={() => setDeleteConfirm(null)}
+              >
+                Cancelar
+              </button>
+              <button
+                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
+                onClick={() => handleDeletePartida(deleteConfirm)}
+                disabled={deletePartidaMutation.isPending}
+              >
+                {deletePartidaMutation.isPending ? 'Eliminando...' : 'Eliminar'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Approve Modal */}
+      {showApproveModal && (
+        <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">
+            <div className="flex items-center gap-3 mb-4">
+              <CheckCircle className="w-6 h-6 text-green-600" />
+              <h3 className="text-lg font-semibold">Aprobar Presupuesto</h3>
+            </div>
+            <p className="text-gray-600 mb-6">
+              ¿Esta seguro de aprobar este presupuesto? Una vez aprobado, no podra ser editado
+              directamente. Debera crear una nueva version para realizar cambios.
+            </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={() => setShowApproveModal(false)}
+              >
+                Cancelar
+              </button>
+              <button
+                className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
+                onClick={handleApprove}
+                disabled={approveMutation.isPending}
+              >
+                {approveMutation.isPending ? 'Aprobando...' : 'Aprobar'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Reject Modal */}
+      {showRejectModal && (
+        <RejectModal
+          onClose={() => setShowRejectModal(false)}
+          onSubmit={handleReject}
+          isLoading={rejectMutation.isPending}
+        />
+      )}
+
+      {/* Create Version Modal */}
+      {showVersionModal && (
+        <CreateVersionModal
+          onClose={() => setShowVersionModal(false)}
+          onSubmit={handleCreateVersion}
+          isLoading={createVersionMutation.isPending}
+        />
+      )}
+    </div>
+  );
+}
+
+interface VersionCardProps {
+  version: PresupuestoVersion;
+  isCurrent: boolean;
+  onSelect: () => void;
+}
+
+function VersionCard({ version, isCurrent, onSelect }: VersionCardProps) {
+  return (
+    <div
+      onClick={onSelect}
+      className={clsx(
+        'p-4 rounded-lg border cursor-pointer transition-colors',
+        isCurrent
+          ? 'border-blue-500 bg-blue-50'
+          : 'border-gray-200 hover:border-blue-300 hover:bg-gray-50'
+      )}
+    >
+      <div className="flex items-center justify-between mb-2">
+        <span className="font-semibold text-gray-900">Version {version.version}</span>
+        {isCurrent && (
+          <span className="px-2 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
+            Actual
+          </span>
+        )}
+      </div>
+      <div className="text-sm text-gray-500 mb-1">
+        {formatDate(version.fechaCreacion)}
+      </div>
+      <div className="text-sm font-medium text-gray-900">
+        {formatCurrency(version.montoTotal)}
+      </div>
+      <div className="mt-2">
+        <span
+          className={clsx(
+            'px-2 py-0.5 text-xs font-medium rounded-full',
+            estadoColors[version.estado]
+          )}
+        >
+          {estadoLabels[version.estado]}
+        </span>
+      </div>
+      {version.notas && (
+        <p className="mt-2 text-xs text-gray-500 line-clamp-2">{version.notas}</p>
+      )}
+    </div>
+  );
+}
+
+interface PartidaModalProps {
+  partida: PresupuestoPartida | null;
+  onClose: () => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onSubmit: (data: any) => Promise<void>;
+  isLoading: boolean;
+}
+
+function PartidaModal({ partida, onClose, onSubmit, isLoading }: PartidaModalProps) {
+  const [conceptoSearch, setConceptoSearch] = useState('');
+  const [selectedConcepto, setSelectedConcepto] = useState<Concepto | null>(
+    partida?.concepto || null
+  );
+  const [cantidad, setCantidad] = useState(partida?.cantidad?.toString() || '');
+  const [precioUnitario, setPrecioUnitario] = useState(
+    partida?.precioUnitario?.toString() || ''
+  );
+  const [showConceptoDropdown, setShowConceptoDropdown] = useState(false);
+
+  const { data: conceptosTree } = useConceptosTree();
+
+  const filteredConceptos = useMemo(() => {
+    if (!conceptosTree) return [];
+
+    const flattenTree = (conceptos: Concepto[]): Concepto[] => {
+      return conceptos.reduce<Concepto[]>((acc, concepto) => {
+        acc.push(concepto);
+        if (concepto.children && concepto.children.length > 0) {
+          acc.push(...flattenTree(concepto.children));
+        }
+        return acc;
+      }, []);
+    };
+
+    const allConceptos = flattenTree(conceptosTree);
+
+    if (!conceptoSearch) return allConceptos.slice(0, 20);
+
+    const searchLower = conceptoSearch.toLowerCase();
+    return allConceptos
+      .filter(
+        (c) =>
+          c.codigo.toLowerCase().includes(searchLower) ||
+          c.descripcion.toLowerCase().includes(searchLower)
+      )
+      .slice(0, 20);
+  }, [conceptosTree, conceptoSearch]);
+
+  const importe = useMemo(() => {
+    const cant = parseFloat(cantidad) || 0;
+    const precio = parseFloat(precioUnitario) || 0;
+    return cant * precio;
+  }, [cantidad, precioUnitario]);
+
+  const handleSelectConcepto = (concepto: Concepto) => {
+    setSelectedConcepto(concepto);
+    setConceptoSearch('');
+    setShowConceptoDropdown(false);
+    if (concepto.precioUnitario && !precioUnitario) {
+      setPrecioUnitario(concepto.precioUnitario.toString());
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (partida) {
+      await onSubmit({
+        cantidad: parseFloat(cantidad),
+        precioUnitario: parseFloat(precioUnitario),
+      });
+    } else {
+      if (!selectedConcepto) return;
+      await onSubmit({
+        conceptoId: selectedConcepto.id,
+        cantidad: parseFloat(cantidad),
+        precioUnitario: parseFloat(precioUnitario),
+      });
+    }
+  };
+
+  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-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold">
+            {partida ? 'Editar Partida' : 'Agregar Partida'}
+          </h3>
+          <button
+            onClick={onClose}
+            className="p-1 text-gray-500 hover:text-gray-700 rounded"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Concepto Selection */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Concepto *
+            </label>
+            {partida ? (
+              <div className="px-4 py-3 bg-gray-50 rounded-lg border">
+                <div className="font-mono text-sm text-gray-500">
+                  {selectedConcepto?.codigo}
+                </div>
+                <div className="font-medium text-gray-900">
+                  {selectedConcepto?.descripcion}
+                </div>
+              </div>
+            ) : (
+              <div className="relative">
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                  <input
+                    type="text"
+                    placeholder="Buscar concepto por codigo o descripcion..."
+                    className="w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    value={conceptoSearch}
+                    onChange={(e) => {
+                      setConceptoSearch(e.target.value);
+                      setShowConceptoDropdown(true);
+                    }}
+                    onFocus={() => setShowConceptoDropdown(true)}
+                  />
+                </div>
+
+                {selectedConcepto && (
+                  <div className="mt-2 px-4 py-3 bg-blue-50 rounded-lg border border-blue-200">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <div className="font-mono text-sm text-blue-600">
+                          {selectedConcepto.codigo}
+                        </div>
+                        <div className="font-medium text-gray-900">
+                          {selectedConcepto.descripcion}
+                        </div>
+                        {selectedConcepto.unidad && (
+                          <div className="text-sm text-gray-500">
+                            Unidad: {selectedConcepto.unidad}
+                          </div>
+                        )}
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => setSelectedConcepto(null)}
+                        className="p-1 text-gray-500 hover:text-red-600 rounded"
+                      >
+                        <X className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+                )}
+
+                {showConceptoDropdown && !selectedConcepto && (
+                  <div className="absolute z-10 w-full mt-1 bg-white border rounded-lg shadow-lg max-h-60 overflow-y-auto">
+                    {filteredConceptos.length === 0 ? (
+                      <div className="px-4 py-3 text-gray-500 text-center">
+                        No se encontraron conceptos
+                      </div>
+                    ) : (
+                      filteredConceptos.map((concepto) => (
+                        <button
+                          key={concepto.id}
+                          type="button"
+                          onClick={() => handleSelectConcepto(concepto)}
+                          className="w-full px-4 py-2 text-left hover:bg-gray-50 border-b last:border-b-0"
+                        >
+                          <div className="font-mono text-sm text-gray-500">
+                            {concepto.codigo}
+                          </div>
+                          <div className="text-sm text-gray-900 truncate">
+                            {concepto.descripcion}
+                          </div>
+                          {concepto.unidad && (
+                            <div className="text-xs text-gray-500">
+                              Unidad: {concepto.unidad}
+                              {concepto.precioUnitario &&
+                                ` | P.U.: ${formatCurrency(concepto.precioUnitario)}`}
+                            </div>
+                          )}
+                        </button>
+                      ))
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Cantidad and Precio Unitario */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Cantidad *
+              </label>
+              <input
+                type="number"
+                step="0.0001"
+                min="0"
+                required
+                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="0.00"
+                value={cantidad}
+                onChange={(e) => setCantidad(e.target.value)}
+              />
+              {selectedConcepto?.unidad && (
+                <p className="text-xs text-gray-500 mt-1">
+                  Unidad: {selectedConcepto.unidad}
+                </p>
+              )}
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Precio Unitario *
+              </label>
+              <div className="relative">
+                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
+                  $
+                </span>
+                <input
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  required
+                  className="w-full pl-8 pr-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  placeholder="0.00"
+                  value={precioUnitario}
+                  onChange={(e) => setPrecioUnitario(e.target.value)}
+                />
+              </div>
+              {selectedConcepto?.precioUnitario && (
+                <p className="text-xs text-gray-500 mt-1">
+                  Precio catalogo: {formatCurrency(selectedConcepto.precioUnitario)}
+                </p>
+              )}
+            </div>
+          </div>
+
+          {/* Importe (calculated) */}
+          <div className="bg-gray-50 rounded-lg p-4">
+            <div className="flex items-center justify-between">
+              <label className="text-sm font-medium text-gray-700">Importe Calculado</label>
+              <span className="text-xl font-bold text-gray-900">{formatCurrency(importe)}</span>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-3 pt-4 border-t">
+            <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 || (!partida && !selectedConcepto)}
+            >
+              {isLoading ? 'Guardando...' : partida ? 'Guardar Cambios' : 'Agregar Partida'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+interface RejectModalProps {
+  onClose: () => void;
+  onSubmit: (motivo: string) => Promise<void>;
+  isLoading: boolean;
+}
+
+function RejectModal({ onClose, onSubmit, isLoading }: RejectModalProps) {
+  const [motivo, setMotivo] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await onSubmit(motivo);
+  };
+
+  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">
+        <div className="flex items-center gap-3 mb-4">
+          <XCircle className="w-6 h-6 text-red-600" />
+          <h3 className="text-lg font-semibold">Rechazar Presupuesto</h3>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Motivo del Rechazo *
+            </label>
+            <textarea
+              required
+              rows={4}
+              className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500"
+              placeholder="Indique el motivo por el cual se rechaza el presupuesto..."
+              value={motivo}
+              onChange={(e) => setMotivo(e.target.value)}
+            />
+          </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-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
+              disabled={isLoading || !motivo.trim()}
+            >
+              {isLoading ? 'Rechazando...' : 'Rechazar'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+interface CreateVersionModalProps {
+  onClose: () => void;
+  onSubmit: (notas?: string) => Promise<void>;
+  isLoading: boolean;
+}
+
+function CreateVersionModal({ onClose, onSubmit, isLoading }: CreateVersionModalProps) {
+  const [notas, setNotas] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await onSubmit(notas || undefined);
+  };
+
+  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">
+        <div className="flex items-center gap-3 mb-4">
+          <Copy className="w-6 h-6 text-purple-600" />
+          <h3 className="text-lg font-semibold">Crear Nueva Version</h3>
+        </div>
+
+        <p className="text-gray-600 mb-4">
+          Se creara una copia editable de este presupuesto con un nuevo numero de version.
+        </p>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Notas (opcional)
+            </label>
+            <textarea
+              rows={3}
+              className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+              placeholder="Describa los cambios que se realizaran en esta version..."
+              value={notas}
+              onChange={(e) => setNotas(e.target.value)}
+            />
+          </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-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
+              disabled={isLoading}
+            >
+              {isLoading ? 'Creando...' : 'Crear Version'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/pages/admin/presupuestos/PresupuestosPage.tsx b/web/src/pages/admin/presupuestos/PresupuestosPage.tsx
index 8c87090..ec41456 100644
--- a/web/src/pages/admin/presupuestos/PresupuestosPage.tsx
+++ b/web/src/pages/admin/presupuestos/PresupuestosPage.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 import {
   Plus,
   Pencil,
@@ -197,12 +198,13 @@ export function PresupuestosPage() {
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap text-right">
                     <div className="flex items-center justify-end gap-1">
-                      <button
+                      <Link
+                        to={`/admin/presupuestos/presupuestos/${item.id}`}
                         className="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg"
                         title="Ver detalle"
                       >
                         <Eye className="w-4 h-4" />
-                      </button>
+                      </Link>
                       {item.estado === 'revision' && (
                         <button
                           className="p-2 text-gray-500 hover:text-green-600 hover:bg-green-50 rounded-lg"
diff --git a/web/src/pages/admin/presupuestos/index.ts b/web/src/pages/admin/presupuestos/index.ts
index 6c56f18..dd5e716 100644
--- a/web/src/pages/admin/presupuestos/index.ts
+++ b/web/src/pages/admin/presupuestos/index.ts
@@ -1,3 +1,4 @@
 export { ConceptosPage } from './ConceptosPage';
 export { PresupuestosPage } from './PresupuestosPage';
+export { PresupuestoDetailPage } from './PresupuestoDetailPage';
 export { EstimacionesPage } from './EstimacionesPage';
diff --git a/web/src/services/presupuestos/presupuestos.api.ts b/web/src/services/presupuestos/presupuestos.api.ts
index a517e2b..bca0fdf 100644
--- a/web/src/services/presupuestos/presupuestos.api.ts
+++ b/web/src/services/presupuestos/presupuestos.api.ts
@@ -139,6 +139,50 @@ export const conceptosApi = {
 // API DE PRESUPUESTOS
 // ===========================
 
+// ===========================
+// TIPOS PARA PARTIDAS DE PRESUPUESTO
+// ===========================
+
+export interface CreatePresupuestoPartidaDto {
+  conceptoId: string;
+  cantidad: number;
+  precioUnitario: number;
+  orden?: number;
+}
+
+export interface UpdatePresupuestoPartidaDto {
+  cantidad?: number;
+  precioUnitario?: number;
+  orden?: number;
+}
+
+// ===========================
+// TIPOS PARA VERSIONES
+// ===========================
+
+export interface PresupuestoVersion {
+  id: string;
+  presupuestoId: string;
+  version: number;
+  estado: PresupuestoEstado;
+  montoTotal: number;
+  fechaCreacion: string;
+  creadoPor?: string;
+  notas?: string;
+}
+
+// ===========================
+// TIPOS PARA APROBACION/RECHAZO
+// ===========================
+
+export interface RejectPresupuestoDto {
+  motivo: string;
+}
+
+// ===========================
+// API DE PRESUPUESTOS
+// ===========================
+
 export const presupuestosApi = {
   list: async (filters?: PresupuestoFilters): Promise<PaginatedResponse<Presupuesto>> => {
     const response = await api.get<PaginatedResponse<Presupuesto>>('/presupuestos', {
@@ -152,6 +196,11 @@ export const presupuestosApi = {
     return response.data;
   },
 
+  getWithPartidas: async (id: string): Promise<Presupuesto> => {
+    const response = await api.get<Presupuesto>(`/presupuestos/${id}?include=partidas,partidas.concepto`);
+    return response.data;
+  },
+
   create: async (data: CreatePresupuestoDto): Promise<Presupuesto> => {
     const response = await api.post<Presupuesto>('/presupuestos', data);
     return response.data;
@@ -171,8 +220,59 @@ export const presupuestosApi = {
     return response.data;
   },
 
+  reject: async (id: string, data: RejectPresupuestoDto): Promise<Presupuesto> => {
+    const response = await api.post<Presupuesto>(`/presupuestos/${id}/reject`, data);
+    return response.data;
+  },
+
   duplicate: async (id: string): Promise<Presupuesto> => {
     const response = await api.post<Presupuesto>(`/presupuestos/${id}/duplicate`);
     return response.data;
   },
+
+  createVersion: async (id: string, notas?: string): Promise<Presupuesto> => {
+    const response = await api.post<Presupuesto>(`/presupuestos/${id}/version`, { notas });
+    return response.data;
+  },
+
+  getVersions: async (id: string): Promise<PresupuestoVersion[]> => {
+    const response = await api.get<PresupuestoVersion[]>(`/presupuestos/${id}/versions`);
+    return response.data;
+  },
+
+  exportPdf: async (id: string): Promise<Blob> => {
+    const response = await api.get(`/presupuestos/${id}/export/pdf`, {
+      responseType: 'blob',
+    });
+    return response.data;
+  },
+
+  exportExcel: async (id: string): Promise<Blob> => {
+    const response = await api.get(`/presupuestos/${id}/export/excel`, {
+      responseType: 'blob',
+    });
+    return response.data;
+  },
+
+  // Partidas
+  addPartida: async (id: string, data: CreatePresupuestoPartidaDto): Promise<PresupuestoPartida> => {
+    const response = await api.post<PresupuestoPartida>(`/presupuestos/${id}/partidas`, data);
+    return response.data;
+  },
+
+  updatePartida: async (
+    presupuestoId: string,
+    partidaId: string,
+    data: UpdatePresupuestoPartidaDto
+  ): Promise<PresupuestoPartida> => {
+    const response = await api.patch<PresupuestoPartida>(
+      `/presupuestos/${presupuestoId}/partidas/${partidaId}`,
+      data
+    );
+    return response.data;
+  },
+
+  deletePartida: async (presupuestoId: string, partidaId: string): Promise<void> => {
+    await api.delete(`/presupuestos/${presupuestoId}/partidas/${partidaId}`);
+  },
 };