87 lines
3.5 KiB
React
87 lines
3.5 KiB
React
import CsvImporter from "./CsvImporter";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
export default function Header({ onRefresh, onOpenScanner }) {
|
|
const navigate = useNavigate();
|
|
|
|
const handleLogout = () => {
|
|
localStorage.clear();
|
|
navigate("/login");
|
|
};
|
|
|
|
const handleUser = () => {
|
|
const savedUser = localStorage.getItem("user");
|
|
return savedUser ? JSON.parse(savedUser) : {};
|
|
};
|
|
|
|
const user = handleUser();
|
|
|
|
return (
|
|
<header className="w-full border-b border-slate-800 bg-slate-950/60 backdrop-blur-xl sticky top-0 z-50">
|
|
<div className="max-w-[1440px] mx-auto px-4 md:px-8 h-16 md:h-20 flex justify-between items-center">
|
|
<div className="flex flex-col">
|
|
<h1 className="text-lg md:text-xl font-black text-white tracking-tighter">
|
|
VIPLIGHT <span className="text-blue-500">MRP</span>
|
|
</h1>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<div className="hidden md:block">
|
|
<CsvImporter onImported={onRefresh} />
|
|
</div>
|
|
<button
|
|
onClick={() => navigate("/add")}
|
|
className="hidden md:flex h-10 px-6 bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl font-bold text-xs items-center gap-2"
|
|
>
|
|
<span>+</span> НОВАЯ ПАНЕЛЬ
|
|
</button>
|
|
<button
|
|
onClick={onOpenScanner}
|
|
className="h-9 px-4 md:h-10 md:px-6 bg-blue-600 hover:bg-blue-500 text-white rounded-lg md:rounded-xl font-bold text-xs flex items-center gap-2"
|
|
>
|
|
<span>📷</span> СКАНЕР
|
|
</button>
|
|
|
|
{/* Блок пользователя */}
|
|
<div
|
|
onClick={() => navigate("/profile")}
|
|
className="flex items-center gap-4 border-l border-slate-800 pl-6"
|
|
>
|
|
<div className="text-right hidden sm:block">
|
|
<p className="text-sm font-bold text-white leading-tight">
|
|
{user.first_name} {user.last_name}
|
|
</p>
|
|
<p className="text-[10px] text-slate-400 font-medium uppercase tracking-widest mt-0.5">
|
|
{user.department} <span className="text-slate-600 mx-1">|</span>{" "}
|
|
{user.role}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="relative group">
|
|
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-black text-sm border-2 border-slate-800 cursor-pointer hover:border-blue-400 transition-all">
|
|
{user.first_name.charAt(0).toUpperCase()}
|
|
</div>
|
|
|
|
{/* Меню при наведении */}
|
|
<div className="absolute right-0 mt-2 w-48 py-2 bg-slate-900 border border-slate-800 rounded-xl shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all">
|
|
<div className="px-4 py-2 border-b border-slate-800 sm:hidden">
|
|
<p className="text-xs text-white font-bold">
|
|
{user.first_name}
|
|
</p>
|
|
<p className="text-[10px] text-slate-500">{user.role}</p>
|
|
</div>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="w-full text-left px-4 py-2 text-xs text-red-400 hover:bg-red-500/10"
|
|
>
|
|
Выйти из системы
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|