formatting to allow 8 team membes on one page

src/app/[locale]/(main)/match/components/FeuilleMatchPDF.tsx

@@ -4,6 +4,7 @@ import { type MatchFormValues } from "@/app/[locale]/(main)/match/MatchForm";
 import Footer from "@/app/[locale]/(main)/match/components/pdf/Footer";
 import Header from "@/app/[locale]/(main)/match/components/pdf/Header";
 import InfoTable from "@/app/[locale]/(main)/match/components/pdf/InfoTable";
+import MatchSignaturePoints from "@/app/[locale]/(main)/match/components/pdf/MatchSignaturePoints";
 import Team from "@/app/[locale]/(main)/match/components/pdf/Team";
 
 import { styles } from "./pdf/styles";
@@ -25,18 +26,20 @@ export const FeuilleMatchPdf = ({ data }: IProps) => {
       <Page size="A4" orientation={"landscape"} style={styles.page}>
         <Header />
 
-        <View style={{ width: "75%", marginTop: 20, marginLeft: 100 }}>
+        <View style={{ width: "90%", marginLeft: "auto", marginRight: "auto" }}>
-          <Text style={{ fontWeight: "bold", fontSize: 14, marginLeft: 100 }}>
+          <InfoTable
-            {data.competition}
+            date={data.date}
-          </Text>
+            lieu={data.lieu}
-          <InfoTable date={data.date} lieu={data.lieu} ronde={data.ronde} />
+            ronde={data.ronde}
+            competition={data.competition}
+          />
         </View>
 
         {/* Main Content: Two Columns for Teams */}
         <View
           style={{
             width: "100%",
-            marginTop: 20,
+            marginTop: 5,
             flexDirection: "row",
             justifyContent: "space-between",
           }}
@@ -58,14 +61,62 @@ export const FeuilleMatchPdf = ({ data }: IProps) => {
 
         <View
           style={{
-            marginTop: 50,
+            marginTop: 10,
             flexDirection: "row",
             justifyContent: "space-around",
+            width: "100%",
           }}
         >
-          <Text>Capitaine A</Text>
+          <MatchSignaturePoints>
-          <Text>Arbitre</Text>
+            Nom et signature du Capitaine A
-          <Text>Capitaine B</Text>
+          </MatchSignaturePoints>
+
+          <MatchSignaturePoints>
+            Nom et signature du Capitaine B
+          </MatchSignaturePoints>
+        </View>
+
+        <View
+          style={{
+            width: "75%",
+            flexDirection: "row",
+            justifyContent: "space-around",
+            marginTop: 10,
+          }}
+        >
+          <View style={{ width: "33%", border: "1px solid black" }}>
+            <Text>
+              A RENVOYER AU PLUS TARD LE LENDEMAIN DU JOUR DE LA RENCONTRE A:
+            </Text>
+            <Text>Thierry Généreau</Text>
+            <Text>thierry.genereau@orange.fr</Text>
+          </View>
+          <View style={{ width: "60%", flexDirection: "column" }}>
+            <View
+              style={{
+                flexDirection: "row",
+                gap: 10,
+                border: "1px solid black",
+                paddingVertical: 10,
+                columnGap: 80,
+              }}
+            >
+              <Text>Responsable de la rencontre:</Text>
+              <Text>Signature:</Text>
+            </View>
+            <View
+              style={{
+                flexDirection: "row",
+                gap: 10,
+                border: "1px solid black",
+                paddingVertical: 10,
+                columnGap: 80,
+              }}
+            >
+              <Text>L'arbitre:</Text>
+              <Text>Signature:</Text>
+            </View>
+          </View>
         </View>
 
         <Footer />

src/app/[locale]/(main)/match/components/pdf/InfoTable.tsx

@@ -8,14 +8,16 @@ interface IProps {
   date: Date;
   lieu: string;
   ronde: number;
+  competition: string;
 }
 
-const InfoTable = ({ date, lieu, ronde }: IProps) => (
+const InfoTable = ({ date, lieu, ronde, competition }: IProps) => (
   <View style={styles.infoTable}>
     {/* Header Row */}
     <View style={styles.infoRow}>
       <Text style={styles.infoCellHeader}>DATE</Text>
       <Text style={styles.infoCellHeader}>LIEU</Text>
+      <Text style={styles.infoCellHeader}>COMPETITION</Text>
       <Text style={[styles.infoCellHeader, styles.lastCell]}>RONDE</Text>
     </View>
 
@@ -25,6 +27,7 @@ const InfoTable = ({ date, lieu, ronde }: IProps) => (
         {date ? longDateLocaleString({ date, locale: "fr-FR" }) : ""}
       </Text>
       <Text style={styles.infoCell}>{lieu || " "}</Text>
+      <Text style={styles.infoCell}>{competition || " "}</Text>
       <Text style={[styles.infoCell, styles.lastCell]}>{ronde || " "}</Text>
     </View>
   </View>

src/app/[locale]/(main)/match/components/pdf/MatchSignaturePoints.tsx

@@ -0,0 +1,67 @@
+import { Text, View } from "@react-pdf/renderer";
+
+interface IProps {
+  children: string;
+}
+
+const MatchSignaturePoints = ({ children }: IProps) => (
+  <View
+    style={{
+      width: "48%",
+      flexDirection: "row",
+      justifyContent: "space-around",
+    }}
+  >
+    <View
+      style={{
+        border: "1px solid black",
+        padding: 5,
+      }}
+    >
+      <Text>Réserves:</Text>
+      <View style={{ marginTop: 5 }}>
+        <Text>OUI</Text>
+        <Text>NON</Text>
+      </View>
+    </View>
+    <Text>{children}</Text>
+    <View
+      style={{
+        flexDirection: "column",
+        justifyContent: "space-between",
+      }}
+    >
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 4,
+        }}
+      >
+        <Text>Points de Parties</Text>
+        <View
+          style={{
+            border: "1px solid black",
+            paddingVertical: 10,
+            paddingHorizontal: 15,
+            marginLeft: "auto",
+          }}
+        ></View>
+      </View>
+      <View style={{ flexDirection: "row", alignItems: "center" }}>
+        <Text>Points de Match</Text>
+        <View
+          style={{
+            border: "1px solid black",
+            paddingVertical: 10,
+            paddingHorizontal: 15,
+            marginLeft: "auto",
+          }}
+        ></View>
+      </View>
+    </View>
+  </View>
+);
+
+export default MatchSignaturePoints;

src/app/[locale]/(main)/match/components/pdf/Team.tsx

@@ -107,9 +107,10 @@ const Team = ({ team, teamName, teamPlayers, boards }: IProps) => {
           paddingBottom: 2,
         }}
       >
-        <Text>Gain: 1</Text>
+        <Text>GAIN: 1</Text>
-        <Text>Null: X</Text>
+        <Text>NULL: X</Text>
-        <Text>Perte: 0</Text>
+        <Text>PERTE: 0</Text>
+        <Text>FORFAIT: Voir réglement</Text>
       </View>
     </View>
   );

src/app/[locale]/(main)/match/components/pdf/styles.ts

@@ -2,8 +2,8 @@ import { StyleSheet } from "@react-pdf/renderer";
 
 export const styles = StyleSheet.create({
   page: { flexDirection: "column", padding: 30, fontSize: 10 },
-  header: { marginBottom: 20, textAlign: "center" },
+  header: { marginBottom: 10, textAlign: "center" },
-  title: { fontSize: 18, fontWeight: "bold", marginBottom: 4 },
+  title: { fontSize: 18, fontWeight: "bold", marginBottom: 2 },
   section: { margin: 10, padding: 10, flexGrow: 1 },
   row: {
     flexDirection: "row",
@@ -19,14 +19,6 @@ export const styles = StyleSheet.create({
     borderLeftWidth: 1,
     borderLeftColor: "#000",
   },
-  // headerRow: {
-  //   flexDirection: "row",
-  //   backgroundColor: "#E4E4E4",
-  //   borderBottomWidth: 1,
-  //   borderBottomColor: "#000",
-  //   height: 30,
-  //   alignItems: "center",
-  // },
   boardHeaderRow: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -36,7 +28,7 @@ export const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: "#000",
     marginTop: 5,
-    marginBottom: 10,
+    marginBottom: 5,
   },
   infoRow: {
     flexDirection: "row",