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

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,

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">
+        <Card>
-          <div className="space-y-2">
+          <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>
   );

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">
+        <Card>
-          <div className="space-y-2">
+          <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>
   );

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 ? (

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

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}