FactuGES_ERP/modules/suppliers/src/web/create/supplier-create-page.tsx

import { ErrorAlert } from "@erp/core/components";
import { UnsavedChangesProvider, useReturnToNavigation } from "@erp/core/hooks";
import { RdxEditorPageLayout } from "@repo/rdx-ui/components";
import { FormProvider } from "react-hook-form";
import { createSearchParams, useNavigate, useSearchParams } from "react-router-dom";

import { useTranslation } from "../i18n";
import { SupplierEditorForm, SupplierEditorHeader } from "../shared/ui";

import { useSupplierCreateController } from "./controllers";

export const SupplierCreatePage = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const returnTo = searchParams.get("returnTo") ?? "/suppliers";
  const { navigateBack } = useReturnToNavigation({ fallbackPath: returnTo });
  const controller = useSupplierCreateController({
    onCreated: (supplier) =>
      navigate({
        pathname: `/suppliers/${supplier.id}`,
        search: createSearchParams({ returnTo }).toString(),
      }),
  });

  return (
    <div className="fixed inset-0 flex flex-col overflow-hidden">
      <FormProvider {...controller.form}>
        <UnsavedChangesProvider isDirty={controller.form.formState.isDirty}>
          <SupplierEditorHeader
            formId={controller.formId}
            hasChanges={controller.form.formState.isDirty}
            isSaving={controller.mutation.isPending}
            onCancel={navigateBack}
            title={t("create.title")}
          />
          <div className="flex-1 overflow-y-auto bg-muted/20">
            <RdxEditorPageLayout width="simple">
              <div className="rounded-2xl border border-border/60 bg-background p-4 shadow-xs md:p-6">
                <div className="flex min-w-0 flex-col gap-6">
                  {controller.mutation.isError ? (
                    <ErrorAlert
                      message={controller.mutation.error.message || t("create.error")}
                      title={t("create.error")}
                    />
                  ) : null}
                  <SupplierEditorForm
                    formId={controller.formId}
                    isSubmitting={controller.mutation.isPending}
                    onSubmit={controller.onSubmit}
                  />
                </div>
              </div>
            </RdxEditorPageLayout>
          </div>
        </UnsavedChangesProvider>
      </FormProvider>
    </div>
  );
};