add(remaining): add a way to generate contracts only with remaining shipments

frontend/src/pages/Contract/index.tsx

@@ -24,6 +24,7 @@ import { useParams } from "react-router";
 import { computePrices } from "./price";
 import { ContractCheque } from "@/components/PaymentMethods/Cheque";
 import { tranformProducts, type ContractInputs } from "@/services/resources/contracts";
+import type { Shipment } from "@/services/resources/shipments";
 
 export function Contract() {
     const { id } = useParams();
@@ -71,12 +72,22 @@ export function Contract() {
         return form?.productor?.products;
     }, [form]);
 
+    const remainingShipments = useMemo(() => {
+        const currentDate = new Date();
+        return form?.shipments.reduce((acc, shipment) => {
+            if (new Date(shipment.date) > currentDate) {
+                return [...acc, shipment];
+            }
+            return acc;
+        }, [] as Shipment[])
+    }, [form])
+
     const price = useMemo(() => {
         if (!allProducts) {
             return 0;
         }
         const productValues = Object.entries(inputForm.getValues().products);
-        return computePrices(productValues, allProducts, form?.shipments.length);
+        return computePrices(productValues, allProducts, remainingShipments?.length);
     }, [inputForm, allProducts, form?.shipments]);
 
     const inputRefs = useRef<Record<string, HTMLInputElement | null>>({
@@ -229,7 +240,7 @@ export function Contract() {
                 />
             </Group>
             <Title order={3}>{t("shipments", { capfirst: true })}</Title>
-            <Text>{`${t("there is", { capfirst: true })} ${shipments.length} ${shipments.length > 1 ? t("shipments") : t("shipment")} ${t("for this contract")}`}</Text>
+            <Text>{`${t("there is", { capfirst: true })} ${shipments.length} ${shipments.length > 1 ? t("shipments") : t("shipment")} ${t("for this contract")} :`}</Text>
             <List>
                 {shipments.map((shipment) => (
                     <List.Item key={shipment.id}>
@@ -243,6 +254,20 @@ export function Contract() {
                     </List.Item>
                 ))}
             </List>
+            <Text>{`${t("there is", { capfirst: true })} ${remainingShipments?.length} ${t("remaining_shipments", {count: remainingShipments?.length})} :`}</Text>
+            <List>
+                {remainingShipments?.map((shipment) => (
+                    <List.Item key={shipment.id}>
+                        {`${shipment.name} :
+                        ${new Date(shipment.date).toLocaleDateString("fr-FR", {
+                            weekday: "long",
+                            year: "numeric",
+                            month: "long",
+                            day: "numeric",
+                        })}`}
+                    </List.Item>
+                ))}
+            </List>
             {productsRecurent.length > 0 ? (
                 <>
                     <Title order={3}>{t("recurrent products", { capfirst: true })}</Title>
@@ -256,12 +281,12 @@ export function Contract() {
                     ))}
                 </>
             ) : null}
-            {shipments.some((shipment) => shipment.products.length > 0) ? (
+            {remainingShipments?.some((shipment) => shipment.products.length > 0) ? (
                 <>
                     <Title order={3}>{t("occasional products", { capfirst: true })}</Title>
                     <Text>{t("select products per shipment", { capfirst: true })}</Text>
                     <Accordion defaultValue={"0"}>
-                        {shipments.map((shipment, index) => (
+                        {remainingShipments?.map((shipment, index) => (
                             <ShipmentForm
                                 minimumPrice={form.minimum_shipment_value}
                                 shipment={shipment}