From 4b57b29b3461612da0380bb6ac282d22a3337d54 Mon Sep 17 00:00:00 2001
From: Julien Aldon <julien2.aldon@epitech.eu>
Date: Fri, 17 Apr 2026 11:38:33 +0200
Subject: [PATCH] fix(frontend): fix various typo, capfirst, use a grid for
 home page

---
 frontend/locales/en.json                      |  2 +-
 frontend/locales/fr.json                      |  2 +-
 frontend/src/components/Forms/Card/index.tsx  | 10 ++++-----
 .../PaymentMethods/Cheque/index.tsx           | 14 +++++++-----
 frontend/src/pages/Contracts/index.tsx        |  2 +-
 frontend/src/pages/Home/index.tsx             | 22 +++++++++----------
 6 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 66fcd7a..93d050f 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -123,7 +123,7 @@
     "minimum shipment value": "minimum shipment value (€)",
     "name": "name",
     "nothing found": "nothing to display",
-    "number of cheques between 1 and 3 cheques also enter your cheques identifiers, value is calculated automatically": "number of cheques between 1 and 3. Also enter cheque identifiers.",
+    "number of cheques between 1 and 3 cheques also enter your cheques identifiers, value is calculated automatically": "number of cheques between 1 and {{max}}. Also enter cheque identifiers.",
     "number of shipment": "number of shipments",
     "occasional": "occasional",
     "occasional product": "occasional product",
diff --git a/frontend/locales/fr.json b/frontend/locales/fr.json
index b5514f1..5cc437a 100644
--- a/frontend/locales/fr.json
+++ b/frontend/locales/fr.json
@@ -123,7 +123,7 @@
     "minimum shipment value": "valeur minimum d'une livraison (€)",
     "name": "nom",
     "nothing found": "rien à afficher",
-    "number of cheques between 1 and 3 cheques also enter your cheques identifiers, value is calculated automatically": "nombre de chèques entre 1 et 3, entrez également les identifiants des chèques utilisés.",
+    "number of cheques between 1 and 3 cheques also enter your cheques identifiers, value is calculated automatically": "nombre de chèques entre 1 et {{max}}, entrez également les identifiants des chèques utilisés.",
     "number of shipment": "nombre de livraisons",
     "occasional": "occasionnel",
     "occasional product": "produit occasionnel",
