add page organisation

apps/frontend/app/dashboard/settings/organization/page.tsx

@@ -1,305 +1,379 @@
-/**
- * Organization Settings Page
- *
- * Manage organization details
- */
-
 'use client';
 
-import { useState } from 'react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { organizationsApi } from '@/lib/api';
+import { useEffect, useState } from 'react';
+import { useAuth } from '@/lib/context/auth-context';
+import { getOrganization, updateOrganization } from '@/lib/api/organizations';
+import type { OrganizationResponse } from '@/types/api';
+
+interface OrganizationForm {
+  name: string;
+  siren: string; // TODO: Add to backend
+  eori: string; // TODO: Add to backend
+  contact_phone: string;
+  contact_email: string;
+  address_street: string;
+  address_city: string;
+  address_postal_code: string;
+  address_country: string;
+}
 
 export default function OrganizationSettingsPage() {
-  const queryClient = useQueryClient();
-  const [isEditing, setIsEditing] = useState(false);
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState('');
-
-  const { data: organization, isLoading } = useQuery({
-    queryKey: ['organization', 'current'],
-    queryFn: () => organizationsApi.getCurrent(),
-  });
-
-  const [formData, setFormData] = useState({
+  const { user } = useAuth();
+  const [organization, setOrganization] = useState<OrganizationResponse | null>(null);
+  const [formData, setFormData] = useState<OrganizationForm>({
     name: '',
-    contactEmail: '',
-    contactPhone: '',
-    address: {
-      street: '',
-      city: '',
-      postalCode: '',
-      country: '',
-    },
+    siren: '',
+    eori: '',
+    contact_phone: '',
+    contact_email: '',
+    address_street: '',
+    address_city: '',
+    address_postal_code: '',
+    address_country: 'FR',
   });
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
 
-  const updateMutation = useMutation({
-    mutationFn: (data: typeof formData) => organizationsApi.update(organization?.id || '', data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['organization'] });
-      setSuccess('Organization updated successfully');
-      setIsEditing(false);
-      setTimeout(() => setSuccess(''), 3000);
-    },
-    onError: (err: any) => {
-      setError(err.response?.data?.message || 'Failed to update organization');
-    },
-  });
+  useEffect(() => {
+    if (user?.organizationId) {
+      loadOrganization();
+    }
+  }, [user?.organizationId]);
 
-  const handleEdit = () => {
-    if (organization) {
+  const loadOrganization = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const org = await getOrganization(user!.organizationId);
+      setOrganization(org);
       setFormData({
-        name: organization.name,
-        contactEmail: organization.contactEmail,
-        contactPhone: organization.contactPhone,
-        address: organization.address,
+        name: org.name,
+        siren: '', // TODO: Get from backend when available
+        eori: '', // TODO: Get from backend when available
+        contact_phone: org.contact_phone || '',
+        contact_email: org.contact_email || '',
+        address_street: org.address_street,
+        address_city: org.address_city,
+        address_postal_code: org.address_postal_code,
+        address_country: org.address_country,
       });
-      setIsEditing(true);
-      setError('');
-      setSuccess('');
+    } catch (err) {
+      console.error('Failed to load organization:', err);
+      setError(err instanceof Error ? err.message : 'Erreur lors du chargement');
+    } finally {
+      setIsLoading(false);
     }
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    updateMutation.mutate(formData);
+  const handleChange = (field: keyof OrganizationForm, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+    setSuccessMessage(null);
   };
 
   const handleCancel = () => {
-    setIsEditing(false);
-    setError('');
+    if (organization) {
+      setFormData({
+        name: organization.name,
+        siren: '',
+        eori: '',
+        contact_phone: organization.contact_phone || '',
+        contact_email: organization.contact_email || '',
+        address_street: organization.address_street,
+        address_city: organization.address_city,
+        address_postal_code: organization.address_postal_code,
+        address_country: organization.address_country,
+      });
+      setSuccessMessage(null);
+      setError(null);
+    }
+  };
+
+  const handleSave = async () => {
+    if (!user?.organizationId) return;
+
+    try {
+      setIsSaving(true);
+      setError(null);
+      setSuccessMessage(null);
+
+      // Update organization (excluding SIREN and EORI for now)
+      const updatedOrg = await updateOrganization(user.organizationId, {
+        name: formData.name,
+        contact_phone: formData.contact_phone,
+        contact_email: formData.contact_email,
+        address_street: formData.address_street,
+        address_city: formData.address_city,
+        address_postal_code: formData.address_postal_code,
+        address_country: formData.address_country,
+      });
+
+      setOrganization(updatedOrg);
+      setSuccessMessage('Informations sauvegardées avec succès');
+
+      // TODO: Save SIREN and EORI when backend supports them
+      if (formData.siren || formData.eori) {
+        console.log('SIREN/EORI will be saved when backend is updated:', {
+          siren: formData.siren,
+          eori: formData.eori,
+        });
+      }
+    } catch (err) {
+      console.error('Failed to update organization:', err);
+      setError(err instanceof Error ? err.message : 'Erreur lors de la sauvegarde');
+    } finally {
+      setIsSaving(false);
+    }
   };
 
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center h-64">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-4 border-blue-600 mb-4"></div>
+          <p className="text-gray-600">Chargement...</p>
+        </div>
       </div>
     );
   }
 
   if (!organization) {
     return (
-      <div className="text-center py-12">
-        <h2 className="text-2xl font-semibold text-gray-900">Organization not found</h2>
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-red-50 border border-red-200 rounded-lg p-6">
+          <h3 className="text-lg font-semibold text-red-900 mb-2">Erreur</h3>
+          <p className="text-red-700">{error || "Impossible de charger l'organisation"}</p>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="max-w-4xl space-y-6">
-      <div>
-        <h1 className="text-2xl font-bold text-gray-900">Organization Settings</h1>
-        <p className="text-sm text-gray-500 mt-1">Manage your organization information</p>
+    <div className="max-w-4xl mx-auto">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-gray-900">Paramètres de l'organisation</h1>
+        <p className="text-gray-600 mt-2">Gérez les informations de votre organisation</p>
       </div>
 
-      {success && (
-        <div className="rounded-md bg-green-50 p-4">
-          <div className="text-sm text-green-800">{success}</div>
-        </div>
-      )}
-
-      {error && (
-        <div className="rounded-md bg-red-50 p-4">
-          <div className="text-sm text-red-800">{error}</div>
-        </div>
-      )}
-
-      <div className="bg-white rounded-lg shadow">
-        <div className="px-6 py-4 border-b flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-gray-900">Organization Details</h2>
-          {!isEditing && (
-            <button
-              onClick={handleEdit}
-              className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
-            >
-              <svg className="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                />
-              </svg>
-              Edit
-            </button>
-          )}
-        </div>
-
-        <form onSubmit={handleSubmit} className="p-6">
-          <div className="space-y-6">
-            {/* Basic Info */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Organization Name</label>
-                {isEditing ? (
-                  <input
-                    type="text"
-                    value={formData.name}
-                    onChange={e => setFormData({ ...formData, name: e.target.value })}
-                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
-                    required
-                  />
-                ) : (
-                  <p className="mt-1 text-sm text-gray-900">{organization.name}</p>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Type</label>
-                <p className="mt-1 text-sm text-gray-900">{organization.type.replace('_', ' ')}</p>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Contact Email</label>
-                {isEditing ? (
-                  <input
-                    type="email"
-                    value={formData.contactEmail}
-                    onChange={e => setFormData({ ...formData, contactEmail: e.target.value })}
-                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
-                    required
-                  />
-                ) : (
-                  <p className="mt-1 text-sm text-gray-900">{organization.contactEmail}</p>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Contact Phone</label>
-                {isEditing ? (
-                  <input
-                    type="tel"
-                    value={formData.contactPhone}
-                    onChange={e => setFormData({ ...formData, contactPhone: e.target.value })}
-                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
-                    required
-                  />
-                ) : (
-                  <p className="mt-1 text-sm text-gray-900">{organization.contactPhone}</p>
-                )}
-              </div>
-            </div>
-
-            {/* Address */}
-            <div>
-              <h3 className="text-sm font-medium text-gray-900 mb-4">Address</h3>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div className="md:col-span-2">
-                  <label className="block text-sm font-medium text-gray-700">Street</label>
-                  {isEditing ? (
-                    <input
-                      type="text"
-                      value={formData.address.street}
-                      onChange={e =>
-                        setFormData({
-                          ...formData,
-                          address: {
-                            ...formData.address,
-                            street: e.target.value,
-                          },
-                        })
-                      }
-                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
-                      required
-                    />
-                  ) : (
-                    <p className="mt-1 text-sm text-gray-900">{organization.address.street}</p>
-                  )}
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">City</label>
-                  {isEditing ? (
-                    <input
-                      type="text"
-                      value={formData.address.city}
-                      onChange={e =>
-                        setFormData({
-                          ...formData,
-                          address: {
-                            ...formData.address,
-                            city: e.target.value,
-                          },
-                        })
-                      }
-                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
-                      required
-                    />
-                  ) : (
-                    <p className="mt-1 text-sm text-gray-900">{organization.address.city}</p>
-                  )}
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">Postal Code</label>
-                  {isEditing ? (
-                    <input
-                      type="text"
-                      value={formData.address.postalCode}
-                      onChange={e =>
-                        setFormData({
-                          ...formData,
-                          address: {
-                            ...formData.address,
-                            postalCode: e.target.value,
-                          },
-                        })
-                      }
-                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
-                      required
-                    />
-                  ) : (
-                    <p className="mt-1 text-sm text-gray-900">{organization.address.postalCode}</p>
-                  )}
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">Country</label>
-                  {isEditing ? (
-                    <input
-                      type="text"
-                      value={formData.address.country}
-                      onChange={e =>
-                        setFormData({
-                          ...formData,
-                          address: {
-                            ...formData.address,
-                            country: e.target.value,
-                          },
-                        })
-                      }
-                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
-                      required
-                    />
-                  ) : (
-                    <p className="mt-1 text-sm text-gray-900">{organization.address.country}</p>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            {isEditing && (
-              <div className="flex justify-end space-x-3 pt-6 border-t">
-                <button
-                  type="button"
-                  onClick={handleCancel}
-                  className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  disabled={updateMutation.isPending}
-                  className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400"
-                >
-                  {updateMutation.isPending ? 'Saving...' : 'Save Changes'}
-                </button>
-              </div>
-            )}
+      {/* Success Message */}
+      {successMessage && (
+        <div className="mb-6 bg-green-50 border border-green-200 rounded-lg p-4">
+          <div className="flex items-center">
+            <span className="text-green-600 text-xl mr-3">✓</span>
+            <p className="text-green-800 font-medium">{successMessage}</p>
           </div>
-        </form>
+        </div>
+      )}
+
+      {/* Error Message */}
+      {error && (
+        <div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
+          <div className="flex items-center">
+            <span className="text-red-600 text-xl mr-3">✕</span>
+            <p className="text-red-800 font-medium">{error}</p>
+          </div>
+        </div>
+      )}
+
+      {/* Form */}
+      <div className="bg-white rounded-lg shadow-md">
+        <div className="p-8">
+          <h2 className="text-xl font-semibold text-gray-900 mb-6">Informations</h2>
+
+          <div className="space-y-6">
+            {/* Nom de la société */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Nom de la société <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="text"
+                value={formData.name}
+                onChange={e => handleChange('name', e.target.value)}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="Xpeditis"
+                required
+              />
+            </div>
+
+            {/* SIREN */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                SIREN
+                <span className="ml-2 text-xs text-gray-500">(Système d'Identification du Répertoire des Entreprises)</span>
+              </label>
+              <input
+                type="text"
+                value={formData.siren}
+                onChange={e => handleChange('siren', e.target.value.replace(/\D/g, '').slice(0, 9))}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="123 456 789"
+                maxLength={9}
+              />
+              <p className="mt-1 text-xs text-gray-500">9 chiffres</p>
+            </div>
+
+            {/* Numéro EORI */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Numéro EORI
+                <span className="ml-2 text-xs text-gray-500">(Economic Operators Registration and Identification)</span>
+              </label>
+              <input
+                type="text"
+                value={formData.eori}
+                onChange={e => handleChange('eori', e.target.value.toUpperCase())}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="FR123456789"
+                maxLength={17}
+              />
+              <p className="mt-1 text-xs text-gray-500">Code pays (2 lettres) + numéro unique (max 15 caractères)</p>
+            </div>
+
+            {/* Téléphone */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Téléphone</label>
+              <input
+                type="tel"
+                value={formData.contact_phone}
+                onChange={e => handleChange('contact_phone', e.target.value)}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="06 80 18 28 12"
+              />
+            </div>
+
+            {/* Email */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Email</label>
+              <input
+                type="email"
+                value={formData.contact_email}
+                onChange={e => handleChange('contact_email', e.target.value)}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="contact@xpeditis.com"
+              />
+            </div>
+
+            {/* Divider */}
+            <div className="border-t border-gray-200 pt-6">
+              <h3 className="text-lg font-semibold text-gray-900 mb-4">Adresse</h3>
+            </div>
+
+            {/* Rue */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Rue <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="text"
+                value={formData.address_street}
+                onChange={e => handleChange('address_street', e.target.value)}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="123 Rue de la Paix"
+                required
+              />
+            </div>
+
+            {/* Ville et Code postal */}
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Code postal <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="text"
+                  value={formData.address_postal_code}
+                  onChange={e => handleChange('address_postal_code', e.target.value)}
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="75001"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Ville <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="text"
+                  value={formData.address_city}
+                  onChange={e => handleChange('address_city', e.target.value)}
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="Paris"
+                  required
+                />
+              </div>
+            </div>
+
+            {/* Pays */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Pays <span className="text-red-500">*</span>
+              </label>
+              <select
+                value={formData.address_country}
+                onChange={e => handleChange('address_country', e.target.value)}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                required
+              >
+                <option value="FR">France</option>
+                <option value="BE">Belgique</option>
+                <option value="DE">Allemagne</option>
+                <option value="ES">Espagne</option>
+                <option value="IT">Italie</option>
+                <option value="NL">Pays-Bas</option>
+                <option value="GB">Royaume-Uni</option>
+                <option value="US">États-Unis</option>
+                <option value="CN">Chine</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="bg-gray-50 px-8 py-4 border-t border-gray-200 flex items-center justify-end space-x-4">
+          <button
+            type="button"
+            onClick={handleCancel}
+            disabled={isSaving}
+            className="px-6 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Annuler
+          </button>
+          <button
+            type="button"
+            onClick={handleSave}
+            disabled={isSaving || !formData.name || !formData.address_street}
+            className="px-6 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center"
+          >
+            {isSaving ? (
+              <>
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                Enregistrement...
+              </>
+            ) : (
+              'Enregistrer'
+            )}
+          </button>
+        </div>
       </div>
+
+      {/* Info Note */}
+      {(formData.siren || formData.eori) && (
+        <div className="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
+          <div className="flex items-start">
+            <span className="text-blue-600 text-xl mr-3">ℹ️</span>
+            <div>
+              <p className="text-blue-900 font-medium mb-1">Note importante</p>
+              <p className="text-blue-800 text-sm">
+                Les champs SIREN et EORI seront sauvegardés une fois que le backend sera mis à jour pour les
+                supporter. Pour l'instant, seules les autres informations seront enregistrées.
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }