create-crm-tmp 2.0.0 → 2.1.0

package/template/src/app/(dashboard)/closing/page.tsx

@@ -14,11 +14,13 @@ import {
   Calendar,
   Eye,
 } from 'lucide-react';
-import { cn } from '@/lib/utils';
+import { cn, devToast } from '@/lib/utils';
 import { PageLoader } from '@/components/skeleton';
+import { StatusSelect } from '@/components/ui/status-select';
 import { useUserRole } from '@/hooks/use-user-role';
 import { ProtectedPage } from '@/components/protected-page';
 import { useFetch } from '@/hooks/use-fetch';
+import { useAppToast } from '@/contexts/app-toast-context';
 
 interface Status {
   id: string;
@@ -129,7 +131,7 @@ function KanbanContactCard({
       onDragStart={canDrag ? onDragStart : undefined}
       onDragEnd={canDrag ? onDragEnd : undefined}
       className={cn(
-        'relative rounded-lg border border-border bg-card p-4 text-[13px] shadow-(--shadow-card) transition-transform hover:-translate-y-0.5',
+        'border-border bg-card relative rounded-lg border p-4 text-[13px] shadow-(--shadow-card) transition-transform hover:-translate-y-0.5',
         canDrag && 'cursor-grab active:cursor-grabbing',
         !canDrag && 'cursor-default',
         isDragging && 'opacity-80 ring-2 ring-blue-400',
@@ -138,7 +140,7 @@ function KanbanContactCard({
       {/* Icône Eye en haut à droite */}
       <Link
         href={`/contacts/${contact.id}`}
-        className="absolute top-2 right-2 z-10 rounded p-1 transition-colors duration-200 hover:bg-muted"
+        className="hover:bg-muted absolute top-2 right-2 z-10 rounded p-1 transition-colors duration-200"
         onClick={(e) => e.stopPropagation()}
       >
         <Eye className="h-4 w-4 stroke-gray-400" />
@@ -155,7 +157,9 @@ function KanbanContactCard({
             {(contact.firstName?.[0] || contact.lastName?.[0] || '?').toUpperCase()}
           </div>
           <div className="min-w-0 flex-1">
-            <p className="truncate text-sm font-semibold text-foreground">{fullName || 'Sans nom'}</p>
+            <p className="text-foreground truncate text-sm font-semibold">
+              {fullName || 'Sans nom'}
+            </p>
           </div>
         </div>
 
@@ -229,6 +233,7 @@ function createDefaultColumns(statuses: Status[]): ClosingColumn[] {
 }
 
 export default function ClosingPage() {
+  const toast = useAppToast();
   const { hasPermission, isLoading: roleLoading } = useUserRole();
   const {
     data: statuses = [],
@@ -403,8 +408,10 @@ export default function ClosingPage() {
         if (!res.ok) {
           throw new Error('Erreur lors de la mise à jour du statut');
         }
+        toast.success('Statut du contact mis à jour');
       } catch (e) {
         console.error(e);
+        toast.error(devToast('Erreur lors du déplacement du contact', e));
       } finally {
         setIsSavingDrag(false);
       }
@@ -556,15 +563,41 @@ export default function ClosingPage() {
     return Array.from(companyMap.values());
   }, [contacts]);
 
+  const uniqueCommercials = useMemo(
+    () =>
+      Array.from(
+        new Map(
+          contacts
+            .filter((c) => c.assignedCommercial)
+            .map((c) => [c.assignedCommercialId, c.assignedCommercial!]),
+        ).values(),
+      ),
+    [contacts],
+  );
+
+  const uniqueTelepros = useMemo(
+    () =>
+      Array.from(
+        new Map(
+          contacts
+            .filter((c) => c.assignedTelepro)
+            .map((c) => [c.assignedTeleproId, c.assignedTelepro!]),
+        ).values(),
+      ),
+    [contacts],
+  );
+
   return (
     <ProtectedPage requiredPermission="contacts.view_closing_pipeline">
       {statusesLoading || contactsLoading || roleLoading ? (
         <div className="h-full">
-          <div className="border-b border-border bg-background/95 px-4 py-4 backdrop-blur-sm sm:px-6 lg:px-8 lg:py-6">
+          <div className="border-border bg-background/95 border-b px-4 py-4 backdrop-blur-sm sm:px-6 lg:px-8 lg:py-6">
             <div className="flex items-start gap-3">
               <div className="min-w-0 flex-1">
-                <h1 className="text-xl font-bold text-foreground sm:text-2xl">Pipeline de Closing</h1>
-                <p className="mt-1 text-sm text-muted-foreground">
+                <h1 className="text-foreground text-xl font-bold sm:text-2xl">
+                  Pipeline de Closing
+                </h1>
+                <p className="text-muted-foreground mt-1 text-sm">
                   Visualisez et gérez vos opportunités commerciales
                 </p>
               </div>
@@ -579,25 +612,25 @@ export default function ClosingPage() {
           {' '}
           {/* md:overflow-y-hidden */}
           {/* En-tête personnalisé avec filtres intégrés */}
-          <div className="border-b border-border bg-background/95 px-4 py-4 backdrop-blur-sm sm:px-6 lg:px-8 lg:py-6">
+          <div className="border-border bg-background/95 border-b px-4 py-4 backdrop-blur-sm sm:px-6 lg:px-8 lg:py-6">
             <div className="flex items-start gap-3">
               <div className="flex min-w-0 flex-1 items-start justify-between gap-4">
                 <div className="min-w-0 flex-1">
-                  <h1 className="text-xl font-bold text-foreground sm:text-2xl">
+                  <h1 className="text-foreground text-xl font-bold sm:text-2xl">
                     Pipeline de Closing
                   </h1>
-                  <p className="mt-1 text-sm text-muted-foreground">
+                  <p className="text-muted-foreground mt-1 text-sm">
                     Visualisez et gérez vos opportunités commerciales
                   </p>
 
                   {/* Filtres intégrés dans l'en-tête */}
                   <div className="mt-4 flex flex-col gap-3 sm:flex-row">
                     <div className="flex items-center gap-2">
-                      <span className="text-xs font-medium text-muted-foreground">Période:</span>
+                      <span className="text-muted-foreground text-xs font-medium">Période:</span>
                       <div className="relative">
-                        <Filter className="absolute top-1/2 left-2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                        <Filter className="text-muted-foreground absolute top-1/2 left-2 h-3.5 w-3.5 -translate-y-1/2" />
                         <select
-                          className="rounded-lg border border-border bg-card py-1.5 pr-2 pl-7 text-sm text-foreground focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:outline-none"
+                          className="border-border bg-card text-foreground focus:border-primary/50 focus:ring-primary/20 rounded-lg border py-1.5 pr-2 pl-7 text-sm focus:ring-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                           value={selectedPeriod}
                           onChange={(e) => setSelectedPeriod(e.target.value)}
                         >
@@ -610,22 +643,16 @@ export default function ClosingPage() {
                     </div>
 
                     <div className="flex items-center gap-2">
-                      <span className="text-xs font-medium text-muted-foreground">Commercial:</span>
+                      <span className="text-muted-foreground text-xs font-medium">Commercial:</span>
                       <select
-                        className="rounded-lg border border-border bg-card px-2 py-1.5 text-sm text-foreground focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:outline-none"
+                        className="border-border bg-card text-foreground focus:border-primary/50 focus:ring-primary/20 rounded-lg border px-2 py-1.5 text-sm focus:ring-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         value={selectedCommercialId}
                         onChange={(e) =>
                           setSelectedCommercialId(e.target.value === 'all' ? 'all' : e.target.value)
                         }
                       >
                         <option value="all">Tous</option>
-                        {Array.from(
-                          new Map(
-                            contacts
-                              .filter((c) => c.assignedCommercial)
-                              .map((c) => [c.assignedCommercialId, c.assignedCommercial!]),
-                          ).values(),
-                        ).map((user) => (
+                        {uniqueCommercials.map((user) => (
                           <option key={user.id} value={user.id}>
                             {user.name}
                           </option>
@@ -634,22 +661,16 @@ export default function ClosingPage() {
                     </div>
 
                     <div className="flex items-center gap-2">
-                      <span className="text-xs font-medium text-muted-foreground">Télépro:</span>
+                      <span className="text-muted-foreground text-xs font-medium">Télépro:</span>
                       <select
-                        className="rounded-lg border border-border bg-card px-2 py-1.5 text-sm text-foreground focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:outline-none"
+                        className="border-border bg-card text-foreground focus:border-primary/50 focus:ring-primary/20 rounded-lg border px-2 py-1.5 text-sm focus:ring-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         value={selectedTeleproId}
                         onChange={(e) =>
                           setSelectedTeleproId(e.target.value === 'all' ? 'all' : e.target.value)
                         }
                       >
                         <option value="all">Tous</option>
-                        {Array.from(
-                          new Map(
-                            contacts
-                              .filter((c) => c.assignedTelepro)
-                              .map((c) => [c.assignedTeleproId, c.assignedTelepro!]),
-                          ).values(),
-                        ).map((user) => (
+                        {uniqueTelepros.map((user) => (
                           <option key={user.id} value={user.id}>
                             {user.name}
                           </option>
@@ -658,7 +679,7 @@ export default function ClosingPage() {
                     </div>
 
                     {isSavingDrag && (
-                      <span className="self-end text-xs text-muted-foreground">
+                      <span className="text-muted-foreground self-end text-xs">
                         Sauvegarde des changements…
                       </span>
                     )}
@@ -669,7 +690,7 @@ export default function ClosingPage() {
                   <button
                     type="button"
                     onClick={openConfigModal}
-                    className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-semibold text-foreground shadow-sm transition-colors duration-200 hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:outline-none"
+                    className="border-border bg-card text-foreground hover:bg-muted focus-visible:ring-primary inline-flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 text-sm font-semibold shadow-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
                   >
                     <SettingsIcon className="h-4 w-4" />
                     Configurer
@@ -697,21 +718,21 @@ export default function ClosingPage() {
             `}</style>
             {sortedColumns.length === 0 ? (
               <div className="flex w-full items-center justify-center py-16">
-                <div className="max-w-md rounded-xl border-2 border-dashed border-border bg-card p-8 text-center shadow-(--shadow-card)">
-                  <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/15">
-                    <Filter className="h-8 w-8 text-primary" />
+                <div className="border-border bg-card max-w-md rounded-xl border-2 border-dashed p-8 text-center shadow-(--shadow-card)">
+                  <div className="bg-primary/15 mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full">
+                    <Filter className="text-primary h-8 w-8" />
                   </div>
-                  <h3 className="mb-2 text-lg font-semibold text-foreground">
+                  <h3 className="text-foreground mb-2 text-lg font-semibold">
                     Votre pipeline est vide
                   </h3>
-                  <p className="mb-6 text-sm text-muted-foreground">
+                  <p className="text-muted-foreground mb-6 text-sm">
                     Commencez par configurer les colonnes de votre pipeline de closing en cliquant
                     sur le bouton ci-dessous.
                   </p>
                   <button
                     type="button"
                     onClick={openConfigModal}
-                    className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground shadow-(--shadow-card) transition-colors duration-200 hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:outline-none"
+                    className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary inline-flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold shadow-(--shadow-card) transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
                   >
                     <SettingsIcon className="h-4 w-4" />
                     Configurer ma pipeline
@@ -727,10 +748,9 @@ export default function ClosingPage() {
                   <div
                     key={column.id}
                     className={cn(
-                      'flex shrink-0 flex-col rounded-xl bg-muted shadow-sm transition-colors',
+                      'bg-muted flex shrink-0 flex-col rounded-xl shadow-sm transition-colors',
                       'h-auto max-h-[calc(100vh-220px)]',
-                      dragOverStatusId === column.statusId &&
-                        'ring-2 ring-blue-400 ring-offset-2',
+                      dragOverStatusId === column.statusId && 'ring-2 ring-blue-400 ring-offset-2',
                       dragOverColumnId === column.id &&
                         draggedColumnId &&
                         'ring-2 ring-blue-500 ring-offset-2',
@@ -898,7 +918,7 @@ export default function ClosingPage() {
                         }
                         className={cn(
                           'flex w-80 shrink-0 flex-col rounded-xl border border-gray-200 bg-gray-50',
-                          'cursor-grab transition-all duration-150 active:cursor-grabbing',
+                          'cursor-grab transition-[transform,box-shadow] duration-150 active:cursor-grabbing',
                           'hover:-translate-y-1 hover:shadow-lg',
                           dragOverConfigColumnId === column.id &&
                             'ring-2 ring-blue-400 ring-offset-2',
@@ -912,7 +932,7 @@ export default function ClosingPage() {
                               onChange={(e) =>
                                 updateConfigColumn(column.id, { title: 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"
                               placeholder="Nom de la colonne"
                             />
                             <button
@@ -927,30 +947,26 @@ export default function ClosingPage() {
                           <label className="mb-2 block text-xs font-medium text-gray-600">
                             Statut associé
                           </label>
-                          <select
+                          <StatusSelect
+                            statuses={statuses}
                             value={column.statusId || ''}
-                            onChange={(e) =>
+                            onChange={(value) =>
                               updateConfigColumn(column.id, {
-                                statusId: e.target.value || null,
+                                statusId: value || null,
                                 title:
-                                  e.target.value && statusesById[e.target.value]
-                                    ? statusesById[e.target.value].name
+                                  value && statusesById[value]
+                                    ? statusesById[value].name
                                     : column.title,
                                 color:
-                                  e.target.value && statusesById[e.target.value]
-                                    ? statusesById[e.target.value].color
+                                  value && statusesById[value]
+                                    ? statusesById[value].color
                                     : column.color,
                               })
                             }
-                            className="mb-3 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="">Sélectionnez un statut</option>
-                            {statuses.map((status) => (
-                              <option key={status.id} value={status.id}>
-                                {status.name}
-                              </option>
-                            ))}
-                          </select>
+                            placeholder="Sélectionnez un statut"
+                            size="sm"
+                            className="mb-3"
+                          />
 
                           <label className="mb-1 block text-xs font-medium text-gray-600">
                             Couleur de la colonne
@@ -970,7 +986,7 @@ export default function ClosingPage() {
                               onChange={(e) =>
                                 updateConfigColumn(column.id, { color: e.target.value })
                               }
-                              className="flex-1 rounded-lg border border-gray-300 px-2 py-1.5 text-xs text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                              className="flex-1 rounded-lg border border-gray-300 px-2 py-1.5 text-xs 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>
 
@@ -1017,7 +1033,7 @@ export default function ClosingPage() {
                   <button
                     type="button"
                     onClick={handleSaveConfig}
-                    className="cursor-pointer rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-sm transition-colors hover:bg-primary/90"
+                    className="bg-primary text-primary-foreground hover:bg-primary/90 cursor-pointer rounded-lg px-4 py-2 text-sm font-semibold shadow-sm transition-colors"
                   >
                     Enregistrer la configuration
                   </button>