consultoria-as/GRH
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Audito dashboard and OPERATOR permissions

Browse Source
This commit is contained in:
Esteban
2026-02-02 23:23:45 -06:00
parent b273003366
commit 9ab1beeef7
8 changed files with 314 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/layout/Sidebar.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from "react";
import { useState, useMemo } from "react";
import {
Home,
Settings,
@@ -8,6 +8,7 @@ import {
People,
} from "@mui/icons-material";
import { Page } from "../../App";
import { getCurrentUserRole } from "../../api/auth";
interface SidebarProps {
setPage: (page: Page) => void;
@@ -19,6 +20,9 @@ export default function Sidebar({ setPage }: SidebarProps) {
const [pinned, setPinned] = useState(false);
const [hovered, setHovered] = useState(false);
const userRole = useMemo(() => getCurrentUserRole(), []);
const isOperator = userRole?.toUpperCase() === 'OPERATOR';
const isExpanded = pinned || hovered;
return (
@@ -115,56 +119,59 @@ export default function Sidebar({ setPage }: SidebarProps) {
</button>
</li>
<li>
<button
onClick={() => setPage("auditoria")}
className="pl-10 w-full text-left px-2 py-1.5 rounded-md hover:bg-white/10"
>
Auditoría
</button>
</li>
{!isOperator && (
<li>
<button
onClick={() => setPage("auditoria")}
className="pl-10 w-full text-left px-2 py-1.5 rounded-md hover:bg-white/10"
>
Auditoría
</button>
</li>
)}
</ul>
)}
</li>
{/* USERS MANAGEMENT */}
<li>
<button
onClick={() => isExpanded && setUsersOpen(!usersOpen)}
className="flex items-center w-full px-2 py-2 rounded-md hover:bg-white/10 font-bold"
>
<People className="w-5 h-5 shrink-0" />
{isExpanded && (
<>
<span className="ml-3 flex-1 text-left">
Users Management
</span>
{usersOpen ? <ExpandLess /> : <ExpandMore />}
</>
{!isOperator && (
<li>
<button
onClick={() => isExpanded && setUsersOpen(!usersOpen)}
className="flex items-center w-full px-2 py-2 rounded-md hover:bg-white/10 font-bold"
>
<People className="w-5 h-5 shrink-0" />
{isExpanded && (
<>
<span className="ml-3 flex-1 text-left">
Users Management
</span>
{usersOpen ? <ExpandLess /> : <ExpandMore />}
</>
)}
</button>
{isExpanded && usersOpen && (
<ul className="mt-1 space-y-1 text-xs">
<li>
<button
onClick={() => setPage("users")}
className="pl-10 w-full text-left px-2 py-1.5 rounded-md hover:bg-white/10"
>
Users
</button>
</li>
<li>
<button
onClick={() => setPage("roles")}
className="pl-10 w-full text-left px-2 py-1.5 rounded-md hover:bg-white/10"
>
Roles
</button>
</li>
</ul>
)}
</button>
{isExpanded && usersOpen && (
<ul className="mt-1 space-y-1 text-xs">
<li>
<button
onClick={() => setPage("users")}
className="pl-10 w-full text-left px-2 py-1.5 rounded-md hover:bg-white/10"
>
Users
</button>
</li>
<li>
<button
onClick={() => setPage("roles")}
className="pl-10 w-full text-left px-2 py-1.5 rounded-md hover:bg-white/10"
>
Roles
</button>
</li>
</ul>
)}
</li>
</li>
)}
</ul>
</div>
</aside>

5
src/components/layout/TopMenu.tsx
View File

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
import { Bell, User, LogOut } from "lucide-react";
import NotificationDropdown from "../NotificationDropdown";
import { useNotifications } from "../../hooks/useNotifications";
import ProjectBadge from "./common/ProjectBadge";
interface TopMenuProps {
page: string;
@@ -81,7 +82,7 @@ const TopMenu: React.FC<TopMenuProps> = ({
}}
>
{/* IZQUIERDA */}
<div className="flex items-center gap-2 text-sm font-medium opacity-90">
<div className="flex items-center gap-4 text-sm font-medium opacity-90">
{page !== "home" && (
<>
<span className="capitalize">{page}</span>
@@ -93,6 +94,8 @@ const TopMenu: React.FC<TopMenuProps> = ({
)}
</>
)}
<ProjectBadge />
</div>
{/* DERECHA */}

46
src/components/layout/common/ProjectBadge.tsx Normal file
View File

@@ -0,0 +1,46 @@
import { useEffect, useState } from "react";
import { Building2 } from "lucide-react";
import { getCurrentUserProjectId, getCurrentUserRole } from "../../../api/auth";
import { fetchProject } from "../../../api/projects";
interface Project {
id: string;
name: string;
}
export default function ProjectBadge() {
const [project, setProject] = useState<Project | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const loadProject = async () => {
const projectId = getCurrentUserProjectId();
const role = getCurrentUserRole();
if (role?.toUpperCase() !== 'ADMIN' && projectId) {
try {
const projectData = await fetchProject(projectId);
setProject(projectData);
} catch (err) {
console.error("Error loading user project:", err);
}
}
setLoading(false);
};
loadProject();
}, []);
if (loading || !project) {
return null;
}
return (
<div className="flex items-center gap-2 px-3 py-1.5 bg-blue-50 border border-blue-200 rounded-lg text-sm">
<Building2 size={16} className="text-blue-600" />
<span className="text-blue-900 font-medium">
Proyecto: <span className="font-semibold">{project.name}</span>
</span>
</div>
);
}