@hed-hog/core 0.0.185 → 0.0.190

package/hedhog/frontend/app/roles/routes.tsx.ejs

@@ -0,0 +1,397 @@
+'use client';
+
+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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { useDebounce } from '@/hooks/use-debounce';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  Loader2,
+  Route as RouteIcon,
+  Search,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+type RouteType = {
+  id: number;
+  url: string;
+  method: string;
+  description?: string;
+  role_route?: Array<{
+    route_id: number;
+    role_id: number;
+  }>;
+};
+
+type RoleRoutesSectionProps = {
+  roleId: number;
+  onRouteChange?: () => void;
+};
+
+export function RoleRoutesSection({
+  roleId,
+  onRouteChange,
+}: RoleRoutesSectionProps) {
+  const t = useTranslations('core.RolePage');
+  const { request } = useApp();
+  const [togglingRouteId, setTogglingRouteId] = useState<number | null>(null);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [searchType, setSearchType] = useState<
+    'contains' | 'startsWith' | 'endsWith'
+  >('contains');
+  const [methodFilter, setMethodFilter] = useState<string>('all');
+  const debouncedSearch = useDebounce(searchTerm);
+
+  const {
+    data: assignedRoutesData,
+    isLoading: isLoadingAssigned,
+    refetch: refetchAssignedRoutes,
+  } = useQuery<{ data: RouteType[] }>({
+    queryKey: ['role-routes-assigned', roleId],
+    queryFn: async () => {
+      const response = await request<{ data: RouteType[] }>({
+        url: `/role/${roleId}/route?pageSize=10000`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+    enabled: !!roleId,
+  });
+
+  const {
+    data: routesData,
+    isLoading: isLoadingRoutes,
+    refetch: refetchRoutes,
+  } = useQuery<{ data: RouteType[]; total: number; lastPage: number }>({
+    queryKey: [
+      'role-routes-paginated',
+      roleId,
+      page,
+      pageSize,
+      debouncedSearch,
+      searchType,
+      methodFilter,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(pageSize));
+      if (debouncedSearch) {
+        params.set('search', debouncedSearch);
+        params.set('searchType', searchType);
+      }
+      if (methodFilter && methodFilter !== 'all') {
+        params.set('method', methodFilter);
+      }
+
+      const response = await request<{
+        data: RouteType[];
+        total: number;
+        lastPage: number;
+      }>({
+        url: `/role/${roleId}/route?${params.toString()}`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+    enabled: !!roleId,
+  });
+
+  const routes = routesData?.data || [];
+  const totalPages = routesData?.lastPage || 1;
+  const totalRoutes = routesData?.total || 0;
+
+  const handleToggleRoute = async (routeId: number, isAssigned: boolean) => {
+    setTogglingRouteId(routeId);
+    try {
+      const currentRouteIds =
+        assignedRoutesData?.data
+          ?.filter((r: RouteType) => r.role_route && r.role_route.length > 0)
+          .map((r: RouteType) => r.id) || [];
+
+      let newRouteIds: number[];
+      if (isAssigned) {
+        newRouteIds = currentRouteIds.filter((id: number) => id !== routeId);
+      } else {
+        newRouteIds = [...currentRouteIds, routeId];
+      }
+
+      await request({
+        url: `/role/${roleId}/route`,
+        method: 'PATCH',
+        data: { ids: newRouteIds },
+      });
+
+      toast.success(isAssigned ? t('routeRemoved') : t('routeAssigned'));
+      await refetchAssignedRoutes();
+      await refetchRoutes();
+      onRouteChange?.();
+    } catch (error) {
+      toast.error(
+        isAssigned ? t('errorRemovingRoute') : t('errorAssigningRoute')
+      );
+    } finally {
+      setTogglingRouteId(null);
+    }
+  };
+
+  const isRouteAssigned = (route: RouteType) => {
+    const assignedRoute = assignedRoutesData?.data?.find(
+      (r: RouteType) => r.id === route.id
+    );
+    return !!(assignedRoute?.role_route && assignedRoute.role_route.length > 0);
+  };
+
+  const getMethodColor = (method: string) => {
+    const colors: Record<string, string> = {
+      GET: 'bg-blue-100 text-blue-700',
+      POST: 'bg-green-100 text-green-700',
+      PUT: 'bg-amber-100 text-amber-700',
+      PATCH: 'bg-purple-100 text-purple-700',
+      DELETE: 'bg-red-100 text-red-700',
+    };
+    return colors[method.toUpperCase()] || 'bg-gray-100 text-gray-700';
+  };
+
+  if (isLoadingRoutes || isLoadingAssigned) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        <span className="ml-2 text-sm text-muted-foreground">
+          {t('loadingRoutes')}
+        </span>
+      </div>
+    );
+  }
+  return (
+    <div className="space-y-3">
+      <div>
+        <h4 className="text-sm font-semibold flex items-center gap-2">
+          <RouteIcon className="h-4 w-4" />
+          {t('routesTitle')}
+        </h4>
+        <p className="text-xs text-muted-foreground mt-1">
+          {t('routesDescription')}
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder={t('searchRoutes')}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="pl-10"
+          />
+        </div>
+        <div className="w-full flex gap-2">
+          <Select
+            value={searchType}
+            onValueChange={(value: any) => setSearchType(value)}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder={t('selectSearchType')} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="contains">{t('searchContains')}</SelectItem>
+              <SelectItem value="startsWith">
+                {t('searchStartsWith')}
+              </SelectItem>
+              <SelectItem value="endsWith">{t('searchEndsWith')}</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select value={methodFilter} onValueChange={setMethodFilter}>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder={t('selectMethod')} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{t('allMethods')}</SelectItem>
+              <SelectItem value="GET">GET</SelectItem>
+              <SelectItem value="POST">POST</SelectItem>
+              <SelectItem value="PATCH">PATCH</SelectItem>
+              <SelectItem value="PUT">PUT</SelectItem>
+              <SelectItem value="DELETE">DELETE</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        {Boolean(routes.length) ? (
+          routes.map((route) => {
+            const isAssigned = isRouteAssigned(route);
+            const isToggling = togglingRouteId === route.id;
+
+            return (
+              <Card
+                key={route.id}
+                className={`transition-all ${
+                  isAssigned
+                    ? 'border-primary bg-primary/5'
+                    : 'border-border hover:border-primary/50'
+                }`}
+              >
+                <CardContent className="flex items-center justify-between">
+                  <div className="flex items-center gap-3 flex-1">
+                    <div
+                      className={`rounded-md ${
+                        isAssigned ? 'bg-primary/10' : 'bg-muted'
+                      }`}
+                    >
+                      <RouteIcon
+                        className={`h-5 w-5 ${
+                          isAssigned ? 'text-primary' : 'text-muted-foreground'
+                        }`}
+                      />
+                    </div>
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2">
+                        <span
+                          className={`text-[10px] font-bold px-2 py-0.5 rounded ${getMethodColor(
+                            route.method
+                          )}`}
+                        >
+                          {route.method}
+                        </span>
+                        <Label
+                          htmlFor={`route-${route.id}`}
+                          className="text-sm font-medium cursor-pointer"
+                        >
+                          {route.url}
+                        </Label>
+                      </div>
+                      {route.description && (
+                        <p className="text-xs text-muted-foreground mt-0.5">
+                          {route.description}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  <Switch
+                    id={`route-${route.id}`}
+                    checked={isAssigned}
+                    disabled={isToggling}
+                    onCheckedChange={() =>
+                      handleToggleRoute(route.id, isAssigned)
+                    }
+                    className="ml-4"
+                  />
+                </CardContent>
+              </Card>
+            );
+          })
+        ) : (
+          <Card className="border-dashed">
+            <CardContent className="flex flex-col items-center justify-center py-8">
+              <RouteIcon className="h-12 w-12 text-muted-foreground mb-3" />
+              <p className="text-sm font-medium text-center">
+                {t('noRoutesAvailable')}
+              </p>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      <div className="flex items-center justify-between px-2 pt-4">
+        <div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
+          {t('showing')} {routes.length} {t('of')} {totalRoutes} {t('routes')}
+        </div>
+        <div className="flex w-full items-center gap-8 lg:w-fit">
+          <div className="hidden items-center gap-2 lg:flex">
+            <Label
+              htmlFor="rows-per-page-routes"
+              className="text-sm font-medium"
+            >
+              {t('rowsPerPage')}
+            </Label>
+            <Select
+              value={`${pageSize}`}
+              onValueChange={(value) => {
+                setPageSize(Number(value));
+                setPage(1);
+              }}
+            >
+              <SelectTrigger
+                size="sm"
+                className="w-20"
+                id="rows-per-page-routes"
+              >
+                <SelectValue placeholder={pageSize} />
+              </SelectTrigger>
+              <SelectContent side="top">
+                {[10, 20, 30, 40, 50].map((size) => (
+                  <SelectItem key={size} value={`${size}`}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex w-fit items-center justify-center text-sm font-medium">
+            {t('page')} {page} {t('of')} {totalPages}
+          </div>
+          <div className="ml-auto flex items-center gap-2 lg:ml-0">
+            <Button
+              variant="outline"
+              className="hidden size-8 lg:flex"
+              size="icon"
+              onClick={() => setPage(1)}
+              disabled={page === 1}
+            >
+              <span className="sr-only">{t('goToFirstPage')}</span>
+              <ChevronsLeft className="size-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="size-8"
+              size="icon"
+              onClick={() => setPage(page - 1)}
+              disabled={page === 1}
+            >
+              <span className="sr-only">{t('goToPreviousPage')}</span>
+              <ChevronLeft className="size-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="size-8"
+              size="icon"
+              onClick={() => setPage(page + 1)}
+              disabled={page >= totalPages}
+            >
+              <span className="sr-only">{t('goToNextPage')}</span>
+              <ChevronRight className="size-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="hidden size-8 lg:flex"
+              size="icon"
+              onClick={() => setPage(totalPages)}
+              disabled={page >= totalPages}
+            >
+              <span className="sr-only">{t('goToLastPage')}</span>
+              <ChevronsRight className="size-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,306 @@
+'use client';
+
+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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { useDebounce } from '@/hooks/use-debounce';
+import { getPhotoUrl } from '@/lib/get-photo-url';
+import { getUserEmail } from '@/lib/get-user-email';
+import { User } from '@hed-hog/api-types';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  Loader2,
+  Search,
+  UserCircle,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+type RoleUsersSectionProps = {
+  roleId: number;
+  onUserChange?: () => void;
+};
+
+export function RoleUsersSection({
+  roleId,
+  onUserChange,
+}: RoleUsersSectionProps) {
+  const t = useTranslations('core.RolePage');
+  const { request } = useApp();
+  const [togglingUserId, setTogglingUserId] = useState<number | null>(null);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearch = useDebounce(searchTerm);
+
+  const {
+    data: assignedUsersData,
+    isLoading: isLoadingAssigned,
+    refetch: refetchAssignedUsers,
+  } = useQuery<{ data: User[] }>({
+    queryKey: ['role-users-assigned', roleId],
+    queryFn: async () => {
+      const response = await request<{ data: User[] }>({
+        url: `/role/${roleId}/user?pageSize=10000`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+    enabled: !!roleId,
+  });
+
+  const {
+    data: allUsersData,
+    isLoading: isLoadingAllUsers,
+    refetch: refetchAllUsers,
+  } = useQuery<{ paginate: { data: User[]; total: number; lastPage: number } }>(
+    {
+      queryKey: ['all-users-paginated', page, pageSize, debouncedSearch],
+      queryFn: async () => {
+        const params = new URLSearchParams();
+        params.set('page', String(page));
+        params.set('pageSize', String(pageSize));
+        if (debouncedSearch) params.set('search', debouncedSearch);
+
+        const response = await request<{
+          paginate: { data: User[]; total: number; lastPage: number };
+        }>({
+          url: `/user?${params.toString()}`,
+          method: 'GET',
+        });
+        return response.data;
+      },
+    }
+  );
+
+  const allUsers = allUsersData?.paginate?.data || [];
+  const totalPages = allUsersData?.paginate?.lastPage || 1;
+  const totalUsers = allUsersData?.paginate?.total || 0;
+
+  const handleToggleUser = async (userId: number, isAssigned: boolean) => {
+    setTogglingUserId(userId);
+    try {
+      const currentUserIds =
+        assignedUsersData?.data
+          ?.filter((u: User) => u.role_user && u.role_user.length > 0)
+          .map((u: User) => u.id) || [];
+
+      let newUserIds: number[];
+      if (isAssigned) {
+        newUserIds = currentUserIds.filter(
+          (id): id is number => typeof id === 'number' && id !== userId
+        );
+      } else {
+        newUserIds = [...currentUserIds, userId].filter(
+          (id): id is number => typeof id === 'number'
+        );
+      }
+
+      await request({
+        url: `/role/${roleId}/user`,
+        method: 'PATCH',
+        data: { ids: newUserIds.filter(Boolean) },
+      });
+
+      toast.success(isAssigned ? t('userRemoved') : t('userAssigned'));
+      await refetchAssignedUsers();
+      await refetchAllUsers();
+      onUserChange?.();
+    } catch (error) {
+      toast.error(
+        isAssigned ? t('errorRemovingUser') : t('errorAssigningUser')
+      );
+    } finally {
+      setTogglingUserId(null);
+    }
+  };
+
+  const isUserAssigned = (userId: number) => {
+    const user = assignedUsersData?.data?.find((u: User) => u.id === userId);
+    return !!(user?.role_user && user.role_user.length > 0);
+  };
+
+  if (isLoadingAllUsers || isLoadingAssigned) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        <span className="ml-2 text-sm text-muted-foreground">
+          {t('loadingUsers')}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div>
+        <h4 className="text-sm font-semibold flex items-center gap-2">
+          <UserCircle className="h-4 w-4" />
+          {t('usersTitle')}
+        </h4>
+        <p className="text-xs text-muted-foreground mt-1">
+          {t('usersDescription')}
+        </p>
+      </div>
+
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          placeholder={t('searchUsers')}
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="pl-10"
+        />
+      </div>
+
+      <div className="space-y-2">
+        {Boolean(allUsers.length) ? (
+          allUsers.map((user) => {
+            const isAssigned = isUserAssigned(user.id!);
+            const isToggling = togglingUserId === user.id;
+
+            return (
+              <Card
+                key={user.id}
+                className={`transition-all ${
+                  isAssigned
+                    ? 'border-primary bg-primary/5'
+                    : 'border-border hover:border-primary/50'
+                }`}
+              >
+                <CardContent className="flex items-center justify-between">
+                  <div className="flex items-center gap-3 flex-1">
+                    <img
+                      src={getPhotoUrl(user.photo_id)}
+                      alt={user.name}
+                      className="h-10 w-10 rounded-full object-cover"
+                    />
+                    <div className="flex-1">
+                      <Label
+                        htmlFor={`user-${user.id}`}
+                        className="text-sm font-medium cursor-pointer"
+                      >
+                        {user.name}
+                      </Label>
+                      <p className="text-xs text-muted-foreground mt-0.5">
+                        {getUserEmail(user)}
+                      </p>
+                    </div>
+                  </div>
+                  <Switch
+                    id={`user-${user.id}`}
+                    checked={isAssigned}
+                    disabled={isToggling}
+                    onCheckedChange={() =>
+                      handleToggleUser(user.id!, isAssigned)
+                    }
+                    className="ml-4"
+                  />
+                </CardContent>
+              </Card>
+            );
+          })
+        ) : (
+          <Card className="border-dashed">
+            <CardContent className="flex flex-col items-center justify-center py-8">
+              <UserCircle className="h-12 w-12 text-muted-foreground mb-3" />
+              <p className="text-sm font-medium text-center">
+                {t('noUsersAvailable')}
+              </p>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      <div className="flex items-center justify-between px-2 pt-4">
+        <div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
+          {t('showing')} {allUsers.length} {t('of')} {totalUsers} {t('users')}
+        </div>
+        <div className="flex w-full items-center gap-8 lg:w-fit">
+          <div className="hidden items-center gap-2 lg:flex">
+            <Label htmlFor="rows-per-page" className="text-sm font-medium">
+              {t('rowsPerPage')}
+            </Label>
+            <Select
+              value={`${pageSize}`}
+              onValueChange={(value) => {
+                setPageSize(Number(value));
+                setPage(1);
+              }}
+            >
+              <SelectTrigger size="sm" className="w-20" id="rows-per-page">
+                <SelectValue placeholder={pageSize} />
+              </SelectTrigger>
+              <SelectContent side="top">
+                {[10, 20, 30, 40, 50].map((size) => (
+                  <SelectItem key={size} value={`${size}`}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex w-fit items-center justify-center text-sm font-medium">
+            {t('page')} {page} {t('of')} {totalPages}
+          </div>
+          <div className="ml-auto flex items-center gap-2 lg:ml-0">
+            <Button
+              variant="outline"
+              className="hidden size-8 lg:flex"
+              size="icon"
+              onClick={() => setPage(1)}
+              disabled={page === 1}
+            >
+              <span className="sr-only">{t('goToFirstPage')}</span>
+              <ChevronsLeft className="size-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="size-8"
+              size="icon"
+              onClick={() => setPage(page - 1)}
+              disabled={page === 1}
+            >
+              <span className="sr-only">{t('goToPreviousPage')}</span>
+              <ChevronLeft className="size-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="size-8"
+              size="icon"
+              onClick={() => setPage(page + 1)}
+              disabled={page >= totalPages}
+            >
+              <span className="sr-only">{t('goToNextPage')}</span>
+              <ChevronRight className="size-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="hidden size-8 lg:flex"
+              size="icon"
+              onClick={() => setPage(totalPages)}
+              disabled={page >= totalPages}
+            >
+              <span className="sr-only">{t('goToLastPage')}</span>
+              <ChevronsRight className="size-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}