redesgigned page

This commit is contained in:
2026-05-24 13:12:09 +02:00
parent 39b15aec65
commit 1cd0379654
+33 -33
View File
@@ -248,7 +248,6 @@ export const MainForm = () => {
{/* Name row */} {/* Name row */}
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<FormLabel>{t("first-name")}</FormLabel>
<Field <Field
name="firstName" name="firstName"
validators={makeFieldValidator("firstName")} validators={makeFieldValidator("firstName")}
@@ -256,7 +255,8 @@ export const MainForm = () => {
{(field) => { {(field) => {
const errors = getErrors(field); const errors = getErrors(field);
return ( return (
<> <FormControl required>
<FormLabel>{t("first-name")}</FormLabel>
<Input <Input
value={field.state.value ?? ""} value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
@@ -269,12 +269,11 @@ export const MainForm = () => {
{errors[0]} {errors[0]}
</span> </span>
)} )}
</> </FormControl>
); );
}} }}
</Field> </Field>
<FormLabel>{t("last-name")}</FormLabel>
<Field <Field
name="lastName" name="lastName"
validators={makeFieldValidator("lastName")} validators={makeFieldValidator("lastName")}
@@ -282,7 +281,8 @@ export const MainForm = () => {
{(field) => { {(field) => {
const errors = getErrors(field); const errors = getErrors(field);
return ( return (
<> <FormControl required>
<FormLabel>{t("last-name")}</FormLabel>
<Input <Input
value={field.state.value ?? ""} value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
@@ -295,18 +295,18 @@ export const MainForm = () => {
{errors[0]} {errors[0]}
</span> </span>
)} )}
</> </FormControl>
); );
}} }}
</Field> </Field>
</div> </div>
<FormLabel>{t("email")}</FormLabel>
<Field name="email" validators={makeFieldValidator("email")}> <Field name="email" validators={makeFieldValidator("email")}>
{(field) => { {(field) => {
const errors = getErrors(field); const errors = getErrors(field);
return ( return (
<> <FormControl required>
<FormLabel>{t("email")}</FormLabel>
<Input <Input
value={field.state.value ?? ""} value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
@@ -318,12 +318,11 @@ export const MainForm = () => {
{errors.length > 0 && ( {errors.length > 0 && (
<span className="text-red-500 text-sm">{errors[0]}</span> <span className="text-red-500 text-sm">{errors[0]}</span>
)} )}
</> </FormControl>
); );
}} }}
</Field> </Field>
<FormLabel>{t("phone-number")}</FormLabel>
<Field <Field
name="phoneNumber" name="phoneNumber"
validators={makeFieldValidator("phoneNumber")} validators={makeFieldValidator("phoneNumber")}
@@ -331,7 +330,8 @@ export const MainForm = () => {
{(field) => { {(field) => {
const errors = getErrors(field); const errors = getErrors(field);
return ( return (
<> <FormControl required>
<FormLabel>{t("phone-number")}</FormLabel>
<Input <Input
value={field.state.value ?? ""} value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
@@ -343,7 +343,7 @@ export const MainForm = () => {
{errors.length > 0 && ( {errors.length > 0 && (
<span className="text-red-500 text-sm">{errors[0]}</span> <span className="text-red-500 text-sm">{errors[0]}</span>
)} )}
</> </FormControl>
); );
}} }}
</Field> </Field>
@@ -410,7 +410,6 @@ export const MainForm = () => {
{t("invoice-details")} {t("invoice-details")}
</Typography> </Typography>
<FormLabel>{t("company-name")}</FormLabel>
<Field <Field
name="companyName" name="companyName"
validators={makeFieldValidator("companyName")} validators={makeFieldValidator("companyName")}
@@ -418,7 +417,8 @@ export const MainForm = () => {
{(field) => { {(field) => {
const errors = getErrors(field); const errors = getErrors(field);
return ( return (
<> <FormControl required>
<FormLabel>{t("company-name")}</FormLabel>
<Input <Input
value={field.state.value ?? ""} value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
@@ -431,13 +431,12 @@ export const MainForm = () => {
{errors[0]} {errors[0]}
</span> </span>
)} )}
</> </FormControl>
); );
}} }}
</Field> </Field>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<FormLabel>{t("first-name")}</FormLabel>
<Field <Field
name="cmpFirstName" name="cmpFirstName"
validators={makeFieldValidator("cmpFirstName")} validators={makeFieldValidator("cmpFirstName")}
@@ -445,7 +444,8 @@ export const MainForm = () => {
{(field) => { {(field) => {
const errors = getErrors(field); const errors = getErrors(field);
return ( return (
<> <FormControl required>
<FormLabel>{t("first-name")}</FormLabel>
<Input <Input
value={field.state.value ?? ""} value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
@@ -458,12 +458,11 @@ export const MainForm = () => {
{errors[0]} {errors[0]}
</span> </span>
)} )}
</> </FormControl>
); );
}} }}
</Field> </Field>
<FormLabel>{t("last-name")}</FormLabel>
<Field <Field
name="cpmLastName" name="cpmLastName"
validators={makeFieldValidator("cpmLastName")} validators={makeFieldValidator("cpmLastName")}
@@ -471,7 +470,8 @@ export const MainForm = () => {
{(field) => { {(field) => {
const errors = getErrors(field); const errors = getErrors(field);
return ( return (
<> <FormControl required>
<FormLabel>{t("last-name")}</FormLabel>
<Input <Input
value={field.state.value ?? ""} value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
@@ -484,18 +484,18 @@ export const MainForm = () => {
{errors[0]} {errors[0]}
</span> </span>
)} )}
</> </FormControl>
); );
}} }}
</Field> </Field>
</div> </div>
<FormLabel>{t("street")}</FormLabel>
<Field name="street" validators={makeFieldValidator("street")}> <Field name="street" validators={makeFieldValidator("street")}>
{(field) => { {(field) => {
const errors = getErrors(field); const errors = getErrors(field);
return ( return (
<> <FormControl required>
<FormLabel>{t("street")}</FormLabel>
<Input <Input
value={field.state.value ?? ""} value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
@@ -508,12 +508,11 @@ export const MainForm = () => {
{errors[0]} {errors[0]}
</span> </span>
)} )}
</> </FormControl>
); );
}} }}
</Field> </Field>
<FormLabel>{t("postal-code")}</FormLabel>
<Field <Field
name="postalCode" name="postalCode"
validators={makeFieldValidator("postalCode")} validators={makeFieldValidator("postalCode")}
@@ -521,7 +520,8 @@ export const MainForm = () => {
{(field) => { {(field) => {
const errors = getErrors(field); const errors = getErrors(field);
return ( return (
<> <FormControl required>
<FormLabel>{t("postal-code")}</FormLabel>
<Input <Input
value={field.state.value ?? ""} value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
@@ -534,12 +534,11 @@ export const MainForm = () => {
{errors[0]} {errors[0]}
</span> </span>
)} )}
</> </FormControl>
); );
}} }}
</Field> </Field>
<FormLabel>{t("phone-number")}</FormLabel>
<Field <Field
name="cpmPhoneNumber" name="cpmPhoneNumber"
validators={makeFieldValidator("cpmPhoneNumber")} validators={makeFieldValidator("cpmPhoneNumber")}
@@ -547,7 +546,8 @@ export const MainForm = () => {
{(field) => { {(field) => {
const errors = getErrors(field); const errors = getErrors(field);
return ( return (
<> <FormControl required>
<FormLabel>{t("phone-number")}</FormLabel>
<Input <Input
value={field.state.value ?? ""} value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
@@ -561,12 +561,11 @@ export const MainForm = () => {
{errors[0]} {errors[0]}
</span> </span>
)} )}
</> </FormControl>
); );
}} }}
</Field> </Field>
<FormLabel>{t("email")}</FormLabel>
<Field <Field
name="cpmEmail" name="cpmEmail"
validators={makeFieldValidator("cpmEmail")} validators={makeFieldValidator("cpmEmail")}
@@ -574,7 +573,8 @@ export const MainForm = () => {
{(field) => { {(field) => {
const errors = getErrors(field); const errors = getErrors(field);
return ( return (
<> <FormControl required>
<FormLabel>{t("email")}</FormLabel>
<Input <Input
value={field.state.value ?? ""} value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
@@ -588,7 +588,7 @@ export const MainForm = () => {
{errors[0]} {errors[0]}
</span> </span>
)} )}
</> </FormControl>
); );
}} }}
</Field> </Field>