create-carlonicora-app 1.0.0

package/template/apps/web/next.config.js

@@ -0,0 +1,50 @@
+const path = require("path");
+
+const createNextIntlPlugin = require("next-intl/plugin");
+
+// Try pointing to package's request config (requires next-intl to resolve module specifiers)
+// Note: If this doesn't work, we'll need a minimal ./src/i18n/request.ts file
+const withNextIntl = createNextIntlPlugin();
+
+const imageSources = process.env.IMAGE_SOURCES
+  ? process.env.IMAGE_SOURCES.split(",").map((url) => {
+      const { hostname, protocol, port } = new URL(url.trim());
+      return {
+        protocol: protocol.replace(":", ""),
+        hostname,
+        port: port || undefined,
+      };
+    })
+  : [];
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    useCache: true,
+    serverActions: {
+      bodySizeLimit: "5mb",
+    },
+  },
+  pageExtensions: ["ts", "tsx"],
+  images: {
+    minimumCacheTTL: 60,
+    remotePatterns: imageSources,
+    dangerouslyAllowLocalIP: true,
+  },
+  reactStrictMode: false,
+  env: {
+    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL ?? "",
+    NEXT_PUBLIC_ADDRESS: process.env.NEXT_PUBLIC_ADDRESS ?? "",
+    NEXT_PUBLIC_VAPID_PUBLIC_KEY: process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY ?? "",
+    NEXT_PUBLIC_GOOGLE_MAPS_API_KEY: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? "",
+  },
+  webpack: (config, { isServer }) => {
+    // Force single Yjs instance to prevent "Yjs was already imported" error
+    // Note: This only works with webpack builds (production). For Turbopack (dev),
+    // we rely on pnpm.overrides in root package.json
+    config.resolve.alias["yjs"] = path.resolve(__dirname, "node_modules/yjs");
+    return config;
+  },
+};
+
+module.exports = withNextIntl(nextConfig);

package/template/apps/web/package.json

@@ -0,0 +1,146 @@
+{
+  "name": "{{name}}-web",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "dotenv -e ../../.env -- next build",
+    "dev": "dotenv -e ../../.env -- next dev",
+    "lint": "eslint .",
+    "start": "dotenv -e ../../.env -- next start -H 0.0.0.0",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "test:watch": "jest --watchAll --verbose",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug",
+    "format": "prettier --write .",
+    "typecheck": "eslint ."
+  },
+  "engines": {
+    "node": "22"
+  },
+  "packageManager": "pnpm@10.25.0",
+  "dependencies": {
+    "@aws-sdk/lib-storage": "^3.948.0",
+    "@aws-sdk/s3-request-presigner": "^3.948.0",
+    "@aws-sdk/xhr-http-handler": "^3.936.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@floating-ui/react": "^0.27.16",
+    "@hello-pangea/dnd": "^18.0.1",
+    "@hookform/resolvers": "^5.2.2",
+    "@next/third-parties": "16.0.10",
+    "@carlonicora/nextjs-jsonapi": "1.1.1",
+    "@{{name}}/shared": "workspace:*",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-focus-scope": "^1.1.8",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-table": "^8.21.3",
+    "autoprefixer": "^10.4.22",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "codice-fiscale-js": "^2.3.23",
+    "cookies-next": "^6.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.23.26",
+    "fs": "^0.0.1-security",
+    "fuse.js": "^7.1.0",
+    "i18n-iso-countries": "^7.14.0",
+    "i18next": "^25.7.2",
+    "jotai": "^2.16.0",
+    "jsonwebtoken": "^9.0.3",
+    "jszip": "^3.10.1",
+    "lodash": "^4.17.21",
+    "lucide": "^0.561.0",
+    "lucide-react": "^0.561.0",
+    "mailparser": "^3.9.1",
+    "mammoth": "^1.11.0",
+    "next": "16.0.10",
+    "next-intl": "^4.5.8",
+    "next-share": "^0.27.0",
+    "next-themes": "^0.4.6",
+    "papaparse": "^5.5.3",
+    "pdfjs-dist": "^5.4.449",
+    "postal-mime": "^2.6.1",
+    "react": "19.2.3",
+    "react-cookie": "8.0.1",
+    "react-day-picker": "^9.12.0",
+    "react-dom": "19.2.3",
+    "react-dropzone": "^14.3.8",
+    "react-easy-swipe": "^0.0.23",
+    "react-hook-form": "^7.68.0",
+    "react-horizontal-scrolling-menu": "^8.2.0",
+    "react-i18next": "^16.5.0",
+    "react-spinners": "^0.17.0",
+    "react-toastify": "^11.0.5",
+    "recharts": "^3.5.1",
+    "sharp": "^0.34.5",
+    "socket.io-client": "^4.8.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18",
+    "tailwindcss-animate": "^1.0.7",
+    "turndown": "^7.2.2",
+    "uuid": "^13.0.0",
+    "vaul": "^1.1.2",
+    "xlsx-republish": "^0.20.3",
+    "yjs": "^13.6.27"
+  },
+  "devDependencies": {
+    "@next/eslint-plugin-next": "16.0.10",
+    "@playwright/test": "^1.57.0",
+    "@tailwindcss/postcss": "^4",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/accept-language-parser": "^1.5.8",
+    "@types/google.maps": "^3.58.1",
+    "@types/jest": "^30.0.0",
+    "@types/jsonwebtoken": "^9.0.10",
+    "@types/katex": "^0.16.7",
+    "@types/lodash": "^4.17.21",
+    "@types/mailparser": "^3.4.6",
+    "@types/negotiator": "^0.6.4",
+    "@types/papaparse": "^5.5.1",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "@types/turndown": "^5.0.6",
+    "dotenv": "^17.2.3",
+    "eslint": "^9.39.1",
+    "eslint-config-next": "16.0.10",
+    "eslint-plugin-react": "^7.37.5",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "sass-loader": "^16.0.6",
+    "ts-jest": "^29.4.6",
+    "ts-node": "^10.9.2",
+    "tw-animate-css": "^1.4.0"
+  }
+}

