@arch-cadre/panel 1.0.6 → 1.0.9

package/src/ui/components/profile/components.tsx

@@ -0,0 +1,311 @@
+"use client";
+
+import type { FullUser } from "@arch-cadre/core";
+// import { cn, getInitials } from "@arch-cadre/core";
+import { useTranslation } from "@arch-cadre/intl";
+import { cn, Icon, toast } from "@arch-cadre/ui";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@arch-cadre/ui/components/avatar";
+import { Button } from "@arch-cadre/ui/components/button";
+import { Input } from "@arch-cadre/ui/components/input";
+import { Label } from "@arch-cadre/ui/components/label";
+import * as React from "react";
+import { useActionState, useRef, useState, useTransition } from "react";
+// import { mutate } from "swr";
+import {
+  updateEmailAction,
+  updatePasswordAction,
+  updateProfileAction,
+} from "../../../actions/profile.js";
+
+// Update Profile Form
+export function UpdateProfileForm({ user }: { user: FullUser }) {
+  const { t } = useTranslation();
+  const [name, setName] = useState(user.name);
+  const [isPending, startTransition] = useTransition();
+  const [image, setImage] = useState<string | null>(user.image);
+  const [avatar, setAvatar] = useState<File | undefined>(undefined);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      // if (file.size > 1048576) {
+      //   alert("File size exceeds 1MB limit");
+      //   return;
+      // }
+      setAvatar(file);
+
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        setImage(event.target?.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const triggerFileInput = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      toast.error(t("Name is required"));
+      return;
+    }
+
+    startTransition(async () => {
+      const result = await updateProfileAction(name.trim(), avatar);
+      if (result.error) {
+        toast.error(result.error);
+      } else {
+        // mutate("user");
+        // toast.success("Profile updated successfully");
+        toast.success(result.message);
+      }
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="grid grid-cols-12">
+        <div className="col-span-3 flex items-center flex-col">
+          <div className="relative mb-2">
+            <Avatar className="h-24 w-24 border-2 border-muted">
+              <AvatarImage src={image || undefined} alt={name} />
+              <AvatarFallback className="text-3xl">
+                {name.charAt(0)}
+              </AvatarFallback>
+            </Avatar>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="absolute -top-0.5 -right-0.5 bg-accent rounded-full border-[3px] border-background h-8 w-8 hover:bg-accent"
+              onClick={() => {
+                if (image) {
+                  setImage(null);
+                  if (fileInputRef.current) {
+                    fileInputRef.current.value = "";
+                  }
+                } else {
+                  triggerFileInput();
+                }
+              }}
+            >
+              {image ? (
+                <Icon
+                  icon="solar:trash-bin-trash-broken"
+                  className="h-4 w-4 text-muted-foreground"
+                />
+              ) : (
+                <Icon
+                  icon="solar:add-circle-broken"
+                  className="h-3 w-3 text-muted-foreground"
+                />
+              )}
+              <span className="sr-only">
+                {image ? t("Remove image") : t("Upload image")}
+              </span>
+            </Button>
+          </div>
+
+          <p className="text-center font-medium">{t("Upload Image")}</p>
+          <p className="text-center text-sm text-muted-foreground">
+            {t("Max file size: 1MB")}
+          </p>
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            accept="image/*"
+            className="hidden"
+          />
+        </div>
+        <div className="col-span-9 space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">{t("Display Name")}</Label>
+            <Input
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={t("Your name")}
+              disabled={isPending}
+            />
+          </div>
+        </div>
+      </div>
+
+      <Button type="submit" disabled={isPending}>
+        {isPending ? (
+          <>
+            <Icon
+              icon="solar:refresh-broken"
+              className="h-4 w-4 mr-2 animate-spin"
+            />
+            {t("Saving...")}
+          </>
+        ) : (
+          <>
+            <Icon icon="solar:diskette-broken" className="h-4 w-4 mr-2" />
+            {t("Save Changes")}
+          </>
+        )}
+      </Button>
+    </form>
+  );
+}
+
+// Update Password Form
+const initialUpdatePasswordState = {
+  message: "",
+  error: false,
+};
+
+export function UpdatePasswordForm() {
+  const [state, action, isPending] = useActionState(
+    updatePasswordAction,
+    initialUpdatePasswordState,
+  );
+  const { t } = useTranslation();
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  return (
+    <form action={action} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="current-password">{t("Current Password")}</Label>
+        <Input
+          type="password"
+          id="current-password"
+          name="password"
+          value={currentPassword}
+          onChange={(e) => setCurrentPassword(e.target.value)}
+          autoComplete="current-password"
+          placeholder={t("Enter current password")}
+          required
+          disabled={isPending}
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="new-password">{t("New Password")}</Label>
+        <Input
+          type="password"
+          id="new-password"
+          name="new_password"
+          value={newPassword}
+          onChange={(e) => setNewPassword(e.target.value)}
+          autoComplete="new-password"
+          placeholder={t("Enter new password")}
+          required
+          disabled={isPending}
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="confirm-password">{t("Confirm New Password")}</Label>
+        <Input
+          type="password"
+          id="confirm-password"
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          autoComplete="new-password"
+          placeholder={t("Confirm new password")}
+          required
+          disabled={isPending}
+        />
+      </div>
+      {state.message && (
+        <p
+          className={cn(
+            "text-sm",
+            state.error ? "text-destructive" : "text-green-600",
+          )}
+        >
+          {state.message}
+        </p>
+      )}
+      <Button type="submit" disabled={isPending}>
+        {isPending ? (
+          <>
+            <Icon
+              icon="solar:refresh-broken"
+              className="h-4 w-4 mr-2 animate-spin"
+            />
+            {t("Updating...")}
+          </>
+        ) : (
+          <>
+            <Icon icon="solar:key-broken" className="h-4 w-4 mr-2" />
+            {t("Update Password")}
+          </>
+        )}
+      </Button>
+    </form>
+  );
+}
+
+// Update Email Form
+const initialUpdateEmailState = {
+  message: "",
+  error: false,
+};
+
+export function UpdateEmailForm({ user }: { user: FullUser }) {
+  const [state, action, isPending] = useActionState(
+    updateEmailAction,
+    initialUpdateEmailState,
+  );
+  const { t } = useTranslation();
+  const [email, setEmail] = useState(user.email);
+
+  return (
+    <form action={action} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="new-email">{t("New Email Address")}</Label>
+        <Input
+          type="email"
+          id="new-email"
+          name="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder={t("Enter new email address")}
+          required
+          disabled={isPending}
+        />
+      </div>
+      {state.message && (
+        <p
+          className={cn(
+            "text-sm",
+            state.error ? "text-destructive" : "text-green-600",
+          )}
+        >
+          {state.message}
+        </p>
+      )}
+      <Button type="submit" disabled={isPending}>
+        {isPending ? (
+          <>
+            <Icon
+              icon="solar:refresh-broken"
+              className="h-4 w-4 mr-2 animate-spin"
+            />
+            {t("Updating...")}
+          </>
+        ) : (
+          <>
+            <Icon icon="solar:letter-broken" className="h-4 w-4 mr-2" />
+            {t("Update Email")}
+          </>
+        )}
+      </Button>
+    </form>
+  );
+}
+
+// Recovery Code Section removed - moved to module

package/src/ui/components/profile/link.tsx

@@ -0,0 +1,36 @@
+"use client";
+import * as React from "react";
+
+import { useTranslation } from "@arch-cadre/intl";
+import { Icon } from "@arch-cadre/ui";
+import {
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from "@arch-cadre/ui/components/dropdown-menu";
+import Link from "next/link";
+
+export function UserDropdownLink() {
+  const root = "/kryo";
+
+  const { t } = useTranslation();
+  return (
+    <>
+      {/*<DropdownMenuSeparator />*/}
+      <DropdownMenuGroup>
+        <Link href={`${root}/profile`}>
+          <DropdownMenuItem className="cursor-pointer ">
+            <Icon icon="solar:user-circle-broken" />
+            {t("Profile Settings")}
+          </DropdownMenuItem>
+        </Link>
+        <Link href={`${root}/sessions`}>
+          <DropdownMenuItem className="cursor-pointer ">
+            <Icon icon="solar:monitor-broken" />
+            {t("Manage Device Sessions")}
+          </DropdownMenuItem>
+        </Link>
+      </DropdownMenuGroup>
+    </>
+  );
+}

package/src/ui/components/profile/page.tsx

@@ -0,0 +1,45 @@
+import { checkSecurity, getCurrentSession } from "@arch-cadre/core/server";
+import { getTranslation } from "@arch-cadre/intl/server";
+// import { ExtensionPointClient } from "@arch-cadre/modules";
+import { redirect } from "next/navigation";
+import * as React from "react";
+import {
+  UpdateEmailForm,
+  UpdatePasswordForm,
+  UpdateProfileForm,
+} from "./components.js";
+
+export default async function ProfileSettingsPage() {
+  const { session, user } = await getCurrentSession();
+  const { t } = await getTranslation();
+
+  if (session === null || user === null) {
+    return redirect("/signin");
+  }
+
+  const security = await checkSecurity(session, user);
+
+  if (!security.satisfied && security.redirect) {
+    return redirect(security.redirect);
+  }
+
+  return (
+    <div className="space-y-6 max-w-2xl">
+      <div>
+        <h2 className="text-2xl font-bold">{t("Profile Settings")}</h2>
+        <p className="text-muted-foreground">
+          {t("Manage your account settings and profile information.")}
+        </p>
+      </div>
+
+      <UpdateProfileForm user={user} />
+      <UpdateEmailForm user={user} />
+      <UpdatePasswordForm />
+
+      {/* <ExtensionPointClient
+        module="user-profile"
+        point="settings:extra-sections"
+      /> */}
+    </div>
+  );
+}

package/src/ui/components/sidebar-slot.tsx

@@ -0,0 +1,47 @@
+import type { SidebarGroupType } from "@arch-cadre/modules";
+import { getKryoModuleNavigationGrouped } from "@arch-cadre/modules/server";
+import * as React from "react";
+import { AppSidebar } from "./app-sidebar.js";
+
+const staticData: SidebarGroupType[] = [];
+
+export default async function SidebarSlot() {
+  const moduleGroups = await getKryoModuleNavigationGrouped("admin");
+
+  // 1. Inicjalizujemy mapę grup danymi statycznymi
+  const groupsMap = new Map<string, SidebarGroupType>();
+
+  for (const group of staticData) {
+    groupsMap.set(group.title, { ...group });
+  }
+
+  // 2. Scalamy grupy dynamiczne z modułów
+  for (const [title, items] of Object.entries(moduleGroups)) {
+    if (groupsMap.has(title)) {
+      const existing = groupsMap.get(title)!;
+      for (const item of items as any[]) {
+        if (!existing.items.some((i) => i.url === item.url)) {
+          existing.items.push(item);
+        }
+      }
+    } else {
+      groupsMap.set(title, {
+        title,
+        items: items as any,
+      });
+    }
+  }
+
+  // 3. Przygotowujemy grupy do wyświetlenia i sortujemy
+  const finalData = Array.from(groupsMap.values());
+
+  finalData.sort((a, b) => a.title.localeCompare(b.title));
+
+  // 4. Budujemy strukturę finalną dla AppSidebar
+  const sidebarData: SidebarGroupType[] = finalData.map(({ title, items }) => ({
+    title,
+    items,
+  }));
+
+  return <AppSidebar isMain={true} data={sidebarData} />;
+}

package/src/ui/dashboard/page.tsx

@@ -0,0 +1,17 @@
+import { WidgetArea } from "@arch-cadre/modules";
+import * as React from "react";
+
+export default async function Page() {
+  return (
+    <div className="flex flex-col gap-6">
+      <WidgetArea
+        area="dashboard-stats"
+        className="grid grid-cols-1 md:grid-cols-3 gap-6"
+      />
+      <WidgetArea
+        area="dashboard-main"
+        className="grid grid-cols-1 md:grid-cols-2 gap-6"
+      />
+    </div>
+  );
+}

package/src/ui/dashboard/widgets/WelcomeBackUserWidget.tsx

@@ -0,0 +1,47 @@
+"use server";
+
+import { getCurrentSession } from "@arch-cadre/core/server";
+import { getTranslation } from "@arch-cadre/intl/server";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@arch-cadre/ui";
+import * as React from "react";
+
+export default async function WelcomeBackUserWidget() {
+  const { user } = await getCurrentSession();
+  const { t } = await getTranslation();
+
+  if (!user) return null;
+
+  return (
+    <Card className="col-span-1 md:col-span-2 lg:col-span-1">
+      <CardHeader className="flex flex-row items-center gap-4 pb-2">
+        <Avatar className="h-12 w-12">
+          <AvatarImage src={user.image || ""} alt={user.name || "User"} />
+          <AvatarFallback>
+            {user.name?.substring(0, 2).toUpperCase() || "U"}
+          </AvatarFallback>
+        </Avatar>
+        <div className="flex flex-col">
+          <CardTitle className="text-lg font-bold">
+            {t("Welcome back, {name}!", { name: user.name })}
+          </CardTitle>
+          <p className="text-sm text-muted-foreground">
+            {t("It's good to see you again.")}
+          </p>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="text-sm text-muted-foreground">
+          {t("You are logged in as {email}", { email: user.email })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/ui/error.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useTranslation } from "@arch-cadre/intl";
+import { Button } from "@arch-cadre/ui/components/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@arch-cadre/ui/components/empty";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { useEffect } from "react";
+
+export default function ErrorPage({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const { t } = useTranslation();
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  const dbError = error.message.startsWith("DB_ERROR");
+  const unauthorizedError = error.message.startsWith("UNAUTHORIZED");
+  const otherError = !dbError && !unauthorizedError;
+
+  return (
+    <div className="flex-1 flex w-full items-center justify-center">
+      <div className="flex w-full justify-center h-[calc(100svh-56px-var(--header-height))] items-center">
+        <div>
+          <Empty>
+            <EmptyHeader className="max-w-xl">
+              <EmptyTitle className="font-black font-mono text-5xl mb-5">
+                {t("Error")}
+              </EmptyTitle>
+              <EmptyDescription className="text-nowrap">
+                {t("An error occurred while loading the page.")}
+                {dbError && (
+                  <>
+                    <p>{t("errors.db_error")}</p>
+                    <ul className="list-inside list-disc text-sm">
+                      <li>{t("Check database connection")}</li>
+                      <li>{t("Check core settings")}</li>
+                      <li>{t("Check module dependencies")}</li>
+                    </ul>
+                  </>
+                )}
+                {unauthorizedError && (
+                  <>
+                    <p>{t("Unauthorized")}</p>
+                    <ul className="list-inside list-disc text-sm">
+                      <li>
+                        {t("Unauthorized access to the requested resource")}
+                      </li>
+                      <li>{t("Check permissions for the current user")}</li>
+                    </ul>
+                  </>
+                )}
+                {otherError && <p>{error.message ?? t("Unknown error")}</p>}
+              </EmptyDescription>
+            </EmptyHeader>
+            <EmptyContent>
+              <Button
+                variant="destructive"
+                className="mt-4"
+                onClick={() => reset()}
+              >
+                <Icon icon="solar:refresh-circle-broken" />
+                {t("Try Again")}
+              </Button>
+            </EmptyContent>
+          </Empty>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/layout.tsx

@@ -0,0 +1,54 @@
+"use server";
+
+import { checkSecurity, getCurrentSession } from "@arch-cadre/core/server";
+import { SidebarProvider } from "@arch-cadre/ui/components/sidebar";
+import { AccessDenied } from "@arch-cadre/ui/shared/access-denied";
+import { redirect } from "next/navigation";
+import * as React from "react";
+import { AppContent } from "./components/app-content.js";
+import BreadcrumbSlot from "./components/breadcrumb-slot.js";
+import SidebarSlot from "./components/sidebar-slot.js";
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const { user, session } = await getCurrentSession();
+
+  if (session === null || user === null) {
+    return redirect("/signin");
+  }
+
+  // Security requirements check (EXTENSIBLE - handles email, 2FA, etc.)
+  const security = await checkSecurity(session, user, ["admin", "user"]);
+
+  if (!security.satisfied) {
+    if (security.redirect && security.redirect !== "/kryo") {
+      return redirect(security.redirect);
+    }
+
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-background w-full">
+        <AccessDenied />
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-sidebar [--header-height:calc(--spacing(14))]">
+      <SidebarProvider
+        style={
+          {
+            "--sidebar": "transparent",
+            "--sidebar-width": "280px",
+          } as React.CSSProperties
+        }
+      >
+        <SidebarSlot />
+
+        <AppContent breadcrumbs={<BreadcrumbSlot />}>{children}</AppContent>
+      </SidebarProvider>
+    </div>
+  );
+}