create-crm-tmp 2.0.0 → 2.1.0

package/template/src/app/(dashboard)/contacts/companies/[id]/page.tsx

@@ -15,13 +15,14 @@ import {
   Phone,
   Mail,
 } from 'lucide-react';
-import { cn, normalizePhoneNumber } from '@/lib/utils';
+import { cn, normalizePhoneNumber, devToast } from '@/lib/utils';
 import { useConfirm } from '@/hooks/use-confirm';
 import { useUserRole } from '@/hooks/use-user-role';
 import { ProtectedPage } from '@/components/protected-page';
 import AddressAutocomplete from '@/components/address-autocomplete';
 import { Spinner } from '@/components/skeleton';
 import { useAppToast } from '@/contexts/app-toast-context';
+import { StatusSelect } from '@/components/ui/status-select';
 
 interface CompanyContact {
   id: string;
@@ -152,7 +153,7 @@ export default function CompanyDetailPage() {
 
   const originalFormDataRef = useRef<typeof companyFormData | null>(null);
 
-  const canEdit = hasPermission('companies.edit') || hasPermission('contacts.edit');
+  const canEdit = hasPermission('companies.edit');
   const canDelete = hasPermission('companies.delete') || hasPermission('contacts.delete');
   const canCreate = hasPermission('companies.create') || hasPermission('contacts.create');
   const canViewActivities = hasPermission('companies.view_activities');
@@ -181,7 +182,7 @@ export default function CompanyDetailPage() {
       setCompanyFormData(initialForm);
       originalFormDataRef.current = { ...initialForm };
     } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Erreur');
+      setError(devToast("Erreur lors du chargement de l'entreprise", err));
     } finally {
       setLoading(false);
     }
@@ -280,8 +281,9 @@ export default function CompanyDetailPage() {
         setLastSavedCompany(new Date());
         originalFormDataRef.current = { ...companyFormData };
         await fetchActivities();
+        if (!silent) toast.success('Entreprise mise à jour');
       } catch (err: unknown) {
-        if (!silent) setError(err instanceof Error ? err.message : 'Erreur');
+        if (!silent) setError(devToast('Erreur lors de la sauvegarde', err));
       } finally {
         setIsSavingCompany(false);
       }
@@ -482,8 +484,9 @@ export default function CompanyDetailPage() {
       await fetchCompany();
       await fetchActivities();
       setShowAddContactModal(false);
+      toast.success('Contact associé à l\'entreprise');
     } catch (err: unknown) {
-      setAddExistingError(err instanceof Error ? err.message : 'Erreur');
+      setAddExistingError(devToast("Erreur lors de l'association du contact", err));
     } finally {
       setAddExistingLoading(false);
     }
@@ -530,8 +533,9 @@ export default function CompanyDetailPage() {
       await fetchCompany();
       await fetchActivities();
       setShowAddContactModal(false);
+      toast.success('Contact créé et associé à l\'entreprise');
     } catch (err: unknown) {
-      setContactFormError(err instanceof Error ? err.message : 'Erreur');
+      setContactFormError(devToast('Erreur lors de la création du contact', err));
     } finally {
       setSavingContact(false);
     }
@@ -549,9 +553,10 @@ export default function CompanyDetailPage() {
     try {
       const res = await fetch(`/api/companies/${id}`, { method: 'DELETE' });
       if (!res.ok) throw new Error('Erreur lors de la suppression');
+      toast.success('Entreprise supprimée');
       router.push('/contacts?entity=companies');
     } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Erreur');
+      setError(devToast("Erreur lors de la suppression de l'entreprise", err));
     }
   };
 
