ptechcore_ui 0.0.0

package/src/pages/Settings.tsx

@@ -0,0 +1,382 @@
+import React, { useState } from 'react';
+import {
+  Bell,
+  Shield,
+  Palette,
+  Globe,
+  Monitor,
+  Moon,
+  Sun,
+  Eye,
+  Lock,
+  Smartphone,
+  Key,
+  Trash2,
+  Save,
+  AlertTriangle
+} from 'lucide-react';
+import { useToast } from '../contexts/ToastContext';
+
+const Settings: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('general');
+  const [loading, setLoading] = useState(false);
+  const { success, error: showError, warning } = useToast();
+
+  const [settings, setSettings] = useState({
+    // General Settings
+    language: 'fr',
+    timezone: 'Europe/Paris',
+    theme: 'light',
+    
+    // Notifications
+    emailNotifications: true,
+    pushNotifications: true,
+    weeklyReport: true,
+    taskReminders: true,
+    teamUpdates: false,
+    
+    // Privacy & Security
+    twoFactorAuth: false,
+    profileVisibility: 'team',
+    activityStatus: true,
+    dataSharing: false,
+    
+    // Appearance
+    sidebarCollapsed: false,
+    compactMode: false,
+    animations: true
+  });
+
+  const handleSettingChange = (key: string, value: any) => {
+    setSettings(prev => ({ ...prev, [key]: value }));
+  };
+
+  const handleSave = async () => {
+    setLoading(true);
+    try {
+      // Simuler un appel API
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      success('Paramètres sauvegardés avec succès !');
+    } catch (error) {
+      showError('Erreur lors de la sauvegarde des paramètres');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleResetPassword = () => {
+    warning('Un email de réinitialisation sera envoyé');
+  };
+
+  const handleDeleteAccount = () => {
+    showError('Fonctionnalité de suppression de compte non disponible');
+  };
+
+  const tabs = [
+    { id: 'general', label: 'Général', icon: Monitor },
+    { id: 'notifications', label: 'Notifications', icon: Bell },
+    { id: 'security', label: 'Sécurité', icon: Shield },
+    { id: 'appearance', label: 'Apparence', icon: Palette },
+    { id: 'privacy', label: 'Confidentialité', icon: Eye }
+  ];
+
+  const ToggleSwitch = ({ enabled, onChange, label, description }: {
+    enabled: boolean;
+    onChange: (value: boolean) => void;
+    label: string;
+    description?: string;
+  }) => (
+    <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+      <div>
+        <h4 className="font-medium text-gray-900">{label}</h4>
+        {description && <p className="text-sm text-gray-600">{description}</p>}
+      </div>
+      <button
+        onClick={() => onChange(!enabled)}
+        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+          enabled ? 'bg-[#8290A9]' : 'bg-gray-300'
+        }`}
+      >
+        <span
+          className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+            enabled ? 'translate-x-6' : 'translate-x-1'
+          }`}
+        />
+      </button>
+    </div>
+  );
+
+  const SelectField = ({ value, onChange, options, label }: {
+    value: string;
+    onChange: (value: string) => void;
+    options: { value: string; label: string }[];
+    label: string;
+  }) => (
+    <div>
+      <label className="block text-sm font-medium text-gray-700 mb-2">{label}</label>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#8290A9] focus:border-transparent"
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'general':
+        return (
+          <div className="space-y-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <SelectField
+                label="Langue"
+                value={settings.language}
+                onChange={(value) => handleSettingChange('language', value)}
+                options={[
+                  { value: 'fr', label: 'Français' },
+                  { value: 'en', label: 'English' },
+                  { value: 'es', label: 'Español' }
+                ]}
+              />
+              <SelectField
+                label="Fuseau horaire"
+                value={settings.timezone}
+                onChange={(value) => handleSettingChange('timezone', value)}
+                options={[
+                  { value: 'Europe/Paris', label: 'Paris (UTC+1)' },
+                  { value: 'Europe/London', label: 'Londres (UTC+0)' },
+                  { value: 'America/New_York', label: 'New York (UTC-5)' }
+                ]}
+              />
+            </div>
+          </div>
+        );
+
+      case 'notifications':
+        return (
+          <div className="space-y-4">
+            <ToggleSwitch
+              enabled={settings.emailNotifications}
+              onChange={(value) => handleSettingChange('emailNotifications', value)}
+              label="Notifications par email"
+              description="Recevoir des notifications importantes par email"
+            />
+            <ToggleSwitch
+              enabled={settings.pushNotifications}
+              onChange={(value) => handleSettingChange('pushNotifications', value)}
+              label="Notifications push"
+              description="Recevoir des notifications en temps réel"
+            />
+            <ToggleSwitch
+              enabled={settings.weeklyReport}
+              onChange={(value) => handleSettingChange('weeklyReport', value)}
+              label="Rapport hebdomadaire"
+              description="Recevoir un résumé de votre activité chaque semaine"
+            />
+            <ToggleSwitch
+              enabled={settings.taskReminders}
+              onChange={(value) => handleSettingChange('taskReminders', value)}
+              label="Rappels de tâches"
+              description="Recevoir des rappels pour les tâches en retard"
+            />
+            <ToggleSwitch
+              enabled={settings.teamUpdates}
+              onChange={(value) => handleSettingChange('teamUpdates', value)}
+              label="Mises à jour d'équipe"
+              description="Recevoir des notifications sur l'activité de l'équipe"
+            />
+          </div>
+        );
+
+      case 'security':
+        return (
+          <div className="space-y-6">
+            <ToggleSwitch
+              enabled={settings.twoFactorAuth}
+              onChange={(value) => handleSettingChange('twoFactorAuth', value)}
+              label="Authentification à deux facteurs"
+              description="Ajouter une couche de sécurité supplémentaire"
+            />
+            
+            <div className="bg-gray-50 rounded-lg p-4 space-y-4">
+              <h4 className="font-medium text-gray-900 flex items-center space-x-2">
+                <Key className="w-4 h-4" />
+                <span>Gestion du mot de passe</span>
+              </h4>
+              <button
+                onClick={handleResetPassword}
+                className="bg-[#8290A9] text-white px-4 py-2 rounded-lg hover:bg-[#6B7C92] transition-colors"
+              >
+                Réinitialiser le mot de passe
+              </button>
+            </div>
+
+            <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+              <h4 className="font-medium text-red-900 flex items-center space-x-2 mb-2">
+                <AlertTriangle className="w-4 h-4" />
+                <span>Zone de danger</span>
+              </h4>
+              <p className="text-sm text-red-700 mb-4">
+                Cette action est irréversible et supprimera définitivement votre compte.
+              </p>
+              <button
+                onClick={handleDeleteAccount}
+                className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors flex items-center space-x-2"
+              >
+                <Trash2 className="w-4 h-4" />
+                <span>Supprimer le compte</span>
+              </button>
+            </div>
+          </div>
+        );
+
+      case 'appearance':
+        return (
+          <div className="space-y-6">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-3">Thème</label>
+              <div className="grid grid-cols-3 gap-4">
+                {[
+                  { value: 'light', label: 'Clair', icon: Sun },
+                  { value: 'dark', label: 'Sombre', icon: Moon },
+                  { value: 'auto', label: 'Auto', icon: Monitor }
+                ].map((theme) => {
+                  const Icon = theme.icon;
+                  return (
+                    <button
+                      key={theme.value}
+                      onClick={() => handleSettingChange('theme', theme.value)}
+                      className={`p-4 border-2 rounded-lg transition-colors ${
+                        settings.theme === theme.value
+                          ? 'border-[#8290A9] bg-blue-50'
+                          : 'border-gray-200 hover:border-gray-300'
+                      }`}
+                    >
+                      <Icon className="w-6 h-6 mx-auto mb-2 text-gray-600" />
+                      <span className="text-sm font-medium">{theme.label}</span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            <ToggleSwitch
+              enabled={settings.sidebarCollapsed}
+              onChange={(value) => handleSettingChange('sidebarCollapsed', value)}
+              label="Sidebar réduite par défaut"
+              description="Commencer avec la sidebar réduite"
+            />
+            
+            <ToggleSwitch
+              enabled={settings.compactMode}
+              onChange={(value) => handleSettingChange('compactMode', value)}
+              label="Mode compact"
+              description="Affichage plus dense pour économiser l'espace"
+            />
+            
+            <ToggleSwitch
+              enabled={settings.animations}
+              onChange={(value) => handleSettingChange('animations', value)}
+              label="Animations"
+              description="Activer les animations et transitions"
+            />
+          </div>
+        );
+
+      case 'privacy':
+        return (
+          <div className="space-y-6">
+            <SelectField
+              label="Visibilité du profil"
+              value={settings.profileVisibility}
+              onChange={(value) => handleSettingChange('profileVisibility', value)}
+              options={[
+                { value: 'public', label: 'Public' },
+                { value: 'team', label: 'Équipe uniquement' },
+                { value: 'private', label: 'Privé' }
+              ]}
+            />
+            
+            <ToggleSwitch
+              enabled={settings.activityStatus}
+              onChange={(value) => handleSettingChange('activityStatus', value)}
+              label="Statut d'activité"
+              description="Permettre aux autres de voir quand vous êtes en ligne"
+            />
+            
+            <ToggleSwitch
+              enabled={settings.dataSharing}
+              onChange={(value) => handleSettingChange('dataSharing', value)}
+              label="Partage de données analytiques"
+              description="Partager des données anonymisées pour améliorer le service"
+            />
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Paramètres</h1>
+          <p className="text-gray-600 mt-2">
+            Gérez vos préférences et la configuration de votre compte
+          </p>
+        </div>
+        <button
+          onClick={handleSave}
+          disabled={loading}
+          className="bg-[#8290A9] text-white px-4 py-2 rounded-lg hover:bg-[#6B7C92] transition-colors flex items-center space-x-2 disabled:opacity-50"
+        >
+          <Save className="w-4 h-4" />
+          <span>{loading ? 'Sauvegarde...' : 'Sauvegarder'}</span>
+        </button>
+      </div>
+
+      <div className="flex flex-col lg:flex-row gap-6">
+        {/* Sidebar */}
+        <div className="lg:w-64">
+          <nav className="space-y-2">
+            {tabs.map((tab) => {
+              const Icon = tab.icon;
+              return (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors ${
+                    activeTab === tab.id
+                      ? 'bg-[#8290A9] text-white'
+                      : 'text-gray-600 hover:bg-gray-100'
+                  }`}
+                >
+                  <Icon className="w-5 h-5" />
+                  <span className="font-medium">{tab.label}</span>
+                </button>
+              );
+            })}
+          </nav>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1">
+          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            {renderTabContent()}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Settings;

package/src/pages/Team.tsx

@@ -0,0 +1,180 @@
+import React, { useState } from 'react';
+import { Plus, Search, Filter, MoreVertical, Mail, Phone, MapPin } from 'lucide-react';
+
+const Team: React.FC = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const teamMembers = [
+    {
+      id: 1,
+      name: 'Alice Martin',
+      role: 'Lead Developer',
+      email: 'alice.martin@rewise.com',
+      phone: '+33 6 12 34 56 78',
+      location: 'Paris, France',
+      avatar: null,
+      status: 'online',
+      projects: 3
+    },
+    {
+      id: 2,
+      name: 'Thomas Dubois',
+      role: 'UI/UX Designer',
+      email: 'thomas.dubois@rewise.com',
+      phone: '+33 6 87 65 43 21',
+      location: 'Lyon, France',
+      avatar: null,
+      status: 'away',
+      projects: 2
+    },
+    {
+      id: 3,
+      name: 'Sophie Laurent',
+      role: 'Project Manager',
+      email: 'sophie.laurent@rewise.com',
+      phone: '+33 6 11 22 33 44',
+      location: 'Marseille, France',
+      avatar: null,
+      status: 'online',
+      projects: 5
+    },
+    {
+      id: 4,
+      name: 'Pierre Moreau',
+      role: 'Backend Developer',
+      email: 'pierre.moreau@rewise.com',
+      phone: '+33 6 55 66 77 88',
+      location: 'Toulouse, France',
+      avatar: null,
+      status: 'offline',
+      projects: 2
+    }
+  ];
+
+  const filteredMembers = teamMembers.filter(member =>
+    member.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    member.role.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'online': return 'bg-green-500';
+      case 'away': return 'bg-yellow-500';
+      case 'offline': return 'bg-gray-400';
+      default: return 'bg-gray-400';
+    }
+  };
+
+  const getInitials = (name: string) => {
+    return name.split(' ').map(n => n[0]).join('').toUpperCase();
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Équipe</h1>
+          <p className="text-gray-600 mt-2">
+            Gérez votre équipe et suivez les performances de chaque membre
+          </p>
+        </div>
+        <button className="bg-[#8290A9] text-white px-4 py-2 rounded-lg hover:bg-[#6B7C92] transition-colors flex items-center space-x-2">
+          <Plus className="w-4 h-4" />
+          <span>Ajouter un membre</span>
+        </button>
+      </div>
+
+      {/* Filters */}
+      <div className="flex items-center space-x-4 bg-white p-4 rounded-lg shadow-sm border border-gray-200">
+        <div className="flex-1 relative">
+          <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 un membre..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            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>
+        <button className="flex items-center space-x-2 px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
+          <Filter className="w-4 h-4" />
+          <span>Filtres</span>
+        </button>
+      </div>
+
+      {/* Team Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+          <h3 className="text-lg font-semibold text-gray-900">Total membres</h3>
+          <p className="text-3xl font-bold text-[#8290A9] mt-2">{teamMembers.length}</p>
+        </div>
+        <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+          <h3 className="text-lg font-semibold text-gray-900">En ligne</h3>
+          <p className="text-3xl font-bold text-green-600 mt-2">
+            {teamMembers.filter(m => m.status === 'online').length}
+          </p>
+        </div>
+        <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+          <h3 className="text-lg font-semibold text-gray-900">Projets actifs</h3>
+          <p className="text-3xl font-bold text-blue-600 mt-2">
+            {teamMembers.reduce((sum, m) => sum + m.projects, 0)}
+          </p>
+        </div>
+      </div>
+
+      {/* Team Members Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {filteredMembers.map((member) => (
+          <div key={member.id} className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center space-x-3">
+                <div className="relative">
+                  <div className="w-12 h-12 bg-[#8290A9] rounded-full flex items-center justify-center">
+                    <span className="text-white font-semibold">
+                      {getInitials(member.name)}
+                    </span>
+                  </div>
+                  <div className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-white ${getStatusColor(member.status)}`}></div>
+                </div>
+                <div>
+                  <h3 className="font-semibold text-gray-900">{member.name}</h3>
+                  <p className="text-sm text-gray-600">{member.role}</p>
+                </div>
+              </div>
+              <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
+                <MoreVertical className="w-4 h-4 text-gray-400" />
+              </button>
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex items-center space-x-2 text-sm text-gray-600">
+                <Mail className="w-4 h-4" />
+                <span>{member.email}</span>
+              </div>
+              <div className="flex items-center space-x-2 text-sm text-gray-600">
+                <Phone className="w-4 h-4" />
+                <span>{member.phone}</span>
+              </div>
+              <div className="flex items-center space-x-2 text-sm text-gray-600">
+                <MapPin className="w-4 h-4" />
+                <span>{member.location}</span>
+              </div>
+            </div>
+
+            <div className="mt-4 pt-4 border-t border-gray-100">
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-gray-600">Projets actifs</span>
+                <span className="bg-[#8290A9] text-white px-2 py-1 rounded-full text-xs">
+                  {member.projects}
+                </span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Team;