wip: club

2024-07-11 23:02:29 +02:00 · 2024-07-11 23:02:29 +02:00 · 76d7a28678
commit 76d7a28678
parent d5b4820c79
33 changed files with 1346 additions and 227 deletions
--- a/pom.xml
+++ b/pom.xml
@ -109,6 +109,12 @@
            <groupId>io.quarkus</groupId>
            <artifactId>quarkus-websockets</artifactId>
        </dependency>
+
+        <dependency>
+            <groupId>net.sf.jmimemagic</groupId>
+            <artifactId>jmimemagic</artifactId>
+            <version>0.1.3</version>
+        </dependency>
    </dependencies>
    <build>
        <plugins>
--- a/src/main/java/fr/titionfire/ffsaf/data/model/AffiliationRequestModel.java
+++ b/src/main/java/fr/titionfire/ffsaf/data/model/AffiliationRequestModel.java
@ -1,5 +1,6 @@
 package fr.titionfire.ffsaf.data.model;

+import fr.titionfire.ffsaf.utils.RoleAsso;
 import io.quarkus.runtime.annotations.RegisterForReflection;
 import jakarta.persistence.*;
 import lombok.*;
@ -20,24 +21,27 @@ public class AffiliationRequestModel {
    Long id;

    String name;
-    String siren;
+    long siren;
    String RNA;
    String address;

-    String president_lname;
-    String president_fname;
-    String president_email;
-    int president_lincence;
+    String m1_lname;
+    String m1_fname;
+    String m1_email;
+    int m1_lincence;
+    RoleAsso m1_role;

-    String tresorier_lname;
-    String tresorier_fname;
-    String tresorier_email;
-    int tresorier_lincence;
+    String m2_lname;
+    String m2_fname;
+    String m2_email;
+    int m2_lincence;
+    RoleAsso m2_role;

-    String secretaire_lname;
-    String secretaire_fname;
-    String secretaire_email;
-    int secretaire_lincence;
+    String m3_lname;
+    String m3_fname;
+    String m3_email;
+    int m3_lincence;
+    RoleAsso m3_role;

    int saison;
 }
--- a/src/main/java/fr/titionfire/ffsaf/domain/service/AffiliationService.java
+++ b/src/main/java/fr/titionfire/ffsaf/domain/service/AffiliationService.java
@ -1,8 +1,11 @@
 package fr.titionfire.ffsaf.domain.service;

 import fr.titionfire.ffsaf.data.model.AffiliationRequestModel;
+import fr.titionfire.ffsaf.data.model.ClubModel;
 import fr.titionfire.ffsaf.data.repository.AffiliationRequestRepository;
 import fr.titionfire.ffsaf.data.repository.CombRepository;
+import fr.titionfire.ffsaf.rest.data.SimpleAffiliation;
+import fr.titionfire.ffsaf.rest.from.AffiliationForm;
 import fr.titionfire.ffsaf.rest.from.AffiliationRequestForm;
 import fr.titionfire.ffsaf.utils.Utils;
 import io.quarkus.hibernate.reactive.panache.Panache;
@ -12,6 +15,9 @@ import jakarta.enterprise.context.ApplicationScoped;
 import jakarta.inject.Inject;
 import org.eclipse.microprofile.config.inject.ConfigProperty;

