create-carlonicora-app 1.0.0

package/template/apps/web/src/features/common/components/navigations/CommonSidebar.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import CreationDropDown from "@/features/common/components/navigations/CreationDropDown";
+import { useRouter } from "@/i18n/routing";
+import { recentPagesAtom } from "@carlonicora/nextjs-jsonapi/atoms";
+import { RecentPagesNavigator } from "@carlonicora/nextjs-jsonapi/components";
+import { useCurrentUserContext, useNotificationContext } from "@carlonicora/nextjs-jsonapi/contexts";
+import { usePageUrlGenerator } from "@carlonicora/nextjs-jsonapi/hooks";
+import {
+  Link,
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  useSidebar,
+} from "@carlonicora/nextjs-jsonapi/shadcnui";
+
+import { UserSidebarFooter } from "@/features/common/components/navigations/UserSidebarFooter";
+import { useAtomValue } from "jotai";
+import { HistoryIcon, HomeIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { Fragment, ReactNode, useMemo, useState } from "react";
+
+export type NavigationItem = {
+  title: string;
+  component?: React.ReactNode;
+  url: string;
+  onClick?: () => void;
+  icon: ReactNode;
+  testId?: string;
+};
+
+export default function CommonSidebar() {
+  const { state } = useSidebar();
+  const { currentUser, company, hasPermissionToPath, hasAccesToFeature, hasPermissionToModule, hasRole } =
+    useCurrentUserContext();
+  const generateUrl = usePageUrlGenerator();
+  const t = useTranslations();
+  const { notifications } = useNotificationContext();
+  const [notificationModalOpen, setNotificationModalOpen] = useState(false);
+  const recentPages = useAtomValue(recentPagesAtom);
+  const router = useRouter();
+
+  const unreadCount = useMemo(() => {
+    return notifications.filter((notif) => !notif.isRead).length;
+  }, [notifications]);
+
+  const navigationMap = useMemo(() => {
+    const navMap = new Map<string, { hasTitle: boolean; items: NavigationItem[] }>([
+      ["/", { hasTitle: false, items: [] }],
+      ["expertise", { hasTitle: true, items: [] }],
+      // ["knowledge", { hasTitle: true, items: [] }],
+    ]);
+
+    navMap.get("/")?.items.push({
+      title: t(`generic.home`),
+      url: generateUrl({ page: `/` }),
+      icon: <HomeIcon />,
+      testId: "sidebar-home-link",
+    });
+
+    if (company) {
+      if (recentPages.length > 0) {
+        navMap.get("/")?.items.push({
+          title: t(`generic.recent_pages`),
+          component: <RecentPagesNavigator />,
+          url: "#",
+          icon: <HistoryIcon />,
+          testId: "sidebar-recent-pages",
+        });
+      }
+    }
+
+    return navMap;
+  }, [currentUser, company, recentPages, t, generateUrl, hasRole]);
+
+  return (
+    <Sidebar data-testid="sidebar-container" collapsible="icon">
+      <SidebarHeader>
+        <Link
+          href={generateUrl({ page: `/` })}
+          className="mb-4 flex max-h-32 w-full items-center justify-center text-2xl font-semibold"
+        >
+          {state === "expanded" ? (
+            <Image
+              src={`/{{name}}-logo.webp`}
+              className="max-h-32 object-contain p-4"
+              height={300}
+              width={300}
+              alt={"Phlow"}
+              priority
+            />
+          ) : (
+            <Image
+              src={`/{{name}}-logo.webp`}
+              className="max-h-10 object-contain"
+              height={300}
+              width={300}
+              alt={"Phlow"}
+              priority
+            />
+          )}
+        </Link>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup className={`py-0 ${state === "collapsed" ? "pb-4" : "pb-1"}`}>
+          {state === "expanded" ? (
+            <SidebarGroupContent className="flex flex-col gap-2">
+              {/* <SidebarMenu>
+                <Button
+                  onClick={() => router.push(generateUrl({ page: Modules.Conversation }))}
+                  variant={"link"}
+                  className="relative h-12 w-full cursor-pointer p-0"
+                  data-testid="sidebar-query-knowledge-button"
+                >
+                  <Input
+                    placeholder={t(`generic.query_knowledge`)}
+                    type="text"
+                    className="border-primary text-muted m-0 w-full cursor-pointer"
+                  />
+                  <div className="text-muted-foreground absolute top-3.5 right-10 flex flex-row gap-x-1">
+                    <span className="flex h-5 w-5 items-center justify-center rounded-md border text-xs">⌘</span>
+                    <span className="flex h-5 w-5 items-center justify-center rounded-md border text-xs">K</span>
+                  </div>
+                  <div className="text-muted-foreground absolute top-3 right-2 flex flex-row gap-x-2">
+                    <span className="bg-accent flex h-6 w-6 items-center justify-center rounded-md border text-xs">
+                      <SparklesIcon className="text-muted h-5 w-5" />
+                    </span>
+                  </div>
+                </Button>
+              </SidebarMenu> */}
+              <CreationDropDown />
+            </SidebarGroupContent>
+          ) : (
+            <SidebarGroupContent className="flex flex-col gap-2">
+              {/* <SidebarMenu>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      onClick={() => router.push(generateUrl({ page: Modules.Conversation }))}
+                      className="bg-accent relative cursor-pointer"
+                      data-testid="sidebar-query-knowledge-button"
+                    >
+                      <SparklesIcon className="text-muted h-5 w-5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">{t(`generic.query_knowledge`)}</TooltipContent>
+                </Tooltip>
+              </SidebarMenu> */}
+              <CreationDropDown />
+            </SidebarGroupContent>
+          )}
+        </SidebarGroup>
+        {Array.from(navigationMap.entries())
+          .filter(([groupLabel, items]) => items.items.length > 0)
+          .map(([groupLabel, items]) => (
+            <SidebarGroup key={groupLabel} className={`py-0 ${state === "collapsed" ? "pb-4" : "pb-1"}`}>
+              {groupLabel !== "/" && state !== "collapsed" && items.hasTitle && (
+                <SidebarGroupLabel className="min-h-10 font-semibold">
+                  {t(`generic.sidebar`, { type: groupLabel })}
+                </SidebarGroupLabel>
+              )}
+              <SidebarMenu className="gap-0">
+                {items.items.map((item) => {
+                  if (item.url && !hasPermissionToPath(item.url)) return null;
+
+                  const isDropdown = item.url === "#" && item.component;
+
+                  return (
+                    <Fragment key={item.title}>
+                      {state === "collapsed" ? (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            {isDropdown ? (
+                              <SidebarMenuButton className="text-muted-foreground" data-testid={item.testId}>
+                                {item.component}
+                              </SidebarMenuButton>
+                            ) : (
+                              <SidebarMenuButton
+                                asChild
+                                className="text-muted-foreground cursor-pointer"
+                                data-testid={item.testId}
+                                onClick={item.onClick}
+                              >
+                                <Link href={item.url ? item.url : "#"}>
+                                  {item.icon}
+                                  {item.component ? item.component : <span>{item.title}</span>}
+                                </Link>
+                              </SidebarMenuButton>
+                            )}
+                          </TooltipTrigger>
+                          <TooltipContent side="right">{item.title}</TooltipContent>
+                        </Tooltip>
+                      ) : (
+                        <SidebarMenuButton asChild={!isDropdown} data-testid={item.testId} onClick={item.onClick}>
+                          {isDropdown ? (
+                            <div className="text-muted-foreground flex w-full items-center gap-2">
+                              {item.icon}
+                              {item.component}
+                            </div>
+                          ) : (
+                            <Link href={item.url ? item.url : "#"} className="text-muted-foreground cursor-pointer">
+                              {item.icon}
+                              {item.component ? item.component : <span>{item.title}</span>}
+                            </Link>
+                          )}
+                        </SidebarMenuButton>
+                      )}
+                    </Fragment>
+                  );
+                })}
+              </SidebarMenu>
+            </SidebarGroup>
+          ))}
+      </SidebarContent>
+      <SidebarFooter className="border-t">
+        <UserSidebarFooter
+          notificationModalOpen={notificationModalOpen}
+          setNotificationModalOpen={setNotificationModalOpen}
+        />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

package/template/apps/web/src/features/common/components/navigations/CreationDropDown.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useCurrentUserContext } from "@carlonicora/nextjs-jsonapi/contexts";
+import { UserInterface } from "@carlonicora/nextjs-jsonapi/features";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  useSidebar,
+} from "@carlonicora/nextjs-jsonapi/shadcnui";
+import { PlusCircleIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+export default function CreationDropDown() {
+  const { state } = useSidebar();
+  const t = useTranslations();
+  const { hasPermissionToModule } = useCurrentUserContext<UserInterface>();
+
+  const [menuOpen, setMenuOpen] = useState<boolean>(false);
+
+  // const [newArticleOpen, setNewArticleOpen] = useState<boolean>(false);
+  // const [newHyperlinkOpen, setNewHyperlinkOpen] = useState<boolean>(false);
+  // const [newDocumentOpen, setNewDocumentOpen] = useState<boolean>(false);
+  // const [newGlossaryOpen, setNewGlossaryOpen] = useState<boolean>(false);
+  // const [newDiscussionOpen, setNewDiscussionOpen] = useState<boolean>(false);
+
+  // const handleArticleClick = () => {
+  //   setMenuOpen(false);
+  //   requestAnimationFrame(() => {
+  //     setNewArticleOpen(true);
+  //   });
+  // };
+
+  // const handleHyperlinkClick = () => {
+  //   setMenuOpen(false);
+  //   requestAnimationFrame(() => {
+  //     setNewHyperlinkOpen(true);
+  //   });
+  // };
+
+  // const handleDocumentClick = () => {
+  //   setMenuOpen(false);
+  //   requestAnimationFrame(() => {
+  //     setNewDocumentOpen(true);
+  //   });
+  // };
+
+  // const handleGlossaryClick = () => {
+  //   setMenuOpen(false);
+  //   requestAnimationFrame(() => {
+  //     setNewGlossaryOpen(true);
+  //   });
+  // };
+
+  // const handleDiscussionClick = () => {
+  //   setMenuOpen(false);
+  //   requestAnimationFrame(() => {
+  //     setNewDiscussionOpen(true);
+  //   });
+  // };
+
+  return (
+    <>
+      <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+        <DropdownMenuTrigger asChild suppressHydrationWarning>
+          <Button variant="outline" className="bg-accent text-accent-foreground">
+            <PlusCircleIcon />
+            {state === "collapsed" ? <></> : <span>{t(`generic.create`)}</span>}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-96">
+          <DropdownMenuLabel>{t(`generic.create_new`)}</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {/* <DropdownMenuItem onClick={handleArticleClick} className="flex items-center gap-2 font-normal">
+            {getIconByModule({ module: Modules.Article })}
+            {t(`types.articles`, { count: 1 })}
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={handleHyperlinkClick} className="flex items-center gap-2 font-normal">
+            {getIconByModule({ module: Modules.Hyperlink })}
+            {t(`types.hyperlinks`, { count: 1 })}
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={handleDocumentClick} className="flex items-center gap-2 font-normal">
+            {getIconByModule({ module: Modules.Document })}
+            {t(`types.documents`, { count: 1 })}
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={handleGlossaryClick} className="flex items-center gap-2 font-normal">
+            {getIconByModule({ module: Modules.Glossary })}
+            {t(`types.glossaries`, { count: 1 })}
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={handleDiscussionClick} className="flex items-center gap-2 font-normal">
+            {getIconByModule({ module: Modules.Discussion })}
+            {t(`types.discussions`, { count: 1 })}
+          </DropdownMenuItem> */}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {/* {hasPermissionToModule({ module: Modules.Article, action: Action.Create }) && (
+        <ArticleEditor dialogOpen={newArticleOpen} onDialogOpenChange={setNewArticleOpen} />
+      )}
+      {hasPermissionToModule({ module: Modules.Hyperlink, action: Action.Create }) && (
+        <HyperlinkEditor dialogOpen={newHyperlinkOpen} onDialogOpenChange={setNewHyperlinkOpen} />
+      )}
+      {hasPermissionToModule({ module: Modules.Document, action: Action.Create }) && (
+        <DocumentEditor dialogOpen={newDocumentOpen} onDialogOpenChange={setNewDocumentOpen} />
+      )}
+      {hasPermissionToModule({ module: Modules.Glossary, action: Action.Create }) && (
+        <GlossaryEditor dialogOpen={newGlossaryOpen} onDialogOpenChange={setNewGlossaryOpen} />
+      )}
+      {hasPermissionToModule({ module: Modules.Discussion, action: Action.Create }) && (
+        <DiscussionEditor dialogOpen={newDiscussionOpen} onDialogOpenChange={setNewDiscussionOpen} />
+      )} */}
+    </>
+  );
+}

package/template/apps/web/src/features/common/components/navigations/UserSidebarFooter.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import VersionDisplay from "@/features/common/components/navigations/VersionDisplay";
+import { Modules } from "@carlonicora/nextjs-jsonapi";
+import { ModeToggleSwitch, NotificationModal, UserAvatar } from "@carlonicora/nextjs-jsonapi/components";
+import { useCurrentUserContext } from "@carlonicora/nextjs-jsonapi/contexts";
+import { UserInterface } from "@carlonicora/nextjs-jsonapi/features";
+import { usePageUrlGenerator } from "@carlonicora/nextjs-jsonapi/hooks";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Link,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@carlonicora/nextjs-jsonapi/shadcnui";
+import { RoleId } from "@{{name}}/shared";
+import { ChevronsUpDown, LogOut, SettingsIcon, UserIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+type UserSidebarFooterProps = {
+  notificationModalOpen: boolean;
+  setNotificationModalOpen: (open: boolean) => void;
+};
+
+export function UserSidebarFooter({ notificationModalOpen, setNotificationModalOpen }: UserSidebarFooterProps) {
+  const { currentUser, hasRole } = useCurrentUserContext<UserInterface>();
+  const { isMobile } = useSidebar();
+  const generateUrl = usePageUrlGenerator();
+  const t = useTranslations();
+
+  const logOut = async () => {
+    window.location.href = generateUrl({ page: `/logout` });
+  };
+
+  return (
+    <SidebarMenu>
+      {currentUser && !hasRole(RoleId.Administrator) && (
+        <SidebarMenuItem>
+          <NotificationModal isOpen={notificationModalOpen} setIsOpen={setNotificationModalOpen} />
+        </SidebarMenuItem>
+      )}
+      {hasRole(RoleId.CompanyAdministrator) && (
+        <Link href={generateUrl({ page: `/settings` })}>
+          <SidebarMenuItem>
+            <SidebarMenuButton className="text-muted-foreground">
+              <SettingsIcon />
+              {t(`generic.settings`)}
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </Link>
+      )}
+      <SidebarMenuItem className="-ml-0.5">
+        {currentUser && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                <UserAvatar user={currentUser} className="h-5 w-5" />
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{currentUser.name}</span>
+                  <span className="truncate text-xs">{currentUser.email}</span>
+                </div>
+                <ChevronsUpDown className="ml-auto size-4" />
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+              side={isMobile ? "bottom" : "right"}
+              align="end"
+              sideOffset={4}
+            >
+              <DropdownMenuLabel className="p-0 font-normal">
+                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-semibold">{currentUser.name}</span>
+                    <span className="truncate text-xs">{currentUser.email}</span>
+                  </div>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>
+                <VersionDisplay />
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onSelect={(event) => event.preventDefault()}>
+                <ModeToggleSwitch />
+                {t(`generic.theme`)}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <Link href={generateUrl({ page: Modules.User, id: currentUser.id })}>
+                  <DropdownMenuItem>
+                    <UserIcon />
+                    {t(`generic.my_profile`)}
+                  </DropdownMenuItem>
+                </Link>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={logOut}>
+                <LogOut />
+                {t(`foundations.auth.buttons.logout`)}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/template/apps/web/src/features/common/components/navigations/VersionDisplay.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import packageInfo from "../../../../../../../package.json";
+
+export const getAppVersion = () => {
+  return packageInfo.version;
+};
+
+export default function VersionDisplay() {
+  return (
+    <div className="text-muted-foreground flex w-full flex-col text-xs">
+      <div className="flex w-full flex-row justify-between">
+        <div className="flex w-full">Phlow Version</div>
+        <div className="flex">{getAppVersion()}</div>
+      </div>
+    </div>
+  );
+}

package/template/apps/web/src/features/common/contexts/ErrorContext.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { ErrorDetails } from "@carlonicora/nextjs-jsonapi/components";
+import { Logout } from "@carlonicora/nextjs-jsonapi/components";
+import { useMessages } from "next-intl";
+import { createContext, ReactNode, useContext, useEffect, useState } from "react";
+
+interface ErrorContextType {
+  error: { status: number; message: string } | null;
+  showError: (status: number, message: string) => void;
+  clearError: () => void;
+}
+
+const ErrorContext = createContext<ErrorContextType | undefined>(undefined);
+
+export function useErrorHandler() {
+  const context = useContext(ErrorContext);
+  if (!context) {
+    throw new Error("useErrorHandler must be used within an ErrorProvider");
+  }
+  return context;
+}
+
+export function ErrorProvider({ children }: { children: ReactNode }) {
+  const [error, setError] = useState<{ status: number; message: string } | null>(null);
+  const messages = useMessages() as any;
+
+  const showError = (status: number, message: string) => {
+    setError({ status, message });
+  };
+
+  const clearError = () => {
+    setError(null);
+  };
+
+  useEffect(() => {
+    const { setGlobalErrorHandler } = require("@/data/abstracts/AbstractService");
+    setGlobalErrorHandler(showError);
+
+    return () => {
+      setGlobalErrorHandler(null);
+    };
+  }, []);
+
+  if (error) {
+    const errorMessages = messages?.errors?.[error.status.toString()];
+
+    if (error.status === 401) return <Logout />;
+
+    return (
+      <div className="flex min-h-screen w-full flex-col items-center justify-center">
+        <ErrorDetails
+          code={error.status}
+          title={errorMessages?.title || `Error ${error.status}`}
+          message={errorMessages?.message || error.message}
+        />
+      </div>
+    );
+  }
+
+  return <ErrorContext.Provider value={{ error, showError, clearError }}>{children}</ErrorContext.Provider>;
+}

package/template/apps/web/src/i18n/request.ts

@@ -0,0 +1,13 @@
+import { hasLocale } from "next-intl";
+import { getRequestConfig } from "next-intl/server";
+import { routing } from "./routing";
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  const requested = await requestLocale;
+  const locale = hasLocale(routing.locales, requested) ? requested : routing.defaultLocale;
+
+  return {
+    locale,
+    messages: (await import(`../../messages/${locale}.json`)).default,
+  };
+});

package/template/apps/web/src/i18n/routing.ts

@@ -0,0 +1,9 @@
+import { createNavigation } from "next-intl/navigation";
+import { defineRouting } from "next-intl/routing";
+
+export const routing = defineRouting({
+  locales: ["en"],
+  defaultLocale: "en",
+});
+
+export const { Link, redirect, usePathname, useRouter, getPathname } = createNavigation(routing);

package/template/apps/web/src/i18n/useDateFnsLocale.ts

@@ -0,0 +1,15 @@
+"use client";
+
+import { useLocale } from "next-intl";
+import { enUS, it } from "date-fns/locale";
+import type { Locale } from "date-fns";
+
+const dateFnsLocales: Record<string, Locale> = {
+  en: enUS,
+  it: it,
+};
+
+export function useDateFnsLocale(): Locale {
+  const locale = useLocale();
+  return dateFnsLocales[locale] ?? enUS;
+}