@arch-cadre/panel 1.0.6 → 1.0.9

package/src/index.ts

@@ -0,0 +1,135 @@
+import type { SystemEvent } from "@arch-cadre/core/server";
+import { db, eventBus } from "@arch-cadre/core/server";
+import type { IModule } from "@arch-cadre/modules";
+import manifest from "../manifest.json";
+import { navigation } from "./navigation.js";
+import { apiRoutes, privateRoutes, publicRoutes } from "./routes.js";
+import { activityLogsTable } from "./schema/activity-log.js";
+import ActivityStatsWidget from "./ui/activity-log/components/ActivityStatsWidget.js";
+import RecentLogsWidget from "./ui/activity-log/components/RecentLogsWidget.js";
+import { UserDropdownLink } from "./ui/components/profile/link.js";
+import WelcomeBackUserWidget from "./ui/dashboard/widgets/WelcomeBackUserWidget.js";
+
+export interface ActivityCreatePayload {
+  action: string;
+  description: string;
+  userId?: string;
+  metadata?: any;
+}
+
+const kryoPanelModule: IModule = {
+  manifest,
+
+  init: async () => {
+    console.log("[ActivityLog] Registering core system listeners...");
+
+    // Helper to log any event
+    const logEvent = async (
+      event: SystemEvent<any>,
+      descriptionOverride?: string,
+    ) => {
+      try {
+        const userId = event.payload?.userId || undefined;
+        await db.insert(activityLogsTable).values({
+          userId,
+          action: event.type,
+          description: descriptionOverride || `System event: ${event.type}`,
+          metadata: event.payload,
+        });
+      } catch (error) {
+        console.error(
+          `[ActivityLog] Failed to save log for ${event.type}:`,
+          error,
+        );
+      }
+    };
+
+    // 1. Existing manual activity creation
+    eventBus.subscribe(
+      "activity.create",
+      "activity-log-manual",
+      async (event) => {
+        const { action, description, userId, metadata } = event.payload as any;
+        await db
+          .insert(activityLogsTable)
+          .values({ userId, action, description, metadata });
+      },
+    );
+
+    // 2. Auth Events
+    eventBus.subscribe("auth:login", "activity-log-auth", (e) =>
+      logEvent(e, `User logged in: ${(e.payload as any).email}`),
+    );
+    eventBus.subscribe("auth:signup", "activity-log-auth", (e) =>
+      logEvent(e, `New user registered: ${(e.payload as any).email}`),
+    );
+    eventBus.subscribe("auth:logout", "activity-log-auth", (e) =>
+      logEvent(e, `User logged out: ${(e.payload as any).email}`),
+    );
+
+    // 3. System Module Events
+    eventBus.subscribe("system:module:toggle", "activity-log-system", (e) =>
+      logEvent(
+        e,
+        `Module "${(e.payload as any).moduleId}" ${(e.payload as any).isEnabled ? "enabled" : "disabled"}`,
+      ),
+    );
+    eventBus.subscribe("system:module:upload", "activity-log-system", (e) =>
+      logEvent(e, `New module uploaded: "${(e.payload as any).moduleId}"`),
+    );
+  },
+
+  onDisable: async () => {
+    console.log("[ActivityLog] Unsubscribing listeners...");
+    eventBus.unsubscribe("activity.create", "activity-log-manual");
+    eventBus.unsubscribe("auth:login", "activity-log-auth");
+    eventBus.unsubscribe("auth:signup", "activity-log-auth");
+    eventBus.unsubscribe("auth:logout", "activity-log-auth");
+    eventBus.unsubscribe("system:module:toggle", "activity-log-system");
+    eventBus.unsubscribe("system:module:upload", "activity-log-system");
+  },
+
+  widgets: [
+    {
+      id: "welcome-back-user",
+      name: "Welcome Back User",
+      area: "dashboard-stats",
+      component: WelcomeBackUserWidget,
+      priority: 0,
+    },
+    {
+      id: "recent-activity",
+      name: "Recent Activity",
+      area: "dashboard-main",
+      component: RecentLogsWidget,
+      priority: 10,
+    },
+    {
+      id: "activity-stats",
+      name: "Activity Stats",
+      area: "dashboard-stats",
+      component: ActivityStatsWidget,
+      priority: 10,
+    },
+  ],
+
+  routes: {
+    public: publicRoutes,
+    private: privateRoutes,
+    api: apiRoutes,
+  },
+
+  navigation,
+
+  extensions: [
+    {
+      id: "user-settings-link",
+      targetModule: "panel",
+      point: "app-user:extra-link",
+      component: UserDropdownLink,
+      priority: 50,
+    },
+  ],
+};
+
+export default kryoPanelModule;