@@ -678,7 +683,7 @@ export default function CompanyDetailPage() {
                         onChange={(e) =>
                           setCompanyFormData({ ...companyFormData, name: e.target.value })
                         }
-                        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         required
                       />
                     </div>
@@ -697,7 +702,7 @@ export default function CompanyDetailPage() {
                           onChange={(e) =>
                             setCompanyFormData({ ...companyFormData, phone: e.target.value })
                           }
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         />
                       </div>
                       <div>
@@ -714,7 +719,7 @@ export default function CompanyDetailPage() {
                           onChange={(e) =>
                             setCompanyFormData({ ...companyFormData, email: e.target.value })
                           }
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         />
                       </div>
                     </div>
@@ -757,7 +762,7 @@ export default function CompanyDetailPage() {
                           onChange={(e) =>
                             setCompanyFormData({ ...companyFormData, city: e.target.value })
                           }
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         />
                       </div>
                       <div>
@@ -774,7 +779,7 @@ export default function CompanyDetailPage() {
                           onChange={(e) =>
                             setCompanyFormData({ ...companyFormData, postalCode: e.target.value })
                           }
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         />
                       </div>
                     </div>
@@ -793,7 +798,7 @@ export default function CompanyDetailPage() {
                           setCompanyFormData({ ...companyFormData, website: e.target.value })
                         }
                         placeholder="https://"
-                        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       />
                     </div>
                     <div className="grid grid-cols-2 gap-2">
@@ -811,7 +816,7 @@ export default function CompanyDetailPage() {
                           onChange={(e) =>
                             setCompanyFormData({ ...companyFormData, siret: e.target.value })
                           }
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         />
                       </div>
                       <div>
@@ -828,7 +833,7 @@ export default function CompanyDetailPage() {
                           onChange={(e) =>
                             setCompanyFormData({ ...companyFormData, industry: e.target.value })
                           }
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         />
                       </div>
                     </div>
@@ -846,7 +851,7 @@ export default function CompanyDetailPage() {
                           setCompanyFormData({ ...companyFormData, notes: e.target.value })
                         }
                         rows={3}
-                        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       />
                     </div>
                     <div className="grid grid-cols-2 gap-2 border-t border-gray-100 pt-3">
@@ -866,7 +871,7 @@ export default function CompanyDetailPage() {
                               assignedCommercialId: e.target.value,
                             })
                           }
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         >
                           <option value="">Non attribué</option>
                           {users.map((u) => (
@@ -892,7 +897,7 @@ export default function CompanyDetailPage() {
                               assignedTeleproId: e.target.value,
                             })
                           }
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         >
                           <option value="">Non attribué</option>
                           {users.map((u) => (
@@ -1230,8 +1235,8 @@ export default function CompanyDetailPage() {
         </div>
 
         {showAddContactModal && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm">
-            <div className="flex max-h-[90vh] w-full max-w-lg flex-col rounded-lg bg-white shadow-xl">
+          <div className="ui-fade-in fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm">
+            <div className="ui-scale-in flex max-h-[90vh] w-full max-w-lg flex-col rounded-lg bg-white shadow-xl">
               <div className="shrink-0 border-b border-gray-200 px-6 py-4">
                 <div className="flex items-center justify-between">
                   <h2 className="text-lg font-semibold text-gray-900">Ajouter un contact</h2>
@@ -1290,7 +1295,7 @@ export default function CompanyDetailPage() {
                           onChange={(e) =>
                             setNewContactForm({ ...newContactForm, civility: e.target.value })
                           }
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         >
                           <option value="">-</option>
                           <option value="M">M.</option>
@@ -1314,7 +1319,7 @@ export default function CompanyDetailPage() {
                           onChange={(e) =>
                             setNewContactForm({ ...newContactForm, firstName: e.target.value })
                           }
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         />
                       </div>
                       <div>
@@ -1331,7 +1336,7 @@ export default function CompanyDetailPage() {
                           onChange={(e) =>
                             setNewContactForm({ ...newContactForm, lastName: e.target.value })
                           }
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         />
                       </div>
                     </div>
@@ -1350,7 +1355,7 @@ export default function CompanyDetailPage() {
                           setNewContactForm({ ...newContactForm, jobTitle: e.target.value })
                         }
                         placeholder="Ex. Directeur commercial, Assistant..."
-                        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       />
                     </div>
                     <div className="grid grid-cols-2 gap-2">
@@ -1373,7 +1378,7 @@ export default function CompanyDetailPage() {
                             const n = normalizePhoneNumber(e.target.value);
                             if (n) setNewContactForm((prev) => ({ ...prev, phone: n }));
                           }}
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         />
                       </div>
                       <div>
@@ -1390,7 +1395,7 @@ export default function CompanyDetailPage() {
                           onChange={(e) =>
                             setNewContactForm({ ...newContactForm, email: e.target.value })
                           }
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         />
                       </div>
                     </div>
@@ -1429,7 +1434,7 @@ export default function CompanyDetailPage() {
                           onChange={(e) =>
                             setNewContactForm({ ...newContactForm, city: e.target.value })
                           }
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         />
                       </div>
                       <div>
@@ -1446,7 +1451,7 @@ export default function CompanyDetailPage() {
                           onChange={(e) =>
                             setNewContactForm({ ...newContactForm, postalCode: e.target.value })
                           }
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         />
                       </div>
                     </div>
@@ -1457,21 +1462,17 @@ export default function CompanyDetailPage() {
                       >
                         Statut
                       </label>
-                      <select
+                      <StatusSelect
                         id="new-status"
+                        statuses={statuses}
                         value={newContactForm.statusId}
-                        onChange={(e) =>
-                          setNewContactForm({ ...newContactForm, statusId: e.target.value })
+                        onChange={(value) =>
+                          setNewContactForm({ ...newContactForm, statusId: value })
                         }
-                        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                      >
-                        <option value="">Aucun statut</option>
-                        {statuses.map((s) => (
-                          <option key={s.id} value={s.id}>
-                            {s.name}
-                          </option>
-                        ))}
-                      </select>
+                        placeholder="Aucun statut"
+                        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                        size="sm"
+                      />
                     </div>
                     <div className="grid grid-cols-2 gap-2">
                       <div>
@@ -1490,7 +1491,7 @@ export default function CompanyDetailPage() {
                               assignedCommercialId: e.target.value,
                             })
                           }
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         >
                           <option value="">Non attribué</option>
                           {(isAdmin
@@ -1524,7 +1525,7 @@ export default function CompanyDetailPage() {
                               assignedTeleproId: e.target.value,
                             })
                           }
-                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                          className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         >
                           <option value="">Non attribué</option>
                           {(isAdmin
@@ -1571,7 +1572,7 @@ export default function CompanyDetailPage() {
                         value={existingContactSearch}
                         onChange={(e) => setExistingContactSearch(e.target.value)}
                         placeholder="Rechercher par nom, téléphone ou email..."
-                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       />
                       <p className="mt-1 text-xs text-gray-500">
                         Tapez pour rechercher parmi les contacts existants
@@ -1601,9 +1602,7 @@ export default function CompanyDetailPage() {
                                 key={c.id}
                                 className={cn(
                                   'flex cursor-pointer items-center gap-3 border-b border-gray-100 p-4 transition-colors last:border-b-0',
-                                  isSelected
-                                    ? 'bg-blue-50 hover:bg-blue-100'
-                                    : 'hover:bg-gray-50',
+                                  isSelected ? 'bg-blue-50 hover:bg-blue-100' : 'hover:bg-gray-50',
                                 )}
                                 onClick={() => setAddExistingSelectedId(isSelected ? null : c.id)}
                               >
@@ -1657,7 +1656,7 @@ export default function CompanyDetailPage() {
                               value={addExistingJobTitle}
                               onChange={(e) => setAddExistingJobTitle(e.target.value)}
                               placeholder="Ex. Directeur commercial..."
-                              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                             />
                           </div>
                         )}