@carlonicora/nextjs-jsonapi 1.65.1 → 1.67.0

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/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

@@ -1,4 +1,5 @@
 export { EntityAvatar } from "./EntityAvatar";
+export { EditableAvatar } from "./EditableAvatar";
 export { TableCellAvatar } from "./TableCellAvatar";
 export { getInitials } from "../utils/getInitials";
 export * from "./containers";
@@ -10,6 +11,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/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";