diff --git a/frontend/src/components/Forms/Card/index.tsx b/frontend/src/components/Forms/Card/index.tsx
index ad8218f..753fc1c 100644
--- a/frontend/src/components/Forms/Card/index.tsx
+++ b/frontend/src/components/Forms/Card/index.tsx
@@ -12,12 +12,12 @@ export type FormCardProps = {
 export function FormCard({ form }: FormCardProps) {
     const contractBaseTemplate = useGetContractFileTemplate();
     return (
-        <Paper shadow="xl" p="xl" miw={{ base: "100vw", md: "25vw", lg: "20vw" }}>
+        <Paper shadow="xl" p="xl">
             <Group justify="start" mb="md">
-                <Tooltip label={t("download base template to print")}>
+                <Tooltip label={t("download base template to print", {capfirst: true})}>
                     <ActionIcon
                         variant={"outline"}
-                        aria-label={t("download base template to print")}
+                        aria-label={t("download base template to print", {capfirst: true})}
                         onClick={async () => {
                             await contractBaseTemplate.mutateAsync(form.id);
                         }}
@@ -25,10 +25,10 @@ export function FormCard({ form }: FormCardProps) {
                         <IconDownload />
                     </ActionIcon>
                 </Tooltip>
-                <Tooltip label={t("fill contract online")}>
+                <Tooltip label={t("fill contract online", {capfirst: true})}>
                     <ActionIcon
                         variant={"outline"}
-                        aria-label={t("fill contract online")}
+                        aria-label={t("fill contract online", {capfirst: true})}
                         component={Link}
                         to={`/form/${form.id}`}
                         target="_blank"
diff --git a/frontend/src/components/PaymentMethods/Cheque/index.tsx b/frontend/src/components/PaymentMethods/Cheque/index.tsx
index e6b0c1d..9cc8b03 100644
--- a/frontend/src/components/PaymentMethods/Cheque/index.tsx
+++ b/frontend/src/components/PaymentMethods/Cheque/index.tsx
@@ -46,20 +46,24 @@ export function ContractCheque({ inputForm, price, productor }: ContractChequePr
         return productor?.payment_methods.find((el) => el.name === "cheque");
     }, [productor]);
 
+
+    const maxCheques = useMemo(() => {
+        return paymentMethod?.max && paymentMethod?.max !== "" ? Number(paymentMethod?.max) : 3
+    }, [paymentMethod])
+
     return (
         <Stack>
-            <Title order={4}>{`${t("order name")} : ${paymentMethod?.details}`}</Title>
+            <Title order={4}>{`${t("order name", {capfirst: true})} : ${paymentMethod?.details}`}</Title>
             <NumberInput
+                clampBehavior="strict"
                 label={t("cheque quantity", { capfirst: true })}
                 placeholder={t("enter cheque quantity", { capfirst: true })}
                 description={t(
                     "number of cheques between 1 and 3 cheques also enter your cheques identifiers, value is calculated automatically",
-                    { capfirst: true },
+                    { capfirst: true, max: maxCheques },
                 )}
                 min={1}
-                max={
-                    paymentMethod?.max && paymentMethod?.max !== "" ? Number(paymentMethod?.max) : 3
-                }
+                max={maxCheques}
                 {...inputForm.getInputProps(`cheque_quantity`)}
             />
             <Group grow>
diff --git a/frontend/src/pages/Contracts/index.tsx b/frontend/src/pages/Contracts/index.tsx
index 93591c2..ef762d9 100644
--- a/frontend/src/pages/Contracts/index.tsx
+++ b/frontend/src/pages/Contracts/index.tsx
@@ -107,7 +107,7 @@ export default function Contracts() {
                     </Tooltip>
                     <Tooltip label={t("download recap", { capfirst: true })}>
                         <ActionIcon
-                            disabled={false}
+                            disabled={true}
                             onClick={(e) => {
                                 e.stopPropagation();
                                 navigate(
diff --git a/frontend/src/pages/Home/index.tsx b/frontend/src/pages/Home/index.tsx
index b41af70..55eb5ea 100644
--- a/frontend/src/pages/Home/index.tsx
+++ b/frontend/src/pages/Home/index.tsx
@@ -1,4 +1,4 @@
-import { Flex, Stack, Text } from "@mantine/core";
+import { SimpleGrid, Text } from "@mantine/core";
 import { useGetForms } from "@/services/api";
 import { FormCard } from "@/components/Forms/Card";
 import type { Form } from "@/services/resources/forms";
@@ -33,16 +33,14 @@ export function Home() {
     }, [searchParams]);
 
     return (
-        <Stack mt="lg">
-            <Flex gap="md" wrap="wrap" justify="center">
-                {allForms && allForms?.length > 0 ? (
-                    allForms.map((form: Form) => <FormCard form={form} key={form.id} />)
-                ) : (
-                    <Text mt="lg" size="lg">
-                        {t("there is no contract for now", { capfirst: true })}
-                    </Text>
-                )}
-            </Flex>
-        </Stack>
+        <SimpleGrid m="lg" cols={{base: 1, md: 3, sm: 2}} spacing="md">
+            {allForms && allForms?.length > 0 ? (
+                allForms.map((form: Form) => <FormCard form={form} key={form.id} />)
+            ) : (
+                <Text mt="lg" size="lg">
+                    {t("there is no contract for now", { capfirst: true })}
+                </Text>
+            )}
+        </SimpleGrid>
     );
 }