@hed-hog/core 0.0.321 → 0.0.322

package/hedhog/frontend/app/users/permissions.tsx.ejs

@@ -1,15 +1,18 @@
 'use client';
 
 import { EmptyState } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { Role } from '@hed-hog/api-types';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { Loader2, ShieldCheck } from 'lucide-react';
+import { Eye, Loader2, Search, ShieldCheck } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { toast } from 'sonner';
+import { UserAccessSheet } from './user-access-sheet';
 
 type CustomRole = Role & {
   isAssigned: boolean;
@@ -17,16 +20,20 @@ type CustomRole = Role & {
 
 type PermissionsSectionProps = {
   userId: number;
+  userName?: string;
   onRoleChange?: () => void;
 };
 
 export function PermissionsSection({
   userId,
+  userName,
   onRoleChange,
 }: PermissionsSectionProps) {
   const t = useTranslations('core.UserPage');
   const { request, currentLocaleCode } = useApp();
   const [togglingRoleId, setTogglingRoleId] = useState<number | null>(null);
+  const [search, setSearch] = useState('');
+  const [accessSheetOpen, setAccessSheetOpen] = useState(false);
 
   const {
     data: userRoles = [],
@@ -71,6 +78,16 @@ export function PermissionsSection({
     }
   };
 
+  const filteredRoles = userRoles.filter((role) => {
+    if (!search.trim()) return true;
+    const q = search.toLowerCase();
+    return (
+      role.name?.toLowerCase().includes(q) ||
+      role.slug?.toLowerCase().includes(q) ||
+      role.description?.toLowerCase().includes(q)
+    );
+  });
+
   if (isLoadingUserRoles) {
     return (
       <div className="flex items-center justify-center py-8">
@@ -93,61 +110,98 @@ export function PermissionsSection({
   }
 
   return (
-    <div className="space-y-2">
-      {userRoles.map((role, index) => {
-        const isToggling = togglingRoleId === role.id;
+    <>
+      <div className="flex items-center gap-2 mb-3">
+        <div className="relative flex-1">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+          <Input
+            placeholder={t('filterRolesPlaceholder')}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-8 h-8 text-sm"
+          />
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          className="shrink-0 gap-1.5"
+          onClick={() => setAccessSheetOpen(true)}
+        >
+          <Eye className="h-4 w-4" />
+          {t('viewAccessButton')}
+        </Button>
+      </div>
+
+      {filteredRoles.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-10 text-center">
+          <Search className="h-8 w-8 text-muted-foreground/40 mb-2" />
+          <p className="text-sm text-muted-foreground">{t('noRolesMatch')}</p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {filteredRoles.map((role, index) => {
+            const isToggling = togglingRoleId === role.id;
 
-        return (
-          <Card
-            key={role.id ?? `role-${index}`}
-            className={`transition-all py-4 ${
-              role.isAssigned
-                ? 'border-primary bg-primary/5'
-                : 'border-border hover:border-primary/50'
-            }`}
-          >
-            <CardContent className="flex items-center justify-between px-4">
-              <div className="flex items-center gap-2 flex-1">
-                <div
-                  className={`rounded-md p-2 ${
-                    role.isAssigned ? 'bg-primary/10' : 'bg-muted'
-                  }`}
-                >
-                  <ShieldCheck
-                    className={`h-5 w-5 ${
-                      role.isAssigned ? 'text-primary' : 'text-muted-foreground'
-                    }`}
+            return (
+              <Card
+                key={role.id ?? `role-${index}`}
+                className={`transition-all py-4 ${
+                  role.isAssigned
+                    ? 'border-primary bg-primary/5'
+                    : 'border-border hover:border-primary/50'
+                }`}
+              >
+                <CardContent className="flex items-center justify-between px-4">
+                  <div className="flex items-center gap-2 flex-1">
+                    <div
+                      className={`rounded-md p-2 ${
+                        role.isAssigned ? 'bg-primary/10' : 'bg-muted'
+                      }`}
+                    >
+                      <ShieldCheck
+                        className={`h-5 w-5 ${
+                          role.isAssigned
+                            ? 'text-primary'
+                            : 'text-muted-foreground'
+                        }`}
+                      />
+                    </div>
+                    <div className="flex-1">
+                      <Label
+                        htmlFor={`role-${role.id}`}
+                        className="text-sm font-medium cursor-pointer"
+                      >
+                        {role.name} ({role.slug})
+                      </Label>
+                      {role.description && (
+                        <p className="text-xs text-muted-foreground">
+                          {role.description}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  <Switch
+                    id={`role-${role.id}`}
+                    checked={role.isAssigned}
+                    disabled={isToggling}
+                    onCheckedChange={() =>
+                      handleToggleRole(role.id!, role.isAssigned)
+                    }
+                    className="ml-4"
                   />
-                </div>
-                <div className="flex-1">
-                  <Label
-                    htmlFor={`role-${role.id}`}
-                    className={`text-sm font-medium cursor-pointer ${
-                      role.isAssigned ? 'text-foreground' : 'text-foreground'
-                    }`}
-                  >
-                    {role.name} ({role.slug})
-                  </Label>
-                  {role.description && (
-                    <p className="text-xs text-muted-foreground">
-                      {role.description}
-                    </p>
-                  )}
-                </div>
-              </div>
-              <Switch
-                id={`role-${role.id}`}
-                checked={role.isAssigned}
-                disabled={isToggling}
-                onCheckedChange={() =>
-                  handleToggleRole(role.id!, role.isAssigned)
-                }
-                className="ml-4"
-              />
-            </CardContent>
-          </Card>
-        );
-      })}
-    </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      )}
+
+      <UserAccessSheet
+        open={accessSheetOpen}
+        onOpenChange={setAccessSheetOpen}
+        userId={userId}
+        userName={userName}
+      />
+    </>
   );
 }

package/hedhog/frontend/app/users/user-access-sheet.tsx.ejs

@@ -0,0 +1,304 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Globe, Loader2, Lock, Menu } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+type MenuRole = { name: string; slug: string };
+
+type UserMenu = {
+  id: number;
+  menuId: number | null;
+  name: string;
+  url?: string;
+  icon?: string;
+  order?: number;
+  roles?: MenuRole[];
+};
+
+type MenuNode = UserMenu & { children: MenuNode[] };
+
+type UserRoute = {
+  id: number;
+  url: string;
+  method: string;
+  roles?: MenuRole[];
+};
+
+type UserAccessSheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  userId: number;
+  userName?: string;
+};
+
+const METHOD_COLORS: Record<string, string> = {
+  GET: 'bg-green-50 text-green-700 border-green-200',
+  POST: 'bg-blue-50 text-blue-700 border-blue-200',
+  PATCH: 'bg-amber-50 text-amber-700 border-amber-200',
+  PUT: 'bg-orange-50 text-orange-700 border-orange-200',
+  DELETE: 'bg-rose-50 text-rose-700 border-rose-200',
+};
+
+function buildTree(flat: UserMenu[]): MenuNode[] {
+  const map = new Map<number, MenuNode>();
+  flat.forEach((m) => map.set(m.id, { ...m, children: [] }));
+
+  const roots: MenuNode[] = [];
+  map.forEach((node) => {
+    if (node.menuId != null && map.has(node.menuId)) {
+      map.get(node.menuId)!.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  });
+
+  const sortNodes = (nodes: MenuNode[]) => {
+    nodes.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    nodes.forEach((n) => sortNodes(n.children));
+  };
+  sortNodes(roots);
+
+  return roots;
+}
+
+function MenuIcon({ name, className }: { name?: string; className?: string }) {
+  if (name) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      const { [name]: DynamicIcon } = require('lucide-react');
+      if (DynamicIcon) return <DynamicIcon className={className} />;
+    } catch {
+      // fallback below
+    }
+  }
+  return <Menu className={className} />;
+}
+
+function MenuTreeNode({ node, depth }: { node: MenuNode; depth: number }) {
+  const isLeaf = node.children.length === 0;
+  const indent = depth * 16;
+
+  return (
+    <>
+      <div
+        className="flex items-center gap-2 rounded py-1 px-1 hover:bg-muted/50 transition-colors group"
+        style={{ paddingLeft: `${indent + 4}px` }}
+      >
+        {/* tree line connector */}
+        {depth > 0 && (
+          <span className="shrink-0 w-3 h-px bg-border" aria-hidden />
+        )}
+
+        <span
+          className={`shrink-0 flex items-center justify-center rounded p-1 ${
+            isLeaf ? 'bg-muted/60' : 'bg-primary/10'
+          }`}
+        >
+          <MenuIcon
+            name={node.icon}
+            className={`h-3.5 w-3.5 ${isLeaf ? 'text-muted-foreground' : 'text-primary'}`}
+          />
+        </span>
+
+        <div className="flex-1 min-w-0">
+          <span className="text-sm leading-tight truncate block">
+            {node.name}
+          </span>
+          {node.url && (
+            <span className="text-xs text-muted-foreground truncate block font-mono">
+              {node.url}
+            </span>
+          )}
+          {node.roles && node.roles.length > 0 && (
+            <div className="flex flex-wrap gap-1 mt-0.5">
+              {node.roles.map((role) => (
+                <span
+                  key={role.slug}
+                  className="inline-block rounded-full bg-muted px-1.5 py-0 text-[10px] font-medium text-muted-foreground leading-4"
+                  title={role.slug}
+                >
+                  {role.name || role.slug}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {node.children.map((child) => (
+        <MenuTreeNode key={child.id} node={child} depth={depth + 1} />
+      ))}
+    </>
+  );
+}
+
+export function UserAccessSheet({
+  open,
+  onOpenChange,
+  userId,
+  userName,
+}: UserAccessSheetProps) {
+  const t = useTranslations('core.UserPage');
+  const { request, currentLocaleCode } = useApp();
+
+  const { data: menus = [], isLoading: loadingMenus } = useQuery<UserMenu[]>({
+    queryKey: ['user-menus', userId, currentLocaleCode],
+    queryFn: async () => {
+      const res = await request<UserMenu[]>({
+        url: `/user/${userId}/menu`,
+        method: 'GET',
+      });
+      return res.data || [];
+    },
+    enabled: open && !!userId,
+  });
+
+  const { data: routes = [], isLoading: loadingRoutes } = useQuery<UserRoute[]>(
+    {
+      queryKey: ['user-routes', userId],
+      queryFn: async () => {
+        const res = await request<UserRoute[]>({
+          url: `/user/${userId}/route`,
+          method: 'GET',
+        });
+        return res.data || [];
+      },
+      enabled: open && !!userId,
+    }
+  );
+
+  const menuTree = buildTree(menus);
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-xl overflow-y-auto gap-0">
+        <SheetHeader className="px-6 pt-6 pb-4">
+          <SheetTitle className="flex items-center gap-2">
+            <Lock className="h-5 w-5 text-primary" />
+            {t('accessViewTitle')}
+          </SheetTitle>
+          <SheetDescription>
+            {userName
+              ? t('accessViewDescriptionUser', { name: userName })
+              : t('accessViewDescription')}
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="w-full border-t" />
+
+        <Tabs defaultValue="menu" className="px-6 pt-4">
+          <TabsList className="w-full mb-4">
+            <TabsTrigger
+              value="menu"
+              className="flex-1 flex items-center gap-2"
+            >
+              <Menu className="h-4 w-4" />
+              {t('accessTabMenu')}
+              {!loadingMenus && (
+                <Badge variant="secondary" className="ml-1 text-xs">
+                  {menus.length}
+                </Badge>
+              )}
+            </TabsTrigger>
+            <TabsTrigger
+              value="routes"
+              className="flex-1 flex items-center gap-2"
+            >
+              <Globe className="h-4 w-4" />
+              {t('accessTabRoutes')}
+              {!loadingRoutes && (
+                <Badge variant="secondary" className="ml-1 text-xs">
+                  {routes.length}
+                </Badge>
+              )}
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="menu" className="mt-0">
+            {loadingMenus ? (
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                <span className="ml-2 text-sm text-muted-foreground">
+                  {t('loading')}
+                </span>
+              </div>
+            ) : menuTree.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-12 text-center">
+                <Menu className="h-10 w-10 text-muted-foreground/40 mb-3" />
+                <p className="text-sm text-muted-foreground">
+                  {t('accessNoMenus')}
+                </p>
+              </div>
+            ) : (
+              <div className="rounded-lg border border-border/60 bg-card px-2 py-2">
+                {menuTree.map((node) => (
+                  <MenuTreeNode key={node.id} node={node} depth={0} />
+                ))}
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value="routes" className="space-y-2 mt-0">
+            {loadingRoutes ? (
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                <span className="ml-2 text-sm text-muted-foreground">
+                  {t('loading')}
+                </span>
+              </div>
+            ) : routes.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-12 text-center">
+                <Globe className="h-10 w-10 text-muted-foreground/40 mb-3" />
+                <p className="text-sm text-muted-foreground">
+                  {t('accessNoRoutes')}
+                </p>
+              </div>
+            ) : (
+              routes.map((route) => (
+                <div
+                  key={route.id}
+                  className="flex items-start gap-3 rounded-lg border border-border/60 bg-card px-4 py-2.5 hover:border-primary/40 transition-colors"
+                >
+                  <span
+                    className={`shrink-0 rounded border px-2 py-0.5 text-xs font-mono font-semibold ${
+                      METHOD_COLORS[route.method] ??
+                      'bg-muted text-muted-foreground border-border'
+                    }`}
+                  >
+                    {route.method}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-mono truncate">{route.url}</p>
+                    {route.roles && route.roles.length > 0 && (
+                      <div className="flex flex-wrap gap-1 mt-0.5">
+                        {route.roles.map((role) => (
+                          <span
+                            key={role.slug}
+                            className="inline-block rounded-full bg-muted px-1.5 py-0 text-[10px] font-medium text-muted-foreground leading-4"
+                            title={role.slug}
+                          >
+                            {role.name || role.slug}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))
+            )}
+          </TabsContent>
+        </Tabs>
+      </SheetContent>
+    </Sheet>
+  );
+}