add i18n, products, productors and forms as tables

frontend/src/components/Shipments/Form/index.tsx

@@ -0,0 +1,62 @@
+import { ActionIcon, Group, TextInput, Tooltip } from "@mantine/core";
+import { DatePickerInput } from "@mantine/dates";
+import { IconX } from "@tabler/icons-react";
+import { t } from "@/config/i18n";
+import type { ShipmentInputs } from "@/services/resources/shipments";
+
+export type ShipmentFormProps = {
+    index: number;
+    setShipmentElement: (index: number, shipment: ShipmentInputs) => void;
+    deleteShipmentElement: (index: number) => void;
+    shipment: ShipmentInputs;
+}
+
+export default function ShipmentForm({
+    index, 
+    setShipmentElement, 
+    deleteShipmentElement, 
+    shipment
+}: ShipmentFormProps) {
+    return (
+        <Group justify="space-between" key={`shipment_${index}`}>
+            <Group grow maw="80%">
+                <TextInput
+                    label={t("shipment name", {capfirst: true})}
+                    placeholder={t("shipment name", {capfirst: true})}
+                    radius="sm"
+                    withAsterisk
+                    value={shipment.name || ""}
+                    onChange={(event) => {
+                        const value = event.target.value;
+                        setShipmentElement(index, {...shipment, name: value})
+                    }}
+                />
+                <DatePickerInput
+                    label={t("shipment date", {capfirst: true})}
+                    placeholder={t("shipment date", {capfirst: true})}
+                    radius="sm"
+                    withAsterisk
+                    value={shipment.date || null}
+                    onChange={(event) => {
+                        const value = event || "";
+                        setShipmentElement(index, {...shipment, date: value})
+                    }}
+                />
+            </Group>
+            <Tooltip label={t("remove shipment", {capfirst: true})}>
+                <ActionIcon 
+                    flex={{base: "1", md: "0"}} 
+                    style={{alignSelf: "flex-end"}} 
+                    color="red"
+                    aria-label={t("remove shipment", {capfirst: true})}
+                    onClick={() => {
+                        deleteShipmentElement(index)
+                    }}
+                >
+                    <IconX/>
+                </ActionIcon>
+            </Tooltip>
+        </Group>
+
+    )
+}