package/src/intl.d.ts

@@ -0,0 +1,9 @@
+import type messages from "../locales/en/global.json";
+
+type JsonDataType = typeof messages;
+
+declare module "@arch-cadre/intl" {
+  export interface IntlMessages extends JsonDataType {}
+}
+
+export {};

package/src/navigation.ts

@@ -0,0 +1,57 @@
+import { i18n } from "@arch-cadre/intl";
+import type { ModuleNavigation } from "@arch-cadre/modules";
+
+export const navigation: ModuleNavigation = {
+  admin: {
+    [i18n("General")]: [
+      {
+        id: "dashboard",
+        title: i18n("Dashboard"),
+        url: "/",
+        icon: "solar:widget-bold-duotone",
+      },
+      {
+        id: "settings",
+        title: i18n("Settings"),
+        url: "/settings",
+        icon: "solar:settings-bold-duotone",
+      },
+    ],
+    [i18n("System")]: [
+      {
+        id: "module-manager-nav",
+        title: i18n("Module Manager"),
+        url: "/modules",
+        icon: "solar:settings-bold-duotone",
+        // roles: ["admin"],
+        permissions: ["system:modules"],
+      },
+      {
+        id: "activity-logs-nav",
+        title: i18n("Activity Logs"),
+        url: "/activity-logs",
+        icon: "solar:condicioner-2-bold-duotone",
+        // roles: ["admin"],
+        permissions: ["system:activity-logs"],
+      },
+      {
+        id: "rbac-admin-nav",
+        title: i18n("Roles & Permissions"),
+        url: "/rbac",
+        icon: "solar:shield-keyhole-bold-duotone",
+        // roles: ["admin"],
+        permissions: ["system:rbac"],
+      },
+    ],
+  },
+  settings: {
+    [i18n("Panel Core")]: [
+      {
+        id: "kryo-config",
+        title: i18n("Panel Core Settings"),
+        url: "/settings/panel/config",
+        icon: "solar:tuning-bold-duotone",
+      },
+    ],
+  },
+};

package/src/routes.ts

