feat(web): ProtectedRoute extraído + router migrado + CreateUserPage cleanup [UDT-006]

src/web/src/router.tsx

@@ -1,5 +1,6 @@
 import { Navigate, Route, Routes } from 'react-router-dom'
 import { useAuthStore } from './stores/authStore'
+import { ProtectedRoute } from './components/routing/ProtectedRoute'
 import { LoginPage } from './features/auth/pages/LoginPage'
 import { CreateUserPage } from './features/users/pages/CreateUserPage'
 import { RolesPage } from './features/roles/pages/RolesPage'
@@ -10,14 +11,6 @@ import { HomePage } from './pages/HomePage'
 import { PublicLayout } from './layouts/PublicLayout'
 import { ProtectedLayout } from './layouts/ProtectedLayout'
 
-function ProtectedRoute({ children }: { children: React.ReactNode }) {
-  const user = useAuthStore((s) => s.user)
-  if (!user) {
-    return <Navigate to="/login" replace />
-  }
-  return <>{children}</>
-}
-
 function PublicRoute({ children }: { children: React.ReactNode }) {
   const user = useAuthStore((s) => s.user)
   if (user) {
@@ -52,7 +45,7 @@ export function AppRoutes() {
       <Route
         path="/usuarios/nuevo"
         element={
-          <ProtectedRoute>
+          <ProtectedRoute requiredPermissions={['administracion:usuarios:gestionar']}>
             <ProtectedLayout>
               <CreateUserPage />
             </ProtectedLayout>
@@ -62,7 +55,7 @@ export function AppRoutes() {
       <Route
         path="/admin/roles"
         element={
-          <ProtectedRoute>
+          <ProtectedRoute requiredPermissions={['administracion:roles:gestionar']}>
             <ProtectedLayout>
               <RolesPage />
             </ProtectedLayout>
@@ -72,7 +65,7 @@ export function AppRoutes() {
       <Route
         path="/admin/roles/nuevo"
         element={
-          <ProtectedRoute>
+          <ProtectedRoute requiredPermissions={['administracion:roles:gestionar']}>
             <ProtectedLayout>
               <NewRolPage />
             </ProtectedLayout>
@@ -82,7 +75,7 @@ export function AppRoutes() {
       <Route
         path="/admin/roles/:codigo/editar"
         element={
-          <ProtectedRoute>
+          <ProtectedRoute requiredPermissions={['administracion:roles:gestionar']}>
             <ProtectedLayout>
               <EditRolPage />
             </ProtectedLayout>
@@ -92,7 +85,12 @@ export function AppRoutes() {
       <Route
         path="/admin/permisos"
         element={
-          <ProtectedRoute>
+          <ProtectedRoute
+            requiredPermissions={[
+              'administracion:roles_permisos:gestionar',
+              'administracion:permisos:ver',
+            ]}
+          >
             <ProtectedLayout>
               <RolPermisosPage />
             </ProtectedLayout>