bodyshop/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx

import { Button, Form, Input, InputNumber, PageHeader } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";

export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
  const { t } = useTranslation();
  return (
    <div>
      <PageHeader
        title={t("menus.header.courtesycars")}
        extra={
          <Button
            type="primary"
            loading={saveLoading}
            onClick={() => form.submit()}
          >
            {t("general.actions.save")}
          </Button>
        }
      />

      <FormFieldsChanged form={form} />
      <LayoutFormRow header={t("courtesycars.labels.vehicle")}>
        <Form.Item
          label={t("courtesycars.fields.make")}
          name="make"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.model")}
          name="model"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.year")}
          name="year"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.plate")}
          name="plate"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.color")}
          name="color"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.vin")}
          name="vin"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <Input />
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow header={t("courtesycars.labels.usage")}>
        <Form.Item
          label={t("courtesycars.fields.mileage")}
          name="mileage"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <InputNumber />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.fleetnumber")}
          name="fleetnumber"
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.purchasedate")}
          name="purchasedate"
        >
          <FormDatePicker />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.servicestartdate")}
          name="servicestartdate"
        >
          <FormDatePicker />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.serviceenddate")}
          name="serviceenddate"
        >
          <FormDatePicker />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.leaseenddate")}
          name="leaseenddate"
        >
          <FormDatePicker />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow header={t("courtesycars.labels.status")}>
        <Form.Item
          span={24}
          label={t("courtesycars.fields.fuel")}
          name="fuel"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <CourtesyCarFuelSlider />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.status")}
          name="status"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <CourtesyCarStatus />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.nextservicekm")}
          name="nextservicekm"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <InputNumberCalculator />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.nextservicedate")}
          name="nextservicedate"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <FormDatePicker />
        </Form.Item>
        <Form.Item label={t("courtesycars.fields.damage")} name="damage">
          <Input.TextArea />
        </Form.Item>
        <Form.Item label={t("courtesycars.fields.notes")} name="notes">
          <Input.TextArea />
        </Form.Item>

        <Form.Item
          label={t("courtesycars.fields.registrationexpires")}
          name="registrationexpires"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <FormDatePicker />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.insuranceexpires")}
          name="insuranceexpires"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <FormDatePicker />
        </Form.Item>
        <Form.Item label={t("courtesycars.fields.dailycost")} name="dailycost">
          <CurrencyInput />
        </Form.Item>
      </LayoutFormRow>
    </div>
  );
}