From 6938ee45059fb3b39c47ae5e7aeb4af2165a6f05 Mon Sep 17 00:00:00 2001
From: LeonG11 <kkacanov198@gmail.com>
Date: Tue, 26 May 2026 16:03:11 +0300
Subject: [PATCH] fix(frontend)remake header

---
 frontend/src/components/Header.jsx | 63 ++++++++++++++++++++++++------
 1 file changed, 52 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index 87ba502..d7ae336 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -1,12 +1,19 @@
-import CsvImporter from "./CsvImporter";
 import { useNavigate } from "react-router-dom";
-import { Search } from "lucide-react";
+import { Command, Contact } from "lucide-react";
+import { useState } from "react";
 
 export default function Header({ onRefresh, onOpenScanner }) {
   const navigate = useNavigate();
 
-  const handleLogout = () => {
+  const [isLogoutPromptOpen, setIsLogoutPromptOpen] = useState(false);
+
+  const openLogoutPrompt = () => {
+    setIsLogoutPromptOpen(true);
+  };
+
+  const handleLogoutClick = () => {
     localStorage.clear();
+    setIsLogoutPromptOpen(false);
     navigate("/login");
   };
 
@@ -15,18 +22,52 @@ export default function Header({ onRefresh, onOpenScanner }) {
     return savedUser ? JSON.parse(savedUser) : {};
   };
 
+  const IconButton = ({ Icon, label, onClick }) => {
+    return (
+      <button
+        onClick={onClick}
+        className="flex flex-col items-center gap-1 group "
+      >
+        <div className="w-10 h-10 rounded-full bg-slate-800 hover:bg-blue-300 flex items-center justify-center border-slate-700 transition-colors group-hover:border-slate-500">
+          <Icon className="w-6 h-6 text-slate-400 group-hover:text-slate-200 transition-colors" />
+        </div>
+        <span className="text-xs text-slate-400 group-hover:text-slate-200 transition-colors">
+          {label}
+        </span>
+      </button>
+    );
+  };
+
   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">
-            MRP
-          </h1>
+    <header className="w-full border-b 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 w-full">
+        <div className="w-1/4 flex items-center">
+          <div className="font-black text-2xl text-blue-400">Производство</div>
         </div>
-        <div className="relative flex items-center max-w-md w-72 md:w-96 group">
-          <Search className="absolute left-3.5 w-4 h-4 text-slate-500 group-focus-within:text-blue-500 transition-colors pointer-events-none" />
+        <div className="flex-1 flex items-center justify-center gap-6">
+          <IconButton Icon={Command} label="Заказы" />
+          <IconButton Icon={Contact} label="Персонал" />
+        </div>
+        <div className="w-1/4 flex justify-end">
+          <button
+            className="flex flex-row items-center gap-3 px-4 py-1.5 bg-slate-800 rounded-full font-medium border border-slate-700 text-slate-200 transition-colors group-hover:border-slate-500"
+            onClick={() => navigate("/profile")}
+          >
+            <div className="flex items-center justify-center w-5 h-5 rounded-full bg-sky-500 text-white text-xs font-bold uppercase shrink-0 select-none">
+              {user?.first_name ? user.first_name[0] : "A"}
+            </div>
+            <span className="whitespace-nowrap pr-1 text-xs">
+              Привет, {user?.first_name}!
+            </span>
+          </button>
+          <button
+            className="flex items-center justify-center w-5 h-5 gap-2 py-1.5 px-1.5 rounded-full bg-red-500 text-white text-xs font-bold uppercase shrink-0 select-none"
+            onClick={openLogoutPrompt}
+          >
+            x
+          </button>
         </div>
       </div>
     </header>