ptechcore_ui 0.0.0

package/src/components/layout/Header.tsx

@@ -0,0 +1,202 @@
+import React, { useState } from 'react';
+import { Menu, Search, Bell, User, ChevronDown, LogOut, Settings } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { useToast } from '../../contexts/ToastContext';
+
+interface HeaderProps {
+  onMenuClick: () => void;
+  sidebarOpen: boolean;
+}
+
+const Header: React.FC<HeaderProps> = ({ onMenuClick, sidebarOpen }) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [notificationsOpen, setNotificationsOpen] = useState(false);
+  const navigate = useNavigate();
+  const { success } = useToast();
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    success('Déconnexion réussie');
+    navigate('/auth/login');
+  };
+
+  // Données utilisateur simulées (à remplacer par des vraies données)
+  const user = {
+    name: 'John Doe',
+    email: 'john@example.com',
+    avatar: null
+  };
+
+  const notifications = [
+    { id: 1, title: 'Nouvelle tâche assignée', time: '5 min', unread: true },
+    { id: 2, title: 'Réunion dans 30 minutes', time: '25 min', unread: true },
+    { id: 3, title: 'Rapport mensuel prêt', time: '1h', unread: false },
+  ];
+
+  return (
+    <header className="fixed top-0 left-0 right-0 z-30 bg-white border-b border-gray-200 h-16">
+      <div className="flex items-center justify-between h-full px-4">
+        {/* Left Section */}
+        <div className="flex items-center space-x-4">
+          {/* Menu Button */}
+          <button
+            onClick={onMenuClick}
+            className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
+          >
+            <Menu className="w-5 h-5 text-gray-600" />
+          </button>
+
+          {/* Logo/Brand */}
+          <div className="flex items-center space-x-2">
+            <div className="w-8 h-8 bg-[#8290A9] rounded-full flex items-center justify-center">
+              <span className="text-white font-bold text-sm">R</span>
+            </div>
+            <span className="font-bold text-xl text-gray-800 hidden sm:block">
+              Rewise
+            </span>
+          </div>
+        </div>
+
+        {/* Center Section - Search */}
+        <div className="hidden md:flex flex-1 max-w-lg mx-8">
+          <div className="relative w-full">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <input
+              type="text"
+              placeholder="Rechercher..."
+              className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#8290A9] focus:border-transparent"
+            />
+          </div>
+        </div>
+
+        {/* Right Section */}
+        <div className="flex items-center space-x-4">
+          {/* Search Button (mobile) */}
+          <button className="p-2 rounded-lg hover:bg-gray-100 transition-colors md:hidden">
+            <Search className="w-5 h-5 text-gray-600" />
+          </button>
+
+          {/* Notifications */}
+          <div className="relative">
+            <button
+              onClick={() => setNotificationsOpen(!notificationsOpen)}
+              className="p-2 rounded-lg hover:bg-gray-100 transition-colors relative"
+            >
+              <Bell className="w-5 h-5 text-gray-600" />
+              {notifications.some(n => n.unread) && (
+                <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
+              )}
+            </button>
+
+            {/* Notifications Dropdown */}
+            {notificationsOpen && (
+              <div className="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-40">
+                <div className="px-4 py-2 border-b border-gray-100">
+                  <h3 className="font-semibold text-gray-800">Notifications</h3>
+                </div>
+                <div className="max-h-64 overflow-y-auto">
+                  {notifications.map((notification) => (
+                    <div
+                      key={notification.id}
+                      className={`px-4 py-3 hover:bg-gray-50 cursor-pointer ${
+                        notification.unread ? 'bg-blue-50' : ''
+                      }`}
+                    >
+                      <div className="flex justify-between items-start">
+                        <p className={`text-sm ${notification.unread ? 'font-medium' : ''}`}>
+                          {notification.title}
+                        </p>
+                        <span className="text-xs text-gray-500">{notification.time}</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+                <div className="px-4 py-2 border-t border-gray-100">
+                  <button className="text-sm text-[#8290A9] hover:text-[#6B7C92]">
+                    Voir toutes les notifications
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* User Menu */}
+          <div className="relative">
+            <button
+              onClick={() => setDropdownOpen(!dropdownOpen)}
+              className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 transition-colors"
+            >
+              <div className="w-8 h-8 bg-[#8290A9] rounded-full flex items-center justify-center">
+                {user.avatar ? (
+                  <img src={user.avatar} alt={user.name} className="w-8 h-8 rounded-full" />
+                ) : (
+                  <User className="w-4 h-4 text-white" />
+                )}
+              </div>
+              <div className="hidden sm:block text-left">
+                <p className="text-sm font-medium text-gray-700">{user.name}</p>
+              </div>
+              <ChevronDown className="w-4 h-4 text-gray-500" />
+            </button>
+
+            {/* User Dropdown */}
+            {dropdownOpen && (
+              <div className="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-40">
+                <div className="px-4 py-3 border-b border-gray-100">
+                  <p className="font-medium text-gray-800">{user.name}</p>
+                  <p className="text-sm text-gray-500">{user.email}</p>
+                </div>
+                
+                <div className="py-2">
+                  <button 
+                    onClick={() => {
+                      navigate('/profile');
+                      setDropdownOpen(false);
+                    }}
+                    className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center space-x-2"
+                  >
+                    <User className="w-4 h-4" />
+                    <span>Mon profil</span>
+                  </button>
+                  <button 
+                    onClick={() => {
+                      navigate('/settings');
+                      setDropdownOpen(false);
+                    }}
+                    className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center space-x-2"
+                  >
+                    <Settings className="w-4 h-4" />
+                    <span>Paramètres</span>
+                  </button>
+                </div>
+                
+                <div className="border-t border-gray-100 py-2">
+                  <button
+                    onClick={handleLogout}
+                    className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center space-x-2"
+                  >
+                    <LogOut className="w-4 h-4" />
+                    <span>Se déconnecter</span>
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Click outside to close dropdowns */}
+      {(dropdownOpen || notificationsOpen) && (
+        <div
+          className="fixed inset-0 z-10"
+          onClick={() => {
+            setDropdownOpen(false);
+            setNotificationsOpen(false);
+          }}
+        />
+      )}
+    </header>
+  );
+};
+
+export default Header;