ptechcore_ui 0.0.0

package/src/pages/users/CreateUser.tsx

@@ -0,0 +1,450 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+    ArrowLeft,
+    User as UserIcon,
+    Mail,
+    Phone,
+    Shield,
+    Users,
+    Save,
+    X
+} from 'lucide-react';
+import { useToast } from '../../contexts/ToastContext';
+import { useSession } from '../../contexts/SessionContext';
+import { UserServices } from '../../services/UserServices';
+import { User } from '../../models/User';
+import { RewiseBasicCard } from '../../components/common/Cards';
+import { TextInput, InputField, SelectInput } from '../../components/common/Inputs';
+
+const CreateUser: React.FC = () => {
+    const [formData, setFormData] = useState<Partial<User>>({
+        username: '',
+        first_name: '',
+        last_name: '',
+        email: '',
+        phonenumber: '',
+        is_active: true,
+        is_staff: false,
+        is_superuser: false,
+        groups: [],
+        user_permissions: [],
+        centers_access: []
+    });
+
+    const [errors, setErrors] = useState<Partial<Record<keyof User, string>>>({});
+    const [loading, setLoading] = useState(false);
+    const [activeTab, setActiveTab] = useState<'general' | 'permissions' | 'access'>('general');
+
+    const navigate = useNavigate();
+    const { success, error: showError } = useToast();
+    const { token } = useSession();
+
+    const tabs = [
+        { id: 'general', label: 'Informations générales', icon: UserIcon },
+        { id: 'permissions', label: 'Permissions', icon: Shield },
+        { id: 'permissions', label: 'Permissions', icon: Shield },
+        { id: 'access', label: 'Accès aux centres', icon: Users }
+
+    ];
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value, type, checked } = e.target;
+        setFormData(prev => ({
+            ...prev,
+            [name]: type === 'checkbox' ? checked : value
+        }));
+
+        if (errors[name as keyof User]) {
+            setErrors(prev => ({ ...prev, [name]: undefined }));
+        }
+    };
+
+    const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value === 'true' }));
+    };
+
+    const validateForm = (): boolean => {
+        const newErrors: Partial<Record<keyof User, string>> = {};
+
+        if (!formData.username?.trim()) {
+            newErrors.username = 'Le nom d\'utilisateur est obligatoire';
+        }
+
+        if (!formData.first_name?.trim()) {
+            newErrors.first_name = 'Le pr�nom est obligatoire';
+        }
+
+        if (!formData.last_name?.trim()) {
+            newErrors.last_name = 'Le nom de famille est obligatoire';
+        }
+
+        if (!formData.email?.trim()) {
+            newErrors.email = 'L\'email est obligatoire';
+        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+            newErrors.email = 'Format d\'email invalide';
+        }
+
+        if (formData.phonenumber && !/^[\+]?[0-9\s\-\(\)]+$/.test(formData.phonenumber)) {
+            newErrors.phonenumber = 'Format de t�l�phone invalide';
+        }
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!validateForm()) return;
+
+        if (!token) {
+            showError('Vous devez �tre connect� pour cr�er un utilisateur');
+            return;
+        }
+
+        setLoading(true);
+        try {
+            await UserServices.addUser(formData, token);
+            success('Utilisateur cr�� avec succ�s !');
+            navigate('/users');
+        } catch (error: any) {
+            console.error(error);
+            showError('Erreur lors de la cr�ation de l\'utilisateur');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const addCenterAccess = () => {
+        setFormData(prev => ({
+            ...prev,
+            centers_access: [
+                ...(prev.centers_access || []),
+                { id: 0, permissions: [] }
+            ]
+        }));
+    };
+
+    const removeCenterAccess = (index: number) => {
+        setFormData(prev => ({
+            ...prev,
+            centers_access: prev.centers_access?.filter((_, i) => i !== index) || []
+        }));
+    };
+
+    const updateCenterAccess = (index: number, field: 'id' | 'permissions', value: any) => {
+        setFormData(prev => ({
+            ...prev,
+            centers_access: prev.centers_access?.map((center, i) =>
+                i === index ? { ...center, [field]: value } : center
+            ) || []
+        }));
+    };
+
+    const renderTabContent = () => {
+        switch (activeTab) {
+            case 'general':
+                return (
+                    <div className="space-y-6">
+                        {/* Informations de base */}
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <TextInput
+                                label="Nom d'utilisateur"
+                                name="username"
+                                value={formData.username || ''}
+                                placeholder="nom utilisateur"
+                                required
+                                error={errors.username}
+                                onChange={handleInputChange}
+                            />
+
+                            <InputField
+                                label="Email"
+                                name="email"
+                                type="email"
+                                value={formData.email || ''}
+                                placeholder="utilisateur@example.com"
+                                required
+                                error={errors.email}
+                                onChange={handleInputChange}
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <TextInput
+                                label="Pr�nom"
+                                name="first_name"
+                                value={formData.first_name || ''}
+                                placeholder="Pr�nom"
+                                required
+                                error={errors.first_name}
+                                onChange={handleInputChange}
+                            />
+
+                            <TextInput
+                                label="Nom de famille"
+                                name="last_name"
+                                value={formData.last_name || ''}
+                                placeholder="Nom de famille"
+                                required
+                                error={errors.last_name}
+                                onChange={handleInputChange}
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <InputField
+                                label="T�l�phone"
+                                name="phonenumber"
+                                type="tel"
+                                value={formData.phonenumber || ''}
+                                placeholder="+225 XX XX XXX XXX"
+                                error={errors.phonenumber}
+                                onChange={handleInputChange}
+                            />
+
+                            <SelectInput
+                                label="Statut"
+                                name="is_active"
+                                value={formData.is_active?.toString() || 'true'}
+                                options={[
+                                    { value: 'true', label: 'Actif' },
+                                    { value: 'false', label: 'Inactif' }
+                                ]}
+                                onChange={handleSelectChange}
+                            />
+                        </div>
+                    </div>
+                );
+
+            case 'permissions':
+                return (
+                    <div className="space-y-6">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div className="space-y-4">
+                                <label className="flex items-center space-x-3">
+                                    <input
+                                        type="checkbox"
+                                        name="is_staff"
+                                        checked={formData.is_staff || false}
+                                        onChange={handleInputChange}
+                                        className="rounded border-gray-300 text-[#8290A9] focus:ring-[#8290A9]"
+                                    />
+                                    <div>
+                                        <span className="text-sm font-medium text-gray-900">Membre du personnel</span>
+                                        <p className="text-xs text-gray-500">
+                                            Permet d'acc�der � l'interface d'administration
+                                        </p>
+                                    </div>
+                                </label>
+
+                                <label className="flex items-center space-x-3">
+                                    <input
+                                        type="checkbox"
+                                        name="is_superuser"
+                                        checked={formData.is_superuser || false}
+                                        onChange={handleInputChange}
+                                        className="rounded border-gray-300 text-[#8290A9] focus:ring-[#8290A9]"
+                                    />
+                                    <div>
+                                        <span className="text-sm font-medium text-gray-900">Super utilisateur</span>
+                                        <p className="text-xs text-gray-500">
+                                            Acc�s complet � toutes les fonctionnalit�s
+                                        </p>
+                                    </div>
+                                </label>
+                            </div>
+                        </div>
+
+                        <div className="bg-gray-50 rounded-lg p-4">
+                            <h4 className="text-sm font-medium text-gray-700 mb-2">Groupes d'utilisateurs</h4>
+                            <p className="text-xs text-gray-500 mb-4">
+                                Les groupes seront configurables apr�s la cr�ation de l'utilisateur
+                            </p>
+                            <div className="text-sm text-gray-600">
+                                Groupes assign�s : {formData.groups?.length || 0}
+                            </div>
+                        </div>
+                    </div>
+                );
+
+            case 'access':
+                return (
+                    <div className="space-y-6">
+                        <div className="flex justify-between items-center">
+                            <div>
+                                <h4 className="text-sm font-medium text-gray-700">Acc�s aux centres</h4>
+                                <p className="text-xs text-gray-500 mt-1">
+                                    Configurez l'acc�s de l'utilisateur aux diff�rents centres
+                                </p>
+                            </div>
+                            <button
+                                type="button"
+                                onClick={addCenterAccess}
+                                className="bg-[#8290A9] text-white px-3 py-1 rounded text-sm hover:bg-[#6B7C92] transition-colors"
+                            >
+                                Ajouter un centre
+                            </button>
+                        </div>
+
+                        {formData.centers_access && formData.centers_access.length > 0 ? (
+                            <div className="space-y-4">
+                                {formData.centers_access.map((center, index) => (
+                                    <div key={index} className="border border-gray-200 rounded-lg p-4">
+                                        <div className="flex justify-between items-start mb-4">
+                                            <h5 className="text-sm font-medium text-gray-700">
+                                                Centre d'acc�s #{index + 1}
+                                            </h5>
+                                            <button
+                                                type="button"
+                                                onClick={() => removeCenterAccess(index)}
+                                                className="text-red-600 hover:text-red-800"
+                                            >
+                                                <X className="w-4 h-4" />
+                                            </button>
+                                        </div>
+
+                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                            <div>
+                                                <label className="block text-xs font-medium text-gray-700 mb-1">
+                                                    ID du centre
+                                                </label>
+                                                <input
+                                                    type="number"
+                                                    value={center.id}
+                                                    onChange={(e) => updateCenterAccess(index, 'id', parseInt(e.target.value) || 0)}
+                                                    className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#8290A9] focus:border-transparent"
+                                                    placeholder="ID du centre"
+                                                />
+                                            </div>
+
+                                            <div>
+                                                <label className="block text-xs font-medium text-gray-700 mb-1">
+                                                    Permissions (IDs s�par�s par des virgules)
+                                                </label>
+                                                <input
+                                                    type="text"
+                                                    value={center.permissions?.join(', ') || ''}
+                                                    onChange={(e) => {
+                                                        const permissions = e.target.value
+                                                            .split(',')
+                                                            .map(p => parseInt(p.trim()))
+                                                            .filter(p => !isNaN(p));
+                                                        updateCenterAccess(index, 'permissions', permissions);
+                                                    }}
+                                                    className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#8290A9] focus:border-transparent"
+                                                    placeholder="1, 2, 3"
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        ) : (
+                            <div className="text-center py-8 bg-gray-50 rounded-lg">
+                                <Users className="w-12 h-12 text-gray-300 mx-auto mb-4" />
+                                <p className="text-gray-500 text-sm">Aucun acc�s aux centres configur�</p>
+                                <p className="text-gray-400 text-xs mt-1">
+                                    Cliquez sur "Ajouter un centre" pour commencer
+                                </p>
+                            </div>
+                        )}
+                    </div>
+                );
+
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <div className="space-y-6">
+            {/* Header */}
+            <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-4">
+                    <button
+                        onClick={() => navigate('/users')}
+                        className="flex items-center text-gray-600 hover:text-gray-900 transition-colors"
+                    >
+                        <ArrowLeft className="w-4 h-4 mr-2" />
+                        Retour aux utilisateurs
+                    </button>
+                </div>
+            </div>
+
+            {/* Form */}
+            <RewiseBasicCard title={
+                <div className="flex items-center space-x-3">
+                    <div className="w-10 h-10 bg-[#8290A9] rounded-full flex items-center justify-center">
+                        <UserIcon className="w-5 h-5 text-white" />
+                    </div>
+                    <div>
+                        <h1 className="text-xl font-semibold text-gray-900">Cr�er un utilisateur</h1>
+                        <p className="text-sm text-gray-600">Ajoutez un nouveau membre � votre �quipe</p>
+                    </div>
+                </div>
+            }>
+                <form onSubmit={handleSubmit}>
+                    {/* Tabs */}
+                    <div className="border-b border-gray-200 mb-6">
+                        <nav className="flex space-x-8">
+                            {tabs.map((tab) => {
+                                const Icon = tab.icon;
+                                return (
+                                    <button
+                                        key={tab.id}
+                                        type="button"
+                                        onClick={() => setActiveTab(tab.id as any)}
+                                        className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
+                                            activeTab === tab.id
+                                                ? 'border-[#8290A9] text-[#8290A9]'
+                                                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                                        }`}
+                                    >
+                                        <Icon className="w-4 h-4 inline mr-2" />
+                                        {tab.label}
+                                    </button>
+                                );
+                            })}
+                        </nav>
+                    </div>
+
+                    {/* Tab Content */}
+                    {renderTabContent()}
+
+                    {/* Actions */}
+                    <div className="flex justify-between pt-6 border-t border-gray-200 mt-8">
+                        <button
+                            type="button"
+                            onClick={() => navigate('/users')}
+                            className="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                        >
+                            Annuler
+                        </button>
+
+                        <button
+                            type="submit"
+                            disabled={loading}
+                            className="px-6 py-2 bg-[#8290A9] text-white rounded-lg hover:bg-[#6B7C92] transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
+                        >
+                            {loading ? (
+                                <>
+                                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                                    <span>Cr�ation...</span>
+                                </>
+                            ) : (
+                                <>
+                                    <Save className="w-4 h-4" />
+                                    <span>Cr�er l'utilisateur</span>
+                                </>
+                            )}
+                        </button>
+                    </div>
+                </form>
+            </RewiseBasicCard>
+        </div>
+    );
+};
+
+export default CreateUser;

package/src/services/AuthServices.ts

@@ -0,0 +1,94 @@
+import { ThermometerSnowflake } from "lucide-react";
+import { API_URL } from "./api";
+import { User } from "../models/User";
+
+
+const API_BASE_URL = `${API_URL}/core/auth/`;
+
+export interface SendOtpPayload {
+    email: string;
+}
+
+export interface VerifyOtpPayload {
+    email: string;
+    otp: string;
+}
+
+export interface CompleteRegistrationPayload {
+    email: string;
+    password: string;
+    confirmed_password: string;
+    firstname?: string;
+    lastname?: string;
+    phonenumber?: string;
+}
+
+export interface AddUserPayload {
+    email: string;
+    first_name: string;
+    last_name: string;
+    phonenumber?: string;
+    centers_access?: Array<{
+        id: number;
+        permissions?: number[];
+    }>;
+}
+
+export interface LoginPayload {
+    username: string;
+    password: string;
+}
+
+class FetchApi {
+    static async post<T>(url: string, payload?: any, token?: string): Promise<T> {
+        const headers: Record<string, string> = {
+            "Content-Type": "application/json",
+        };
+        if (token) {
+            headers["Authorization"] = `Token ${token}`;
+        }
+        const res = await fetch(url, {
+            method: "POST",
+            headers,
+            body: payload ? JSON.stringify(payload) : undefined,
+        });
+        if (!res.ok) throw new Error(await res.text());
+        return res.json();
+    }
+
+    static async get<T>(url: string, token?: string): Promise<T> {
+        const headers: Record<string, string> = {};
+        if (token) {
+            headers["Authorization"] = `Token ${token}`;
+        }
+        const res = await fetch(url, {
+            method: "GET",
+            headers,
+        });
+        if (!res.ok) throw new Error(await res.text());
+        return res.json();
+    }
+}
+
+export const AuthServices = {
+    sendOtp: (payload: SendOtpPayload) =>
+        FetchApi.post(`${API_BASE_URL}send-otp/`, payload),
+
+    verifyOtp: (payload: VerifyOtpPayload) =>
+        FetchApi.post(`${API_BASE_URL}verify-otp/`, payload),
+
+    completeRegistration: (payload: CompleteRegistrationPayload) =>
+        FetchApi.post(`${API_BASE_URL}complete-registration/`, payload),
+
+    addUser: (payload: User) =>
+        FetchApi.post(`${API_BASE_URL}add-user/`, payload),
+
+    login: (payload: LoginPayload) =>
+        FetchApi.post(`${API_BASE_URL}login/`, payload),
+
+    getUserInformations: (token: string) =>
+        FetchApi.get(`${API_BASE_URL}user-informations/`, token),
+
+    logout: () =>
+        FetchApi.post(`${API_BASE_URL}logout/`),
+};

package/src/services/OrganizationServices.ts

@@ -0,0 +1,61 @@
+
+
+import { sub } from 'date-fns';
+import { API_URL, FetchApi } from './api';
+import { Entity, Organization } from '../models/Organization';
+
+const ORGANIZATIONS_API_URL = `${API_URL}/core/organizations/`;
+const ENTITIES_API_URL = `${API_URL}/core/entities/`;
+
+
+
+interface SubscriptionData {
+  plan: number;
+  billing_cycle: 'monthly' | 'yearly';
+  extra_modules?: number[];
+}
+
+export const OrganizationServices = {
+  createOrganization: (data: Partial<Organization>, token: string) =>
+    FetchApi.post(`${ORGANIZATIONS_API_URL}`, data, token),
+
+  getUserOrganizations: (token: string) =>
+    FetchApi.get(`${API_URL}/core/users/organizations/`, token),
+
+  getOrganization: (id: number, token: string) =>
+    FetchApi.get(`${ORGANIZATIONS_API_URL}${id}/`, token),
+
+  updateOrganization: (id: number, data: Partial<Organization>, token: string) =>
+    FetchApi.put(`${ORGANIZATIONS_API_URL}${id}/`, data, token),
+  
+  
+  subscribe: (id: number, data: SubscriptionData, token: string) =>
+    FetchApi.put(`${ORGANIZATIONS_API_URL}${id}/subscribe/`, data, token),
+
+  deleteOrganization: (id: number, token: string) =>
+    FetchApi.delete(`${ORGANIZATIONS_API_URL}${id}/`, token),
+};
+
+export const EntityServices = {
+  createEntity: (organizationId: number, data: Entity, token: string) =>
+    FetchApi.post(`${ENTITIES_API_URL}`, { ...data, organization: organizationId }, token),
+
+  getOrganizationEntities: (organizationId: number, token: string) =>
+    FetchApi.get(`${ORGANIZATIONS_API_URL}${organizationId}/entities/`, token),
+
+  getEntity: (id: number, token: string) =>
+    FetchApi.get(`${ENTITIES_API_URL}${id}/`, token),
+
+  updateEntity: (id: number, data: Partial<Entity>, token: string) =>
+    FetchApi.put(`${ENTITIES_API_URL}${id}/`, data, token),
+
+
+  getEntityUsers: (id: number, token: string) =>
+    FetchApi.get(`${ENTITIES_API_URL}${id}/users/`, token),
+
+  addUserToEntity: (entityId: number, userId: number, token: string) =>
+    FetchApi.post(`${ENTITIES_API_URL}${entityId}/users/`, { user_id: userId }, token),
+
+  deleteEntity: (id: number, token: string) =>
+    FetchApi.delete(`${ENTITIES_API_URL}${id}/`, token),
+};