From 056045232c441443e787e7f4d5e2b6e05c831d5e Mon Sep 17 00:00:00 2001
From: dmolinari <dmolinari@eldia.com>
Date: Fri, 17 Apr 2026 12:36:48 -0300
Subject: [PATCH] feat(web): banners y routing puntos-de-venta

---
 src/web/src/components/layout/AppSidebar.tsx  |  7 ++++
 .../components/MedioInactivoBanner.tsx        | 19 ++++++++++
 .../components/PdvInactivoBanner.tsx          | 19 ++++++++++
 src/web/src/router.tsx                        | 38 +++++++++++++++++++
 4 files changed, 83 insertions(+)
 create mode 100644 src/web/src/features/puntos-de-venta/components/MedioInactivoBanner.tsx
 create mode 100644 src/web/src/features/puntos-de-venta/components/PdvInactivoBanner.tsx

diff --git a/src/web/src/components/layout/AppSidebar.tsx b/src/web/src/components/layout/AppSidebar.tsx
index 5516319..2b77f2e 100644
--- a/src/web/src/components/layout/AppSidebar.tsx
+++ b/src/web/src/components/layout/AppSidebar.tsx
@@ -14,6 +14,7 @@ import {
   PanelLeftOpen,
   Newspaper,
   Columns3,
+  Store,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { Badge } from '@/components/ui/badge'
@@ -61,6 +62,12 @@ const adminItems: NavItem[] = [
     icon: Columns3,
     requiredPermission: 'administracion:secciones:gestionar',
   },
+  {
+    label: 'Puntos de Venta',
+    href: '/admin/puntos-de-venta',
+    icon: Store,
+    requiredPermission: 'administracion:puntos_de_venta:gestionar',
+  },
 ]
 
 interface SidebarNavProps {
diff --git a/src/web/src/features/puntos-de-venta/components/MedioInactivoBanner.tsx b/src/web/src/features/puntos-de-venta/components/MedioInactivoBanner.tsx
new file mode 100644
index 0000000..ff84afc
--- /dev/null
+++ b/src/web/src/features/puntos-de-venta/components/MedioInactivoBanner.tsx
@@ -0,0 +1,19 @@
+import { AlertTriangle } from 'lucide-react'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+
+interface MedioInactivoBannerProps {
+  medioNombre: string
+}
+
+export function MedioInactivoBanner({ medioNombre }: MedioInactivoBannerProps) {
+  return (
+    <Alert variant="destructive" className="mb-4">
+      <AlertTriangle className="h-4 w-4" />
+      <AlertTitle>Medio desactivado</AlertTitle>
+      <AlertDescription>
+        El medio &quot;{medioNombre}&quot; está desactivado. Las operaciones de edición, activación y
+        desactivación de sus puntos de venta están bloqueadas hasta que se reactive el medio.
+      </AlertDescription>
+    </Alert>
+  )
+}
diff --git a/src/web/src/features/puntos-de-venta/components/PdvInactivoBanner.tsx b/src/web/src/features/puntos-de-venta/components/PdvInactivoBanner.tsx
new file mode 100644
index 0000000..1db71eb
--- /dev/null
+++ b/src/web/src/features/puntos-de-venta/components/PdvInactivoBanner.tsx
@@ -0,0 +1,19 @@
+import { AlertTriangle } from 'lucide-react'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+
+interface PdvInactivoBannerProps {
+  puntoDeVentaNombre: string
+}
+
+export function PdvInactivoBanner({ puntoDeVentaNombre }: PdvInactivoBannerProps) {
+  return (
+    <Alert variant="destructive" className="mb-4">
+      <AlertTriangle className="h-4 w-4" />
+      <AlertTitle>Punto de venta desactivado</AlertTitle>
+      <AlertDescription>
+        El punto de venta &quot;{puntoDeVentaNombre}&quot; está desactivado. Reactivalo para habilitar
+        nuevamente sus operaciones.
+      </AlertDescription>
+    </Alert>
+  )
+}
diff --git a/src/web/src/router.tsx b/src/web/src/router.tsx
index 8290b0c..6394d0f 100644
--- a/src/web/src/router.tsx
+++ b/src/web/src/router.tsx
@@ -21,6 +21,10 @@ import { SeccionesListPage } from './features/secciones/pages/SeccionesListPage'
 import { CreateSeccionPage } from './features/secciones/pages/CreateSeccionPage'
 import { EditSeccionPage } from './features/secciones/pages/EditSeccionPage'
 import { SeccionDetailPage } from './features/secciones/pages/SeccionDetailPage'
+import { PuntosDeVentaListPage } from './features/puntos-de-venta/pages/PuntosDeVentaListPage'
+import { CreatePuntoDeVentaPage } from './features/puntos-de-venta/pages/CreatePuntoDeVentaPage'
+import { PuntoDeVentaDetailPage } from './features/puntos-de-venta/pages/PuntoDeVentaDetailPage'
+import { EditPuntoDeVentaPage } from './features/puntos-de-venta/pages/EditPuntoDeVentaPage'
 import { HomePage } from './pages/HomePage'
 import { PublicLayout } from './layouts/PublicLayout'
 import { ProtectedLayout } from './layouts/ProtectedLayout'
@@ -240,6 +244,40 @@ export function AppRoutes() {
         }
       />
 
+      {/* Puntos de Venta routes */}
+      <Route
+        path="/admin/puntos-de-venta"
+        element={
+          <ProtectedPage requiredPermissions={['administracion:puntos_de_venta:gestionar']}>
+            <PuntosDeVentaListPage />
+          </ProtectedPage>
+        }
+      />
+      <Route
+        path="/admin/puntos-de-venta/nuevo"
+        element={
+          <ProtectedPage requiredPermissions={['administracion:puntos_de_venta:gestionar']}>
+            <CreatePuntoDeVentaPage />
+          </ProtectedPage>
+        }
+      />
+      <Route
+        path="/admin/puntos-de-venta/:id"
+        element={
+          <ProtectedPage requiredPermissions={['administracion:puntos_de_venta:gestionar']}>
+            <PuntoDeVentaDetailPage />
+          </ProtectedPage>
+        }
+      />
+      <Route
+        path="/admin/puntos-de-venta/:id/edit"
+        element={
+          <ProtectedPage requiredPermissions={['administracion:puntos_de_venta:gestionar']}>
+            <EditPuntoDeVentaPage />
+          </ProtectedPage>
+        }
+      />
+
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   )