feat: mejorar la interfaz de usuario en las secciones de configuración de verifactu y detalles de la empresa

2026-09-05 11:52:53 +02:00 · 2026-09-05 11:52:53 +02:00 · 81da489ca8
commit 81da489ca8
parent bbca943c87
6 changed files with 290 additions and 244 deletions
--- a/modules/companies/src/web/settings/company-details/ui/pages/company-details-settings-page.test.tsx
+++ b/modules/companies/src/web/settings/company-details/ui/pages/company-details-settings-page.test.tsx
@ -77,7 +77,18 @@ mock.module("@repo/rdx-ui/components", {
    RdxPanel: ({ children, title }: { children: ReactNode; title: string }) => (
      <section data-title={title}>{children}</section>
    ),
-    RdxEditorStickyFooter: () => null,
+    RdxEditorActionBar: ({
+      primary,
+      secondary,
+    }: {
+      primary?: ReactNode;
+      secondary?: ReactNode;
+    }) => (
+      <div>
+        {secondary}
+        {primary}
+      </div>
+    ),
    RdxFormGrid: ({ children }: { children: ReactNode }) => <div>{children}</div>,
    RhfSubmitActionButton: (props: Record<string, unknown>) => {
      capturedSubmitProps = props;
@ -94,6 +105,14 @@ mock.module("@repo/rdx-ui/components", {
  },
 });

+mock.module("@repo/shadcn-ui/components", {
+  namedExports: {
+    Card: ({ children }: { children: ReactNode }) => <section>{children}</section>,
+    CardContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+    CardHeader: ({ children }: { children: ReactNode }) => <header>{children}</header>,
+  },
+});
+
 mock.module("react-hook-form", {
  namedExports: {
    FormProvider: ({ children }: { children: ReactNode }) => children,
--- a/modules/companies/src/web/settings/company-details/ui/pages/company-details-settings-page.tsx
+++ b/modules/companies/src/web/settings/company-details/ui/pages/company-details-settings-page.tsx
@ -10,7 +10,8 @@ import {
  SelectField,
  TextField,
 } from "@repo/rdx-ui/components";
-import { ContactIcon, LandmarkIcon, ScrollTextIcon } from "lucide-react";
+import { Card, CardContent, CardHeader } from "@repo/shadcn-ui/components";
+import { Building2Icon, ContactIcon, LandmarkIcon, ScrollTextIcon } from "lucide-react";
 import { FormProvider } from "react-hook-form";

 import { useTranslation } from "../../../../i18n";
@ -64,16 +65,23 @@ export const CompanyDetailsSettingsPage = () => {
  return (
    <FormProvider {...ctrl.form}>
      <UnsavedChangesProvider isDirty={ctrl.form.formState.isDirty}>
-        <div className="flex min-h-[24rem] flex-col gap-6">
-          <div className="space-y-2">
+        <Card>
+          <CardHeader>
+            <div className="flex min-w-0 items-start gap-4">
+              <div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                <Building2Icon aria-hidden className="size-6" />
+              </div>
+              <div className="min-w-0 space-y-1">
                <h2 className="text-2xl font-semibold tracking-tight">
                  {t("settings.companyDetails.title")}
                </h2>
-            <p className="max-w-3xl text-sm text-muted-foreground">
+                <p className="text-sm text-muted-foreground">
                  {t("settings.companyDetails.description")}
                </p>
              </div>
-
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-6">
            {ctrl.inlineLoadError ? (
              <ErrorAlert
                message={ctrl.inlineLoadError.description}
@ -92,7 +100,7 @@ export const CompanyDetailsSettingsPage = () => {
                description={t("settings.companyDetails.sections.general.description")}
                icon={<ScrollTextIcon className="size-5" />}
                title={t("settings.companyDetails.sections.general.title")}
-              variant="card"
+                variant="plain"
              >
                <RdxFormGrid className="md:grid-cols-2">
                  <TextField<CompanySettingsForm>
@ -124,12 +132,16 @@ export const CompanyDetailsSettingsPage = () => {
                  />

                  <TextField<CompanySettingsForm>
-                  description={t("settings.companyDetails.sections.general.fields.tin.description")}
+                    description={t(
+                      "settings.companyDetails.sections.general.fields.tin.description"
+                    )}
                    disabled={ctrl.isSaving}
                    inputClassName="bg-background"
                    label={t("settings.companyDetails.sections.general.fields.tin.label")}
                    name="tin"
-                  placeholder={t("settings.companyDetails.sections.general.fields.tin.placeholder")}
+                    placeholder={t(
+                      "settings.companyDetails.sections.general.fields.tin.placeholder"
+                    )}
                  />
                </RdxFormGrid>
              </RdxPanel>
@ -138,7 +150,7 @@ export const CompanyDetailsSettingsPage = () => {
                description={t("settings.companyDetails.sections.contact.description")}
                icon={<ContactIcon className="size-5" />}
                title={t("settings.companyDetails.sections.contact.title")}
-              variant="card"
+                variant="plain"
              >
                <RdxFormGrid className="md:grid-cols-2">
                  <TextField<CompanySettingsForm>
@ -190,21 +202,25 @@ export const CompanyDetailsSettingsPage = () => {
                description={t("settings.companyDetails.sections.paymentTerm.description")}
                icon={<LandmarkIcon className="size-5" />}
                title={t("settings.companyDetails.sections.paymentTerm.title")}
-              variant="card"
+                variant="plain"
              >
                <RdxFormGrid className="md:grid-cols-2">
                  <SelectField<CompanySettingsForm>
                    className="col-span-full"
                    clearable
                    clearLabel={t("settings.companyDetails.sections.paymentTerm.field.none")}
-                  description={t("settings.companyDetails.sections.paymentTerm.field.description")}
+                    description={t(
+                      "settings.companyDetails.sections.paymentTerm.field.description"
+                    )}
                    disabled={ctrl.isSaving}
                    emptyValue=""
                    inputClassName="bg-background"
                    items={ctrl.paymentTermOptions}
                    label={t("settings.companyDetails.sections.paymentTerm.field.label")}
                    name="defaultPaymentTermId"
-                  placeholder={t("settings.companyDetails.sections.paymentTerm.field.placeholder")}
+                    placeholder={t(
+                      "settings.companyDetails.sections.paymentTerm.field.placeholder"
+                    )}
                  />
                </RdxFormGrid>
              </RdxPanel>
@ -235,7 +251,8 @@ export const CompanyDetailsSettingsPage = () => {
                />
              }
            />
-        </div>
+          </CardContent>
+        </Card>
      </UnsavedChangesProvider>
    </FormProvider>
  );
--- a/modules/customer-invoices/src/web/settings/verifactu/ui/pages/company-verifactu-settings-page.tsx
+++ b/modules/customer-invoices/src/web/settings/verifactu/ui/pages/company-verifactu-settings-page.tsx
@ -6,6 +6,8 @@ import {
  RdxEditorActionBar,
  RhfSubmitActionButton,
 } from "@repo/rdx-ui/components";
+import { Card, CardContent, CardHeader } from "@repo/shadcn-ui/components";
+import { ShieldCheckIcon } from "lucide-react";
 import { FormProvider } from "react-hook-form";

 import { useTranslation } from "../../../../i18n";
@ -51,12 +53,17 @@ export const CompanyVerifactuSettingsPage = () => {
  return (
    <FormProvider {...profileCtrl.form}>
      <UnsavedChangesProvider isDirty={profileCtrl.form.formState.isDirty}>
-        <div className="flex min-h-[32rem] flex-col gap-6">
-          <div className="space-y-2">
+        <Card>
+          <CardHeader>
+            <div className="flex min-w-0 items-start gap-4">
+              <div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                <ShieldCheckIcon aria-hidden className="size-6" />
+              </div>
+              <div className="min-w-0 space-y-1">
                <h2 className="text-2xl font-semibold tracking-tight">
                  {t("settings.verifactu.title")}
                </h2>
-            <p className="max-w-3xl text-sm text-muted-foreground">
+                <p className="text-sm text-muted-foreground">
                  {t("settings.verifactu.description")}
                </p>
                {ctrl.mode === "initial" ? (
@ -65,7 +72,9 @@ export const CompanyVerifactuSettingsPage = () => {
                  </p>
                ) : null}
              </div>
-
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-6">
            {profileCtrl.isUpdateError ? (
              <ErrorAlert
                message={
@ -124,7 +133,8 @@ export const CompanyVerifactuSettingsPage = () => {
                />
              }
            />
-        </div>
+          </CardContent>
+        </Card>
      </UnsavedChangesProvider>
    </FormProvider>
  );
--- a/modules/customer-invoices/src/web/settings/verifactu/ui/sections/company-verifactu-configuration-section.tsx
+++ b/modules/customer-invoices/src/web/settings/verifactu/ui/sections/company-verifactu-configuration-section.tsx
@ -32,7 +32,7 @@ export const CompanyVerifactuConfigurationSection = ({
      description={t("settings.verifactu.configuration.description")}
      icon={<ShieldCheckIcon className="size-5" />}
      title={t("settings.verifactu.configuration.title")}
-      variant="card"
+      variant="plain"
    >
      <RdxFormGrid className="md:grid-cols-2">
        {showExemptionFields ? (
--- a/modules/customer-invoices/src/web/settings/verifactu/ui/sections/company-verifactu-defaults-section.tsx
+++ b/modules/customer-invoices/src/web/settings/verifactu/ui/sections/company-verifactu-defaults-section.tsx
@ -21,7 +21,7 @@ export const CompanyVerifactuDefaultsSection = ({
      description={t("settings.verifactu.defaults.description")}
      icon={<LandmarkIcon className="size-5" />}
      title={t("settings.verifactu.defaults.title")}
-      variant="card"
+      variant="plain"
    >
      <RdxFormGrid className="md:grid-cols-2">
        <SelectField
--- a/modules/customer-invoices/src/web/settings/verifactu/ui/sections/company-verifactu-status-section.tsx
+++ b/modules/customer-invoices/src/web/settings/verifactu/ui/sections/company-verifactu-status-section.tsx
@ -23,7 +23,7 @@ export const CompanyVerifactuStatusSection = () => {
      description={t("settings.verifactu.status.description")}
      icon={<FileCogIcon className="size-5" />}
      title={t("settings.verifactu.status.title")}
-      variant="card"
+      variant="plain"
    >
      <Controller
        control={control}