agent creation

src/app/dashboard/pages/agents/agents.html

@@ -29,7 +29,7 @@
     [total]="total()"
     [page]="page()"
     [perPage]="size()"
-    (pageChange)="page.set($event)"
+    (pageChange)="page.set($event - 1)"
     (perPageChange)="size.set($event)"
   ></app-paginator>
 </div>
@@ -37,6 +37,7 @@
 <app-modal [open]="modalOpen()" [title]="modalTitle()" (close)="closeModal()" size="xxl">
   <app-agent-full-form
     [value]="editingItem() ?? undefined"
+    [compact]="!editingItem()"
     (save)="onFormSave($event)"
     (cancel)="closeModal()"
   />
@@ -61,7 +62,7 @@
         </div>
         <div>
           <div class="text-xs text-muted-foreground mb-1">Profil</div>
-          <div class="font-medium">{{ agent.profile }}</div>
+          <div class="font-medium">{{ agent.profil }}</div>
         </div>
         <div>
           <div class="text-xs text-muted-foreground mb-1">Statut</div>

src/app/dashboard/pages/agents/agents.ts

@@ -25,6 +25,7 @@ import { TpeDevice, TpeStatus } from 'src/app/core/interfaces/tpe';
 import { AgentFullForm } from '@shared/forms/agent-full-form/agent-full-form';
 import { forkJoin, of } from 'rxjs';
 import { switchMap, catchError } from 'rxjs/operators';
+import { toast } from 'ngx-sonner';
 
 @Component({
   standalone: true,
@@ -50,7 +51,7 @@ export class AgentsPage {
   total = signal(0);
   loading = signal(false);
 
-  page = signal(1);
+  page = signal(0);
   size = signal(10);
   search = signal('');
   sort = signal<SortState>({ key: 'code', dir: 'asc' });
@@ -90,7 +91,7 @@ export class AgentsPage {
   cols: TableColumn<Agent>[] = [
     { key: 'code', label: 'Code', sortable: true, defaultVisible: true },
     { key: 'nomPrenom', label: 'Nom complet', sortable: true, defaultVisible: true, cell: (a) => `${a.nom} ${a.prenom}` },
-    { key: 'profile', label: 'Profil', sortable: true, defaultVisible: true },
+    { key: 'profil', label: 'Profil', sortable: true, defaultVisible: true },
     { key: 'statut', label: 'Statut', sortable: true, defaultVisible: true, cell: (a) => this.renderStatutBadge(a.statut) },
     { key: 'phone', label: 'Téléphone', sortable: true, defaultVisible: true },
     { key: 'zone', label: 'Zone', sortable: true },
@@ -260,6 +261,7 @@ export class AgentsPage {
 
   onFormSave(payload: Partial<Agent>) {
     const current = this.editingItem();
+    const isCreating = !current?.id; // Mode création (compact)
     const familyMembersData = this.formComp?.getFamilyMembersData() || [];
 
     // Save agent first
@@ -280,7 +282,12 @@ export class AgentsPage {
             throw new Error("Impossible d'obtenir l'ID de l'agent sauvegardé");
           }
 
-          // Get existing family members for this agent
+          // In creation mode (compact), skip family members management
+          if (isCreating || familyMembersData.length === 0) {
+            return of([]);
+          }
+
+          // Get existing family members for this agent (only for updates)
           return this.familyMemberService.getByAgentId(savedAgentId).pipe(
             switchMap((existingMembers) => {
               const existingIds = new Set(existingMembers.map((m) => m.id));
@@ -354,12 +361,13 @@ export class AgentsPage {
       )
       .subscribe({
         next: () => {
+          toast.success('Agent sauvegardé avec succès');
+          // Close modal first
+          this.closeModal();
           // Reset form after successful save
           this.formComp?.resetForm();
           // Clear editing item
           this.editingItem.set(null);
-          // Close modal
-          this.closeModal();
           // Refresh data
           this.fetch({
             page: this.page(),