create-carlonicora-app 1.0.0

package/template/apps/web/src/app/[locale]/(main)/(foundations)/users/page.tsx

@@ -0,0 +1,17 @@
+import { PageContainer, UsersListContainer } from "@carlonicora/nextjs-jsonapi/components";
+import { UserProvider } from "@carlonicora/nextjs-jsonapi/contexts";
+import { Modules } from "@carlonicora/nextjs-jsonapi/core";
+import { Action } from "@carlonicora/nextjs-jsonapi/permissions";
+import { ServerSession } from "@carlonicora/nextjs-jsonapi/server";
+
+export default async function UsersListPage() {
+  ServerSession.checkPermission({ module: Modules.User, action: Action.Read });
+
+  return (
+    <UserProvider>
+      <PageContainer testId="page-users-container">
+        <UsersListContainer />
+      </PageContainer>
+    </UserProvider>
+  );
+}

package/template/apps/web/src/app/[locale]/(main)/error.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { ErrorDetails, Logout } from "@carlonicora/nextjs-jsonapi/components";
+import { Button } from "@carlonicora/nextjs-jsonapi/shadcnui";
+import { useMessages } from "next-intl";
+import { useEffect } from "react";
+
+interface ErrorProps {
+  error: Error & { status?: number; digest?: string };
+  reset: () => void;
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  const messages = useMessages() as any;
+
+  const [status, message] = error.message.split(`:`) as any[];
+
+  useEffect(() => {
+    console.error("Application error:", error);
+  }, [error]);
+
+  if ((error.status ?? +status) === 401) {
+    return <Logout />;
+  }
+
+  if ((error.status ?? +status) === 404) {
+    return <ErrorPage code={404} reset={reset} messages={messages} />;
+  }
+
+  if ((error.status ?? +status) === 500 || (error.status ?? +status) === 503) {
+    return <ErrorPage code={error.status ?? status} reset={reset} messages={messages} />;
+  }
+
+  return (
+    <div className="flex min-h-screen w-full flex-col items-center justify-center">
+      <ErrorDetails
+        code={error.status ?? +status}
+        title={`Something went wrong!`}
+        message={message ?? error.message ?? "An unexpected error occurred."}
+      />
+    </div>
+  );
+}
+
+function ErrorPage({ code, reset, messages }: { code: number; reset: () => void; messages: any }) {
+  const errorMessages = messages?.errors?.[code.toString()];
+
+  return (
+    <div className="flex min-h-screen w-full flex-col items-center justify-center">
+      <ErrorDetails
+        code={code}
+        title={errorMessages?.title || `Error ${code}`}
+        message={errorMessages?.message || "An error occurred."}
+      />
+      <div className="mt-4">
+        <Button onClick={reset} variant="default">
+          Try again
+        </Button>
+      </div>
+    </div>
+  );
+}

package/template/apps/web/src/app/[locale]/(main)/layout.tsx

@@ -0,0 +1,40 @@
+import { ServerSession } from "@carlonicora/nextjs-jsonapi/server";
+import "react-horizontal-scrolling-menu/dist/styles.css";
+
+import LayoutDetails from "@/features/common/components/details/LayoutDetails";
+import { AuthContainer, PushNotificationProvider, RefreshUser } from "@carlonicora/nextjs-jsonapi/components";
+import { NotificationContextProvider, SocketProvider } from "@carlonicora/nextjs-jsonapi/contexts";
+import { AuthComponent } from "@carlonicora/nextjs-jsonapi/features";
+import { SidebarProvider } from "@carlonicora/nextjs-jsonapi/shadcnui";
+import { cookies } from "next/headers";
+
+export default async function MainLayout(props: { children: React.ReactNode; params: Promise<{ locale: string }> }) {
+  const { children } = props;
+
+  const cookieStore = await cookies();
+  const token = cookieStore.get("token")?.value;
+  const defaultOpen = cookieStore.get("sidebar_state")?.value === "true";
+
+  if (!(await ServerSession.isLogged()))
+    return (
+      <div className="flex min-h-screen w-full flex-col items-center justify-center">
+        <AuthContainer componentType={AuthComponent.Landing} />
+      </div>
+    );
+
+  // if (await ServerSession.isLicenseActive())
+  return (
+    <SocketProvider token={token}>
+      <PushNotificationProvider>
+        <NotificationContextProvider>
+          <SidebarProvider defaultOpen={defaultOpen}>
+            <RefreshUser />
+            <LayoutDetails>{children}</LayoutDetails>
+          </SidebarProvider>
+        </NotificationContextProvider>
+      </PushNotificationProvider>
+    </SocketProvider>
+  );
+
+  // return <CompanyLicense />;
+}