+import java.util.List;
+import java.util.function.Consumer;
+
@WithSession
@ApplicationScoped
 public class AffiliationService {
@ -29,32 +35,49 @@ public class AffiliationService {
        AffiliationRequestModel affModel = form.toModel();
        affModel.setSaison(Utils.getSaison());

+        // noinspection ResultOfMethodCallIgnored
        return Uni.createFrom().item(affModel)
-                .call(model -> ((model.getPresident_lincence() != 0) ? combRepository.find("licence",
-                                model.getPresident_lincence()).count().invoke(count -> {
+                .call(model -> ((model.getM1_lincence() != 0) ? combRepository.find("licence",
+                                model.getM1_lincence()).count().invoke(count -> {
                            if (count == 0) {
-                                throw new IllegalArgumentException("Licence président inconnue");
+                                throw new IllegalArgumentException("Licence membre n°1  inconnue");
                            }
                        }) : Uni.createFrom().nullItem())
                )
-                .call(model -> ((model.getTresorier_lincence() != 0) ? combRepository.find("licence",
-                                model.getTresorier_lincence()).count().invoke(count -> {
+                .call(model -> ((model.getM2_lincence() != 0) ? combRepository.find("licence",
+                                model.getM2_lincence()).count().invoke(count -> {
                            if (count == 0) {
-                                throw new IllegalArgumentException("Licence trésorier inconnue");
+                                throw new IllegalArgumentException("Licence membre n°2 inconnue");
                            }
                        }) : Uni.createFrom().nullItem())
                )
-                .call(model -> ((model.getSecretaire_lincence() != 0) ? combRepository.find("licence",
-                                model.getSecretaire_lincence()).count().invoke(count -> {
+                .call(model -> ((model.getM3_lincence() != 0) ? combRepository.find("licence",
+                                model.getM3_lincence()).count().invoke(count -> {
                            if (count == 0) {
-                                throw new IllegalArgumentException("Licence secrétaire inconnue");
+                                throw new IllegalArgumentException("Licence membre n°3 inconnue");
                            }
                        }) : Uni.createFrom().nullItem())
                ).chain(model -> Panache.withTransaction(() -> repository.persist(model)))
-                .call(model -> Uni.createFrom().future(Utils.replacePhoto(model.getId(), form.getLogo(), media,
+                .onItem().invoke(model -> Uni.createFrom().future(Utils.replacePhoto(model.getId(), form.getLogo(), media,
                        "aff_request/logo")))
-                .call(model -> Uni.createFrom().future(Utils.replacePhoto(model.getId(), form.getStatus(), media,
+                .onItem().invoke(model -> Uni.createFrom().future(Utils.replacePhoto(model.getId(), form.getStatus(), media,
                        "aff_request/status")))
                .map(__ -> "Ok");
    }
+
+    public Uni<List<SimpleAffiliation>> getCurrentSaisonAffiliation() {
+        return Uni.createFrom().nullItem(); // TODO
+    }
+
+    public Uni<List<SimpleAffiliation>> getAffiliation(long id, Consumer<ClubModel> checkPerm) {
+        return Uni.createFrom().nullItem(); // TODO
+    }
+
+    public Uni<SimpleAffiliation> setAffiliation(long id, AffiliationForm form) {
+        return Uni.createFrom().nullItem(); // TODO
+    }
+
+    public Uni<?> deleteAffiliation(long id) {
+        return Uni.createFrom().nullItem(); // TODO
+    }
 }
--- a/src/main/java/fr/titionfire/ffsaf/domain/service/ClubService.java
+++ b/src/main/java/fr/titionfire/ffsaf/domain/service/ClubService.java
@ -3,12 +3,20 @@ package fr.titionfire.ffsaf.domain.service;
 import fr.titionfire.ffsaf.data.model.ClubModel;
 import fr.titionfire.ffsaf.data.repository.ClubRepository;
 import fr.titionfire.ffsaf.net2.data.SimpleClubModel;
+import fr.titionfire.ffsaf.rest.from.FullClubForm;
+import fr.titionfire.ffsaf.utils.PageResult;
 import io.quarkus.hibernate.reactive.panache.Panache;
+import io.quarkus.hibernate.reactive.panache.PanacheQuery;
 import io.quarkus.hibernate.reactive.panache.common.WithSession;
+import io.quarkus.panache.common.Page;
+import io.quarkus.panache.common.Sort;
 import io.quarkus.vertx.VertxContextSupport;
 import io.smallrye.mutiny.Uni;
+import io.smallrye.mutiny.unchecked.Unchecked;
 import jakarta.enterprise.context.ApplicationScoped;
 import jakarta.inject.Inject;
+import jakarta.ws.rs.BadRequestException;
+import org.hibernate.reactive.mutiny.Mutiny;

 import java.util.Collection;
 import java.util.List;
@ -39,4 +47,63 @@ public class ClubService {
            return Panache.withTransaction(() -> repository.persist(clubModel));
        });
    }
+
+    public Uni<PageResult<SimpleClubModel>> search(Integer limit, int page, String search, String country) {
+        if (search == null)
+            search = "";
+        search = search + "%";
+
+        PanacheQuery<ClubModel> query;
+
+        if (country == null || country.isBlank())
+            query = repository.find("name LIKE ?1",
+                    Sort.ascending("name"), search).page(Page.ofSize(limit));
+        else
+            query = repository.find("name LIKE ?1 AND country LIKE ?2",
+                    Sort.ascending("name"), search, country + "%").page(Page.ofSize(limit));
+        return getPageResult(query, limit, page);
+    }
+
+    private Uni<PageResult<SimpleClubModel>> getPageResult(PanacheQuery<ClubModel> query, int limit, int page) {
+        return Uni.createFrom().item(new PageResult<SimpleClubModel>())
+                .invoke(result -> result.setPage(page))
+                .invoke(result -> result.setPage_size(limit))
+                .call(result -> query.count().invoke(result::setResult_count))
+                .call(result -> query.pageCount()
+                        .invoke(Unchecked.consumer(pages -> {
+                            if (page > pages) throw new BadRequestException();
+                        }))
+                        .invoke(result::setPage_count))
+                .call(result -> query.page(Page.of(page, limit)).list()
+                        .map(membreModels -> membreModels.stream().map(SimpleClubModel::fromModel).toList())
+                        .invoke(result::setResult));
+    }
+
+    public Uni<ClubModel> getById(long id) {
+        return repository.findById(id).call(m -> Mutiny.fetch(m.getContact()));
+    }
+
+    public Uni<ClubModel> getByClubId(String clubId) {
+        return repository.find("clubId", clubId).firstResult();
+    }
+
+    public Uni<String> update(long id, FullClubForm input) {
+        /*return repository.findById(id)
+                .onItem().transformToUni(m -> {
+                    m.setName(input.getName());
+                    m.setCountry(input.getCountry());
+                    m.setNo_affiliation(input.getNo_affiliation());
+                    m.setShieldURL(input.getShieldURL());
+                    return Panache.withTransaction(() -> repository.persist(m));
+                });*/
+        return Uni.createFrom().nullItem();
+    }
+
+    public Uni<Long> add(FullClubForm input) {
+        return Uni.createFrom().nullItem();
+    }
+
+    public Uni<?> delete(long id) {
+        return Uni.createFrom().nullItem();
+    }
 }
--- a/src/main/java/fr/titionfire/ffsaf/net2/data/SimpleClubModel.java
+++ b/src/main/java/fr/titionfire/ffsaf/net2/data/SimpleClubModel.java
@ -17,11 +17,13 @@ public class SimpleClubModel {
    String name;
    String country;
    String shieldURL;
+    String no_affiliation;

    public static SimpleClubModel fromModel(ClubModel model) {
        if (model == null)
            return null;

-        return new SimpleClubModel(model.getId(), model.getName(), model.getCountry(), model.getShieldURL());
+        return new SimpleClubModel(model.getId(), model.getName(), model.getCountry(), model.getShieldURL(),
+                model.getNo_affiliation());
    }
 }
--- a/src/main/java/fr/titionfire/ffsaf/rest/AffiliationEndpoints.java
+++ b/src/main/java/fr/titionfire/ffsaf/rest/AffiliationEndpoints.java
@ -1,29 +1,79 @@
 package fr.titionfire.ffsaf.rest;

+import fr.titionfire.ffsaf.data.model.ClubModel;
+import fr.titionfire.ffsaf.domain.service.AffiliationService;
+import fr.titionfire.ffsaf.rest.data.SimpleAffiliation;
+import fr.titionfire.ffsaf.rest.from.AffiliationForm;
 import fr.titionfire.ffsaf.rest.from.AffiliationRequestForm;
+import fr.titionfire.ffsaf.utils.GroupeUtils;
+import io.quarkus.oidc.IdToken;
+import io.quarkus.security.identity.SecurityIdentity;
 import io.smallrye.mutiny.Uni;
+import io.smallrye.mutiny.unchecked.Unchecked;
+import jakarta.annotation.security.RolesAllowed;
+import jakarta.inject.Inject;
 import jakarta.ws.rs.*;
 import jakarta.ws.rs.core.MediaType;
+import org.eclipse.microprofile.jwt.JsonWebToken;
+
+import java.util.List;
+import java.util.function.Consumer;

@Path("api/affiliation")
 public class AffiliationEndpoints {

+    @Inject
+    AffiliationService service;

+    @Inject
+    @IdToken
+    JsonWebToken idToken;
+
+    @Inject
+    SecurityIdentity securityIdentity;
+
+    Consumer<ClubModel> checkPerm = Unchecked.consumer(clubModel -> {
+        if (!securityIdentity.getRoles().contains("federation_admin") && !GroupeUtils.isInClubGroup(clubModel.getId(), idToken))
+            throw new ForbiddenException();
+    });

    @POST
-    @Path("save")
    @Produces(MediaType.TEXT_PLAIN)
    @Consumes(MediaType.MULTIPART_FORM_DATA)
    public Uni<String> saveAffRequest(AffiliationRequestForm form) {
-        System.out.println(form);
-        return Uni.createFrom().item("OK");
-    }
-    /*@POST
-    @Path("affiliation")
-    @Produces(MediaType.TEXT_PLAIN)
-    @Consumes(MediaType.MULTIPART_FORM_DATA)
-    public Uni<String> saveAffRequest(AffiliationRequestForm form) {
-        System.out.println(form);
        return service.save(form);
-    }*/
+    }
+
+    @GET
+    @Path("/current")
+    @RolesAllowed({"federation_admin"})
+    @Produces(MediaType.APPLICATION_JSON)
+    public Uni<List<SimpleAffiliation>> getCurrentSaisonLicenceAdmin() {
+        return service.getCurrentSaisonAffiliation();
+    }
+
+    @GET
+    @Path("{id}")
+    @RolesAllowed({"federation_admin", "club_president", "club_secretaire", "club_respo_intra"})
+    @Produces(MediaType.APPLICATION_JSON)
+    public Uni<List<SimpleAffiliation>> getLicence(@PathParam("id") long id) {
+        return service.getAffiliation(id, checkPerm);
+    }
+
+    @POST
+    @Path("{id}")
+    @RolesAllowed("federation_admin")
+    @Produces(MediaType.APPLICATION_JSON)
+    @Consumes(MediaType.MULTIPART_FORM_DATA)
+    public Uni<SimpleAffiliation> setLicence(@PathParam("id") long id, AffiliationForm form) {
+        return service.setAffiliation(id, form);
+    }
+
+    @DELETE
+    @Path("{id}")
+    @RolesAllowed("federation_admin")
+    @Produces(MediaType.TEXT_PLAIN)
+    public Uni<?> deleteLicence(@PathParam("id") long id) {
+        return service.deleteAffiliation(id);
+    }
 }
--- a/src/main/java/fr/titionfire/ffsaf/rest/AssoEndpoints.java
+++ b/src/main/java/fr/titionfire/ffsaf/rest/AssoEndpoints.java
@ -1,35 +1,18 @@
 package fr.titionfire.ffsaf.rest;

-import fr.titionfire.ffsaf.domain.service.AffiliationService;
 import fr.titionfire.ffsaf.rest.client.SirenService;
 import fr.titionfire.ffsaf.rest.data.UniteLegaleRoot;
-import fr.titionfire.ffsaf.rest.from.AffiliationRequestForm;
 import io.smallrye.mutiny.Uni;
-import jakarta.inject.Inject;
 import jakarta.ws.rs.*;
 import jakarta.ws.rs.core.MediaType;
-import jodd.net.MimeTypes;
-import org.eclipse.microprofile.config.inject.ConfigProperty;
 import org.eclipse.microprofile.rest.client.inject.RestClient;

-import java.io.*;
-import java.net.URLConnection;
-import java.nio.file.Files;
-import java.util.concurrent.CompletableFuture;
-import java.util.concurrent.Future;
-
@Path("api/asso")
 public class AssoEndpoints {

    @RestClient
    SirenService sirenService;

-    @Inject
-    AffiliationService service;
-
-    @ConfigProperty(name = "upload_dir")
-    String media;
-
    @GET
    @Path("siren/{siren}")
    @Produces(MediaType.APPLICATION_JSON)
@ -42,12 +25,4 @@ public class AssoEndpoints {
            return throwable;
        });
    }
-
-    @POST
-    @Path("affiliation")
-    @Produces(MediaType.TEXT_PLAIN)
-    @Consumes(MediaType.MULTIPART_FORM_DATA)
-    public Uni<String> saveAffRequest(AffiliationRequestForm form) {
-        return service.save(form);
-    }
 }
--- a/src/main/java/fr/titionfire/ffsaf/rest/ClubEndpoints.java
+++ b/src/main/java/fr/titionfire/ffsaf/rest/ClubEndpoints.java
@ -1,16 +1,29 @@
 package fr.titionfire.ffsaf.rest;

+import fr.titionfire.ffsaf.data.model.ClubModel;
 import fr.titionfire.ffsaf.domain.service.ClubService;
 import fr.titionfire.ffsaf.net2.data.SimpleClubModel;
+import fr.titionfire.ffsaf.rest.data.SimpleClub;
+import fr.titionfire.ffsaf.rest.from.FullClubForm;
+import fr.titionfire.ffsaf.utils.GroupeUtils;
+import fr.titionfire.ffsaf.utils.PageResult;
+import fr.titionfire.ffsaf.utils.Utils;
+import io.quarkus.oidc.IdToken;
 import io.quarkus.security.Authenticated;
+import io.quarkus.security.identity.SecurityIdentity;
 import io.smallrye.mutiny.Uni;
+import io.smallrye.mutiny.unchecked.Unchecked;
+import jakarta.annotation.security.RolesAllowed;
 import jakarta.inject.Inject;
-import jakarta.ws.rs.GET;
-import jakarta.ws.rs.Path;
-import jakarta.ws.rs.Produces;
+import jakarta.ws.rs.*;
 import jakarta.ws.rs.core.MediaType;
+import jakarta.ws.rs.core.Response;
+import org.eclipse.microprofile.config.inject.ConfigProperty;
+import org.eclipse.microprofile.jwt.JsonWebToken;

+import java.net.URISyntaxException;
 import java.util.List;
+import java.util.function.Consumer;

@Path("api/club")
 public class ClubEndpoints {
@ -18,6 +31,22 @@ public class ClubEndpoints {
    @Inject
    ClubService clubService;

+    @Inject
+    @IdToken
+    JsonWebToken idToken;
+
+    @Inject
+    SecurityIdentity securityIdentity;
+
+    @ConfigProperty(name = "upload_dir")
+    String media;
+
+    Consumer<ClubModel> checkPerm = Unchecked.consumer(membreModel -> {
+        if (!securityIdentity.getRoles().contains("federation_admin") && !GroupeUtils.isInClubGroup(membreModel.getId(),
+                idToken))
+            throw new ForbiddenException();
+    });
+
    @GET
    @Path("/no_detail")
    @Authenticated
@ -25,4 +54,110 @@ public class ClubEndpoints {
    public Uni<List<SimpleClubModel>> getAll() {
        return clubService.getAll().map(clubModels -> clubModels.stream().map(SimpleClubModel::fromModel).toList());
    }
+
+    @GET
+    @Path("/find")
+    @RolesAllowed({"federation_admin"})
+    @Produces(MediaType.APPLICATION_JSON)
+    public Uni<PageResult<SimpleClubModel>> getFindAdmin(@QueryParam("limit") Integer limit,
+                                                         @QueryParam("page") Integer page,
+                                                         @QueryParam("search") String search,
+                                                         @QueryParam("country") String country) {
+        if (limit == null)
+            limit = 50;
+        if (page == null || page < 1)
+            page = 1;
+        return clubService.search(limit, page - 1, search, country);
+    }
+
+
+    @GET
+    @Path("{id}")
+    @RolesAllowed({"federation_admin", "club_president", "club_secretaire", "club_respo_intra"})
+    @Produces(MediaType.APPLICATION_JSON)
+    public Uni<SimpleClub> getById(@PathParam("id") long id) {
+        return clubService.getById(id).onItem().invoke(checkPerm).map(SimpleClub::fromModel);
+    }
+
+    @PUT
+    @Path("{id}")
+    @RolesAllowed({"federation_admin"})
+    @Produces(MediaType.TEXT_PLAIN)
+    @Consumes(MediaType.MULTIPART_FORM_DATA)
+    public Uni<String> setAdminClub(@PathParam("id") long id, FullClubForm input) {
+        return clubService.update(id, input)
+                .invoke(Unchecked.consumer(out -> {
+                    if (!out.equals("OK")) throw new InternalError("Fail to update data: " + out);
+                })).chain(() -> {
+                    if (input.getLogo().length > 0)
+                        return Uni.createFrom().future(Utils.replacePhoto(id, input.getLogo(), media, "ppClub"
+                        )).invoke(Unchecked.consumer(out -> {
+                            if (!out.equals("OK")) throw new InternalError("Fail to get MimeType " + out);
+                        }));
+                    else
+                        return Uni.createFrom().nullItem();
+                }).chain(() -> {
+                    if (input.getStatus().length > 0)
+                        return Uni.createFrom().future(Utils.replacePhoto(id, input.getStatus(), media, "clubStatus"
+                        )).invoke(Unchecked.consumer(out -> {
+                            if (!out.equals("OK")) throw new InternalError("Fail to get MimeType " + out);
+                        }));
+                    else
+                        return Uni.createFrom().nullItem();
+                });
+    }
+
+    @POST
+    @RolesAllowed({"federation_admin"})
+    @Produces(MediaType.TEXT_PLAIN)
+    @Consumes(MediaType.MULTIPART_FORM_DATA)
+    public Uni<Long> addAdminClub(FullClubForm input) {
+        return clubService.add(input)
+                .invoke(Unchecked.consumer(id -> {
+                    if (id == null) throw new InternalError("Fail to create club data");
+                })).call(id -> {
+                    if (input.getLogo().length > 0)
+                        return Uni.createFrom().future(Utils.replacePhoto(id, input.getLogo(), media, "ppClub"
+                        ));
+                    else
+                        return Uni.createFrom().nullItem();
+                }).call(id -> {
+                    if (input.getStatus().length > 0)
+                        return Uni.createFrom().future(Utils.replacePhoto(id, input.getStatus(), media, "clubStatus"
+                        ));
+                    else
+                        return Uni.createFrom().nullItem();
+                });
+    }
+
+    @DELETE
+    @Path("{id}")
+    @RolesAllowed({"federation_admin"})
+    @Produces(MediaType.TEXT_PLAIN)
+    public Uni<?> deleteAdminClub(@PathParam("id") long id) {
+        return clubService.delete(id);
+    }
+
+
+    @GET
+    @Path("{clubId}/logo")
+    @RolesAllowed({"federation_admin", "club_president", "club_secretaire", "club_respo_intra"})
+    public Uni<Response> getLogo(@PathParam("clubId") String clubId) {
+        return clubService.getByClubId(clubId).onItem().invoke(checkPerm).chain(Unchecked.function(clubModel -> {
+            try {
+                return Utils.getMediaFile((clubModel != null) ? clubModel.getId() : -1, media, "ppClub",
+                        Uni.createFrom().nullItem());
+            } catch (URISyntaxException e) {
+                throw new InternalError();
+            }
+        }));
+    }
+
+    @GET
+    @Path("{id}/status")
+    @RolesAllowed({"federation_admin", "club_president", "club_secretaire"})
+    public Uni<Response> getStatus(@PathParam("id") long id) throws URISyntaxException {
+        return Utils.getMediaFile(id, media, "clubStatus", clubService.getById(id).onItem().invoke(checkPerm));
+    }
+
 }
--- a/src/main/java/fr/titionfire/ffsaf/rest/CombEndpoints.java
+++ b/src/main/java/fr/titionfire/ffsaf/rest/CombEndpoints.java
@ -7,7 +7,6 @@ import fr.titionfire.ffsaf.rest.from.ClubMemberForm;
 import fr.titionfire.ffsaf.rest.from.FullMemberForm;
 import fr.titionfire.ffsaf.utils.GroupeUtils;
 import fr.titionfire.ffsaf.utils.PageResult;
-import fr.titionfire.ffsaf.utils.Pair;
 import fr.titionfire.ffsaf.utils.Utils;
 import io.quarkus.oidc.IdToken;
 import io.quarkus.security.Authenticated;
@ -17,7 +16,6 @@ import io.smallrye.mutiny.unchecked.Unchecked;
 import jakarta.annotation.security.RolesAllowed;
 import jakarta.inject.Inject;
 import jakarta.ws.rs.*;
-import jakarta.ws.rs.core.HttpHeaders;
 import jakarta.ws.rs.core.MediaType;
 import jakarta.ws.rs.core.Response;
 import jodd.net.MimeTypes;
@ -25,7 +23,6 @@ import org.eclipse.microprofile.config.inject.ConfigProperty;
 import org.eclipse.microprofile.jwt.JsonWebToken;

 import java.io.*;
-import java.net.URI;
 import java.net.URISyntaxException;
 import java.net.URLConnection;
 import java.nio.file.Files;
@ -51,7 +48,8 @@ public class CombEndpoints {
    SecurityIdentity securityIdentity;

    Consumer<MembreModel> checkPerm = Unchecked.consumer(membreModel -> {
-        if (!securityIdentity.getRoles().contains("federation_admin") && !GroupeUtils.isInClubGroup(membreModel.getClub().getId(), idToken))
+        if (!securityIdentity.getRoles().contains("federation_admin") && !GroupeUtils.isInClubGroup(
+                membreModel.getClub().getId(), idToken))
            throw new ForbiddenException();
    });

@ -213,37 +211,7 @@ public class CombEndpoints {
    @Path("{id}/photo")
    @RolesAllowed({"federation_admin", "club_president", "club_secretaire", "club_respo_intra"})
    public Uni<Response> getPhoto(@PathParam("id") long id) throws URISyntaxException {
-        Future<Pair<File, byte[]>> future = CompletableFuture.supplyAsync(() -> {
-            FilenameFilter filter = (directory, filename) -> filename.startsWith(String.valueOf(id));
-            File[] files = new File(media, "ppMembre").listFiles(filter);
-            if (files != null && files.length > 0) {
-                File file = files[0];
-                try {
-                    byte[] data = Files.readAllBytes(file.toPath());
-                    return new Pair<>(file, data);
-                } catch (IOException ignored) {
-                }
-            }
-            return null;
-        });
-
-        URI uri = new URI("https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2.webp");
-
-        return membreService.getById(id).onItem().invoke(checkPerm).chain(__ -> Uni.createFrom().future(future)
-                .map(filePair -> {
-                    if (filePair == null)
-                        return Response.temporaryRedirect(uri).build();
-
-                    String mimeType = URLConnection.guessContentTypeFromName(filePair.getKey().getName());
-
-                    Response.ResponseBuilder resp = Response.ok(filePair.getValue());
-                    resp.type(MediaType.APPLICATION_OCTET_STREAM);
-                    resp.header(HttpHeaders.CONTENT_LENGTH, filePair.getValue().length);
-                    resp.header(HttpHeaders.CONTENT_TYPE, mimeType);
-                    resp.header(HttpHeaders.CONTENT_DISPOSITION, "inline; ");
-
-                    return resp.build();
-                }));
+        return Utils.getMediaFile(id, media, "ppMembre", membreService.getById(id).onItem().invoke(checkPerm));
    }

 }
--- a/src/main/java/fr/titionfire/ffsaf/rest/data/SimpleAffiliation.java
+++ b/src/main/java/fr/titionfire/ffsaf/rest/data/SimpleAffiliation.java
@ -0,0 +1,30 @@
+package fr.titionfire.ffsaf.rest.data;
+
+import fr.titionfire.ffsaf.data.model.AffiliationModel;
+import io.quarkus.runtime.annotations.RegisterForReflection;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+
+@Data
+@Builder
+@AllArgsConstructor
+@RegisterForReflection
+public class SimpleAffiliation {
+    Long id;
+    Long club;
+    int saison;
+    boolean validate;
+
+    public static SimpleAffiliation fromModel(AffiliationModel model, boolean validate) {
+        if (model == null)
+            return null;
+
+        return new SimpleAffiliationBuilder()
+                .id(model.getId())
+                .club(model.getClub().getId())
+                .saison(model.getSaison())
+                .validate(validate)
+                .build();
+    }
+}
--- a/src/main/java/fr/titionfire/ffsaf/rest/data/SimpleClub.java
+++ b/src/main/java/fr/titionfire/ffsaf/rest/data/SimpleClub.java
@ -0,0 +1,53 @@
+package fr.titionfire.ffsaf.rest.data;
+
+import fr.titionfire.ffsaf.data.model.ClubModel;
+import fr.titionfire.ffsaf.utils.Contact;
+import io.quarkus.runtime.annotations.RegisterForReflection;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.ToString;
+
+import java.util.Map;
+
+@Data
+@Builder
+@ToString
+@AllArgsConstructor
+@RegisterForReflection
+public class SimpleClub {
+    private Long id;
+    private String clubId;
+    private String name;
+    private String country;
+    private String shieldURL;
+    private Map<Contact, String> contact;
+    private String training_location;
+    private String training_day_time;
+    private String contact_intern;
+    private String RNA;
+    private String SIRET;
+    private String no_affiliation;
+    private boolean international;
+
+    public static SimpleClub fromModel(ClubModel model) {
+        if (model == null)
+            return null;
+
+        return new SimpleClubBuilder()
+                .id(model.getId())
+                .clubId(model.getClubId())
+                .name(model.getName())
+                .country(model.getCountry())
+                .shieldURL(model.getShieldURL())
+                .contact(model.getContact())
+                .training_location(model.getTraining_location())
+                .training_day_time(model.getTraining_day_time())
+                .contact_intern(model.getContact_intern())
+                .RNA(model.getRNA())
+                .SIRET(model.getSIRET())
+                .no_affiliation(model.getNo_affiliation())
+                .international(model.isInternational())
+                .build();
+    }
+}
--- a/src/main/java/fr/titionfire/ffsaf/rest/from/AffiliationForm.java
+++ b/src/main/java/fr/titionfire/ffsaf/rest/from/AffiliationForm.java
@ -0,0 +1,4 @@
+package fr.titionfire.ffsaf.rest.from;
+
+public class AffiliationForm {
+}
--- a/src/main/java/fr/titionfire/ffsaf/rest/from/AffiliationRequestForm.java
+++ b/src/main/java/fr/titionfire/ffsaf/rest/from/AffiliationRequestForm.java
@ -1,6 +1,7 @@
 package fr.titionfire.ffsaf.rest.from;

 import fr.titionfire.ffsaf.data.model.AffiliationRequestModel;
+import fr.titionfire.ffsaf.utils.RoleAsso;
 import jakarta.ws.rs.FormParam;
 import jakarta.ws.rs.core.MediaType;
 import lombok.Getter;
@ -14,7 +15,7 @@ public class AffiliationRequestForm {
    private String name = null;

    @FormParam("siren")
-    private String siren = null;
+    private Long siren = null;

    @FormParam("rna")
    private String rna = null;
@ -30,32 +31,38 @@ public class AffiliationRequestForm {
    @PartType(MediaType.APPLICATION_OCTET_STREAM)
    private byte[] logo = new byte[0];

-    @FormParam("president-nom")
-    private String president_lname = null;
-    @FormParam("president-prenom")
-    private String president_fname = null;
-    @FormParam("president-mail")
-    private String president_email = null;
-    @FormParam("president-licence")
-    private String president_lincence = null;
+    @FormParam("m1_nom")
+    private String m1_lname = null;
+    @FormParam("m1_prenom")
+    private String m1_fname = null;
+    @FormParam("m1_mail")
+    private String m1_email = null;
+    @FormParam("m1_licence")
+    private String m1_lincence = null;
+    @FormParam("m1_role")
+    private RoleAsso m1_role = null;

-    @FormParam("tresorier-nom")
-    private String tresorier_lname = null;
-    @FormParam("tresorier-prenom")
-    private String tresorier_fname = null;
-    @FormParam("tresorier-mail")
-    private String tresorier_email = null;
-    @FormParam("tresorier-licence")
-    private String tresorier_lincence = null;
+    @FormParam("m2_nom")
+    private String m2_lname = null;
+    @FormParam("m2_prenom")
+    private String m2_fname = null;
+    @FormParam("m2_mail")
+    private String m2_email = null;
+    @FormParam("m2_licence")
+    private String m2_lincence = null;
+    @FormParam("m2_role")
+    private RoleAsso m2_role = null;

-    @FormParam("secretaire-nom")
-    private String secretaire_lname = null;
-    @FormParam("secretaire-prenom")
-    private String secretaire_fname = null;
-    @FormParam("secretaire-mail")
-    private String secretaire_email = null;
-    @FormParam("secretaire-licence")
-    private String secretaire_lincence = null;
+    @FormParam("m3_nom")
+    private String m3_lname = null;
+    @FormParam("m3_prenom")
+    private String m3_fname = null;
+    @FormParam("m3_mail")
+    private String m3_email = null;
+    @FormParam("m3_licence")
+    private String m3_lincence = null;
+    @FormParam("m3_role")
+    private RoleAsso m3_role = null;

    public AffiliationRequestModel toModel() {
        AffiliationRequestModel model = new AffiliationRequestModel();
@ -64,23 +71,26 @@ public class AffiliationRequestForm {
        model.setRNA(this.getRna());
        model.setAddress(this.getAdresse());

-        model.setPresident_lname(this.getPresident_lname());
-        model.setPresident_fname(this.getPresident_fname());
-        model.setPresident_email(this.getPresident_email());
-        model.setPresident_lincence((this.getPresident_lincence() == null || this.getPresident_lincence().isBlank())
-                ? 0 : Integer.parseInt(this.getPresident_lincence()));
+        model.setM1_lname(this.getM1_lname());
+        model.setM1_fname(this.getM1_fname());
+        model.setM1_email(this.getM1_email());
+        model.setM1_lincence((this.getM1_lincence() == null || this.getM1_lincence().isBlank())
+                ? 0 : Integer.parseInt(this.getM1_lincence()));
+        model.setM1_role(this.getM1_role());

-        model.setTresorier_lname(this.getTresorier_lname());
-        model.setTresorier_fname(this.getTresorier_fname());
-        model.setTresorier_email(this.getTresorier_email());
-        model.setTresorier_lincence((this.getPresident_lincence() == null || this.getPresident_lincence().isBlank())
-                ? 0 : Integer.parseInt(this.getTresorier_lincence()));
+        model.setM2_lname(this.getM2_lname());
+        model.setM2_fname(this.getM2_fname());
+        model.setM2_email(this.getM2_email());
+        model.setM2_lincence((this.getM1_lincence() == null || this.getM1_lincence().isBlank())
+                ? 0 : Integer.parseInt(this.getM2_lincence()));
+        model.setM2_role(this.getM2_role());

-        model.setSecretaire_lname(this.getSecretaire_lname());
-        model.setSecretaire_fname(this.getSecretaire_fname());
-        model.setSecretaire_email(this.getSecretaire_email());
-        model.setSecretaire_lincence((this.getPresident_lincence() == null || this.getPresident_lincence().isBlank())
-                ? 0 : Integer.parseInt(this.getSecretaire_lincence()));
+        model.setM3_lname(this.getM3_lname());
+        model.setM3_fname(this.getM3_fname());
+        model.setM3_email(this.getM3_email());
+        model.setM3_lincence((this.getM1_lincence() == null || this.getM1_lincence().isBlank())
+                ? 0 : Integer.parseInt(this.getM3_lincence()));
+        model.setM3_role(this.getM3_role());

        return model;
    }
--- a/src/main/java/fr/titionfire/ffsaf/rest/from/FullClubForm.java
+++ b/src/main/java/fr/titionfire/ffsaf/rest/from/FullClubForm.java
@ -0,0 +1,23 @@
+package fr.titionfire.ffsaf.rest.from;
+
+import jakarta.ws.rs.FormParam;
+import jakarta.ws.rs.core.MediaType;
+import lombok.Getter;
+import org.jboss.resteasy.reactive.PartType;
+
+@Getter
+public class FullClubForm {
+    @FormParam("id")
+    private String id = null;
+
+    @FormParam("name")
+    private String name = null;
+
+    @FormParam("status")
+    @PartType(MediaType.APPLICATION_OCTET_STREAM)
+    private byte[] status = new byte[0];
+
+    @FormParam("logo")
+    @PartType(MediaType.APPLICATION_OCTET_STREAM)
+    private byte[] logo = new byte[0];
+}
--- a/src/main/java/fr/titionfire/ffsaf/utils/RoleAsso.java
+++ b/src/main/java/fr/titionfire/ffsaf/utils/RoleAsso.java
@ -5,9 +5,13 @@ import io.quarkus.runtime.annotations.RegisterForReflection;
@RegisterForReflection
 public enum RoleAsso {
    MEMBRE("Membre", 0),
-    PRESIDENT("Président", 3),
-    TRESORIER("Trésorier", 1),
-    SECRETAIRE("Secrétaire", 2);
+    PRESIDENT("Président", 7),
+    VPRESIDENT("Vise-Président", 6),
+    SECRETAIRE("Secrétaire", 5),
+    VSECRETAIRE("Vise-Secrétaire", 4),
+    TRESORIER("Trésorier", 3),
+    VTRESORIER("Vise-Trésorier", 2),
+    MEMBREBUREAU("Membre bureau", 1);

    public final String name;
    public final int level;
--- a/src/main/java/fr/titionfire/ffsaf/utils/StringSimilarity.java
+++ b/src/main/java/fr/titionfire/ffsaf/utils/StringSimilarity.java
@ -0,0 +1,65 @@
+package fr.titionfire.ffsaf.utils;
+
+public class StringSimilarity {
+
+    public static int similarity(String s1, String s2) {
+        String longer = s1, shorter = s2;
+        if (s1.length() < s2.length()) {
+            longer = s2;
+            shorter = s1;
+        }
+        int longerLength = longer.length();
+        if (longerLength == 0) {
+            return 1;
+        }
+        return editDistance(longer, shorter);
+
+    }
+
+    public static int editDistance(String s1, String s2) {
+        s1 = s1.toLowerCase();
+        s2 = s2.toLowerCase();
+
+        int[] costs = new int[s2.length() + 1];
+        for (int i = 0; i <= s1.length(); i++) {
+            int lastValue = i;
+            for (int j = 0; j <= s2.length(); j++) {
+                if (i == 0)
+                    costs[j] = j;
+                else {
+                    if (j > 0) {
+                        int newValue = costs[j - 1];
+                        if (s1.charAt(i - 1) != s2.charAt(j - 1))
+                            newValue = Math.min(Math.min(newValue, lastValue),
+                                    costs[j]) + 1;
+                        costs[j - 1] = lastValue;
+                        lastValue = newValue;
+                    }
+                }
+            }
+            if (i > 0)
+                costs[s2.length()] = lastValue;
+        }
+        return costs[s2.length()];
+    }
+
+    public static void printSimilarity(String s, String t) {
+        System.out.printf(
+                "%d is the similarity between \"%s\" and \"%s\"%n", similarity(s, t), s, t);
+    }
+
+   /*public static void main(String[] args) {
+        printSimilarity("Xavier Login", "Xavier Lojin");
+        printSimilarity("Xavier Login", "Xavier ogin");
+        printSimilarity("Xavier Login", "avier Login");
+        printSimilarity("Xavier Login", "xavier login");
+        printSimilarity("Xavier Login", "Xaviér Login");
+        printSimilarity("Xavier Gomme Login", "Xavier Login");
+        printSimilarity("Xavier Login", "Xavier Gomme Login");
+        printSimilarity("Xavier Login", "Xavier");
+        printSimilarity("Xavier Login", "Login");
+        printSimilarity("Jule", "Julles");
+        printSimilarity("Xavier", "Xaviér");
+        printSimilarity("Xavier", "xavvie");
+    }*/
+}
--- a/src/main/java/fr/titionfire/ffsaf/utils/Utils.java
+++ b/src/main/java/fr/titionfire/ffsaf/utils/Utils.java
@ -1,8 +1,19 @@
 package fr.titionfire.ffsaf.utils;

+import io.smallrye.mutiny.Uni;
+import jakarta.ws.rs.core.HttpHeaders;
+import jakarta.ws.rs.core.MediaType;
+import jakarta.ws.rs.core.Response;
 import jodd.net.MimeTypes;
+import net.sf.jmimemagic.Magic;
+import net.sf.jmimemagic.MagicException;
+import net.sf.jmimemagic.MagicMatchNotFoundException;
+import net.sf.jmimemagic.MagicParseException;
+import org.jboss.logging.Logger;

 import java.io.*;
+import java.net.URI;
+import java.net.URISyntaxException;
 import java.net.URLConnection;
 import java.nio.file.Files;
 import java.util.Calendar;
@ -11,6 +22,7 @@ import java.util.concurrent.CompletableFuture;
 import java.util.concurrent.Future;

 public class Utils {
+    private static final org.jboss.logging.Logger LOGGER = Logger.getLogger(Utils.class);

    public static int getSaison() {
        return getSaison(new Date());
@ -30,7 +42,12 @@ public class Utils {
    public static Future<String> replacePhoto(long id, byte[] input, String media, String dir) {
        return CompletableFuture.supplyAsync(() -> {
            try (InputStream is = new BufferedInputStream(new ByteArrayInputStream(input))) {
-                String mimeType = URLConnection.guessContentTypeFromStream(is);
+                String mimeType;
+                try {
+                    mimeType = Magic.getMagicMatch(input, false).getMimeType();
+                } catch (MagicParseException | MagicMatchNotFoundException | MagicException e) {
+                    mimeType = URLConnection.guessContentTypeFromStream(is);
+                }
                String[] detectedExtensions = MimeTypes.findExtensionsByMimeTypes(mimeType, false);
                if (detectedExtensions.length == 0)
                    throw new IOException("Fail to detect file extension for MIME type " + mimeType);
@ -57,4 +74,39 @@ public class Utils {
            }
        });
    }
+
+    public static Uni<Response> getMediaFile(long id, String media, String dirname,
+                                              Uni<?> uniBase) throws URISyntaxException {
+        Future<Pair<File, byte[]>> future = CompletableFuture.supplyAsync(() -> {
+            FilenameFilter filter = (directory, filename) -> filename.startsWith(String.valueOf(id));
+            File[] files = new File(media, dirname).listFiles(filter);
+            if (files != null && files.length > 0) {
+                File file = files[0];
+                try {
+                    byte[] data = Files.readAllBytes(file.toPath());
+                    return new Pair<>(file, data);
+                } catch (IOException ignored) {
+                }
+            }
+            return null;
+        });
+
+        URI uri = new URI("https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2.webp");
+
+        return uniBase.chain(__ -> Uni.createFrom().future(future)
+                .map(filePair -> {
+                    if (filePair == null)
+                        return Response.temporaryRedirect(uri).build();
+
+                    String mimeType = URLConnection.guessContentTypeFromName(filePair.getKey().getName());
+
+                    Response.ResponseBuilder resp = Response.ok(filePair.getValue());
+                    resp.type(MediaType.APPLICATION_OCTET_STREAM);
+                    resp.header(HttpHeaders.CONTENT_LENGTH, filePair.getValue().length);
+                    resp.header(HttpHeaders.CONTENT_TYPE, mimeType);
+                    resp.header(HttpHeaders.CONTENT_DISPOSITION, "inline; ");
+
+                    return resp.build();
+                }));
+    }
 }
--- a/src/main/webapp/index.html
+++ b/src/main/webapp/index.html
@ -14,6 +14,10 @@
            integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
            crossorigin="anonymous"
    />
+
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+          crossorigin=""/>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/src/main/webapp/package-lock.json
+++ b/src/main/webapp/package-lock.json
@ -15,8 +15,10 @@
        "@fortawesome/react-fontawesome": "^0.2.0",
        "axios": "^1.6.5",
        "browser-image-compression": "^2.0.2",
+        "leaflet": "^1.9.4",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
+        "react-leaflet": "^4.2.1",
        "react-loader-spinner": "^6.1.6",
        "react-router-dom": "^6.21.2",
        "react-toastify": "^10.0.4"
@ -1023,6 +1025,16 @@
        "node": ">= 8"
      }
    },
+    "node_modules/@react-leaflet/core": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
    "node_modules/@remix-run/router": {
      "version": "1.14.2",
      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz",
@ -3113,6 +3125,11 @@
        "json-buffer": "3.0.1"
      }
    },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
    "node_modules/levn": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@ -3558,6 +3575,19 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "node_modules/react-leaflet": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
+      "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
+      "dependencies": {
+        "@react-leaflet/core": "^2.1.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
    "node_modules/react-loader-spinner": {
      "version": "6.1.6",
      "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-6.1.6.tgz",
--- a/src/main/webapp/package.json
+++ b/src/main/webapp/package.json
@ -17,8 +17,10 @@
    "@fortawesome/react-fontawesome": "^0.2.0",
    "axios": "^1.6.5",
    "browser-image-compression": "^2.0.2",
+    "leaflet": "^1.9.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-leaflet": "^4.2.1",
    "react-loader-spinner": "^6.1.6",
    "react-router-dom": "^6.21.2",
    "react-toastify": "^10.0.4"
--- a/src/main/webapp/src/components/MemberCustomFiels.jsx
+++ b/src/main/webapp/src/components/MemberCustomFiels.jsx
@ -36,7 +36,7 @@ export function BirthDayField({inti_date, inti_category}) {
    </>
 }

-export function OptionField({name, text, values, value, disabled=false}) {
+export function OptionField({name, text, values, value, disabled = false}) {
    return <div className="row">
        <div className="input-group mb-3">
            <label className="input-group-text" id={name}>{text}</label>
@ -49,12 +49,20 @@ export function OptionField({name, text, values, value, disabled=false}) {
    </div>
 }

-export function TextField({name, text, value, placeholder, type = "text"}) {
+export function CountryList({name, text, value, values = undefined, disabled = false}) {
+    if (values === undefined){
+        values = {NA: 'Sélectionner...', fr: 'FR', es: 'ES', be: 'BE'}
+    }
+
+    return <OptionField name={name} text={text} value={value} values={values} disabled={disabled}/>
+}
+
+export function TextField({name, text, value, placeholder, type = "text", disabled = false}) {
    return <div className="row">
        <div className="input-group mb-3">
            <span className="input-group-text" id={name}>{text}</span>
            <input type={type} className="form-control" placeholder={placeholder ? placeholder : text} aria-label={name}
-                   name={name} aria-describedby={name} defaultValue={value} required/>
+                   name={name} aria-describedby={name} defaultValue={value} disabled={disabled} required/>
        </div>
    </div>
 }
@ -79,7 +87,7 @@ export function CheckField({name, text, value, row = false}) {
    </>
 }

-export const Checkbox = ({ label, value, onChange }) => {
+export const Checkbox = ({label, value, onChange}) => {
    const handleChange = () => {
        onChange(!value);
    };
--- a/src/main/webapp/src/components/Nav.jsx
+++ b/src/main/webapp/src/components/Nav.jsx
@ -72,7 +72,7 @@ function AdminMenu() {
        </div>
        <ul className="dropdown-menu">
            <li className="nav-item"><NavLink className="nav-link" to="/admin/member">Member</NavLink></li>
-            <li className="nav-item"><NavLink className="nav-link" to="/admin/b">B</NavLink></li>
+            <li className="nav-item"><NavLink className="nav-link" to="/admin/club">Club</NavLink></li>
        </ul>
    </li>
 }
--- a/src/main/webapp/src/components/SearchBar.jsx
+++ b/src/main/webapp/src/components/SearchBar.jsx
@ -0,0 +1,43 @@
+import {useEffect, useState} from "react";
+
+const removeDiacritics = str => {
+    return str
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+}
+
+
+export function SearchBar({search}) {
+    const [searchInput, setSearchInput] = useState("");
+
+    const handelChange = (e) => {
+        setSearchInput(e.target.value);
+    }
+
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            searchMember();
+        }
+    }
+
+    const searchMember = () => {
+        search(removeDiacritics(searchInput));
+    }
+
+    useEffect(() => {
+        const delayDebounceFn = setTimeout(() => {
+            searchMember();
+        }, 750)
+        return () => clearTimeout(delayDebounceFn)
+    }, [searchInput])
+
+    return <div className="mb-3">
+        <div className="input-group mb-3">
+            <input type="text" className="form-control" placeholder="Rechercher..." aria-label="Rechercher..."
+                   aria-describedby="button-addon2" value={searchInput} onChange={handelChange} onKeyDown={handleKeyDown}/>
+            <button className="btn btn-outline-secondary" type="button" id="button-addon2"
+                    onClick={searchMember}>Rechercher
+            </button>
+        </div>
+    </div>
+}
--- a/src/main/webapp/src/pages/DemandeAff.jsx
+++ b/src/main/webapp/src/pages/DemandeAff.jsx
@ -30,15 +30,16 @@ export function DemandeAff() {
    const submit = (event) => {
        event.preventDefault()
        const formData = new FormData(event.target)
+        formData.append("m1_role", event.target.m1_role?.value)
        toast.promise(
-            apiAxios.post(`asso/affiliation`, formData, { headers: {'Accept': '*/*'}}),
+            apiAxios.post(`/affiliation`, formData, {headers: {'Accept': '*/*'}}),
            {
                pending: "Enregistrement de la demande d'affiliation en cours",
                success: "Demande d'affiliation enregistrée avec succès 🎉",
                error: "Échec de la demande d'affiliation 😕"
            }
        ).then(_ => {
-            // navigate("/affiliation/ok")
+            navigate("/affiliation/ok")
        })
    }

@ -67,14 +68,14 @@ export function DemandeAff() {
                <div className="card-body">
                    <h4>L'association</h4>
                    <AssoInfo/>
-                    <h4>Le président</h4>
-                    <MembreInfo role="president"/>
-                    <h4>Le trésorier</h4>
-                    <MembreInfo role="tresorier"/>
-                    <h4>Le secrétaire</h4>
-                    <MembreInfo role="secretaire"/>
+                    <h4>Membre n°1</h4>
+                    <MembreInfo role="m1"/>
+                    <h4 style={{marginTop: '1em'}}>Membre n°2</h4>
+                    <MembreInfo role="m2"/>
+                    <h4 style={{marginTop: '1em'}}>Membre n°3</h4>
+                    <MembreInfo role="m3"/>

-                    <div className="mb-3">
+                    <div className="mb-3" style={{marginTop: '1em'}}>
                        <p>Après validation de votre demande, vous recevrez un login et mot de passe provisoire pour
                            accéder à votre espace FFSAF</p>
                        Notez que pour finaliser votre affiliation, il vous faudra :
@ -126,13 +127,13 @@ function AssoInfo() {
            <span className="input-group-text" id="basic-addon1">Nom de l'association*</span>
            <input type="text" className="form-control" placeholder="Nom de l'association" name="name"
                   aria-label="Nom de l'association"
-                   aria-describedby="basic-addon1" required/>
+                   aria-describedby="basic-addon1" required defaultValue="Mesnie"/>
        </div>

        <div className="input-group mb-3">
            <span className="input-group-text">N° SIREN*</span>
            <input type="number" className="form-control" placeholder="siren" name="siren" required value={siren}
-                   onChange={e => setSiren(e.target.value)}/>
+                   onChange={e => setSiren(e.target.value)} defaultValue={500213731}/>
            <button className="btn btn-outline-secondary" type="button" id="button-addon2"
                    onClick={fetchSiren}>Rechercher
            </button>
@ -173,36 +174,65 @@ function AssoInfo() {
 }

 function MembreInfo({role}) {
-    return <div className="row g-3 mb-3">
-        <div className="col-sm-3">
-            <div className="form-floating">
-                <input type="text" className="form-control" id="floatingInput" placeholder="Nom" name={role + "-nom"}/>
-                <label htmlFor="floatingInput">Nom</label>
+    const [switchOn, setSwitchOn] = useState(false);
+
+    return <>
+        <div className="input-group mb-3">
+            <label className="input-group-text" htmlFor="inputGroupSelect01">Rôles</label>
+            <select className="form-select" id="inputGroupSelect01" defaultValue={role === "m1" ? "PRESIDENT" : 0}
+                    disabled={role === "m1"} name={role + "_role"} required>
+                <option>Sélectionner...</option>
+                <option value="PRESIDENT">Président</option>
+                <option value="TRESORIER">Trésorier</option>
+                <option value="SECRETAIRE">Secrétaire</option>
+                <option value="VPRESIDENT">Vise-Président</option>
+                <option value="VTRESORIER">Vise-Trésorier</option>
+                <option value="VSECRETAIRE">Vise-Secrétaire</option>
+                <option value="MEMBREBUREAU">Membre du bureau</option>
+            </select>
+        </div>
+
+        <div className="row g-3 mb-3">
+            <div className="col-sm-3">
+                <div className="form-floating">
+                    <input type="text" className="form-control" id="floatingInput" placeholder="Nom" name={role + "_nom"} defaultValue={role + "-nom"} required/>
+                    <label htmlFor="floatingInput">Nom</label>
+                </div>
+            </div>
+            <div className="col-sm-3">
+                <div className="form-floating">
+                    <input type="text" className="form-control" id="floatingInput" placeholder="Prénom"
+                           name={role + "_prenom"} defaultValue={role + "_prenom"} required/>
+                    <label htmlFor="floatingInput">Prénom</label>
+                </div>
+            </div>
+            <div className="col-sm-5">
+                <div className="form-floating">
+                    <input type="email" className="form-control" id="floatingInput" placeholder="name@example.com"
+                           name={role + "_mail"} defaultValue={role + "-mail@test.com"} required/>
+                    <label htmlFor="floatingInput">Email</label>
+                </div>
            </div>
        </div>
-        <div className="col-sm-3">
-            <div className="form-floating">
-                <input type="text" className="form-control" id="floatingInput" placeholder="Prénom"
-                       name={role + "-prenom"}/>
-                <label htmlFor="floatingInput">Prénom</label>
+
+        <div className="input-group mb-3">
+            <label className="input-group-text" htmlFor="inputGroupSelect01">Dispose déjà d'une licence</label>
+            <div className="input-group-text">
+                <input type="checkbox" id="inputGroupSelect01" className="form-check-input mt-0"
+                       checked={switchOn} onChange={() => setSwitchOn(!switchOn)}/>
            </div>
        </div>
-        <div className="col-sm-5">
-            <div className="form-floating">
-                <input type="email" className="form-control" id="floatingInput" placeholder="name@example.com"
-                       name={role + "-mail"}/>
-                <label htmlFor="floatingInput">Email</label>
+        {switchOn &&
+            <div className="col-sm-3">
+                <div className="form-floating">
+                    <input type="number" className="form-control" id="floatingInput" placeholder="N° Licence"
+                           name={role + "_licence"}/>
+                    <label htmlFor="floatingInput">N° Licence</label>
+                </div>
            </div>
-        </div>
-        <div className="col-sm-3">
-            <div>OU</div>
-            <div className="form-floating">
-                <input type="number" className="form-control" id="floatingInput" placeholder="N° Licence"
-                       name={role + "-licence"}/>
-                <label htmlFor="floatingInput">N° Licence</label>
-            </div>
-        </div>
-    </div>
+        }
+
+    </>
 }

 export function DemandeAffOk() {
--- a/src/main/webapp/src/pages/MemberList.jsx
+++ b/src/main/webapp/src/pages/MemberList.jsx
@ -9,6 +9,7 @@ import {Checkbox} from "../components/MemberCustomFiels.jsx";
 import axios from "axios";
 import {apiAxios} from "../utils/Tools.js";
 import {toast} from "react-toastify";
+import {SearchBar} from "../components/SearchBar.jsx";

 const removeDiacritics = str => {
    return str
@ -106,41 +107,6 @@ export function MemberList({source}) {
    </>
 }

-function SearchBar({search}) {
-    const [searchInput, setSearchInput] = useState("");
-
-    const handelChange = (e) => {
-        setSearchInput(e.target.value);
-    }
-
-    const handleKeyDown = (event) => {
-        if (event.key === 'Enter') {
-            searchMember();
-        }
-    }
-
-    const searchMember = () => {
-        search(removeDiacritics(searchInput));
-    }
-
-    useEffect(() => {
-        const delayDebounceFn = setTimeout(() => {
-            searchMember();
-        }, 750)
-        return () => clearTimeout(delayDebounceFn)
-    }, [searchInput])
-
-    return <div className="mb-3">
-        <div className="input-group mb-3">
-            <input type="text" className="form-control" placeholder="Rechercher..." aria-label="Rechercher..."
-                   aria-describedby="button-addon2" value={searchInput} onChange={handelChange} onKeyDown={handleKeyDown}/>
-            <button className="btn btn-outline-secondary" type="button" id="button-addon2"
-                    onClick={searchMember}>Rechercher
-            </button>
-        </div>
-    </div>
-}
-
 function MakeCentralPanel({data, visibleMember, navigate, showLicenceState, page}) {
    const pages = []
    for (let i = 1; i <= data.page_count; i++) {
--- a/src/main/webapp/src/pages/admin/AdminRoot.jsx
+++ b/src/main/webapp/src/pages/admin/AdminRoot.jsx
@ -4,6 +4,10 @@ import {LoadingProvider} from "../../hooks/useLoading.jsx";
 import {MemberList} from "../MemberList.jsx";
 import {MemberPage} from "./member/MemberPage.jsx";
 import {NewMemberPage} from "./member/NewMemberPage.jsx";
+import {ClubList} from "./club/ClubList.jsx";
+import {AffiliationReqPage} from "./affiliation/AffiliationReqPage.jsx";
+import {NewClubPage} from "./club/NewClubPage.jsx";
+import {ClubPage} from "./club/ClubPage.jsx";

 export function AdminRoot() {
    return <>
@ -28,6 +32,22 @@ export function getAdminChildren() {
            path: 'member/new',
            element: <NewMemberPage/>
        },
+        {
+            path: 'club',
+            element: <ClubList/>
+        },
+        {
+            path: 'club/:id',
+            element: <ClubPage/>
+        },
+        {
+            path: 'affiliation/request',
+            element: <AffiliationReqPage/>
+        },
+        {
+            path: 'club/new',
+            element: <NewClubPage/>
+        },
        {
            path: 'b',
            element: <div>Admin B</div>
--- a/src/main/webapp/src/pages/admin/affiliation/AffiliationReqPage.jsx
+++ b/src/main/webapp/src/pages/admin/affiliation/AffiliationReqPage.jsx
@ -0,0 +1,16 @@
+import {useNavigate} from "react-router-dom";
+
+export function AffiliationReqPage() {
+    const navigate = useNavigate();
+
+    return <>
+        <h2>Page affiliation</h2>
+        <button type="button" className="btn btn-link" onClick={() => navigate("/admin/affiliation")}>
+            &laquo; retour
+        </button>
+        <div>
+            <div className="row">
+            </div>
+        </div>
+    </>
+}
--- a/src/main/webapp/src/pages/admin/club/AffiliationCard.jsx
+++ b/src/main/webapp/src/pages/admin/club/AffiliationCard.jsx
@ -0,0 +1,187 @@
+import {useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
+import {useFetch} from "../../../hooks/useFetch.js";
+import {useEffect, useReducer, useState} from "react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faPen} from "@fortawesome/free-solid-svg-icons";
+import {AxiosError} from "../../../components/AxiosError.jsx";
+import {CheckField, TextField} from "../../../components/MemberCustomFiels.jsx";
+import {apiAxios, getSaison} from "../../../utils/Tools.js";
+import {Input} from "../../../components/Input.jsx";
+import {toast} from "react-toastify";
+
+function affiliationReducer(affiliation, action) {
+    switch (action.type) {
+        case 'ADD':
+            return [
+                ...affiliation,
+                action.payload
+            ]
+        case 'REMOVE':
+            return affiliation.filter(affiliation => affiliation.id !== action.payload)
+        case 'UPDATE_OR_ADD':
+            const index = affiliation.findIndex(affiliation => affiliation.id === action.payload.id)
+            if (index === -1) {
+                return [
+                    ...affiliation,
+                    action.payload
+                ]
+            } else {
+                affiliation[index] = action.payload
+                return [...affiliation]
+            }
+        case 'SORT':
+            return affiliation.sort((a, b) => b.saison - a.saison)
+        default:
+            throw new Error()
+    }
+}
+
+export function AffiliationCard({clubData}) {
+    const setLoading = useLoadingSwitcher()
+    const {data, error} = useFetch(`/affiliation/${clubData.id}`, setLoading, 1)
+
+    const [modalAffiliation, setModal] = useState({id: -1, club: clubData.id})
+    const [affiliations, dispatch] = useReducer(affiliationReducer, [])
+
+    useEffect(() => {
+        if (!data) return
+        for (const dataKey of data) {
+            dispatch({type: 'UPDATE_OR_ADD', payload: dataKey})
+        }
+        dispatch({type: 'SORT'})
+    }, [data]);
+
+    return <div className="card mb-4 mb-md-0">
+        <div className="card-header container-fluid">
+            <div className="row">
+                <div className="col">Affiliation</div>
+                <div className="col" style={{textAlign: 'right'}}>
+                    <button className="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#AffiliationModal"
+                            onClick={_ => setModal({id: -1, club: clubData.id})}>Ajouter
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div className="card-body">
+            <ul className="list-group">
+                {affiliations.map((affiliation, index) => {
+                    return <div key={index}
+                                className={"list-group-item d-flex justify-content-between align-items-start list-group-item-" +
+                                    (affiliation.validate ? "success" : "warning")}>
+                        <div className="me-auto">{affiliation?.saison}-{affiliation?.saison + 1}</div>
+                        <button className="badge btn btn-primary rounded-pill" data-bs-toggle="modal"
+                                data-bs-target="#AffiliationModal" onClick={_ => setModal(affiliation)}>
+                            <FontAwesomeIcon icon={faPen}/></button>
+                    </div>
+                })}
+                {error && <AxiosError error={error}/>}
+            </ul>
+        </div>
+
+        <div className="modal fade" id="AffiliationModal" tabIndex="-1" aria-labelledby="AffiliationModalLabel"
+             aria-hidden="true">
+            <div className="modal-dialog">
+                <div className="modal-content">
+                    <ModalContent affiliation={modalAffiliation} dispatch={dispatch}/>
+                </div>
+            </div>
+        </div>
+    </div>;
+}
+
+function sendAffiliation(event, dispatch) {
+    event.preventDefault();
+
+    const formData = new FormData(event.target);
+    toast.promise(
+        apiAxios.post(`/affiliation/${formData.get('membre')}`, formData), // TODO
+        {
+            pending: "Enregistrement de l'affiliation en cours",
+            success: "Affiliation enregistrée avec succès 🎉",
+            error: "Échec de l'enregistrement de l'affiliation 😕"
+        }
+    ).then(data => {
+        dispatch({type: 'UPDATE_OR_ADD', payload: data.data})
+        dispatch({type: 'SORT'})
+    })
+
+}
+
+function removeAffiliation(id, dispatch) {
+    toast.promise(
+        apiAxios.delete(`/affiliation/${id}`),
+        {
+            pending: "Suppression de l'affiliation en cours",
+            success: "Affiliation supprimée avec succès 🎉",
+            error: "Échec de la suppression de l'affiliation 😕"
+        }
+    ).then(_ => {
+        dispatch({type: 'REMOVE', payload: id})
+    })
+}
+
+function ModalContent({affiliation, dispatch}) {
+    const [saison, setSaison] = useState(0)
+    const [validate, setValidate] = useState(false)
+    const [isNew, setNew] = useState(true)
+    const setSeason = (event) => {
+        setSaison(Number(event.target.value))
+    }
+    const handleValidateChange = (event) => {
+        setValidate(event.target.value === 'true');
+    }
+
+    useEffect(() => {
+        if (affiliation.id !== -1) {
+            setNew(false)
+            setSaison(affiliation.saison)
+            setValidate(affiliation.validate)
+        } else {
+            setNew(true)
+            setSaison(getSaison())
+            setValidate(false)
+        }
+    }, [affiliation]);
+
+    return <form onSubmit={e => sendAffiliation(e, dispatch)}>
+        <input name="id" value={affiliation.id} readOnly hidden/>
+        <input name="membre" value={affiliation.membre} readOnly hidden/>
+        <div className="modal-header">
+            <h1 className="modal-title fs-5" id="AffiliationModalLabel">Edition de l'affiliation</h1>
+            <button type="button" className="btn-close" data-bs-dismiss="modal"
+                    aria-label="Close"></button>
+        </div>
+        <div className="modal-body">
+            <div className="input-group mb-3  justify-content-md-center">
+                {isNew
+                    ? <input type="number" className="form-control" placeholder="Saison" name="saison"
+                             aria-label="Saison" aria-describedby="basic-addon2" value={saison} onChange={setSeason}/>
+                    : <><span className="input-group-text" id="basic-addon2">{saison}</span>
+                        <input name="saison" value={saison} readOnly hidden/></>}
+                <span className="input-group-text" id="basic-addon2">-</span>
+                <span className="input-group-text" id="basic-addon2">{saison + 1}</span>
+            </div>
+            <RadioGroupeOnOff name="validate" text="Validation de l'affiliation" value={validate}
+                              onChange={handleValidateChange}/>
+        </div>
+        <div className="modal-footer">
+            <button type="submit" className="btn btn-primary" data-bs-dismiss="modal">Enregistrer</button>
+            <button type="reset" className="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
+            {isNew || <button type="button" className="btn btn-danger" data-bs-dismiss="modal"
+                              onClick={() => removeAffiliation(affiliation.id, dispatch)}>Supprimer</button>}
+        </div>
+    </form>
+}
+
+function RadioGroupeOnOff({value, onChange, name, text}) {
+    return <div className="btn-group input-group mb-3 justify-content-md-center" role="group"
+                aria-label="Basic radio toggle button group">
+        <span className="input-group-text">{text}</span>
+        <input type="radio" className="btn-check" id={"btnradio1" + name} autoComplete="off"
+               value="false" checked={value === false} onChange={onChange}/>
+        <label className="btn btn-outline-primary" htmlFor={"btnradio1" + name}>Non</label>
+        <input type="radio" className="btn-check" name={name} id={"btnradio2" + name} autoComplete="off"
+               value="true" checked={value === true} onChange={onChange}/>
+        <label className="btn btn-outline-primary" htmlFor={"btnradio2" + name}>Oui</label>
+    </div>;
+}
--- a/src/main/webapp/src/pages/admin/club/ClubList.jsx
+++ b/src/main/webapp/src/pages/admin/club/ClubList.jsx
@ -0,0 +1,192 @@
+import {useLocation, useNavigate} from "react-router-dom";
+import {useEffect, useState} from "react";
+import {useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
+import {useFetch} from "../../../hooks/useFetch.js";
+import {toast} from "react-toastify";
+import {apiAxios} from "../../../utils/Tools.js";
+import {AxiosError} from "../../../components/AxiosError.jsx";
+import {Checkbox} from "../../../components/MemberCustomFiels.jsx";
+import {ThreeDots} from "react-loader-spinner";
+import {SearchBar} from "../../../components/SearchBar.jsx";
+
+export function ClubList() {
+    const {hash} = useLocation();
+    const navigate = useNavigate();
+    let page = Number(hash.substring(1));
+    page = (page > 0) ? page : 1;
+
+    const [clubData, setClubData] = useState([]);
+    const [affiliationData, setAffiliationData] = useState([]);
+    const [showAffiliationState, setShowAffiliationState] = useState(false);
+    const [countryFilter, setCountryFilter] = useState("");
+    const [lastSearch, setLastSearch] = useState("");
+
+    const setLoading = useLoadingSwitcher()
+    const {data, error, refresh} = useFetch(`/club/find?page=${page}`, setLoading, 1)
+
+
+    useEffect(() => {
+        refresh(`/club/find?page=${page}&search=${lastSearch}&country=${countryFilter}`);
+    }, [hash, countryFilter]);
+
+    useEffect(() => {
+        if (!data)
+            return;
+        const data2 = [];
+        for (const e of data.result) {
+            data2.push({
+                id: e.id,
+                name: e.name,
+                country: e.country,
+                shieldURL: e.shieldURL,
+                no_affiliation: e.no_affiliation,
+                affiliation: showAffiliationState ? affiliationData.find(licence => licence.club === e.id) : null
+            })
+        }
+        setClubData(data2);
+    }, [data, affiliationData]);
+
+    useEffect(() => {
+        if (!showAffiliationState)
+            return;
+
+        toast.promise(
+            apiAxios.get(`/affiliation/current`),
+            {
+                pending: "Chargement des affiliation...",
+                success: "Affiliation chargées",
+                error: "Impossible de charger les affiliations"
+            })
+            .then(data => {
+                setAffiliationData(data.data);
+            });
+    }, [showAffiliationState]);
+
+    const search = (search) => {
+        if (search === lastSearch)
+            return;
+        setLastSearch(search);
+        refresh(`/club/find?page=${page}&search=${search}&country=${countryFilter}`);
+    }
+
+    return <>
+        <h2>Club</h2>
+        <div>
+            <div className="row">
+                <div className="col-lg-9">
+                    <SearchBar search={search}/>
+                    {data
+                        ? <MakeCentralPanel data={data} visibleclub={clubData} navigate={navigate} showLicenceState={showAffiliationState}
+                                            page={page}/>
+                        : error
+                            ? <AxiosError error={error}/>
+                            : <Def/>
+                    }
+                </div>
+                <div className="col-lg-3">
+                    <div className="mb-4">
+                        <button className="btn btn-primary" onClick={() => navigate("../affiliation/request")}>Demande en cours</button>
+                        <button className="btn btn-primary" onClick={() => navigate("new")}>Ajouter une affiliation</button>
+                    </div>
+                    <div className="card mb-4">
+                        <div className="card-header">Filtre</div>
+                        <div className="card-body">
+                            <FiltreBar showAffiliationState={showAffiliationState} setShowLAffiliationState={setShowAffiliationState} data={data}
+                                       countryFilter={countryFilter} setCountryFilter={setCountryFilter}/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+}
+
+function MakeCentralPanel({data, visibleclub, navigate, showAffiliationState, page}) {
+    const pages = []
+    for (let i = 1; i <= data.page_count; i++) {
+        pages.push(<li key={i} className={"page-item " + ((page === i) ? "active" : "")}>
+            <span className="page-link" onClick={() => navigate("#" + i)}>{i}</span>
+        </li>);
+    }
+
+    return <>
+        <div className="mb-4">
+            <small>Ligne {((page - 1) * data.page_size) + 1} à {
+                (page * data.page_size > data.result_count) ? data.result_count : (page * data.page_size)} (page {page} sur {data.page_count})</small>
+            <div className="list-group">
+                {visibleclub.map(club => (<MakeRow key={club.id} club={club} navigate={navigate} showAffiliationState={showAffiliationState}/>))}
+            </div>
+        </div>
+        <div className="mb-4">
+            <nav aria-label="Page navigation">
+                <ul className="pagination justify-content-center">
+                    <li className={"page-item" + ((page <= 1) ? " disabled" : "")}>
+                        <span className="page-link" onClick={() => navigate("#" + (page - 1))}>&laquo;</span></li>
+                    {pages}
+                    <li className={"page-item" + ((page >= data.page_count) ? " disabled" : "")}>
+                        <span className="page-link" onClick={() => navigate("#" + (page + 1))}>&raquo;</span></li>
+                </ul>
+            </nav>
+        </div>
+    </>
+}
+
+function MakeRow({club, showAffiliationState, navigate}) {
+    const rowContent = <>
+        <div className="row">
+            <span className="col-auto">{String(club.no_affiliation).padStart(5, '0')}</span>
+            <div className="ms-2 col-auto">
+                <div className="fw-bold">{club.name}</div>
+            </div>
+        </div>
+        <small>{club.country}</small>
+    </>
+
+    if (showAffiliationState && club.affiliation != null) {
+        return <div
+            className={"list-group-item d-flex justify-content-between align-items-start list-group-item-action list-group-item-"
+                + (club.affiliation.validate ? "success" : "warning")}
+            onClick={() => navigate("" + club.id)}>{rowContent}</div>
+    } else {
+        return <div className="list-group-item d-flex justify-content-between align-items-start list-group-item-action"
+                    onClick={() => navigate("" + club.id)}>
+            {rowContent}
+        </div>
+    }
+}
+
+let allCountry = []
+
+function FiltreBar({showAffiliationState, setShowAffiliationState, data, countryFilter, setCountryFilter}) {
+    useEffect(() => {
+        if (!data)
+            return;
+        allCountry.push(...data.result.map((e) => e.club?.name))
+        allCountry = allCountry.filter((value, index, self) => self.indexOf(value) === index).filter(value => value != null).sort()
+    }, [data]);
+
+    return <div>
+        <div className="mb-3">
+            <Checkbox value={showAffiliationState} onChange={setShowAffiliationState} label="Afficher l'état des affiliation"/>
+        </div>
+        <div className="mb-3">
+            <select className="form-select" value={countryFilter} onChange={event => setCountryFilter(event.target.value)}>
+                <option value="">--- tout les pays ---</option>
+                {allCountry && allCountry.map((value, index) => {
+                    return <option key={index} value={value}>{value}</option>
+                })
+                }
+            </select>
+        </div>
+    </div>
+}
+
+function Def() {
+    return <div className="list-group">
+        <li className="list-group-item"><ThreeDots/></li>
+        <li className="list-group-item"><ThreeDots/></li>
+        <li className="list-group-item"><ThreeDots/></li>
+        <li className="list-group-item"><ThreeDots/></li>
+        <li className="list-group-item"><ThreeDots/></li>
+    </div>
+}
--- a/src/main/webapp/src/pages/admin/club/ClubPage.jsx
+++ b/src/main/webapp/src/pages/admin/club/ClubPage.jsx
@ -0,0 +1,128 @@
+import {useNavigate, useParams} from "react-router-dom";
+import {LoadingProvider, useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
+import {useFetch} from "../../../hooks/useFetch.js";
+import {toast} from "react-toastify";
+import {apiAxios} from "../../../utils/Tools.js";
+import {ConfirmDialog} from "../../../components/ConfirmDialog.jsx";
+import {AxiosError} from "../../../components/AxiosError.jsx";
+import {AffiliationCard} from "./AffiliationCard.jsx";
+import {CheckField, CountryList, TextField} from "../../../components/MemberCustomFiels.jsx";
+
+import {MapContainer, Marker, Popup, TileLayer, useMap} from 'react-leaflet'
+
+const vite_url = import.meta.env.VITE_URL;
+
+export function ClubPage() {
+    const {id} = useParams()
+    const navigate = useNavigate();
+
+    const setLoading = useLoadingSwitcher()
+    const {data, error} = useFetch(`/club/${id}`, setLoading, 1)
+
+    const handleRm = () => {
+        toast.promise(
+            apiAxios.delete(`/club/${id}`),
+            {
+                pending: "Suppression du club en cours...",
+                success: "Club supprimé avec succès 🎉",
+                error: "Échec de la suppression du club 😕"
+            }
+        ).then(_ => {
+            navigate("/admin/club")
+        })
+    }
+
+    return <>
+        <h2>Page membre</h2>
+        <button type="button" className="btn btn-link" onClick={() => navigate("/admin/club")}>
+            &laquo; retour
+        </button>
+        {data
+            ? <div>
+                <div className="row">
+                    <div className="col-lg-8">
+                        <LoadingProvider><InformationForm data={data}/></LoadingProvider>
+                    </div>
+                    <div className="col-lg-4">
+                        <LoadingProvider><AffiliationCard clubData={data}/></LoadingProvider>
+                        <div className="col" style={{textAlign: 'right', marginTop: '1em'}}>
+                            <button className="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#confirm-delete">Supprimer le compte
+                            </button>
+                        </div>
+                        <ConfirmDialog title="Supprimer le compte" message="Êtes-vous sûr de vouloir supprimer ce compte ?"
+                                       onConfirm={handleRm}/>
+                    </div>
+                </div>
+            </div>
+            : error && <AxiosError error={error}/>
+        }
+    </>
+}
+
+function InformationForm({data}) {
+    return <div className="card mb-4">
+        <div className="card-header">Licence n°{data.no_affiliation}</div>
+        <div className="card-body text-center">
+
+            <TextField name="clubId" text="ClubID" value={data.clubId} disabled={true}/>
+            <TextField name="name" text="Nom" value={data.name}/>
+            <TextField name="siret" text="SIRET" value={data.siret} type="number"/>
+            <TextField name="rna" text="RNA" value={data.rna}/>
+            <CountryList name="country" text="Pays" value={data.country}/>
+            <img
+                src={`${vite_url}/api/club/${data.id}/logo`}
+                alt="avatar"
+                className="img-fluid" style={{object_fit: 'contain', maxHeight: '15em'}}/>
+
+            <div className="mb-3">
+                <div className="input-group">
+                    <label className="input-group-text" htmlFor="url_photo">Blason</label>
+                    <input type="file" className="form-control" id="url_photo" name="url_photo"
+                           accept=".jpg,.jpeg,.gif,.png,.svg"/>
+                </div>
+                <div className="form-text" id="url_photo">Laissez vide pour ne rien changer.</div>
+            </div>
+
+            <TextField name="contact" text="Contact" value={data.contact}/>
+            <TextField name="training_location" text="Lieux d'entrainement" value={data.training_location}/>
+            <TextField name="training_day_time" text="Horaire d'entrainement" value={data.training_day_time}/>
+            <TextField name="contact_intern" text="Contact" value={"contact_intern"}/>
+            <CheckField name="international" text="Club international" value={data.international}/>
+
+            <MainMap/>
+        </div>
+    </div>;
+}
+ // https://annuaire-entreprises.data.gouv.fr/entreprise/la-mesnie-des-chevaliers-de-st-georges-et-de-st-michel-500213731
+const position = [51.505, -0.09]
+function MainMap() {
+    function handleReturnCurrentPosition() {
+        console.log("I have clicked return button!!");
+        //const newCurrentPositionId = uuidv4();
+        //setReturnCurrentPosition(newCurrentPositionId);
+        //console.log(newCurrentPositionId);
+    }
+
+    return (
+        <>
+            <MapContainer center={position} zoom={13} scrollWheelZoom={false}  style={{height: "30em", width: "50em"}}>
+                <TileLayer
+                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                <Marker position={position}>
+                    <Popup>
+                        A pretty CSS3 popup. <br/> Easily customizable.
+                    </Popup>
+                </Marker>
+            </MapContainer>
+            <button className="btn btn-primary" onClick={handleReturnCurrentPosition}>Return current position</button>
+            <SearchBarMap/>
+        </>
+    )
+}
+
+function SearchBarMap() {
+    return <>
+    </>
+}
--- a/src/main/webapp/src/pages/admin/club/NewClubPage.jsx
+++ b/src/main/webapp/src/pages/admin/club/NewClubPage.jsx
@ -0,0 +1,16 @@
+import {useNavigate} from "react-router-dom";
+
+export function NewClubPage() {
+    const navigate = useNavigate();
+
+    return <>
+        <h2>Page affiliation</h2>
+        <button type="button" className="btn btn-link" onClick={() => navigate("/admin/affiliation")}>
+            &laquo; retour
+        </button>
+        <div>
+            <div className="row">
+            </div>
+        </div>
+    </>
+}
--- a/src/main/webapp/src/pages/admin/member/InformationForm.jsx
+++ b/src/main/webapp/src/pages/admin/member/InformationForm.jsx
@ -2,7 +2,7 @@ import {useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
 import {apiAxios} from "../../../utils/Tools.js";
 import {toast} from "react-toastify";
 import imageCompression from "browser-image-compression";
-import {BirthDayField, OptionField, TextField} from "../../../components/MemberCustomFiels.jsx";
+import {BirthDayField, CountryList, OptionField, TextField} from "../../../components/MemberCustomFiels.jsx";
 import {ClubSelect} from "../../../components/ClubSelect.jsx";

 export function addPhoto(event, formData, send) {
@ -74,8 +74,7 @@ export function InformationForm({data}) {
                           type="email"/>
                <OptionField name="genre" text="Genre" value={data.genre}
                             values={{NA: 'N/A', H: 'H', F: 'F'}}/>
-                <OptionField name="country" text="Pays" value={data.country}
-                             values={{NA: 'Sélectionner...', fr: 'FR', es: 'ES', be: 'BE'}}/>
+                <CountryList name="country" text="Pays" value={data.country}/>
                <BirthDayField inti_date={data.birth_date ? data.birth_date.split('T')[0] : ''}
                               inti_category={data.categorie}/>
                <div className="row">
@ -86,7 +85,11 @@ export function InformationForm({data}) {
                                 MEMBRE: 'Membre',
                                 PRESIDENT: 'Président',
                                 TRESORIER: 'Trésorier',
-                                 SECRETAIRE: 'Secrétaire'
+                                 SECRETAIRE: 'Secrétaire',
+                                 VPRESIDENT: 'Vise-Président',
+                                 VTRESORIER: 'Vise-Trésorier',
+                                 VSECRETAIRE: 'Vise-Secrétaire',
+                                 MEMBREBUREAU: 'Membre bureau'
                             }}/>
                <OptionField name="grade_arbitrage" text="Grade d'arbitrage" value={data.grade_arbitrage}
                             values={{NA: 'N/A', ASSESSEUR: 'Assesseur', ARBITRE: 'Arbitre'}}/>
--- a/src/main/webapp/src/pages/club/member/InformationForm.jsx
+++ b/src/main/webapp/src/pages/club/member/InformationForm.jsx
@ -3,7 +3,7 @@
 import {useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
 import {apiAxios} from "../../../utils/Tools.js";
 import {toast} from "react-toastify";
-import {BirthDayField, OptionField, TextField} from "../../../components/MemberCustomFiels.jsx";
+import {BirthDayField, CountryList, OptionField, TextField} from "../../../components/MemberCustomFiels.jsx";
 import {addPhoto} from "../../admin/member/InformationForm.jsx";

 export function InformationForm({data}) {
@ -52,8 +52,7 @@ export function InformationForm({data}) {
                           type="email"/>
                <OptionField name="genre" text="Genre" value={data.genre}
                             values={{NA: 'N/A', H: 'H', F: 'F'}}/>
-                <OptionField name="country" text="Pays" value={data.country}
-                             values={{NA: 'Sélectionner...', fr: 'FR', es: 'ES', be: 'BE'}}/>
+                <CountryList name="country" text="Pays" value={data.country}/>
                <BirthDayField inti_date={data.birth_date ? data.birth_date.split('T')[0] : ''}
                               inti_category={data.categorie}/>
                <OptionField name="role" text="Rôle" value={data.role}
@ -61,7 +60,11 @@ export function InformationForm({data}) {
                                 MEMBRE: 'Membre',
                                 PRESIDENT: 'Président',
                                 TRESORIER: 'Trésorier',
-                                 SECRETAIRE: 'Secrétaire'
+                                 SECRETAIRE: 'Secrétaire',
+                                 VPRESIDENT: 'Vise-Président',
+                                 VTRESORIER: 'Vise-Trésorier',
+                                 VSECRETAIRE: 'Vise-Secrétaire',
+                                 MEMBREBUREAU: 'Membre bureau'
                             }} disabled={true}/>
                <OptionField name="grade_arbitrage" text="Grade d'arbitrage" value={data.grade_arbitrage}
                             values={{NA: 'N/A', ASSESSEUR: 'Assesseur', ARBITRE: 'Arbitre'}} disabled={true}/>