@carlonicora/nextjs-jsonapi 1.0.4 → 1.0.6

package/src/features/company/components/lists/CompaniesList.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ReactNode } from "react";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { CompanyFields, CompanyInterface, CompanyService } from "../../data";
+import { CompanyEditor } from "../forms/CompanyEditor";
+
+export function CompaniesList() {
+  const t = useTranslations();
+
+  const data: DataListRetriever<CompanyInterface> = useDataListRetriever({
+    retriever: (params) => CompanyService.findMany(params),
+    retrieverParams: {},
+    module: Modules.Company,
+  });
+
+  const functions: ReactNode[] = [<CompanyEditor key="create-account" />];
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[CompanyFields.name, CompanyFields.createdAt]}
+      tableGeneratorType={Modules.Company}
+      functions={functions}
+      title={t(`types.companies`, { count: 2 })}
+    />
+  );
+}

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

@@ -0,0 +1 @@
+export * from "./CompaniesList";

package/src/features/company/contexts/CompanyContext.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { createContext, ReactNode, useContext, useState } from "react";
+import { SharedProvider } from "../../../contexts";
+import { JsonApiHydratedDataInterface, Modules, rehydrate } from "../../../core";
+import { usePageUrlGenerator } from "../../../hooks";
+import { BreadcrumbItemData } from "../../../interfaces";
+import { Action } from "../../../permissions";
+import { getRoleId } from "../../../roles";
+import { UserInterface } from "../../user";
+import { useCurrentUserContext } from "../../user/contexts";
+import { CompanyConfigurationEditor, CompanyDeleter, CompanyEditor } from "../components";
+import { CompanyInterface } from "../data";
+
+interface CompanyContextType {
+  company: CompanyInterface | undefined;
+  setCompany: (value: CompanyInterface | undefined) => void;
+}
+
+const CompanyContext = createContext<CompanyContextType | undefined>(undefined);
+
+type CompanyProviderProps = {
+  children: ReactNode;
+  dehydratedCompany?: JsonApiHydratedDataInterface;
+};
+
+const defaultContextValue: CompanyContextType = {
+  company: undefined,
+  setCompany: () => {},
+};
+
+export const CompanyProvider = ({ children, dehydratedCompany }: CompanyProviderProps) => {
+  const generateUrl = usePageUrlGenerator();
+  const t = useTranslations();
+  const { hasPermissionToModule, hasRole } = useCurrentUserContext<UserInterface>();
+
+  const [company, setCompany] = useState<CompanyInterface | undefined>(
+    dehydratedCompany ? rehydrate<CompanyInterface>(Modules.Company, dehydratedCompany) : undefined,
+  );
+
+  const breadcrumb = () => {
+    const response: BreadcrumbItemData[] = [];
+
+    if (company)
+      response.push({
+        name: company.name,
+        href: generateUrl({ page: Modules.Company }),
+      });
+
+    return response;
+  };
+
+  const title = () => {
+    const response: any = {
+      type: t(`types.companies`, { count: company ? 1 : 2 }),
+    };
+
+    if (company) response.element = company.name;
+
+    const functions: ReactNode[] = [];
+
+    if (
+      company &&
+      hasRole(getRoleId().Administrator) &&
+      hasPermissionToModule({ module: Modules.Company, action: Action.Delete })
+    )
+      functions.push(<CompanyDeleter key="companyDeleter" company={company} />);
+
+    if (
+      hasRole(getRoleId().Administrator) ||
+      hasPermissionToModule({ module: Modules.Company, action: Action.Update })
+    ) {
+      if (company) functions.push(<CompanyConfigurationEditor key="companyConfigurationEditor" company={company} />);
+      functions.push(<CompanyEditor key="companyEditor" company={company} propagateChanges={setCompany} />);
+    }
+
+    if (functions.length > 0) response.functions = functions;
+
+    return response;
+  };
+
+  return (
+    <SharedProvider value={{ breadcrumbs: breadcrumb(), title: title() }}>
+      <CompanyContext.Provider
+        value={{
+          company: company,
+          setCompany: setCompany,
+        }}
+      >
+        {children}
+      </CompanyContext.Provider>
+    </SharedProvider>
+  );
+};
+
+export const useCompanyContext = (): CompanyContextType => {
+  return useContext(CompanyContext) ?? defaultContextValue;
+};