package/template/apps/web/src/app/[locale]/(main)/page.tsx

@@ -0,0 +1,41 @@
+import IndexContainer from "@/features/common/components/containers/IndexContainer";
+import { generateSpecificMetadata } from "@/utils/metadata";
+import { AuthContainer, CompaniesList, PageContainer } from "@carlonicora/nextjs-jsonapi/components";
+import { CommonProvider, CompanyProvider } from "@carlonicora/nextjs-jsonapi/contexts";
+import { AuthComponent, ContentInterface, ContentService } from "@carlonicora/nextjs-jsonapi/features";
+import { ServerSession } from "@carlonicora/nextjs-jsonapi/server";
+import { RoleId } from "@{{name}}/shared";
+import { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations();
+
+  return await generateSpecificMetadata({ title: t(`generic.home`) });
+}
+
+export default async function IndexPage() {
+  if (!(await ServerSession.isLogged())) return <AuthContainer componentType={AuthComponent.Landing} />;
+
+  if (await ServerSession.hasRole(RoleId.Administrator)) {
+    return (
+      <CompanyProvider>
+        <CommonProvider>
+          <PageContainer>
+            <CompaniesList />
+          </PageContainer>
+        </CommonProvider>
+      </CompanyProvider>
+    );
+  }
+
+  const contentList: ContentInterface[] = await ContentService.findMany({});
+
+  return (
+    <CommonProvider>
+      <PageContainer testId="page-homepage-container">
+        <IndexContainer dehydratedContentList={contentList ? contentList.map((content) => content.dehydrate()) : []} />
+      </PageContainer>
+    </CommonProvider>
+  );
+}

package/template/apps/web/src/app/[locale]/layout.tsx

@@ -0,0 +1,54 @@
+import { BootstrapProvider } from "@/config/BootstrapProvider";
+import "@/config/env"; // Server-side bootstrap
+import { CurrentUserProvider } from "@carlonicora/nextjs-jsonapi/contexts";
+import { Provider } from "jotai";
+import "react-horizontal-scrolling-menu/dist/styles.css";
+
+import { routing } from "@/i18n/routing";
+// import { cn } from "@/lib/utils";
+import { TooltipProvider } from "@carlonicora/nextjs-jsonapi/shadcnui";
+import { cn } from "@carlonicora/nextjs-jsonapi/utils";
+import { hasLocale, NextIntlClientProvider } from "next-intl";
+import { getMessages, setRequestLocale } from "next-intl/server";
+import { ThemeProvider } from "next-themes";
+import { Inter } from "next/font/google";
+import { notFound } from "next/navigation";
+import { Toaster } from "sonner";
+import "../globals.css";
+
+const fontSans = Inter({ subsets: ["latin"], weight: ["100", "300", "400", "700"], variable: "--font-sans" });
+
+export default async function RootLayout(props: { children: React.ReactNode; params: Promise<{ locale: string }> }) {
+  const params = await props.params;
+
+  const { locale } = params;
+  const { children } = props;
+
+  if (!hasLocale(routing.locales, locale)) {
+    notFound();
+  }
+
+  setRequestLocale(locale);
+  const messages = await getMessages();
+
+  return (
+    <html suppressHydrationWarning lang={locale}>
+      <body className={cn("bg-background top-0! min-h-screen font-sans antialiased", fontSans.variable)}>
+        <Provider>
+          <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
+            <NextIntlClientProvider messages={messages}>
+              <BootstrapProvider>
+                <CurrentUserProvider>
+                  <TooltipProvider>
+                    <Toaster closeButton richColors />
+                    {children}
+                  </TooltipProvider>
+                </CurrentUserProvider>
+              </BootstrapProvider>
+            </NextIntlClientProvider>
+          </ThemeProvider>
+        </Provider>
+      </body>
+    </html>
+  );
+}

