@carlonicora/nextjs-jsonapi 1.65.1 → 1.67.0

package/src/features/company/data/company.ts

@@ -18,6 +18,17 @@ export class Company extends AbstractApiData implements CompanyInterface {
   private _features?: FeatureInterface[];
   private _modules?: ModuleInterface[];
 
+  private _legal_address?: string;
+  private _street_number?: string;
+  private _street?: string;
+  private _city?: string;
+  private _province?: string;
+  private _region?: string;
+  private _postcode?: string;
+  private _country?: string;
+  private _country_code?: string;
+  private _fiscal_data?: string;
+
   get name(): string {
     if (this._name === undefined) throw new Error("Name is not defined");
     return this._name;
@@ -59,6 +70,46 @@ export class Company extends AbstractApiData implements CompanyInterface {
     return this._configurations;
   }
 
+  get legal_address(): string | undefined {
+    return this._legal_address;
+  }
+
+  get street_number(): string | undefined {
+    return this._street_number;
+  }
+
+  get street(): string | undefined {
+    return this._street;
+  }
+
+  get city(): string | undefined {
+    return this._city;
+  }
+
+  get province(): string | undefined {
+    return this._province;
+  }
+
+  get region(): string | undefined {
+    return this._region;
+  }
+
+  get postcode(): string | undefined {
+    return this._postcode;
+  }
+
+  get country(): string | undefined {
+    return this._country;
+  }
+
+  get country_code(): string | undefined {
+    return this._country_code;
+  }
+
+  get fiscal_data(): string | undefined {
+    return this._fiscal_data;
+  }
+
   rehydrate(data: JsonApiHydratedDataInterface): this {
     super.rehydrate(data);
 
@@ -73,6 +124,17 @@ export class Company extends AbstractApiData implements CompanyInterface {
     this._availableMonthlyTokens = data.jsonApi.attributes.availableMonthlyTokens ?? 0;
     this._availableExtraTokens = data.jsonApi.attributes.availableExtraTokens ?? 0;
 
+    this._legal_address = data.jsonApi.attributes.legal_address;
+    this._street_number = data.jsonApi.attributes.street_number;
+    this._street = data.jsonApi.attributes.street;
+    this._city = data.jsonApi.attributes.city;
+    this._province = data.jsonApi.attributes.province;
+    this._region = data.jsonApi.attributes.region;
+    this._postcode = data.jsonApi.attributes.postcode;
+    this._country = data.jsonApi.attributes.country;
+    this._country_code = data.jsonApi.attributes.country_code;
+    this._fiscal_data = data.jsonApi.attributes.fiscal_data;
+
     this._features = this._readIncluded<FeatureInterface>(data, "features", Modules.Feature) as FeatureInterface[];
     this._modules = this._readIncluded<ModuleInterface>(data, "modules", Modules.Module) as ModuleInterface[];
 
@@ -100,6 +162,17 @@ export class Company extends AbstractApiData implements CompanyInterface {
     if (data.availableExtraTokens !== undefined)
       response.data.attributes.availableExtraTokens = data.availableExtraTokens;
 
+    if (data.legal_address !== undefined) response.data.attributes.legal_address = data.legal_address;
+    if (data.street_number !== undefined) response.data.attributes.street_number = data.street_number;
+    if (data.street !== undefined) response.data.attributes.street = data.street;
+    if (data.city !== undefined) response.data.attributes.city = data.city;
+    if (data.province !== undefined) response.data.attributes.province = data.province;
+    if (data.region !== undefined) response.data.attributes.region = data.region;
+    if (data.postcode !== undefined) response.data.attributes.postcode = data.postcode;
+    if (data.country !== undefined) response.data.attributes.country = data.country;
+    if (data.country_code !== undefined) response.data.attributes.country_code = data.country_code;
+    if (data.fiscal_data !== undefined) response.data.attributes.fiscal_data = data.fiscal_data;
+
     if (data.featureIds && data.featureIds.length > 0) {
       response.data.relationships.features = {
         data: data.featureIds.map((featureId) => ({

package/src/features/role/components/forms/FormRoles.tsx

@@ -22,7 +22,7 @@ export function FormRoles({ form, id, name, roles }: FormRolesProps) {
     <div className="flex w-full flex-col">
       <FormFieldWrapper form={form} name={id} label={name}>
         {(field) => (
-          <div>
+          <div className="flex w-full flex-col gap-y-1">
             {roles
               .filter((role: RoleInterface) => role.isSelectable)
               .sort((a: RoleInterface, b: RoleInterface) => a.name.localeCompare(b.name))
@@ -30,9 +30,10 @@ export function FormRoles({ form, id, name, roles }: FormRolesProps) {
                 if (role.requiredFeature && !hasAccesToFeature(role.requiredFeature.id)) return null;
 
                 return (
-                  <div key={role.id}>
+                  <div key={role.id} className="flex w-full items-center">
                     <Checkbox
-                      defaultChecked={(field.value as string[]).some((roleId: string) => roleId === role.id)}
+                      id={`role-${role.id}`}
+                      checked={(field.value as string[]).some((roleId: string) => roleId === role.id)}
                       onCheckedChange={(checked) => {
                         if (checked) {
                           form.setValue(id, [...(field.value as string[]), role.id]);
@@ -46,7 +47,7 @@ export function FormRoles({ form, id, name, roles }: FormRolesProps) {
                     />
                     <Tooltip>
                       <TooltipTrigger>
-                        <FieldLabel className="ml-3 font-normal">
+                        <FieldLabel htmlFor={`role-${role.id}`} className="ml-3 cursor-pointer font-normal">
                           {t(`role.roles`, { role: role.id.replaceAll(`-`, ``) })}
                         </FieldLabel>
                       </TooltipTrigger>

package/src/features/user/components/containers/AllUsersListContainer.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { CompanyUsersList, Tab, TabsContainer } from "../../../../components";
+import { Modules } from "../../../../core";
+import { Action } from "../../../../permissions";
+import { useCurrentUserContext } from "../../contexts";
+import { UserInterface } from "../../data";
+
+function AllUsersListContainerInternal() {
+  const { hasPermissionToModule } = useCurrentUserContext<UserInterface>();
+  const t = useTranslations();
+
+  if (!hasPermissionToModule({ module: Modules.User, action: Action.Delete })) return <CompanyUsersList />;
+
+  const tabs: Tab[] = [
+    {
+      label: t(`entities.users`, { count: 2 }),
+      content: <CompanyUsersList />,
+      modules: [Modules.Company],
+      action: Action.Read,
+    },
+    {
+      label: t(`user.deleted`),
+      content: <CompanyUsersList isDeleted={true} />,
+      modules: [Modules.Company],
+      action: Action.Update,
+    },
+  ];
+
+  return <TabsContainer tabs={tabs} />;
+}
+
+export function AllUsersListContainer() {
+  return <AllUsersListContainerInternal />;
+}

package/src/features/user/components/containers/UserContainer.tsx

@@ -1,23 +1,20 @@
 "use client";
 
-import { useTranslations } from "next-intl";
+import { RoundPageContainer, Tab } from "@/components";
+import { Modules } from "@/core";
 import { useUserContext } from "../../contexts";
-import { UserDetails } from "../details";
+import { UserContent } from "../details";
 
 export function UserContainer() {
   const { user } = useUserContext();
   if (!user) return null;
 
-  const _t = useTranslations();
+  const tabs: Tab[] = [
+    {
+      label: "Details",
+      content: <UserContent user={user} />,
+    },
+  ];
 
-  return (
-    <div className="flex w-full gap-x-4">
-      <div className="w-2xl flex h-[calc(100vh-theme(spacing.20))] flex-col justify-between border-r pr-4">
-        <div className="flex h-full overflow-y-auto">
-          <UserDetails user={user} />
-        </div>
-      </div>
-      <div className="flex w-full flex-col gap-y-4"></div>
-    </div>
-  );
+  return <RoundPageContainer module={Modules.User} tabs={tabs} />;
 }

package/src/features/user/components/containers/UsersListContainer.tsx

@@ -1,36 +1,27 @@
 "use client";
 
-import { useTranslations } from "next-intl";
-import { CompanyUsersList, Tab, TabsContainer } from "../../../../components";
+import { CompanyUsersList, RoundPageContainer } from "../../../../components";
 import { Modules } from "../../../../core";
 import { Action } from "../../../../permissions";
 import { useCurrentUserContext } from "../../contexts";
 import { UserInterface } from "../../data";
 
-function UsersListContainerInternal() {
-  const { hasPermissionToModule } = useCurrentUserContext<UserInterface>();
-  const t = useTranslations();
+type UsersListContainerProps = {
+  fullWidth?: boolean;
+};
 
-  if (!hasPermissionToModule({ module: Modules.User, action: Action.Delete })) return <CompanyUsersList />;
+function UsersListContainerInternal({ fullWidth }: UsersListContainerProps) {
+  return (
+    <RoundPageContainer module={Modules.User} fullWidth={fullWidth}>
+      <CompanyUsersList fullWidth={fullWidth} />
+    </RoundPageContainer>
+  );
+}
 
-  const tabs: Tab[] = [
-    {
-      label: t(`entities.users`, { count: 2 }),
-      content: <CompanyUsersList />,
-      modules: [Modules.Company],
-      action: Action.Read,
-    },
-    {
-      label: t(`user.deleted`),
-      content: <CompanyUsersList isDeleted={true} />,
-      modules: [Modules.Company],
-      action: Action.Update,
-    },
-  ];
+export function UsersListContainer({ fullWidth }: UsersListContainerProps) {
+  const { hasPermissionToModule } = useCurrentUserContext<UserInterface>();
 
-  return <TabsContainer tabs={tabs} />;
-}
+  if (!hasPermissionToModule({ module: Modules.User, action: Action.Read })) return null;
 
-export function UsersListContainer() {
-  return <UsersListContainerInternal />;
+  return <UsersListContainerInternal fullWidth={fullWidth} />;
 }

package/src/features/user/components/containers/index.ts

@@ -1,3 +1,4 @@
+export * from "./AllUsersListContainer";
 export * from "./UserContainer";
 export * from "./UserIndexContainer";
 export * from "./UsersListContainer";

package/src/features/user/components/details/UserContent.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { AttributeElement } from "../../../../components/contents";
+import { EditableAvatar } from "../../../../components/EditableAvatar";
+import { getInitials } from "../../../../utils/getInitials";
+import { Modules } from "../../../../core";
+import { usePageUrlGenerator } from "../../../../hooks";
+import { Badge, Link } from "../../../../shadcnui";
+import { RoleInterface } from "../../../role";
+import { UserInterface } from "../../data";
+import { UserService } from "../../data/user.service";
+import { useUserContext } from "../../contexts";
+import { BriefcaseIcon, MailIcon, PhoneIcon } from "lucide-react";
+
+type UserContentProps = {
+  user: UserInterface;
+};
+
+export function UserContent({ user }: UserContentProps) {
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+  const { setUser } = useUserContext();
+
+  const hasBio = !!user.bio;
+
+  return (
+    <div className="flex flex-col gap-y-8">
+      {/* Hero Section */}
+      <div className="flex items-start gap-x-6">
+        <EditableAvatar
+          entityId={user.id}
+          module={Modules.User}
+          image={user.avatar}
+          fallback={getInitials(user.name)}
+          alt={user.name}
+          patchImage={async (imageKey) => {
+            const updated = await UserService.patch({ id: user.id, avatar: imageKey });
+            setUser(updated);
+          }}
+          className="h-24 w-24"
+          fallbackClassName="text-2xl"
+        />
+        <div className="flex flex-col gap-y-2">
+          {user.roles && user.roles.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {user.roles.map((role: RoleInterface) => (
+                <Link key={role.id} href={generateUrl({ page: Modules.Role, id: role.id })}>
+                  <Badge variant="default">{t(`role.roles`, { role: role.id.replaceAll(`-`, ``) })}</Badge>
+                </Link>
+              ))}
+            </div>
+          )}
+          {user.isDeleted ? (
+            <div>
+              <Badge variant="destructive">{t(`user.errors.deleted`)}</Badge>
+            </div>
+          ) : (
+            <>
+              {!user.isActivated && (
+                <div>
+                  <Badge variant="destructive">{t(`user.errors.inactive`)}</Badge>
+                </div>
+              )}
+            </>
+          )}
+          {user.title && (
+            <div className="text-muted-foreground flex items-center gap-x-2 text-sm">
+              <BriefcaseIcon className="h-4 w-4 shrink-0" />
+              {user.title}
+            </div>
+          )}
+          {user.email && (
+            <div className="text-muted-foreground flex items-center gap-x-2 text-sm">
+              <MailIcon className="h-4 w-4 shrink-0" />
+              {user.email}
+            </div>
+          )}
+          {user.phone && (
+            <div className="text-muted-foreground flex items-center gap-x-2 text-sm">
+              <PhoneIcon className="h-4 w-4 shrink-0" />
+              {user.phone}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Bio Section */}
+      {hasBio && <AttributeElement title={t(`user.fields.bio.label`)} value={user.bio} />}
+    </div>
+  );
+}

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

@@ -1,3 +1,3 @@
-export * from "./UserDetails";
+export * from "./UserContent";
 export * from "./UserIndexDetails";
 export * from "./UserStandaloneDetails";