ptechcore_ui 1.0.1 → 1.0.3

package/src/components/layout/Header.tsx

@@ -1,202 +0,0 @@
-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;