@carlonicora/nextjs-jsonapi 1.65.0 → 1.66.0

package/dist/{notification.interface-DG7cq9oG.d.mts → notification.interface-C6UcmJqu.d.mts}

@@ -109,6 +109,16 @@ type CompanyInput = {
     availableExtraTokens?: number;
     featureIds?: string[];
     moduleIds?: string[];
+    legal_address?: string;
+    street_number?: string;
+    street?: string;
+    city?: string;
+    province?: string;
+    region?: string;
+    postcode?: string;
+    country?: string;
+    country_code?: string;
+    fiscal_data?: string;
 };
 interface CompanyInterface extends ApiDataInterface {
     get name(): string;
@@ -121,6 +131,16 @@ interface CompanyInterface extends ApiDataInterface {
     get availableExtraTokens(): number;
     get features(): FeatureInterface[];
     get modules(): ModuleInterface[];
+    get legal_address(): string | undefined;
+    get street_number(): string | undefined;
+    get street(): string | undefined;
+    get city(): string | undefined;
+    get province(): string | undefined;
+    get region(): string | undefined;
+    get postcode(): string | undefined;
+    get country(): string | undefined;
+    get country_code(): string | undefined;
+    get fiscal_data(): string | undefined;
 }
 
 type RoleInput = {

package/dist/{notification.interface-COKHDQeE.d.ts → notification.interface-ItBxq2au.d.ts}

@@ -109,6 +109,16 @@ type CompanyInput = {
     availableExtraTokens?: number;
     featureIds?: string[];
     moduleIds?: string[];
+    legal_address?: string;
+    street_number?: string;
+    street?: string;
+    city?: string;
+    province?: string;
+    region?: string;
+    postcode?: string;
+    country?: string;
+    country_code?: string;
+    fiscal_data?: string;
 };
 interface CompanyInterface extends ApiDataInterface {
     get name(): string;
@@ -121,6 +131,16 @@ interface CompanyInterface extends ApiDataInterface {
     get availableExtraTokens(): number;
     get features(): FeatureInterface[];
     get modules(): ModuleInterface[];
+    get legal_address(): string | undefined;
+    get street_number(): string | undefined;
+    get street(): string | undefined;
+    get city(): string | undefined;
+    get province(): string | undefined;
+    get region(): string | undefined;
+    get postcode(): string | undefined;
+    get country(): string | undefined;
+    get country_code(): string | undefined;
+    get fiscal_data(): string | undefined;
 }
 
 type RoleInput = {

package/dist/{s3.service-ppn9iGJU.d.ts → s3.service-DIR6Su9B.d.ts}

@@ -1,8 +1,8 @@
 import { F as FeatureInterface } from './feature.interface-CIWxo8NP.js';
-import { R as RoleInterface, U as UserInterface, k as UserInput, h as CompanyInterface, C as CompanyInput, N as NotificationInterface } from './notification.interface-COKHDQeE.js';
+import { R as RoleInterface, U as UserInterface, k as UserInput, h as CompanyInterface, C as CompanyInput, N as NotificationInterface } from './notification.interface-ItBxq2au.js';
 import { A as ApiDataInterface, J as JsonApiHydratedDataInterface } from './ApiDataInterface-DPP8s46n.js';
-import { A as AuthInput, b as AuthInterface } from './auth.interface-C1WjZ0fM.js';
-import { a as ContentInterface } from './content.interface-mmz0uMwm.js';
+import { A as AuthInput, b as AuthInterface } from './auth.interface-BX_1qZZJ.js';
+import { a as ContentInterface } from './content.interface-D-xdYxjt.js';
 import { A as ApiRequestDataTypeInterface } from './ApiRequestDataTypeInterface-CYEcRUrh.js';
 
 declare enum HttpMethod {

package/dist/{s3.service-BoRPFx82.d.mts → s3.service-XchHd3ii.d.mts}

@@ -1,8 +1,8 @@
 import { F as FeatureInterface } from './feature.interface-BxFFOPNq.mjs';
-import { R as RoleInterface, U as UserInterface, k as UserInput, h as CompanyInterface, C as CompanyInput, N as NotificationInterface } from './notification.interface-DG7cq9oG.mjs';
+import { R as RoleInterface, U as UserInterface, k as UserInput, h as CompanyInterface, C as CompanyInput, N as NotificationInterface } from './notification.interface-C6UcmJqu.mjs';
 import { A as ApiDataInterface, J as JsonApiHydratedDataInterface } from './ApiDataInterface-DPP8s46n.mjs';
-import { A as AuthInput, b as AuthInterface } from './auth.interface-fBFqIrw4.mjs';
-import { a as ContentInterface } from './content.interface-B5ySfiOE.mjs';
+import { A as AuthInput, b as AuthInterface } from './auth.interface-yeLelxdI.mjs';
+import { a as ContentInterface } from './content.interface-8T5-G84c.mjs';
 import { A as ApiRequestDataTypeInterface } from './ApiRequestDataTypeInterface-CYEcRUrh.mjs';
 
 declare enum HttpMethod {

package/dist/server/index.d.mts

@@ -1,13 +1,13 @@
 import { A as ApiData } from '../ApiData-DPKNfY-9.mjs';
-import { M as ModuleWithPermissions, A as Action } from '../notification.interface-DG7cq9oG.mjs';
+import { M as ModuleWithPermissions, A as Action } from '../notification.interface-C6UcmJqu.mjs';
 import { A as ApiRequestDataTypeInterface } from '../ApiRequestDataTypeInterface-CYEcRUrh.mjs';
 import { A as ApiResponseInterface } from '../ApiResponseInterface-zeewugD7.mjs';
-export { A as ServerAuthService, C as ServerCompanyService, a as ServerContentService, F as ServerFeatureService, N as ServerNotificationService, P as ServerPushService, R as ServerRoleService, S as ServerS3Service, U as ServerUserService } from '../s3.service-BoRPFx82.mjs';
+export { A as ServerAuthService, C as ServerCompanyService, a as ServerContentService, F as ServerFeatureService, N as ServerNotificationService, P as ServerPushService, R as ServerRoleService, S as ServerS3Service, U as ServerUserService } from '../s3.service-XchHd3ii.mjs';
 import 'lucide-react';
 import '../ApiDataInterface-DPP8s46n.mjs';
 import '../feature.interface-BxFFOPNq.mjs';
-import '../auth.interface-fBFqIrw4.mjs';
-import '../content.interface-B5ySfiOE.mjs';
+import '../auth.interface-yeLelxdI.mjs';
+import '../content.interface-8T5-G84c.mjs';
 
 type CacheProfile = "seconds" | "minutes" | "hours" | "days" | "weeks" | "max" | "default";
 /**

package/dist/server/index.d.ts

@@ -1,13 +1,13 @@
 import { A as ApiData } from '../ApiData-DPKNfY-9.js';
-import { M as ModuleWithPermissions, A as Action } from '../notification.interface-COKHDQeE.js';
+import { M as ModuleWithPermissions, A as Action } from '../notification.interface-ItBxq2au.js';
 import { A as ApiRequestDataTypeInterface } from '../ApiRequestDataTypeInterface-CYEcRUrh.js';
 import { A as ApiResponseInterface } from '../ApiResponseInterface-CAIAeP5d.js';
-export { A as ServerAuthService, C as ServerCompanyService, a as ServerContentService, F as ServerFeatureService, N as ServerNotificationService, P as ServerPushService, R as ServerRoleService, S as ServerS3Service, U as ServerUserService } from '../s3.service-ppn9iGJU.js';
+export { A as ServerAuthService, C as ServerCompanyService, a as ServerContentService, F as ServerFeatureService, N as ServerNotificationService, P as ServerPushService, R as ServerRoleService, S as ServerS3Service, U as ServerUserService } from '../s3.service-DIR6Su9B.js';
 import 'lucide-react';
 import '../ApiDataInterface-DPP8s46n.js';
 import '../feature.interface-CIWxo8NP.js';
-import '../auth.interface-C1WjZ0fM.js';
-import '../content.interface-mmz0uMwm.js';
+import '../auth.interface-BX_1qZZJ.js';
+import '../content.interface-D-xdYxjt.js';
 
 type CacheProfile = "seconds" | "minutes" | "hours" | "days" | "weeks" | "max" | "default";
 /**

package/dist/server/index.js

@@ -15,7 +15,7 @@ var _chunk3ZPK4QOBjs = require('../chunk-3ZPK4QOB.js');
 
 
 
-var _chunkLRXJT656js = require('../chunk-LRXJT656.js');
+var _chunkNVXYOQFWjs = require('../chunk-NVXYOQFW.js');
 require('../chunk-LXKSUWAV.js');
 require('../chunk-IBS6NI7D.js');
 
@@ -86,7 +86,7 @@ var ServerSession = class {
     if (!rawModules) return false;
     const modules = JSON.parse(_pako2.default.ungzip(Buffer.from(rawModules, "base64"), { to: "string" }));
     const selectedModule = modules.find((module) => module.id === params.module.moduleId);
-    return _chunkLRXJT656js.checkPermissionsFromServer.call(void 0, {
+    return _chunkNVXYOQFWjs.checkPermissionsFromServer.call(void 0, {
       module: params.module,
       action: params.action,
       data: params.data,
@@ -296,5 +296,5 @@ _chunk7QVYU63Ejs.__name.call(void 0, ServerJsonApiDelete, "ServerJsonApiDelete")
 
 
 
-exports.ServerAuthService = _chunkLRXJT656js.AuthService; exports.ServerCompanyService = _chunkLRXJT656js.CompanyService; exports.ServerContentService = _chunkLRXJT656js.ContentService; exports.ServerFeatureService = _chunkLRXJT656js.FeatureService; exports.ServerJsonApiDelete = ServerJsonApiDelete; exports.ServerJsonApiGet = ServerJsonApiGet; exports.ServerJsonApiPatch = ServerJsonApiPatch; exports.ServerJsonApiPost = ServerJsonApiPost; exports.ServerJsonApiPut = ServerJsonApiPut; exports.ServerNotificationService = _chunkLRXJT656js.NotificationService; exports.ServerPushService = _chunkLRXJT656js.PushService; exports.ServerRoleService = _chunkLRXJT656js.RoleService; exports.ServerS3Service = _chunkLRXJT656js.S3Service; exports.ServerSession = ServerSession; exports.ServerUserService = _chunkLRXJT656js.UserService; exports.configureServerJsonApi = configureServerJsonApi; exports.getServerApiUrl = getServerApiUrl; exports.getServerAppUrl = getServerAppUrl; exports.getServerToken = _chunkYUO55Q5Ajs.getServerToken; exports.getServerTrackablePages = getServerTrackablePages; exports.invalidateCacheTag = invalidateCacheTag; exports.invalidateCacheTags = invalidateCacheTags; exports.serverRequest = _chunk3ZPK4QOBjs.serverRequest;
+exports.ServerAuthService = _chunkNVXYOQFWjs.AuthService; exports.ServerCompanyService = _chunkNVXYOQFWjs.CompanyService; exports.ServerContentService = _chunkNVXYOQFWjs.ContentService; exports.ServerFeatureService = _chunkNVXYOQFWjs.FeatureService; exports.ServerJsonApiDelete = ServerJsonApiDelete; exports.ServerJsonApiGet = ServerJsonApiGet; exports.ServerJsonApiPatch = ServerJsonApiPatch; exports.ServerJsonApiPost = ServerJsonApiPost; exports.ServerJsonApiPut = ServerJsonApiPut; exports.ServerNotificationService = _chunkNVXYOQFWjs.NotificationService; exports.ServerPushService = _chunkNVXYOQFWjs.PushService; exports.ServerRoleService = _chunkNVXYOQFWjs.RoleService; exports.ServerS3Service = _chunkNVXYOQFWjs.S3Service; exports.ServerSession = ServerSession; exports.ServerUserService = _chunkNVXYOQFWjs.UserService; exports.configureServerJsonApi = configureServerJsonApi; exports.getServerApiUrl = getServerApiUrl; exports.getServerAppUrl = getServerAppUrl; exports.getServerToken = _chunkYUO55Q5Ajs.getServerToken; exports.getServerTrackablePages = getServerTrackablePages; exports.invalidateCacheTag = invalidateCacheTag; exports.invalidateCacheTags = invalidateCacheTags; exports.serverRequest = _chunk3ZPK4QOBjs.serverRequest;
 //# sourceMappingURL=index.js.map

package/dist/server/index.mjs

@@ -15,7 +15,7 @@ import {
   S3Service,
   UserService,
   checkPermissionsFromServer
-} from "../chunk-G7PGWMFO.mjs";
+} from "../chunk-35GWVOYZ.mjs";
 import "../chunk-AUXK7QSA.mjs";
 import "../chunk-C7C7VY4F.mjs";
 import {

package/dist/{useRbacState-DhuYYr0S.d.mts → useRbacState-Btk1gkQg.d.mts}

@@ -1,5 +1,5 @@
 import { F as FeatureInterface } from './feature.interface-BxFFOPNq.mjs';
-import { R as RoleInterface } from './notification.interface-DG7cq9oG.mjs';
+import { R as RoleInterface } from './notification.interface-C6UcmJqu.mjs';
 import { P as PermissionMappingInterface, M as ModulePathsInterface, A as ActionType, a as PermissionValue, b as PermissionsMap } from './ModulePathsInterface-49EWvbWy.mjs';
 
 type PageInfo = {

package/dist/{useRbacState-NnzNL2ED.d.ts → useRbacState-CUj0hp8t.d.ts}

@@ -1,5 +1,5 @@
 import { F as FeatureInterface } from './feature.interface-CIWxo8NP.js';
-import { R as RoleInterface } from './notification.interface-COKHDQeE.js';
+import { R as RoleInterface } from './notification.interface-ItBxq2au.js';
 import { P as PermissionMappingInterface, M as ModulePathsInterface, A as ActionType, a as PermissionValue, b as PermissionsMap } from './ModulePathsInterface-wVS5Raa4.js';
 
 type PageInfo = {

package/dist/{useSocket-bsV-K4qR.d.ts → useSocket-BSUN9s3p.d.ts}

@@ -1,4 +1,4 @@
-import { N as NotificationInterface } from './notification.interface-COKHDQeE.js';
+import { N as NotificationInterface } from './notification.interface-ItBxq2au.js';
 
 interface UseSocketOptions {
     token: string;

package/dist/{useSocket-CtfuR5wD.d.mts → useSocket-DKI92Fbg.d.mts}

@@ -1,4 +1,4 @@
-import { N as NotificationInterface } from './notification.interface-DG7cq9oG.mjs';
+import { N as NotificationInterface } from './notification.interface-C6UcmJqu.mjs';
 
 interface UseSocketOptions {
     token: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "1.65.0",
+  "version": "1.66.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",
@@ -116,6 +116,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "codice-fiscale-js": "^2.3.23",
     "commander": "^14.0.2",
     "cookies-next": "^6.1.1",
     "d3": "^7.9.0",

package/src/components/containers/RoundPageContainer.tsx

@@ -62,7 +62,7 @@ export function RoundPageContainer({
             )}
             <div className="flex h-full w-full overflow-hidden">
               <div className={cn(`grow overflow-y-auto p-4`, fullWidth && `p-0`)}>
-                <div className={cn(`mx-auto max-w-6xl space-y-12 p-8`, fullWidth && `max-w-full w-full p-0`)}>
+                <div className={cn(`mx-auto max-w-6xl space-y-12 p-8`, fullWidth && `max-w-full w-full p-0 h-full`)}>
                   {tabs ? (
                     <Tabs
                       value={activeTab}

package/src/components/fiscal/FiscalDataDisplay.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { parseFiscalData } from "../../utils/fiscal-utils";
+import { ItalianFiscalDataDisplay } from "./ItalianFiscalDataDisplay";
+
+type FiscalDataDisplayProps = {
+  fiscalData: string;
+  country?: string;
+};
+
+function hasNonEmptyValues(data: Record<string, string>): boolean {
+  return Object.values(data).some((v) => v && v.trim() !== "");
+}
+
+export function FiscalDataDisplay({ fiscalData, country = "it" }: FiscalDataDisplayProps) {
+  const data = parseFiscalData(fiscalData);
+
+  if (!hasNonEmptyValues(data)) return null;
+
+  switch (country) {
+    case "it":
+      return <ItalianFiscalDataDisplay data={data} />;
+    default:
+      return <ItalianFiscalDataDisplay data={data} />;
+  }
+}

package/src/components/fiscal/ItalianFiscalData.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { validateItalianTaxCode, validatePartitaIva } from "../../utils/italian-validators";
+import { Field, FieldError, FieldLabel, Input } from "../../shadcnui";
+import { useTranslations } from "next-intl";
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
+import { z } from "zod";
+
+export interface FiscalDataHandle {
+  validate: () => boolean;
+  getData: () => Record<string, string>;
+  isDirty: () => boolean;
+  reset: (initialData: Record<string, string>) => void;
+}
+
+export interface ItalianFiscalDataProps {
+  initialData: Record<string, string>;
+}
+
+const ItalianFiscalData = forwardRef<FiscalDataHandle, ItalianFiscalDataProps>(function ItalianFiscalData(
+  { initialData },
+  ref,
+) {
+  const t = useTranslations();
+  const initialRef = useRef<Record<string, string>>(initialData);
+  const [fiscalData, setFiscalData] = useState<Record<string, string>>(initialData);
+  const fiscalDataRef = useRef<Record<string, string>>(initialData);
+  const [fiscalErrors, setFiscalErrors] = useState<Record<string, string>>({});
+
+  const updateFiscalField = useCallback((key: string, value: string) => {
+    setFiscalData((prev) => {
+      const next = { ...prev, [key]: value };
+      fiscalDataRef.current = next;
+      return next;
+    });
+    setFiscalErrors((prev) => {
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  }, []);
+
+  useImperativeHandle(ref, () => ({
+    validate: (): boolean => {
+      const data = fiscalDataRef.current;
+      const errors: Record<string, string> = {};
+
+      if (data.codice_fiscale && !validateItalianTaxCode(data.codice_fiscale, "codiceFiscale")) {
+        errors.codice_fiscale = t("common.fields.codice_fiscale.error");
+      }
+      if (data.partita_iva && !validatePartitaIva(data.partita_iva)) {
+        errors.partita_iva = t("common.fields.partita_iva.error");
+      }
+      if (data.pec && !z.string().email().safeParse(data.pec).success) {
+        errors.pec = t("common.fields.pec.error");
+      }
+
+      setFiscalErrors(errors);
+      return Object.keys(errors).length === 0;
+    },
+    getData: (): Record<string, string> => fiscalDataRef.current,
+    isDirty: (): boolean => JSON.stringify(fiscalDataRef.current) !== JSON.stringify(initialRef.current),
+    reset: (newInitialData: Record<string, string>) => {
+      initialRef.current = newInitialData;
+      fiscalDataRef.current = newInitialData;
+      setFiscalData(newInitialData);
+      setFiscalErrors({});
+    },
+  }));
+
+  return (
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+      <Field data-invalid={!!fiscalErrors.codice_fiscale}>
+        <FieldLabel>{t("common.fields.codice_fiscale.label")}</FieldLabel>
+        <Input
+          value={fiscalData.codice_fiscale || ""}
+          onChange={(e) => updateFiscalField("codice_fiscale", e.target.value)}
+          placeholder={t("common.fields.codice_fiscale.placeholder")}
+        />
+        {fiscalErrors.codice_fiscale && <FieldError>{fiscalErrors.codice_fiscale}</FieldError>}
+      </Field>
+      <Field data-invalid={!!fiscalErrors.partita_iva}>
+        <FieldLabel>{t("common.fields.partita_iva.label")}</FieldLabel>
+        <Input
+          value={fiscalData.partita_iva || ""}
+          onChange={(e) => updateFiscalField("partita_iva", e.target.value)}
+          placeholder={t("common.fields.partita_iva.placeholder")}
+        />
+        {fiscalErrors.partita_iva && <FieldError>{fiscalErrors.partita_iva}</FieldError>}
+      </Field>
+      <Field>
+        <FieldLabel>{t("common.fields.sdi.label")}</FieldLabel>
+        <Input
+          value={fiscalData.sdi || ""}
+          onChange={(e) => updateFiscalField("sdi", e.target.value)}
+          placeholder={t("common.fields.sdi.placeholder")}
+        />
+      </Field>
+      <Field>
+        <FieldLabel>{t("common.fields.rea.label")}</FieldLabel>
+        <Input
+          value={fiscalData.rea || ""}
+          onChange={(e) => updateFiscalField("rea", e.target.value)}
+          placeholder={t("common.fields.rea.placeholder")}
+        />
+      </Field>
+      <Field data-invalid={!!fiscalErrors.pec}>
+        <FieldLabel>{t("common.fields.pec.label")}</FieldLabel>
+        <Input
+          value={fiscalData.pec || ""}
+          onChange={(e) => updateFiscalField("pec", e.target.value)}
+          placeholder={t("common.fields.pec.placeholder")}
+        />
+        {fiscalErrors.pec && <FieldError>{fiscalErrors.pec}</FieldError>}
+      </Field>
+    </div>
+  );
+});
+
+export default ItalianFiscalData;

package/src/components/fiscal/ItalianFiscalDataDisplay.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { AttributeElement } from "../contents";
+import { useTranslations } from "next-intl";
+
+type ItalianFiscalDataDisplayProps = {
+  data: Record<string, string>;
+};
+
+export function ItalianFiscalDataDisplay({ data }: ItalianFiscalDataDisplayProps) {
+  const t = useTranslations();
+
+  return (
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+      {data.codice_fiscale && (
+        <AttributeElement title={t("common.fields.codice_fiscale.label")} value={data.codice_fiscale} />
+      )}
+      {data.partita_iva && <AttributeElement title={t("common.fields.partita_iva.label")} value={data.partita_iva} />}
+      {data.sdi && <AttributeElement title={t("common.fields.sdi.label")} value={data.sdi} />}
+      {data.rea && <AttributeElement title={t("common.fields.rea.label")} value={data.rea} />}
+      {data.pec && <AttributeElement title={t("common.fields.pec.label")} value={data.pec} />}
+    </div>
+  );
+}

package/src/components/fiscal/index.ts

@@ -0,0 +1,4 @@
+export { default as ItalianFiscalData } from "./ItalianFiscalData";
+export type { FiscalDataHandle, ItalianFiscalDataProps } from "./ItalianFiscalData";
+export { ItalianFiscalDataDisplay } from "./ItalianFiscalDataDisplay";
+export { FiscalDataDisplay } from "./FiscalDataDisplay";

package/src/components/index.ts

@@ -10,6 +10,8 @@ export * from "./forms";
 export * from "./navigations";
 export * from "./pages";
 export * from "./tables";
+export * from "./fiscal";
+export { parseFiscalData } from "../utils/fiscal-utils";
 
 // Feature components
 export * from "../features/auth/components";

package/src/components/navigations/Breadcrumb.tsx

@@ -19,7 +19,7 @@ import {
 
 type BreadcrumbProps = { items: BreadcrumbItemData[] };
 
-const ITEMS_TO_DISPLAY = 3;
+const ITEMS_TO_DISPLAY = 4;
 
 export function BreadcrumbNavigation({ items }: BreadcrumbProps) {
   const generateUrl = usePageUrlGenerator();
@@ -47,7 +47,7 @@ export function BreadcrumbNavigation({ items }: BreadcrumbProps) {
                   <BreadcrumbEllipsis className="h-4 w-4" />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="start">
-                  {items.slice(1, -ITEMS_TO_DISPLAY + 1).map((item, index) => (
+                  {items.slice(1, -ITEMS_TO_DISPLAY + 2).map((item, index) => (
                     <DropdownMenuItem key={index}>
                       <Link href={item.href ? item.href : "#"}>{item.name}</Link>
                     </DropdownMenuItem>
@@ -56,12 +56,12 @@ export function BreadcrumbNavigation({ items }: BreadcrumbProps) {
               </DropdownMenu>
             </BreadcrumbItem>
             <BreadcrumbSeparator />
-            {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (
+            {items.slice(-ITEMS_TO_DISPLAY + 2).map((item, index) => (
               <Fragment key={index}>
                 <BreadcrumbItem>
                   {item.href ? <Link href={item.href}>{item.name}</Link> : <>{item.name}</>}
                 </BreadcrumbItem>
-                {index < items.slice(-ITEMS_TO_DISPLAY + 1).length - 1 && <BreadcrumbSeparator />}
+                {index < items.slice(-ITEMS_TO_DISPLAY + 2).length - 1 && <BreadcrumbSeparator />}
               </Fragment>
             ))}
           </>

package/src/components/navigations/RecentPagesNavigator.tsx

@@ -26,10 +26,10 @@ export function RecentPagesNavigator() {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger>
-        <div className="flex w-full cursor-pointer items-center gap-2">
+      <DropdownMenuTrigger render={<span />} nativeButton={false}>
+        <span className="flex w-full cursor-pointer items-center gap-2">
           {state === "collapsed" ? <HistoryIcon className="h-4 w-4" /> : <span>{t(`common.recent_pages`)}</span>}
-        </div>
+        </span>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-96">
         <DropdownMenuLabel>{t(`common.recent_pages`)}</DropdownMenuLabel>

package/src/features/company/components/details/CompanyContent.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { MapPinIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { ReactNode } from "react";
+import { AttributeElement } from "../../../../components";
+import { FiscalDataDisplay } from "../../../../components/fiscal/FiscalDataDisplay";
+import { CompanyInterface } from "../../data";
+
+type CompanyContentProps = {
+  company?: CompanyInterface;
+  actions?: ReactNode;
+};
+
+function hasAddressDetails(company: CompanyInterface): boolean {
+  return !!(
+    company.street ||
+    company.street_number ||
+    company.city ||
+    company.province ||
+    company.region ||
+    company.postcode ||
+    company.country
+  );
+}
+
+export function CompanyContent({ company, actions }: CompanyContentProps) {
+  const t = useTranslations();
+
+  if (!company) return null;
+
+  return (
+    <div className="flex flex-col gap-y-8">
+      {/* Title Row */}
+      <div className="flex w-full items-center justify-between">
+        <h2 className="text-lg font-semibold">{company.name}</h2>
+        {actions && <div className="flex items-center gap-x-2">{actions}</div>}
+      </div>
+
+      {/* Hero Section */}
+      <div className="flex items-start gap-x-6">
+        {company.logo && (
+          <Image src={company.logo} alt={company.name} width={150} height={150} className="rounded-md" />
+        )}
+        <div className="flex flex-col gap-y-2">
+          {company.legal_address && (
+            <div className="text-muted-foreground flex items-center gap-x-2 text-sm">
+              <MapPinIcon className="h-4 w-4 shrink-0" />
+              {company.legal_address}
+            </div>
+          )}
+          <div className="flex flex-col gap-y-1">
+            {company.configurations?.country && (
+              <div className="text-muted-foreground text-sm">
+                <span className="font-medium">{t("features.configuration.country")}:</span>{" "}
+                {company.configurations.country}
+              </div>
+            )}
+            {company.configurations?.currency && (
+              <div className="text-muted-foreground text-sm">
+                <span className="font-medium">{t("features.configuration.currency")}:</span>{" "}
+                {company.configurations.currency}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Fiscal Data Section */}
+      {company.fiscal_data && (
+        <div className="flex flex-col gap-y-3">
+          <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
+            {t("company.sections.fiscal_data")}
+          </h3>
+          <FiscalDataDisplay fiscalData={company.fiscal_data} />
+        </div>
+      )}
+
+      {/* Address Details Section */}
+      {hasAddressDetails(company) && (
+        <div className="flex flex-col gap-y-3">
+          <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
+            {t("company.sections.address_details")}
+          </h3>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+            {company.street && <AttributeElement title={t("company.fields.street.label")} value={company.street} />}
+            {company.street_number && (
+              <AttributeElement title={t("company.fields.street_number.label")} value={company.street_number} />
+            )}
+            {company.city && <AttributeElement title={t("company.fields.city.label")} value={company.city} />}
+            {company.province && (
+              <AttributeElement title={t("company.fields.province.label")} value={company.province} />
+            )}
+            {company.region && <AttributeElement title={t("company.fields.region.label")} value={company.region} />}
+            {company.postcode && (
+              <AttributeElement title={t("company.fields.postcode.label")} value={company.postcode} />
+            )}
+            {company.country && <AttributeElement title={t("company.fields.country.label")} value={company.country} />}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/features/company/components/details/CompanyDetails.tsx

@@ -1,16 +1,14 @@
 "use client";
 
-import { useTranslations } from "next-intl";
-import Image from "next/image";
 import { Modules } from "../../../../";
 import { ContentTitle } from "../../../../components";
 import { useSharedContext } from "../../../../contexts";
 import { usePageUrlGenerator } from "../../../../hooks";
 import { useCompanyContext } from "../../contexts/CompanyContext";
+import { CompanyContent } from "./CompanyContent";
 import { TokenStatusIndicator } from "./TokenStatusIndicator";
 
 export function CompanyDetails() {
-  const t = useTranslations();
   const { title } = useSharedContext();
   const _generateUrl = usePageUrlGenerator();
 
@@ -20,23 +18,8 @@ export function CompanyDetails() {
   return (
     <div className="flex w-full flex-col gap-y-2">
       <ContentTitle module={Modules.Company} type={title.type} element={title.element} functions={title.functions} />
-      {company.logo && (
-        <Image src={company.logo} alt={company.name} width={150} height={150} className="mb-4 rounded-md" />
-      )}
       <TokenStatusIndicator size="md" />
-      <div className="flex flex-col gap-y-1">
-        {company.configurations?.country && (
-          <div className="text-muted-foreground text-sm">
-            <span className="font-medium">{t("features.configuration.country")}:</span> {company.configurations.country}
-          </div>
-        )}
-        {company.configurations?.currency && (
-          <div className="text-muted-foreground text-sm">
-            <span className="font-medium">{t("features.configuration.currency")}:</span>{" "}
-            {company.configurations.currency}
-          </div>
-        )}
-      </div>
+      <CompanyContent company={company} />
     </div>
   );
 }

package/src/features/company/components/details/index.ts

@@ -1,2 +1,3 @@
+export * from "./CompanyContent";
 export * from "./CompanyDetails";
 export * from "./TokenStatusIndicator";