package/template/apps/web/playwright.config.ts

@@ -0,0 +1,86 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+import dotenv from "dotenv";
+import path from "path";
+dotenv.config({ path: path.resolve(__dirname, ".env") });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: `http://localhost:${process.env.PORT || 3000}`,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    // Setup project
+    { name: "setup", testMatch: /.*\.setup\.ts/ },
+
+    // Unauthenticated tests
+    {
+      name: "chromium-unauth",
+      use: { ...devices["Desktop Chrome"] },
+      testDir: "./tests/unauthenticated",
+    },
+
+    // Authenticated tests
+    {
+      name: "chromium-auth",
+      use: {
+        ...devices["Desktop Chrome"],
+        storageState: "playwright/.auth/user.json",
+      },
+      dependencies: ["setup"],
+      testDir: "./tests/authenticated",
+    },
+
+    /* Test against  viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "npm run dev",
+    url: `http://localhost:${process.env.PORT || 3000}`,
+    reuseExistingServer: true,
+    timeout: 120 * 1000,
+  },
+});

package/template/apps/web/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

package/template/apps/web/public/sw.js

@@ -0,0 +1,32 @@
+self.addEventListener("push", function (event) {
+  var data = event.data ? event.data.json() : {};
+  var title = data.title || "Notification";
+  var options = {
+    body: data.message || "You have a new notification",
+    icon: "/{{name}}-logo.webp",
+    data: data.url,
+  };
+
+  event.waitUntil(self.registration.showNotification(title, options));
+});
+
+self.addEventListener("notificationclick", function (event) {
+  event.notification.close();
+  event.waitUntil(
+    (async function () {
+      var clientList = await self.clients.matchAll({
+        type: "window",
+        includeUncontrolled: true,
+      });
+      for (var i = 0; i < clientList.length; i++) {
+        var windowClient = clientList[i];
+        if (windowClient.url === event.notification.data && "focus" in windowClient) {
+          return windowClient.focus();
+        }
+      }
+      if (self.clients.openWindow && event.notification.data) {
+        return self.clients.openWindow(event.notification.data);
+      }
+    })(),
+  );
+});

package/template/apps/web/src/app/[locale]/(admin)/administration/companies/[id]/page.tsx

@@ -0,0 +1,46 @@
+import { generateSpecificMetadata } from "@/utils/metadata";
+import { AdminCompanyContainer, PageContainer } from "@carlonicora/nextjs-jsonapi/components";
+import { CompanyProvider } from "@carlonicora/nextjs-jsonapi/contexts";
+import { Modules } from "@carlonicora/nextjs-jsonapi/core";
+import { CompanyInterface, CompanyService } from "@carlonicora/nextjs-jsonapi/features";
+import { Action } from "@carlonicora/nextjs-jsonapi/permissions";
+import { ServerSession } from "@carlonicora/nextjs-jsonapi/server";
+import { RoleId } from "@{{name}}/shared";
+import { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { cache } from "react";
+
+const getCachedCompany = cache(async (id: string) => CompanyService.findOne({ companyId: id }));
+
+export async function generateMetadata(props: { params: Promise<{ id: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const t = await getTranslations();
+
+  const company: CompanyInterface = await getCachedCompany(params.id);
+
+  const title = (await ServerSession.hasPermissionToModule({
+    module: Modules.Company,
+    action: Action.Read,
+    data: company,
+  }))
+    ? `[${t(`types.companies`, { count: 1 })}] ${company.name}`
+    : `${t(`types.companies`, { count: 1 })}`;
+
+  return await generateSpecificMetadata({ title: title });
+}
+
+export default async function CompanyPage(props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
+  const company: CompanyInterface = await getCachedCompany(params.id);
+
+  if (!(await ServerSession.hasRole(RoleId.Administrator)))
+    ServerSession.checkPermission({ module: Modules.Company, action: Action.Read, data: company });
+
+  return (
+    <CompanyProvider dehydratedCompany={company.dehydrate()}>
+      <PageContainer>
+        <AdminCompanyContainer />
+      </PageContainer>
+    </CompanyProvider>
+  );
+}

package/template/apps/web/src/app/[locale]/(admin)/administration/companies/page.tsx

@@ -0,0 +1,23 @@
+import { generateSpecificMetadata } from "@/utils/metadata";
+import { CompaniesList, PageContainer } from "@carlonicora/nextjs-jsonapi/components";
+import { CompanyProvider } from "@carlonicora/nextjs-jsonapi/contexts";
+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(`types.companies`, { count: 2 }),
+  });
+}
+
+export default async function CompaniesListPage() {
+  return (
+    <CompanyProvider>
+      <PageContainer>
+        <CompaniesList />
+      </PageContainer>
+    </CompanyProvider>
+  );
+}

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

@@ -0,0 +1,49 @@
+import { ServerSession } from "@carlonicora/nextjs-jsonapi/server";
+import "react-horizontal-scrolling-menu/dist/styles.css";
+
+import LayoutDetails from "@/features/common/components/details/LayoutDetails";
+import { routing } from "@/i18n/routing";
+import { PushNotificationProvider, RefreshUser } from "@carlonicora/nextjs-jsonapi/components";
+import { NotificationContextProvider, SocketProvider } from "@carlonicora/nextjs-jsonapi/contexts";
+import { SidebarProvider } from "@carlonicora/nextjs-jsonapi/shadcnui";
+import { hasLocale } from "next-intl";
+import { getMessages, setRequestLocale } from "next-intl/server";
+import { Inter } from "next/font/google";
+import { cookies } from "next/headers";
+import { notFound } from "next/navigation";
+import "../../globals.css";
+
+const fontSans = Inter({ subsets: ["latin"], weight: ["100", "300", "400", "700"], variable: "--font-sans" });
+
+export default async function AdminLayout(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();
+  }
+
+  const cookieStore = await cookies();
+  const token = cookieStore.get("token")?.value;
+  setRequestLocale(locale);
+  const messages = await getMessages();
+  const defaultOpen = cookieStore.get("sidebar_state")?.value === "true";
+
+  if (await ServerSession.isLogged())
+    return (
+      <SocketProvider token={token}>
+        <PushNotificationProvider>
+          <NotificationContextProvider>
+            <SidebarProvider defaultOpen={defaultOpen}>
+              <RefreshUser />
+              <LayoutDetails>{children}</LayoutDetails>
+            </SidebarProvider>
+          </NotificationContextProvider>
+        </PushNotificationProvider>
+      </SocketProvider>
+    );
+
+  return <div className="flex min-h-screen w-full flex-col items-center justify-center">{children}</div>;
+}

package/template/apps/web/src/app/[locale]/(auth)/activation/[code]/page.tsx

@@ -0,0 +1,13 @@
+import { generateSpecificMetadata } from "@/utils/metadata";
+import { AuthContainer } from "@carlonicora/nextjs-jsonapi/components";
+import { AuthComponent } from "@carlonicora/nextjs-jsonapi/features";
+import { Metadata } from "next";
+
+export async function generateMetadata(): Promise<Metadata> {
+  return await generateSpecificMetadata({});
+}
+
+export default async function ActivatePage(props: { params: Promise<{ code: string }> }) {
+  const params = await props.params;
+  return <AuthContainer componentType={AuthComponent.ActivateAccount} params={{ code: params.code }} />;
+}

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

@@ -0,0 +1,11 @@
+import { Cookies } from "@carlonicora/nextjs-jsonapi/components";
+import { AuthInterface, AuthService } from "@carlonicora/nextjs-jsonapi/features";
+
+export default async function AuthPage(props: { searchParams: Promise<{ code: string }> }) {
+  const searchParams = await props.searchParams;
+  const auth: AuthInterface = await AuthService.findToken({
+    tokenCode: searchParams.code,
+  });
+
+  return <Cookies dehydratedAuth={auth.dehydrate()} />;
+}

package/template/apps/web/src/app/[locale]/(auth)/invitation/[code]/page.tsx

@@ -0,0 +1,7 @@
+import { AuthContainer } from "@carlonicora/nextjs-jsonapi/components";
+import { AuthComponent } from "@carlonicora/nextjs-jsonapi/features";
+
+export default async function InvitationPage(props: { params: Promise<{ code: string }> }) {
+  const params = await props.params;
+  return <AuthContainer componentType={AuthComponent.AcceptInvitation} params={{ code: params.code }} />;
+}

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

@@ -0,0 +1,9 @@
+export default async function MainLayout(props: { children: React.ReactNode; params: Promise<{ locale: string }> }) {
+  const { children } = props;
+
+  return (
+    <div data-wrapper className="flex h-screen w-full items-center justify-center">
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,6 @@
+import { AuthContainer } from "@carlonicora/nextjs-jsonapi/components";
+import { AuthComponent } from "@carlonicora/nextjs-jsonapi/features";
+
+export default async function LoginPage() {
+  return <AuthContainer componentType={AuthComponent.Login} />;
+}

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

@@ -0,0 +1,5 @@
+import { Logout } from "@carlonicora/nextjs-jsonapi/components";
+
+export default async function LogoutPage() {
+  return <Logout />;
+}

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

@@ -0,0 +1,6 @@
+import { AuthContainer } from "@carlonicora/nextjs-jsonapi/components";
+import { AuthComponent } from "@carlonicora/nextjs-jsonapi/features";
+
+export default async function RegisterPage() {
+  return <AuthContainer componentType={AuthComponent.Register} />;
+}

package/template/apps/web/src/app/[locale]/(auth)/reset/[code]/page.tsx

@@ -0,0 +1,7 @@
+import { AuthContainer } from "@carlonicora/nextjs-jsonapi/components";
+import { AuthComponent } from "@carlonicora/nextjs-jsonapi/features";
+
+export default async function ResetPage(props: { params: Promise<{ code: string }> }) {
+  const params = await props.params;
+  return <AuthContainer componentType={AuthComponent.ResetPassword} params={{ code: params.code }} />;
+}

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

@@ -0,0 +1,9 @@
+import { NotificationsListContainer, PageContainer } from "@carlonicora/nextjs-jsonapi/components";
+
+export default async function NotificationListPage() {
+  return (
+    <PageContainer testId="page-inbox-container">
+      <NotificationsListContainer />
+    </PageContainer>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { PageContainer, RoleContainer } from "@carlonicora/nextjs-jsonapi/components";
+import { RoleProvider } from "@carlonicora/nextjs-jsonapi/contexts";
+import { Modules } from "@carlonicora/nextjs-jsonapi/core";
+import { RoleInterface, RoleService } from "@carlonicora/nextjs-jsonapi/features";
+import { Action } from "@carlonicora/nextjs-jsonapi/permissions";
+import { ServerSession } from "@carlonicora/nextjs-jsonapi/server";
+
+export default async function RolePage(props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
+  const role: RoleInterface = await RoleService.findById({
+    roleId: params.id,
+  });
+
+  ServerSession.checkPermission({ module: Modules.Role, action: Action.Read, data: role });
+
+  return (
+    <RoleProvider dehydratedRole={role.dehydrate()}>
+      <PageContainer>
+        <RoleContainer />
+      </PageContainer>
+    </RoleProvider>
+  );
+}

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

@@ -0,0 +1,12 @@
+import { PageContainer, RolesList } from "@carlonicora/nextjs-jsonapi/components";
+import { RoleProvider } from "@carlonicora/nextjs-jsonapi/contexts";
+
+export default async function RolesListPage() {
+  return (
+    <RoleProvider>
+      <PageContainer>
+        <RolesList />
+      </PageContainer>
+    </RoleProvider>
+  );
+}

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

@@ -0,0 +1,14 @@
+"use client";
+import { ErrorDetails, PageContainer } from "@carlonicora/nextjs-jsonapi/components";
+import { UserProvider } from "@carlonicora/nextjs-jsonapi/contexts";
+
+export default function ErrorPage({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const customError = JSON.parse(error.message);
+  return (
+    <UserProvider>
+      <PageContainer>
+        <ErrorDetails code={customError.code ?? 500} message={customError.message ?? error} />
+      </PageContainer>
+    </UserProvider>
+  );
+}

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

@@ -0,0 +1,21 @@
+"use server";
+
+import { PageContainer } from "@carlonicora/nextjs-jsonapi/components";
+import { UserProvider } from "@carlonicora/nextjs-jsonapi/contexts";
+import { Skeleton } from "@carlonicora/nextjs-jsonapi/shadcnui";
+
+export default async function Loading() {
+  return (
+    <UserProvider>
+      <PageContainer>
+        <div className="flex h-full w-full flex-col items-center justify-center">
+          <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-[250px]" />
+            <Skeleton className="h-4 w-[200px]" />
+          </div>
+        </div>
+      </PageContainer>
+    </UserProvider>
+  );
+}

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

@@ -0,0 +1,46 @@
+import { generateSpecificMetadata } from "@/utils/metadata";
+import { PageContainer, UserContainer } from "@carlonicora/nextjs-jsonapi/components";
+import { CompanyProvider, UserProvider } from "@carlonicora/nextjs-jsonapi/contexts";
+import { Modules } from "@carlonicora/nextjs-jsonapi/core";
+import { UserInterface, UserService } from "@carlonicora/nextjs-jsonapi/features";
+import { Action } from "@carlonicora/nextjs-jsonapi/permissions";
+import { ServerSession } from "@carlonicora/nextjs-jsonapi/server";
+import { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { cache } from "react";
+
+const getCachedUser = cache(async (id: string) => UserService.findById({ userId: id }));
+
+export async function generateMetadata(props: { params: Promise<{ id: string }> }): Promise<Metadata> {
+  const params = await props.params;
+  const t = await getTranslations();
+
+  let title = `${t(`types.users`, { count: 1 })}`;
+
+  const user: UserInterface = (await getCachedUser(params.id)) as UserInterface;
+
+  if (await ServerSession.hasPermissionToModule({ module: Modules.User, action: Action.Read, data: user }))
+    title = `[${t(`types.users`, { count: 1 })}] ${user.name}`;
+
+  return await generateSpecificMetadata({ title: title });
+}
+
+export default async function UserPage(props: {
+  params: Promise<{
+    id: string;
+  }>;
+}) {
+  const params = await props.params;
+
+  const user: UserInterface = await getCachedUser(params.id);
+
+  return (
+    <CompanyProvider dehydratedCompany={user.company?.dehydrate()}>
+      <UserProvider dehydratedUser={user.dehydrate()}>
+        <PageContainer>
+          <UserContainer />
+        </PageContainer>
+      </UserProvider>
+    </CompanyProvider>
+  );
+}