@carlonicora/nextjs-jsonapi 1.66.0 → 1.68.0

package/dist/server/index.js

@@ -15,7 +15,7 @@ var _chunk3ZPK4QOBjs = require('../chunk-3ZPK4QOB.js');
 
 
 
-var _chunkNVXYOQFWjs = require('../chunk-NVXYOQFW.js');
+var _chunk37KYO2UDjs = require('../chunk-37KYO2UD.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 _chunkNVXYOQFWjs.checkPermissionsFromServer.call(void 0, {
+    return _chunk37KYO2UDjs.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 = _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;
+exports.ServerAuthService = _chunk37KYO2UDjs.AuthService; exports.ServerCompanyService = _chunk37KYO2UDjs.CompanyService; exports.ServerContentService = _chunk37KYO2UDjs.ContentService; exports.ServerFeatureService = _chunk37KYO2UDjs.FeatureService; exports.ServerJsonApiDelete = ServerJsonApiDelete; exports.ServerJsonApiGet = ServerJsonApiGet; exports.ServerJsonApiPatch = ServerJsonApiPatch; exports.ServerJsonApiPost = ServerJsonApiPost; exports.ServerJsonApiPut = ServerJsonApiPut; exports.ServerNotificationService = _chunk37KYO2UDjs.NotificationService; exports.ServerPushService = _chunk37KYO2UDjs.PushService; exports.ServerRoleService = _chunk37KYO2UDjs.RoleService; exports.ServerS3Service = _chunk37KYO2UDjs.S3Service; exports.ServerSession = ServerSession; exports.ServerUserService = _chunk37KYO2UDjs.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-35GWVOYZ.mjs";
+} from "../chunk-IOMDNRX5.mjs";
 import "../chunk-AUXK7QSA.mjs";
 import "../chunk-C7C7VY4F.mjs";
 import {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "1.66.0",
+  "version": "1.68.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/src/components/EditableAvatar.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { Avatar, AvatarFallback, AvatarImage } from "../shadcnui";
+import { useCurrentUserContext } from "../contexts";
+import { S3Interface } from "../features/s3/data/s3.interface";
+import { S3Service } from "../features/s3/data/s3.service";
+import { ModuleWithPermissions } from "../permissions";
+import { errorToast } from "./errors/errorToast";
+import { PencilIcon, Trash2Icon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useCallback, useRef, useState } from "react";
+import { cn } from "../utils/cn";
+
+type EditableAvatarProps = {
+  entityId: string;
+  module: ModuleWithPermissions;
+  image?: string;
+  fallback: string;
+  alt: string;
+  patchImage: (imageKey: string) => Promise<void>;
+  className?: string;
+  fallbackClassName?: string;
+};
+
+export function EditableAvatar({
+  entityId,
+  module,
+  image,
+  fallback,
+  alt,
+  patchImage,
+  className,
+  fallbackClassName,
+}: EditableAvatarProps) {
+  const { company } = useCurrentUserContext();
+  const t = useTranslations();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Optimistic state: null means "use the prop", string means "override"
+  const [optimisticImage, setOptimisticImage] = useState<string | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+
+  const displayImage = optimisticImage ?? image;
+
+  const generateS3Key = useCallback(
+    (file: File) => {
+      const ext = file.type.split("/").pop() ?? "";
+      const ts = new Date().toISOString().replace(/[-:T]/g, "").split(".")[0];
+      return `companies/${company!.id}/${module.name}/${entityId}/${entityId}.${ts}.${ext}`;
+    },
+    [company, module.name, entityId],
+  );
+
+  const handleFile = useCallback(
+    async (file: File) => {
+      if (isUploading) return;
+      if (!company) return;
+
+      const previousImage = image;
+      const previewUrl = URL.createObjectURL(file);
+      setOptimisticImage(previewUrl);
+      setIsUploading(true);
+
+      try {
+        const s3Key = generateS3Key(file);
+
+        const s3: S3Interface = await S3Service.getPreSignedUrl({
+          key: s3Key,
+          contentType: file.type,
+          isPublic: true,
+        });
+
+        const uploadResponse = await fetch(s3.url, {
+          method: "PUT",
+          headers: s3.headers,
+          body: file,
+        });
+
+        if (!uploadResponse.ok) {
+          throw new Error(`S3 upload failed: ${uploadResponse.status}`);
+        }
+
+        await patchImage(s3Key);
+        setOptimisticImage(null);
+      } catch (error) {
+        setOptimisticImage(previousImage ?? null);
+        errorToast({ title: t("generic.errors.update"), error });
+      } finally {
+        URL.revokeObjectURL(previewUrl);
+        setIsUploading(false);
+      }
+    },
+    [company, generateS3Key, image, isUploading, patchImage, t],
+  );
+
+  const handleRemove = useCallback(async () => {
+    if (isUploading) return;
+
+    const previousImage = image;
+    setOptimisticImage("");
+    setIsUploading(true);
+
+    try {
+      await patchImage("");
+      setOptimisticImage(null);
+    } catch (error) {
+      setOptimisticImage(previousImage ?? null);
+      errorToast({ title: t("generic.errors.update"), error });
+    } finally {
+      setIsUploading(false);
+    }
+  }, [image, isUploading, patchImage, t]);
+
+  const handleFileInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) handleFile(file);
+      e.target.value = "";
+    },
+    [handleFile],
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      const file = e.dataTransfer.files?.[0];
+      if (file && file.type.startsWith("image/")) {
+        handleFile(file);
+      }
+    },
+    [handleFile],
+  );
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+  }, []);
+
+  return (
+    <div className={cn("group relative", className)} onDrop={handleDrop} onDragOver={handleDragOver}>
+      <Avatar className="h-full w-full">
+        {displayImage ? <AvatarImage src={displayImage} alt={alt} /> : null}
+        <AvatarFallback className={fallbackClassName}>{fallback}</AvatarFallback>
+      </Avatar>
+
+      {/* Hover overlay */}
+      <div
+        className={cn(
+          "absolute inset-0 flex items-center justify-center gap-x-2 rounded-full bg-black/50 opacity-0 transition-opacity group-hover:opacity-100",
+          isUploading && "opacity-100",
+        )}
+      >
+        <button
+          type="button"
+          onClick={() => fileInputRef.current?.click()}
+          disabled={isUploading}
+          className="rounded-full p-2 text-white hover:bg-white/20 disabled:opacity-50"
+        >
+          <PencilIcon className="h-4 w-4" />
+        </button>
+        {displayImage && (
+          <button
+            type="button"
+            onClick={handleRemove}
+            disabled={isUploading}
+            className="rounded-full p-2 text-white hover:bg-white/20 disabled:opacity-50"
+          >
+            <Trash2Icon className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+
+      <input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleFileInputChange} />
+    </div>
+  );
+}

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export { EntityAvatar } from "./EntityAvatar";
+export { EditableAvatar } from "./EditableAvatar";
 export { TableCellAvatar } from "./TableCellAvatar";
 export { getInitials } from "../utils/getInitials";
 export * from "./containers";

package/src/features/company/components/forms/CompanyEditor.tsx

@@ -195,9 +195,7 @@ function CompanyEditorInternal({
           fiscal_data: fiscalRef.current ? JSON.stringify(fiscalRef.current.getData()) : undefined,
         };
 
-        const updatedCompany = company
-          ? await CompanyService.update(payload)
-          : await CompanyService.create(payload);
+        const updatedCompany = company ? await CompanyService.update(payload) : await CompanyService.create(payload);
 
         // Refresh user context after company changes
         const fullUser = await UserService.findFullUser();

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.patchAvatar({ 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";