@@ -0,0 +1,107 @@
+import type {
+  ApiRouteDefinition,
+  PrivateRouteDefinition,
+  PublicRouteDefinition,
+} from "@arch-cadre/modules";
+import { getKryoPathPrefix, getModuleStatus } from "@arch-cadre/modules/server";
+import dynamic from "next/dynamic";
+import { NextResponse } from "next/server";
+import ActivityLogPage from "./ui/activity-log/pages/log-list.js";
+import ProfileSettingsPage from "./ui/components/profile/page.js";
+import ModuleDocsPage from "./ui/modules/docs/page.js";
+import ModuleAdminPage from "./ui/modules/page.js";
+import RbacAdminPage from "./ui/rbac/pages/rbac-admin.js";
+import SessionsSettingsPage from "./ui/session-manager/pages/sessions-page.js";
+
+const KryoLayout = dynamic(() => import("./ui/layout.js"));
+const DashboardPage = dynamic(() => import("./ui/dashboard/page.js"));
+const KryoPanelSettingsPage = dynamic(() => import("./ui/settings-page.js"));
+const GlobalSettingsPage = dynamic(() => import("./ui/settings/page.js"));
+
+export const publicRoutes: PublicRouteDefinition[] = [];
+
+export const privateRoutes: PrivateRouteDefinition[] = [
+  {
+    path: "/", // Mapuje na prefiks (np. /kryo)
+    component: DashboardPage,
+    layout: KryoLayout,
+    auth: true,
+    roles: ["admin", "user"],
+  },
+  {
+    path: "/profile",
+    component: ProfileSettingsPage,
+    auth: true,
+    roles: ["admin", "user"],
+  },
+  {
+    id: "user-sessions",
+    path: "/sessions",
+    component: SessionsSettingsPage,
+    layout: KryoLayout,
+    auth: true,
+    roles: ["admin", "user"],
+  },
+  {
+    id: "activity-logs",
+    path: "/activity-logs",
+    component: ActivityLogPage,
+    layout: KryoLayout,
+    auth: true,
+    permissions: ["system:activity-logs"],
+  },
+  {
+    id: "rbac-admin",
+    path: "/rbac",
+    component: RbacAdminPage,
+    layout: KryoLayout,
+    auth: true,
+    roles: ["admin", "user"],
+    permissions: ["system:rbac"],
+  },
+  {
+    path: "/settings",
+    component: GlobalSettingsPage,
+    layout: KryoLayout,
+    auth: true,
+    roles: ["admin", "user"],
+  },
+  {
+    path: "/settings/panel/config",
+    component: KryoPanelSettingsPage,
+    layout: KryoLayout,
+    auth: true,
+    roles: ["admin", "user"],
+  },
+  {
+    id: "module-admin",
+    path: "/modules",
+    component: ModuleAdminPage,
+    layout: KryoLayout,
+    auth: true,
+    roles: ["admin", "user"],
+    permissions: ["system:modules"],
+  },
+  {
+    id: "module-docs",
+    path: "/modules/:id/docs",
+    component: ModuleDocsPage,
+    layout: KryoLayout,
+    auth: true,
+    roles: ["admin", "user"],
+  },
+];
+
+export const apiRoutes: ApiRouteDefinition[] = [
+  {
+    id: "module-status-api",
+    path: "/api/system/modules/:id/status",
+    auth: true,
+    roles: ["admin", "user"],
+    permissions: ["system:modules"],
+    handler: async (_req, { params }) => {
+      const status = await getModuleStatus(params.id);
+      return NextResponse.json(status);
+    },
+  },
+];

package/src/schema/activity-log.ts

@@ -0,0 +1,16 @@
+import { userTable } from "@arch-cadre/core/server";
+import { jsonb, pgTable, text, timestamp } from "drizzle-orm/pg-core";
+
+export const activityLogsTable = pgTable("activity_logs", {
+  id: text("id")
+    .$defaultFn(() => crypto.randomUUID())
+    .notNull()
+    .primaryKey(),
+  userId: text("user_id").references(() => userTable.id, {
+    onDelete: "set null",
+  }),
+  action: text("action").notNull(), // np. "blog.post.created"
+  description: text("description").notNull(), // np. "Użytkownik dodał komentarz"
+  metadata: jsonb("metadata"), // dodatkowe dane (np. ID posta)
+  createdAt: timestamp("created_at", { precision: 3 }).notNull().defaultNow(),
+});

package/src/schema.ts

@@ -0,0 +1 @@
+export * from "./schema/activity-log.js";

package/src/types.ts

@@ -0,0 +1,18 @@
+export type {
+  SidebarGroupType,
+  SidebarMenuItemType,
+  SidebarMenuType,
+} from "@arch-cadre/modules";
+
+/**
+ *Action result.
+ */
+export interface ActionResult<T = any> {
+  success?: boolean;
+  error?: boolean;
+  message?: string;
+  errors?: {
+    [K in keyof T]?: string[];
+  };
+  inputs?: T;
+}

package/src/ui/activity-log/components/ActivityStatsWidget.tsx

@@ -0,0 +1,37 @@
+import { db } from "@arch-cadre/core/server";
+import { getTranslation } from "@arch-cadre/intl/server";
+import { Card, CardContent, CardHeader, CardTitle } from "@arch-cadre/ui";
+import { sql } from "drizzle-orm";
+import { Activity } from "lucide-react";
+import * as React from "react";
+import { activityLogsTable } from "../../../schema/activity-log.js";
+
+export default async function ActivityStatsWidget() {
+  const { t } = await getTranslation();
+
+  const [result] = await db
+    .select({
+      count: sql<number>`count(*)`,
+    })
+    .from(activityLogsTable)
+    .where(sql`DATE(${activityLogsTable.createdAt}) = CURRENT_DATE`);
+
+  const count = result?.count || 0;
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">
+          {t("Events Today")}
+        </CardTitle>
+        <Activity className="h-4 w-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{count}</div>
+        <p className="text-xs text-muted-foreground">
+          {t("System activities recorded today")}
+        </p>
+      </CardContent>
+    </Card>
+  );
+}

