ptechcore_ui 0.0.0

package/src/pages/Analytics.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { BarChart3, TrendingUp, Users, Clock } from 'lucide-react';
+
+const Analytics: React.FC = () => {
+  const stats = [
+    {
+      title: 'Performances équipe',
+      value: '94%',
+      change: '+12%',
+      trend: 'up',
+      icon: TrendingUp,
+      color: 'text-green-600'
+    },
+    {
+      title: 'Membres actifs',
+      value: '24',
+      change: '+3',
+      trend: 'up',
+      icon: Users,
+      color: 'text-blue-600'
+    },
+    {
+      title: 'Temps moyen',
+      value: '2.4h',
+      change: '-0.3h',
+      trend: 'down',
+      icon: Clock,
+      color: 'text-purple-600'
+    },
+    {
+      title: 'Tâches complétées',
+      value: '187',
+      change: '+23',
+      trend: 'up',
+      icon: BarChart3,
+      color: 'text-orange-600'
+    }
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-3xl font-bold text-gray-900">Analytics</h1>
+        <p className="text-gray-600 mt-2">
+          Analysez les performances de votre équipe et suivez les métriques importantes
+        </p>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {stats.map((stat, index) => {
+          const Icon = stat.icon;
+          return (
+            <div key={index} className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-gray-600">{stat.title}</p>
+                  <p className="text-2xl font-bold text-gray-900 mt-2">{stat.value}</p>
+                  <p className={`text-sm mt-2 ${
+                    stat.trend === 'up' ? 'text-green-600' : 'text-red-600'
+                  }`}>
+                    {stat.change} vs mois dernier
+                  </p>
+                </div>
+                <div className={`p-3 rounded-full bg-gray-50 ${stat.color}`}>
+                  <Icon className="w-6 h-6" />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Charts Section */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Chart 1 */}
+        <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+          <h3 className="text-lg font-semibold text-gray-900 mb-4">
+            Tendance des performances
+          </h3>
+          <div className="h-64 flex items-center justify-center bg-gray-50 rounded-lg">
+            <p className="text-gray-500">Graphique des performances</p>
+          </div>
+        </div>
+
+        {/* Chart 2 */}
+        <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+          <h3 className="text-lg font-semibold text-gray-900 mb-4">
+            Répartition des tâches
+          </h3>
+          <div className="h-64 flex items-center justify-center bg-gray-50 rounded-lg">
+            <p className="text-gray-500">Graphique en secteurs</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Analytics;

package/src/pages/CreateOrganization.tsx

@@ -0,0 +1,215 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft } from 'lucide-react';
+
+
+import { Organization, OrganizationServices } from '../services/OrganizationServices';
+import { useSession } from '../contexts/SessionContext';
+import { useToast } from '../contexts/ToastContext';
+import { InputField, TextInput } from '../components/common/Inputs';
+import PrimaryButton from '../components/common/Buttons';
+
+
+type Step = 'organization' | 'entity' | 'confirmation';
+
+
+const CreateOrganization: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+  const { loggedUser, token } = useSession();
+  const { success, error: showError } = useToast();
+
+  const [formData, setFormData] = useState<Partial<Organization>>({
+    legal_name: '',
+    trading_name: '',
+    phone: '',
+    email: '',
+    address: '',
+    owner: loggedUser?.id || 0,
+    created_at: '',
+    updated_at: '',
+    is_deleted: false,
+  });
+
+  const [errors, setErrors] = useState<Partial<Record<keyof Organization, string>>>({});
+
+  const navigate = useNavigate();
+
+
+  useEffect(() => {
+    if (loggedUser) {
+      setFormData(prev => ({ ...prev, owner: loggedUser.id }));
+    }
+  }, [loggedUser]);
+
+  const validateForm = (): boolean => {
+    const newErrors: Partial<Record<keyof Organization, string>> = {};
+
+    if (!formData.legal_name?.trim()) {
+      newErrors.legal_name = 'La raison sociale est obligatoire';
+    }
+
+    if (formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = 'Format d\'email invalide';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+    if (errors[name as keyof Organization]) {
+      setErrors(prev => ({ ...prev, [name]: undefined }));
+    }
+  };
+
+  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+    if (errors[name as keyof Organization]) {
+      setErrors(prev => ({ ...prev, [name]: undefined }));
+    }
+  };
+
+
+
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!validateForm() || !token) {
+      if (!token) {
+        showError('Vous devez être connecté pour créer une organisation');
+      }
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await OrganizationServices.createOrganization(formData as Partial<Organization>, token);
+      success('Organisation créée avec succès !');
+      navigate('/organizations');
+    } catch (err: any) {
+      showError(err.message || 'Erreur lors de la création de l\'organisation');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+
+
+
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className=" mx-auto px-4">
+        {/* Header */}
+        <div className="flex items-center mb-8">
+          <button
+            onClick={() => navigate('/dashboard')}
+            className="flex items-center text-gray-600 hover:text-gray-900 transition-colors"
+          >
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Retour au tableau de bord
+          </button>
+        </div>
+
+        {/* Title */}
+        <div className=" mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">
+            Création d'organisation
+          </h1>
+          <p className="text-gray-600">
+            Configurez votre organisation et créez votre première entité
+          </p>
+        </div>
+
+        {/* Step Indicator */}
+
+
+        {/* Current Step Content */}
+        <div className="mx-auto">
+          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {/* Raison sociale */}
+              <TextInput
+                label="Raison sociale"
+                name="legal_name"
+                value={formData.legal_name || ''}
+                placeholder="Nom légal de l'organisation"
+                required
+                error={errors.legal_name}
+                onChange={handleInputChange}
+              />
+
+              {/* Nom commercial */}
+              <TextInput
+                label="Nom commercial"
+                name="trading_name"
+                value={formData.trading_name || ''}
+                placeholder="Nom commercial (optionnel)"
+                onChange={handleInputChange}
+              />
+
+              {/* Contact */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <InputField
+                  label="Téléphone"
+                  name="phone"
+                  type="tel"
+                  value={formData.phone || ''}
+                  placeholder="+225 XX XX XXX XXX"
+                  onChange={handleInputChange}
+                />
+
+                <InputField
+                  label="Email"
+                  name="email"
+                  type="email"
+                  value={formData.email || ''}
+                  placeholder="contact@organisation.com"
+                  error={errors.email}
+                  onChange={handleInputChange}
+                />
+              </div>
+
+              {/* Adresse */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Adresse
+                </label>
+                <textarea
+                  name="address"
+                  value={formData.address || ''}
+                  onChange={handleTextareaChange}
+                  rows={3}
+                  className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6B7C92] focus:border-transparent placeholder-gray-400"
+                  placeholder="Adresse complète de l'organisation"
+                />
+              </div>
+
+              {/* Actions */}
+              <div className="flex justify-between pt-6 border-t border-gray-200">
+                <button
+                  type="button"
+                  onClick={() => navigate('/organizations')}
+                  className="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                >
+                  Annuler
+                </button>
+
+                <PrimaryButton onClick={handleSubmit} loading={loading}>
+                    {loading ? 'Création...' : 'Créer l\'organisation'}
+                </PrimaryButton>
+
+                
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateOrganization;

package/src/pages/Dashboard.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Dashboard: React.FC = () => {
+    return (
+        <div style={{ padding: '2rem' }}>
+            <h1>Dashboard</h1>
+            <p>Welcome to your dashboard. Here you can view your stats and manage your account.</p>
+            {/* Add dashboard widgets/components here */}
+
+
+        </div>
+    );
+};
+
+export default Dashboard;

package/src/pages/Home.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+
+const Home: React.FC = () => {
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+     Bienvenue sur Rewise !
+    </div>
+  );
+};
+
+export default Home;

package/src/pages/Profile.tsx

@@ -0,0 +1,313 @@
+import React, { useState, useEffect } from 'react';
+import { Camera, Mail, Phone, MapPin, Calendar, Edit3, Save, X, User as UserIcon } from 'lucide-react';
+import { useToast } from '../contexts/ToastContext';
+import { useSession, User } from '../contexts/SessionContext';
+
+const Profile: React.FC = () => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const { success, error: showError } = useToast();
+
+  const { loggedUser } = useSession();
+
+  const [profileData, setProfileData] = useState<User | null>(loggedUser);
+  const [editData, setEditData] = useState<Partial<User>>({});
+
+  useEffect(() => {
+    if (loggedUser) {
+      setProfileData(loggedUser);
+      setEditData(loggedUser);
+    }
+  }, [loggedUser]);
+
+  const handleEdit = () => {
+    setEditData({ ...profileData });
+    setIsEditing(true);
+  };
+
+  const handleCancel = () => {
+    setEditData({ ...profileData });
+    setIsEditing(false);
+  };
+
+  const handleSave = async () => {
+    setLoading(true);
+    try {
+      // Simuler un appel API
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      setProfileData({ ...editData });
+      setIsEditing(false);
+      success('Profil mis à jour avec succès !');
+    } catch (error) {
+      showError('Erreur lors de la mise à jour du profil');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleInputChange = (field: string, value: string) => {
+    setEditData(prev => ({ ...prev, [field]: value }));
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('fr-FR', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  };
+
+  const getInitials = (firstName: string, lastName: string) => {
+    return `${firstName?.[0] || ''}${lastName?.[0] || ''}`.toUpperCase();
+  };
+
+  const activities = [
+    { id: 1, action: 'Connexion', time: 'Il y a 2 heures', type: 'login' },
+    { id: 2, action: 'Mise à jour du profil', time: 'Hier', type: 'update' },
+    { id: 3, action: 'Nouveau projet créé', time: 'Il y a 3 jours', type: 'create' },
+    { id: 4, action: 'Tâche complétée', time: 'Il y a 5 jours', type: 'complete' },
+  ];
+
+  if (!profileData) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="text-center">
+            <h2 className="text-xl font-semibold text-gray-900 mb-2">Chargement du profil...</h2>
+            <p className="text-gray-600">Veuillez patienter pendant le chargement de vos informations.</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Mon Profil</h1>
+          <p className="text-gray-600 mt-2">
+            Gérez vos informations personnelles et vos préférences
+          </p>
+        </div>
+        {!isEditing ? (
+          <button
+            onClick={handleEdit}
+            className="bg-[#8290A9] text-white px-4 py-2 rounded-lg hover:bg-[#6B7C92] transition-colors flex items-center space-x-2"
+          >
+            <Edit3 className="w-4 h-4" />
+            <span>Modifier</span>
+          </button>
+        ) : (
+          <div className="flex space-x-2">
+            <button
+              onClick={handleCancel}
+              className="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition-colors flex items-center space-x-2"
+            >
+              <X className="w-4 h-4" />
+              <span>Annuler</span>
+            </button>
+            <button
+              onClick={handleSave}
+              disabled={loading}
+              className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 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>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Profile Card */}
+        <div className="lg:col-span-2">
+          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <div className="flex items-start space-x-6">
+              {/* Avatar */}
+              <div className="relative">
+                <div className="w-24 h-24 bg-[#8290A9] rounded-full flex items-center justify-center">
+                  <span className="text-white text-2xl font-bold">
+                    {getInitials(profileData?.first_name || '', profileData?.last_name || '')}
+                  </span>
+                </div>
+                {isEditing && (
+                  <button className="absolute bottom-0 right-0 bg-[#8290A9] text-white p-2 rounded-full hover:bg-[#6B7C92] transition-colors">
+                    <Camera className="w-4 h-4" />
+                  </button>
+                )}
+              </div>
+
+              {/* Basic Info */}
+              <div className="flex-1 space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      Prénom
+                    </label>
+                    {isEditing ? (
+                      <input
+                        type="text"
+                        value={editData.first_name || ''}
+                        onChange={(e) => handleInputChange('first_name', 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"
+                      />
+                    ) : (
+                      <p className="text-gray-900 font-medium">{profileData?.first_name}</p>
+                    )}
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      Nom
+                    </label>
+                    {isEditing ? (
+                      <input
+                        type="text"
+                        value={editData.last_name || ''}
+                        onChange={(e) => handleInputChange('last_name', 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"
+                      />
+                    ) : (
+                      <p className="text-gray-900 font-medium">{profileData?.last_name}</p>
+                    )}
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Nom d'utilisateur
+                  </label>
+                  {isEditing ? (
+                    <input
+                      type="text"
+                      value={editData.username || ''}
+                      onChange={(e) => handleInputChange('username', 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"
+                    />
+                  ) : (
+                    <p className="text-gray-900 font-medium">{profileData?.username}</p>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Contact Information */}
+          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mt-6">
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">
+              Informations de contact
+            </h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Email
+                </label>
+                {isEditing ? (
+                  <input
+                    type="email"
+                    value={editData.email || ''}
+                    onChange={(e) => handleInputChange('email', 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"
+                  />
+                ) : (
+                  <div className="flex items-center space-x-2">
+                    <Mail className="w-4 h-4 text-gray-400" />
+                    <span className="text-gray-900">{profileData?.email}</span>
+                  </div>
+                )}
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Téléphone
+                </label>
+                {isEditing ? (
+                  <input
+                    type="tel"
+                    value={editData.phonenumber || ''}
+                    onChange={(e) => handleInputChange('phonenumber', 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"
+                  />
+                ) : (
+                  <div className="flex items-center space-x-2">
+                    <Phone className="w-4 h-4 text-gray-400" />
+                    <span className="text-gray-900">{profileData?.phonenumber}</span>
+                  </div>
+                )}
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Statut du compte
+                </label>
+                <div className="flex items-center space-x-2">
+                  <div className={`w-2 h-2 rounded-full ${profileData?.is_active ? 'bg-green-500' : 'bg-red-500'}`}></div>
+                  <span className="text-gray-900">{profileData?.is_active ? 'Actif' : 'Inactif'}</span>
+                </div>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Rôle
+                </label>
+                <div className="flex items-center space-x-2">
+                  <UserIcon className="w-4 h-4 text-gray-400" />
+                  <span className="text-gray-900">
+                    {profileData?.is_superuser ? 'Super Administrateur' : 
+                     profileData?.is_staff ? 'Staff' : 'Utilisateur'}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-6">
+          {/* Stats */}
+          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">
+              Informations générales
+            </h3>
+            <div className="space-y-3">
+              <div className="flex items-center space-x-2">
+                <Calendar className="w-4 h-4 text-gray-400" />
+                <div>
+                  <p className="text-sm text-gray-600">Date d'inscription</p>
+                  <p className="font-medium">{profileData?.date_joined ? formatDate(profileData.date_joined) : 'Non disponible'}</p>
+                </div>
+              </div>
+              {profileData?.last_login && (
+                <div className="flex items-center space-x-2">
+                  <Calendar className="w-4 h-4 text-gray-400" />
+                  <div>
+                    <p className="text-sm text-gray-600">Dernière connexion</p>
+                    <p className="font-medium">{formatDate(profileData.last_login)}</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Recent Activity */}
+          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">
+              Activité récente
+            </h3>
+            <div className="space-y-3">
+              {activities.map((activity) => (
+                <div key={activity.id} className="flex items-start space-x-3">
+                  <div className="w-2 h-2 bg-[#8290A9] rounded-full mt-2"></div>
+                  <div>
+                    <p className="text-sm font-medium text-gray-900">{activity.action}</p>
+                    <p className="text-xs text-gray-500">{activity.time}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Profile;