package/src/features/company/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useCompanyTableStructure";

package/src/features/company/hooks/useCompanyTableStructure.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { ColumnDef, Row } from "@tanstack/react-table";
+import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { cellDate, cellId } from "../../../components";
+import { Modules } from "../../../core";
+import { TableContent, usePageUrlGenerator, UseTableStructureHook } from "../../../hooks";
+import { getRoleId } from "../../../roles";
+import { Link } from "../../../shadcnui";
+import { UserInterface } from "../../user";
+import { useCurrentUserContext } from "../../user/contexts";
+import { CompanyFields, CompanyInterface } from "../data";
+
+export const useCompanyTableStructure: UseTableStructureHook<CompanyInterface, CompanyFields> = (params) => {
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+  const { hasRole } = useCurrentUserContext<UserInterface>();
+
+  // Memoize tableData to prevent infinite re-renders
+  const tableData = useMemo(() => {
+    return params.data.map((company: CompanyInterface) => {
+      const entry: TableContent<CompanyInterface> = {
+        jsonApiData: company,
+      };
+      entry[CompanyFields.companyId] = company.id;
+      params.fields.forEach((field) => {
+        entry[field] = company[field as keyof CompanyInterface];
+      });
+      return entry;
+    });
+  }, [params.data, params.fields]);
+
+  const fieldColumnMap: Partial<Record<CompanyFields, () => any>> = {
+    [CompanyFields.companyId]: () =>
+      cellId({
+        name: "companyId",
+        checkedIds: params.checkedIds,
+        toggleId: params.toggleId,
+      }),
+    [CompanyFields.name]: () => ({
+      id: "name",
+      accessorKey: "name",
+      header: t(`foundations.user.fields.name.label`),
+      cell: ({ row }: { row: Row<TableContent<CompanyInterface>> }) => {
+        const company = row.original.jsonApiData as CompanyInterface;
+        return (
+          <Link
+            href={
+              hasRole(getRoleId().Administrator)
+                ? generateUrl({
+                    page: "/administration",
+                    id: Modules.Company.pageUrl?.substring(1),
+                    childPage: company.id,
+                  })
+                : generateUrl({ page: Modules.Company, id: company.id })
+            }
+          >
+            {row.getValue("name")}
+          </Link>
+        );
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [CompanyFields.createdAt]: () =>
+      cellDate({
+        name: "createdAt",
+        title: t(`generic.date.create`),
+      }),
+  };
+
+  // Memoize columns to prevent infinite re-renders
+  const columns = useMemo(() => {
+    return params.fields.map((field) => fieldColumnMap[field]?.()).filter((col) => col !== undefined) as ColumnDef<
+      TableContent<CompanyInterface>
+    >[];
+  }, [params.fields, fieldColumnMap, t, generateUrl, hasRole]);
+
+  // Memoize the return object to prevent infinite re-renders
+  return useMemo(() => ({ data: tableData, columns: columns }), [tableData, columns]);
+};

package/src/features/feature/components/forms/FormFeatures.tsx

@@ -1,149 +1,150 @@
-// "use client";
+"use client";
 
-// import { FeatureInterface, ModuleInterface } from "@carlonicora/nextjs-jsonapi/features";
-// import {
-//   Accordion,
-//   AccordionContent,
-//   AccordionItem,
-//   AccordionTrigger,
-//   Checkbox,
-//   FormLabel,
-//   FormMessage,
-// } from "@carlonicora/nextjs-jsonapi/shadcnui";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Checkbox,
+  FormLabel,
+  FormMessage,
+} from "../../../../shadcnui";
+import { ModuleInterface } from "../../../module";
+import { FeatureInterface } from "../../data";
 
-// type FormFeaturesProps = {
-//   form: any;
-//   name?: string;
-//   features: FeatureInterface[];
-//   featureField?: string;
-//   moduleField?: string;
-// };
+type FormFeaturesProps = {
+  form: any;
+  name?: string;
+  features: FeatureInterface[];
+  featureField?: string;
+  moduleField?: string;
+};
 
-// export function FormFeatures({
-//   form,
-//   name,
-//   features,
-//   featureField = "featureIds",
-//   moduleField = "moduleIds",
-// }: FormFeaturesProps) {
-//   const selectedFeatures: string[] = form.watch(featureField);
-//   const selectedModules: string[] = form.watch(moduleField);
+export function FormFeatures({
+  form,
+  name,
+  features,
+  featureField = "featureIds",
+  moduleField = "moduleIds",
+}: FormFeaturesProps) {
+  const selectedFeatures: string[] = form.watch(featureField);
+  const selectedModules: string[] = form.watch(moduleField);
 
-//   const toggleFeature = (feature: FeatureInterface, checked: boolean) => {
-//     let newFeatureIds = [...selectedFeatures];
-//     let newModuleIds = [...selectedModules];
+  const toggleFeature = (feature: FeatureInterface, checked: boolean) => {
+    let newFeatureIds = [...selectedFeatures];
+    let newModuleIds = [...selectedModules];
 
-//     if (checked) {
-//       if (!newFeatureIds.includes(feature.id)) {
-//         newFeatureIds.push(feature.id);
-//       }
-//       feature.modules.forEach((module) => {
-//         if (!newModuleIds.includes(module.id)) {
-//           newModuleIds.push(module.id);
-//         }
-//       });
-//     } else {
-//       newFeatureIds = newFeatureIds.filter((id) => id !== feature.id);
-//       feature.modules.forEach((module) => {
-//         newModuleIds = newModuleIds.filter((id) => id !== module.id);
-//       });
-//     }
-//     form.setValue(featureField, newFeatureIds);
-//     form.setValue(moduleField, newModuleIds);
-//   };
+    if (checked) {
+      if (!newFeatureIds.includes(feature.id)) {
+        newFeatureIds.push(feature.id);
+      }
+      feature.modules.forEach((module) => {
+        if (!newModuleIds.includes(module.id)) {
+          newModuleIds.push(module.id);
+        }
+      });
+    } else {
+      newFeatureIds = newFeatureIds.filter((id) => id !== feature.id);
+      feature.modules.forEach((module) => {
+        newModuleIds = newModuleIds.filter((id) => id !== module.id);
+      });
+    }
+    form.setValue(featureField, newFeatureIds);
+    form.setValue(moduleField, newModuleIds);
+  };
 
-//   const toggleModule = (feature: FeatureInterface, module: ModuleInterface, checked: boolean) => {
-//     const modulesForFeature = feature.modules.map((m) => m.id);
-//     let newModuleIds = [...selectedModules];
+  const toggleModule = (feature: FeatureInterface, module: ModuleInterface, checked: boolean) => {
+    const modulesForFeature = feature.modules.map((m) => m.id);
+    let newModuleIds = [...selectedModules];
 
-//     if (checked) {
-//       if (!selectedFeatures.includes(feature.id)) {
-//         newModuleIds = newModuleIds.filter((id) => !modulesForFeature.includes(id));
-//         newModuleIds.push(module.id);
-//         form.setValue(featureField, [...selectedFeatures, feature.id]);
-//       } else {
-//         if (!newModuleIds.includes(module.id)) {
-//           newModuleIds.push(module.id);
-//         }
-//       }
-//     } else {
-//       newModuleIds = newModuleIds.filter((id) => id !== module.id);
-//       const remaining = feature.modules.filter((m) => newModuleIds.includes(m.id));
-//       if (remaining.length === 0) {
-//         form.setValue(
-//           featureField,
-//           selectedFeatures.filter((id) => id !== feature.id),
-//         );
-//       }
-//     }
-//     form.setValue(moduleField, newModuleIds);
-//   };
+    if (checked) {
+      if (!selectedFeatures.includes(feature.id)) {
+        newModuleIds = newModuleIds.filter((id) => !modulesForFeature.includes(id));
+        newModuleIds.push(module.id);
+        form.setValue(featureField, [...selectedFeatures, feature.id]);
+      } else {
+        if (!newModuleIds.includes(module.id)) {
+          newModuleIds.push(module.id);
+        }
+      }
+    } else {
+      newModuleIds = newModuleIds.filter((id) => id !== module.id);
+      const remaining = feature.modules.filter((m) => newModuleIds.includes(m.id));
+      if (remaining.length === 0) {
+        form.setValue(
+          featureField,
+          selectedFeatures.filter((id) => id !== feature.id),
+        );
+      }
+    }
+    form.setValue(moduleField, newModuleIds);
+  };
 
-//   const isFeatureChecked = (feature: FeatureInterface) =>
-//     selectedFeatures.includes(feature.id) || feature.modules.every((module) => selectedModules.includes(module.id));
+  const isFeatureChecked = (feature: FeatureInterface) =>
+    selectedFeatures.includes(feature.id) || feature.modules.every((module) => selectedModules.includes(module.id));
 
-//   return (
-//     <div className="flex w-full flex-col">
-//       {name && <h2 className="mb-5 font-semibold">{name}</h2>}
-//       {features.map((feature) => (
-//         <Accordion
-//           key={feature.id}
-//           type="single"
-//           collapsible
-//           // className={`w-full p-0 ${feature.modules.filter((module) => !module.isCore).length === 0 ? "border-t" : ""}`}
-//           className={`w-full p-0`}
-//         >
-//           <AccordionItem value={feature.id} className="p-0">
-//             <div
-//               className={`flex items-center justify-between p-0 ${feature.modules.filter((module) => !module.isCore).length === 0 ? "py-4" : ""}`}
-//             >
-//               <div className="flex items-center" onClick={(e) => e.stopPropagation()}>
-//                 <Checkbox
-//                   id={feature.id}
-//                   checked={isFeatureChecked(feature)}
-//                   onCheckedChange={(val) => {
-//                     toggleFeature(feature, val === true);
-//                   }}
-//                 />
-//                 <FormLabel htmlFor={feature.id} className="ml-3 cursor-pointer font-normal">
-//                   {feature.name}
-//                 </FormLabel>
-//               </div>
-//               {feature.modules.filter((module) => !module.isCore).length > 0 && (
-//                 <AccordionTrigger asChild>
-//                   <div className="w-full"></div>
-//                 </AccordionTrigger>
-//               )}
-//             </div>
-//             {feature.modules.filter((module) => !module.isCore).length > 0 && (
-//               <AccordionContent className="pl-6">
-//                 {feature.modules
-//                   .filter((module) => !module.isCore)
-//                   .sort((a: ModuleInterface, b: ModuleInterface) => a.name.localeCompare(b.name))
-//                   .map((module: ModuleInterface) => (
-//                     <div
-//                       key={module.id}
-//                       className="flex items-center border-t py-2"
-//                       onClick={(e) => e.stopPropagation()}
-//                     >
-//                       <Checkbox
-//                         id={module.id}
-//                         checked={selectedModules.includes(module.id)}
-//                         onCheckedChange={(val) => {
-//                           toggleModule(feature, module, val === true);
-//                         }}
-//                       />
-//                       <FormLabel htmlFor={module.id} className="ml-3 cursor-pointer font-normal">
-//                         {module.name}
-//                       </FormLabel>
-//                     </div>
-//                   ))}
-//               </AccordionContent>
-//             )}
-//           </AccordionItem>
-//         </Accordion>
-//       ))}
-//       <FormMessage />
-//     </div>
-//   );
-// }
+  return (
+    <div className="flex w-full flex-col">
+      {name && <h2 className="mb-5 font-semibold">{name}</h2>}
+      {features.map((feature) => (
+        <Accordion
+          key={feature.id}
+          type="single"
+          collapsible
+          // className={`w-full p-0 ${feature.modules.filter((module) => !module.isCore).length === 0 ? "border-t" : ""}`}
+          className={`w-full p-0`}
+        >
+          <AccordionItem value={feature.id} className="p-0">
+            <div
+              className={`flex items-center justify-between p-0 ${feature.modules.filter((module) => !module.isCore).length === 0 ? "py-4" : ""}`}
+            >
+              <div className="flex items-center" onClick={(e) => e.stopPropagation()}>
+                <Checkbox
+                  id={feature.id}
+                  checked={isFeatureChecked(feature)}
+                  onCheckedChange={(val) => {
+                    toggleFeature(feature, val === true);
+                  }}
+                />
+                <FormLabel htmlFor={feature.id} className="ml-3 cursor-pointer font-normal">
+                  {feature.name}
+                </FormLabel>
+              </div>
+              {feature.modules.filter((module) => !module.isCore).length > 0 && (
+                <AccordionTrigger asChild>
+                  <div className="w-full"></div>
+                </AccordionTrigger>
+              )}
+            </div>
+            {feature.modules.filter((module) => !module.isCore).length > 0 && (
+              <AccordionContent className="pl-6">
+                {feature.modules
+                  .filter((module) => !module.isCore)
+                  .sort((a: ModuleInterface, b: ModuleInterface) => a.name.localeCompare(b.name))
+                  .map((module: ModuleInterface) => (
+                    <div
+                      key={module.id}
+                      className="flex items-center border-t py-2"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Checkbox
+                        id={module.id}
+                        checked={selectedModules.includes(module.id)}
+                        onCheckedChange={(val) => {
+                          toggleModule(feature, module, val === true);
+                        }}
+                      />
+                      <FormLabel htmlFor={module.id} className="ml-3 cursor-pointer font-normal">
+                        {module.name}
+                      </FormLabel>
+                    </div>
+                  ))}
+              </AccordionContent>
+            )}
+          </AccordionItem>
+        </Accordion>
+      ))}
+      <FormMessage />
+    </div>
+  );
+}

package/src/features/feature/components/forms/index.ts

@@ -0,0 +1 @@
+export * from "./FormFeatures";

package/src/features/feature/components/index.ts

@@ -1 +1 @@
-// export * from "./forms/FormFeatures";
+export * from "./forms";

package/src/features/feature/index.ts

@@ -1,3 +1,2 @@
-// export * from "./components";
-export * from "./data";
 export * from "./feature.module";
+export * from "./data";

package/src/features/module/index.ts

@@ -1,2 +1,2 @@
-export * from "./data";
 export * from "./module.module";
+export * from "./data";

package/src/features/notification/components/common/NotificationErrorBoundary.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import React, { Component, ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class NotificationErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    // Update state so the next render will show the fallback UI
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("🚨 [NotificationErrorBoundary] Caught error:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        this.props.fallback || (
+          <div className="flex items-center justify-center p-4 text-center">
+            <div className="text-muted-foreground text-sm">
+              <p>Something went wrong with notifications.</p>
+              <button
+                onClick={() => this.setState({ hasError: false })}
+                className="text-primary mt-2 underline hover:no-underline"
+              >
+                Try again
+              </button>
+            </div>
+          </div>
+        )
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/features/notification/components/common/index.ts

@@ -0,0 +1 @@
+export * from "./NotificationErrorBoundary";

package/src/features/notification/components/containers/NotificationsListContainer.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Tab, TabsContainer } from "../../../../components";
+import { useNotificationContext } from "../../contexts/NotificationContext";
+import { NotificationErrorBoundary } from "../common";
+import { NotificationsList } from "../lists/NotificationsList";
+
+function NotificationsListContainerContent() {
+  const t = useTranslations();
+  const { notifications, isLoading, error } = useNotificationContext();
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center p-8 text-center">
+        <div className="text-destructive text-sm">
+          <p>Error loading notifications: {error}</p>
+          <p className="text-muted-foreground mt-2">Please try refreshing the page.</p>
+        </div>
+      </div>
+    );
+  }
+
+  const tabs: Tab[] = [
+    {
+      label: t(`foundations.notification.inbox`),
+      content: <NotificationsList archived={false} />,
+    },
+    {
+      label: t(`foundations.notification.archived`),
+      content: <NotificationsList archived={true} />,
+    },
+  ];
+
+  return <TabsContainer tabs={tabs} />;
+}
+
+export function NotificationsListContainer() {
+  return (
+    <NotificationErrorBoundary>
+      <NotificationsListContainerContent />
+    </NotificationErrorBoundary>
+  );
+}

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

@@ -0,0 +1 @@
+export * from "./NotificationsListContainer";

package/src/features/notification/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./common";
+export * from "./containers";
+export * from "./lists";
+export * from "./modals";
+export * from "./notifications";