package/src/ui/activity-log/components/RecentLogsWidget.tsx

@@ -0,0 +1,74 @@
+import { db, userTable } from "@arch-cadre/core/server";
+import { getTranslation } from "@arch-cadre/intl/server";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@arch-cadre/ui";
+import { desc, eq } from "drizzle-orm";
+import * as React from "react";
+import { activityLogsTable } from "../../../schema/activity-log.js";
+
+export default async function RecentLogsWidget() {
+  const { t } = await getTranslation();
+
+  const logs = await db
+    .select({
+      id: activityLogsTable.id,
+      action: activityLogsTable.action,
+      description: activityLogsTable.description,
+      createdAt: activityLogsTable.createdAt,
+      user: {
+        name: userTable.name,
+        image: userTable.image,
+      },
+    })
+    .from(activityLogsTable)
+    .leftJoin(userTable, eq(activityLogsTable.userId, userTable.id))
+    .orderBy(desc(activityLogsTable.createdAt))
+    .limit(5);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t("Recent Activity")}</CardTitle>
+        <CardDescription>
+          {t("The latest events from your system.")}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-8">
+        {logs.map((log) => (
+          <div key={log.id} className="flex items-center gap-4">
+            <Avatar className="h-9 w-9">
+              <AvatarImage src={log.user?.image || ""} alt="Avatar" />
+              <AvatarFallback>
+                {log.user?.name?.substring(0, 2).toUpperCase() || "SY"}
+              </AvatarFallback>
+            </Avatar>
+            <div className="grid gap-1">
+              <p className="text-sm font-medium leading-none">
+                {log.description}
+              </p>
+              <p className="text-sm text-muted-foreground">
+                {new Date(log.createdAt).toLocaleString()}
+              </p>
+            </div>
+            <div className="ml-auto font-medium text-xs text-muted-foreground">
+              {log.action}
+            </div>
+          </div>
+        ))}
+        {logs.length === 0 && (
+          <div className="text-center py-4 text-muted-foreground">
+            {t("No recent activity found.")}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/ui/activity-log/pages/log-list.tsx

@@ -0,0 +1,91 @@
+import { getTranslation } from "@arch-cadre/intl/server";
+import { Icon } from "@arch-cadre/ui";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@arch-cadre/ui/components/table";
+import * as React from "react";
+import { getActivityLogs } from "../../../actions/activity-log/index.js";
+
+export default async function ActivityLogPage() {
+  const logs = await getActivityLogs();
+
+  const { t } = await getTranslation();
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-1">
+        <h2 className="text-3xl font-bold tracking-tight">{t("Activity")}</h2>
+        <p className="text-muted-foreground text-sm">
+          {t("Real-time audit log of all system events.")}
+        </p>
+      </div>
+
+      <div className="border rounded-xl bg-card overflow-hidden">
+        <Table>
+          <TableHeader className="bg-muted/50">
+            <TableRow>
+              <TableHead>{t("Event")}</TableHead>
+              <TableHead>{t("User")}</TableHead>
+              <TableHead>{t("Details")}</TableHead>
+              <TableHead className="text-right">{t("Time")}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {logs.map(({ log, user }) => (
+              <TableRow key={log.id}>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <div
+                      className={`p-1.5 rounded-md ${log.action.includes("created") ? "bg-green-500/10 text-green-600" : "bg-blue-500/10 text-blue-600"}`}
+                    >
+                      <Icon
+                        icon={
+                          log.action.includes("comment")
+                            ? "solar:chat-line-broken"
+                            : "solar:file-text-broken"
+                        }
+                        className="size-4"
+                      />
+                    </div>
+                    <span className="font-mono text-xs font-bold">
+                      {log.action}
+                    </span>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <div className="flex flex-col">
+                    <span className="text-sm font-medium">
+                      {user?.name || t("System")}
+                    </span>
+                    <span className="text-[10px] text-muted-foreground">
+                      {user?.email || t("automated-task")}
+                    </span>
+                  </div>
+                </TableCell>
+                <TableCell className="text-sm">{log.description}</TableCell>
+                <TableCell className="text-right text-xs text-muted-foreground">
+                  {new Date(log.createdAt).toLocaleString()}
+                </TableCell>
+              </TableRow>
+            ))}
+            {logs.length === 0 && (
+              <TableRow>
+                <TableCell
+                  colSpan={4}
+                  className="text-center py-20 text-muted-foreground italic"
+                >
+                  {t("No activity recorded yet.")}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

package/src/ui/components/app-content.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { ScrollArea } from "@arch-cadre/ui/components/scroll-area";
+import * as React from "react";
+import { type ReactNode, useEffect, useState } from "react";
+import { AppHeader } from "./app-header.js";
+
+export function AppContent({
+  children,
+  breadcrumbs,
+}: {
+  children?: ReactNode;
+  breadcrumbs?: ReactNode;
+}) {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setIsScrolled(window.scrollY > 64);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  // handle scroll to add shadow to header/footer
+  const setScrolled = (e: React.UIEvent<HTMLDivElement>) => {
+    const scrollTop = e.currentTarget.scrollTop;
+
+    if (scrollTop > 20) {
+      setIsScrolled(true);
+    } else {
+      setIsScrolled(false);
+    }
+  };
+
+  return (
+    <main className="bg-sidebar h-svh overflow-hidden lg:p-2 w-full">
+      <div className="lg:border squircle overflow-hidden flex flex-col items-center justify-start h-full w-full bg-background">
+        <AppHeader isScrolled={isScrolled} breadcrumbs={breadcrumbs} />
+        <ScrollArea
+          onScroll={(e) => setScrolled(e)}
+          className="h-[calc(100svh-56px-var(--header-height))] w-full flex-1"
+          orientation="vertical"
+        >
+          <div className="min-h-[calc(100svh-56px-var(--header-height))] p-4">
+            {children}
+          </div>
+        </ScrollArea>
+      </div>
+    </main>
+  );
+}

package/src/ui/components/app-header.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { LanguageSwitcher } from "@arch-cadre/ui";
+import { Logo } from "@arch-cadre/ui/brand/logo";
+import { Button } from "@arch-cadre/ui/components/button";
+import { Separator } from "@arch-cadre/ui/components/separator";
+import { useSidebar } from "@arch-cadre/ui/components/sidebar";
+import { cn } from "@arch-cadre/ui/lib/utils";
+import { Icon } from "@iconify/react";
+import Link from "next/link";
+import type { ReactNode } from "react";
+import * as React from "react";
+
+export function AppHeader({
+  breadcrumbs,
+  isScrolled,
+}: {
+  breadcrumbs?: ReactNode;
+  isScrolled: boolean;
+}) {
+  const { toggleSidebar } = useSidebar();
+  return (
+    <header
+      className={cn(
+        "sticky top-0 z-50",
+        "flex w-full items-center h-(--header-height)",
+        "transition-all",
+        isScrolled ? "bg-background shadow-xs " : "",
+      )}
+    >
+      <div className="flex h-[var(--header-height)] w-full items-center">
+        <div className="-mr-px flex shrink-0 items-center gap-2 px-4">
+          <Button
+            className="h-8 w-8 cursor-pointer"
+            variant="ghost"
+            size="icon"
+            onClick={toggleSidebar}
+            type="button"
+          >
+            <Icon icon="solar:sidebar-minimalistic-broken" />
+          </Button>
+        </div>
+
+        <Separator orientation="vertical" className="mr-2 h-4" />
+
+        <div className="flex flex-1 items-center gap-2 px-4">
+          <Link
+            href="/app"
+            className="md:hidden items-center gap-x-2 mr-4 md:mr-0 flex"
+          >
+            <Logo className="h-auto w-[134px]" aria-hidden={true} />
+          </Link>
+
+          {/* BreadCrumbs Slot */}
+          {breadcrumbs}
+
+          <div className="ml-auto w-auto flex gap-x-3">
+            {/* <NotificationMenu /> */}
+            <LanguageSwitcher />
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}