package/template/apps/web/src/app/globals.css

@@ -0,0 +1,256 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* Include package source files for Tailwind to scan */
+/* Development: workspace package */
+@source "../../../../packages/nextjs-jsonapi/src/**/*.{ts,tsx}";
+/* Production: npm package in node_modules (2 levels from apps/web/src/app/) */
+@source "../../node_modules/@carlonicora/nextjs-jsonapi/src/**/*.{ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --radius: var(--radius);
+  --shadow-opacity: var(--shadow-opacity);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.59 0.0775 253.92);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --warning: oklch(0.84 0.16 84);
+  --warning-foreground: oklch(0.28 0.07 46);
+  --radius: 0.6rem;
+  --shadow-opacity: 0;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.269 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.59 0.0775 253.92);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
+  --warning: oklch(0.41 0.11 46);
+  --warning-foreground: oklch(0.99 0.02 95);
+  --radius: 0.6rem;
+  --shadow-opacity: 0;
+}
+
+:root {
+  font-size: 14px;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+    overscroll-behavior-y: none;
+  }
+  body {
+    @apply bg-background text-foreground;
+    overscroll-behavior-y: none;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+.BlockNoteView .bn-editor[contenteditable="false"] {
+  padding-inline: 0px !important;
+  background-color: transparent !important;
+}
+
+.BlockNoteView .bn-editor[contenteditable="true"] {
+  @apply text-sm;
+  padding-inline: 24px !important;
+  background-color: transparent !important;
+  height: 100%;
+}
+
+.bn-block-content h1 {
+  @apply !text-3xl !font-bold;
+}
+
+.bn-block-content h2 {
+  @apply !text-2xl !font-bold;
+}
+
+.bn-block-content h3 {
+  @apply !text-lg !font-bold;
+}
+
+.bn-side-menu svg {
+  width: 16px;
+  height: 16px;
+  transform: scale(1);
+  transform-origin: center;
+}
+
+.BlockNoteView.small .bn-editor {
+  font-size: small !important;
+}
+
+.ProseMirror-focused {
+  outline: none !important;
+}
+
+@layer utilities {
+  .animate-spin-slow {
+    animation: spin 3s linear infinite !important;
+  }
+}
+
+/* BlockNote diff word styling using data attribute */
+[data-diff="added"] {
+  @apply rounded bg-green-50 px-1 font-bold text-green-800;
+}
+[data-diff="removed"] {
+  @apply rounded bg-red-50 px-1 text-red-800 line-through;
+}
+
+/* @layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+} */
+
+.BlockNoteView .bn-suggestion-menu {
+  @apply bg-popover;
+  border-radius: 8px;
+  box-shadow:
+    0px 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0px 2px 4px -2px rgba(0, 0, 0, 0.05);
+  max-height: 320px !important;
+  overflow-y: auto !important;
+  min-width: 320px !important;
+}
+
+.BlockNoteView .bn-suggestion-menu-item {
+  @apply text-xs;
+  transition: background-color 0.2s ease !important;
+}
+
+.BlockNoteView .bn-suggestion-menu-item:hover,
+.BlockNoteView .bn-suggestion-menu-item[aria-selected="true"] {
+  @apply bg-accent text-accent-foreground;
+}
+/* 
+.BlockNoteView .bn-suggestion-menu-item .bn-text-base {
+  @apply text-xs;
+}
+
+.BlockNoteView .bn-suggestion-menu-item .bn-text-xs {
+  @apply: text-accent font-xs;
+} */
+
+.BlockNoteView .bn-suggestion-menu::-webkit-scrollbar {
+  width: 8px !important;
+}
+
+.BlockNoteView .bn-suggestion-menu::-webkit-scrollbar-track {
+  /* background: #1a1a1a !important; */
+  @apply bg-accent;
+}
+
+.BlockNoteView .bn-suggestion-menu::-webkit-scrollbar-thumb {
+  /* background-color: #444 !important; */
+  /* background-color: var(--color-border); */
+  border-radius: 4px !important;
+}

package/template/apps/web/src/config/BootstrapProvider.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+// Import env.ts to run all configurations on the client side:
+// - bootstrap() for ModuleRegistry
+// - configureJsonApi() for API client
+// - configureAuth() for token handling (login/logout)
+// - configureI18n() for translations
+// - configureRoles() for role IDs
+import "@/config/env";
+
+export function BootstrapProvider({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

package/template/apps/web/src/config/Bootstrapper.ts

@@ -0,0 +1,77 @@
+import { FeatureIds } from "@/enums/feature.ids";
+import { DataClassRegistry, FieldSelector, ModuleRegistry } from "@carlonicora/nextjs-jsonapi/core";
+import { ModuleWithPermissions } from "@carlonicora/nextjs-jsonapi/permissions";
+import { LucideIcon } from "lucide-react";
+
+// Foundation module imports (from app - code stays in app)
+import {
+  AuthModule,
+  AuthorModule,
+  CompanyModule,
+  ContentModule,
+  FeatureModule,
+  ModuleModule,
+  NotificationModule,
+  PushModule,
+  RoleModule,
+  S3Module,
+  UserModule,
+} from "@carlonicora/nextjs-jsonapi/features";
+
+// Feature module imports
+
+const moduleFactory = (params: {
+  pageUrl?: string;
+  name: string;
+  cache?: string;
+  model: any;
+  feature?: FeatureIds;
+  moduleId?: string;
+  icon?: LucideIcon;
+  inclusions?: Record<string, { types?: string[]; fields?: FieldSelector<any>[] }>;
+}): ModuleWithPermissions => ({
+  pageUrl: params.pageUrl,
+  name: params.name,
+  model: params.model,
+  feature: params.feature,
+  moduleId: params.moduleId,
+  cache: params.cache,
+  icon: params.icon,
+  inclusions: params.inclusions ?? {},
+});
+
+// SINGLE SOURCE OF TRUTH: Define ALL modules ONCE as object
+// TypeScript infers types from this object
+const allModules = {
+  // Foundation modules (types defined in library, code in app except S3)
+  Auth: AuthModule(moduleFactory),
+  Company: CompanyModule(moduleFactory),
+  Feature: FeatureModule(moduleFactory),
+  Module: ModuleModule(moduleFactory),
+  Notification: NotificationModule(moduleFactory),
+  Push: PushModule(moduleFactory),
+  Role: RoleModule(moduleFactory),
+  S3: S3Module(moduleFactory),
+  User: UserModule(moduleFactory),
+  Author: AuthorModule(moduleFactory),
+  Content: ContentModule(moduleFactory),
+} satisfies Record<string, ModuleWithPermissions>;
+
+// Export type derived from the object - NO DUPLICATION
+export type AllModuleDefinitions = typeof allModules;
+
+let bootstrapped = false;
+
+export function bootstrap(): void {
+  if (bootstrapped) return;
+
+  // Register ALL modules from the single source object
+  Object.entries(allModules).forEach(([name, module]) => {
+    ModuleRegistry.register(name, module);
+  });
+
+  // Register model classes for JSON:API response translation
+  DataClassRegistry.bootstrap(allModules);
+
+  bootstrapped = true;
+}

package/template/apps/web/src/config/env.ts

@@ -0,0 +1,51 @@
+import { bootstrap } from "@/config/Bootstrapper";
+import { ENV } from "@/config/middleware-env";
+import { Link, usePathname, useRouter } from "@/i18n/routing";
+import { useDateFnsLocale } from "@/i18n/useDateFnsLocale";
+import { removeToken, updateToken } from "@/server-actions/auth-cookies";
+import { configureAuth, configureI18n, configureJsonApi, configureRoles, Modules } from "@carlonicora/nextjs-jsonapi";
+import { RoleId } from "@{{name}}/shared";
+import { useLocale, useTranslations } from "next-intl";
+
+// Re-export ENV for use by non-middleware code
+export { ENV };
+
+// Bootstrap modules immediately when this file is imported
+// This ensures modules are registered before any component accesses Modules
+bootstrap();
+
+// Validate required env vars
+if (!ENV.API_URL) {
+  throw new Error("NEXT_PUBLIC_API_URL is required but not set");
+}
+
+if (!ENV.APP_URL) {
+  throw new Error("NEXT_PUBLIC_ADDRESS is required but not set");
+}
+
+// Configure JSON:API client
+configureJsonApi({
+  apiUrl: ENV.API_URL,
+  appUrl: ENV.APP_URL,
+  trackablePages: [Modules.Notification, Modules.Company, Modules.User],
+  bootstrapper: bootstrap,
+});
+
+// Configure auth token handling (Server Actions for cookie management)
+configureAuth({
+  updateToken,
+  removeToken,
+});
+
+// Configure i18n (router, translations, link component, locale)
+configureI18n({
+  useRouter,
+  useTranslations,
+  useLocale,
+  useDateFnsLocale,
+  Link,
+  usePathname,
+});
+
+// Configure role IDs for role-based access control
+configureRoles(RoleId);

package/template/apps/web/src/config/middleware-env.ts

@@ -0,0 +1,14 @@
+/**
+ * Middleware-safe environment configuration
+ * This file ONLY exports ENV constants without any library imports
+ * It's safe to use in Next.js middleware which has restricted module support
+ */
+
+export const ENV = {
+  API_URL:
+    (typeof window === "undefined" ? process.env.API_INTERNAL_URL : undefined) || process.env.NEXT_PUBLIC_API_URL!,
+  APP_URL: process.env.NEXT_PUBLIC_ADDRESS
+    ? process.env.NEXT_PUBLIC_ADDRESS.trim().replace(/\/+$/, "") // Trim whitespace & remove trailing slashes
+    : "",
+  VAPID_PUBLIC_KEY: process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!,
+} as const;

package/template/apps/web/src/enums/feature.ids.ts

@@ -0,0 +1,3 @@
+export enum FeatureIds {
+  Core = "core",
+}

package/template/apps/web/src/features/common/components/containers/IndexContainer.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { JsonApiHydratedDataInterface } from "@carlonicora/nextjs-jsonapi/core";
+
+type IndexContainerProps = {
+  dehydratedContentList: JsonApiHydratedDataInterface[];
+};
+
+export default function IndexContainer({ dehydratedContentList }: IndexContainerProps) {
+  return <div>index</div>;
+}

package/template/apps/web/src/features/common/components/details/LayoutDetails.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import CommonSidebar from "@/features/common/components/navigations/CommonSidebar";
+import { useCurrentUserContext, useNotificationContext } from "@carlonicora/nextjs-jsonapi/contexts";
+import { RoleInterface, UserInterface } from "@carlonicora/nextjs-jsonapi/features";
+import { useNotificationSync, usePageTracker } from "@carlonicora/nextjs-jsonapi/hooks";
+import { RoleId } from "@{{name}}/shared";
+import { useEffect } from "react";
+
+type LayoutDetailsProps = { children: React.ReactNode };
+
+export default function LayoutDetails({ children }: LayoutDetailsProps) {
+  // Notification functionality enabled
+
+  const { currentUser } = useCurrentUserContext<UserInterface>();
+  const { loadNotifications } = useNotificationContext();
+
+  useNotificationSync();
+  usePageTracker();
+
+  useEffect(() => {
+    if (currentUser && !currentUser.roles?.find((role: RoleInterface) => role.id === RoleId.Administrator)) {
+      loadNotifications();
+    }
+  }, [currentUser, loadNotifications]);
+
+  return (
+    <div data-wrapper className="flex h-full w-full">
+      <CommonSidebar />
+      <div className="flex flex-1 flex-col">{children}</div>
+    </div>
+  );
+}