fix(frontend): fix various typo, capfirst, use a grid for home page

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",

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",

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"

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={
+                max={maxCheques}
-                    paymentMethod?.max && paymentMethod?.max !== "" ? Number(paymentMethod?.max) : 3
-                }
                 {...inputForm.getInputProps(`cheque_quantity`)}
             />
             <Group grow>

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(

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,8 +33,7 @@ export function Home() {
     }, [searchParams]);
 
     return (
-        <Stack mt="lg">
+        <SimpleGrid m="lg" cols={{base: 1, md: 3, sm: 2}} spacing="md">
-            <Flex gap="md" wrap="wrap" justify="center">
             {allForms && allForms?.length > 0 ? (
                 allForms.map((form: Form) => <FormCard form={form} key={form.id} />)
             ) : (
@@ -42,7 +41,6 @@ export function Home() {
                     {t("there is no contract for now", { capfirst: true })}
                 </Text>
             )}
-            </Flex>
+        </SimpleGrid>
-        </Stack>
     );
 }