feat: add access granting

apps/backend/src/modules/userModule/api/httpControllers/adminUserHttpController/adminUserHttpController.ts

@@ -61,7 +61,7 @@ import { type User } from '../../../domain/entities/user/user.js';
 import { type UserDTO } from '../common/userDTO.js';
 
 export class AdminUserHttpController implements HttpController {
-  public readonly basePath = 'admin/api/users';
+  public readonly basePath = '/api/admin/users';
 
   public constructor(
     private readonly createUserCommandHandler: CreateUserCommandHandler,

apps/frontend/@/components/ui/command.tsx

@@ -0,0 +1,153 @@
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
+import * as React from 'react';
+
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      className,
+    )}
+    {...props}
+  />
+));
+
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div
+    className="flex items-center border-b px-3"
+    cmdk-input-wrapper=""
+  >
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 h-px bg-border', className)}
+    {...props}
+  />
+));
+
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      `relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50`,
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+      {...props}
+    />
+  );
+};
+
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};

apps/frontend/@/components/ui/dialog.tsx

@@ -30,10 +30,8 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
-    closeControl: () => void;
-  }
->(({ className, children, closeControl, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -45,10 +43,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close
-        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
-        onClick={closeControl}
-      >
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

apps/frontend/@/components/ui/popover.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

apps/frontend/package.json

@@ -14,13 +14,16 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",
     "@tanstack/react-query": "^5.35.5",
     "@tanstack/react-router": "^1.31.29",
     "@tanstack/react-table": "^8.16.0",
     "@tanstack/router-devtools": "^1.31.29",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
+    "js-cookie": "^3.0.5",
     "lucide-react": "^0.378.0",
     "pretty-bytes": "^6.1.1",
     "react": "^18.3.1",
@@ -34,6 +37,7 @@
   "devDependencies": {
     "@common/contracts": "*",
     "@tanstack/router-vite-plugin": "^1.31.18",
+    "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.8.0",

apps/frontend/src/api/bucket/queries/admin/adminFindBuckets/adminFindBuckets.ts

@@ -1,9 +1,11 @@
+import { type FindBucketsResponseBody } from '@common/contracts';
+
 import { ApiError } from '../../../../../common/errors/apiError';
 import { HttpService } from '../../../../../services/httpService/httpService';
 
-export const adminFindBuckets = async (accessToken: string): Promise<Array<string>> => {
-  const adminFindBucketsResponse = await HttpService.get<{ data: Array<string> }>({
-    url: `admin/api/buckets`,
+export const adminFindBuckets = async (accessToken: string): Promise<FindBucketsResponseBody> => {
+  const adminFindBucketsResponse = await HttpService.get<FindBucketsResponseBody>({
+    url: `/admin/buckets`,
     headers: {
       Authorization: `Bearer ${accessToken}`,
     },
@@ -17,5 +19,5 @@ export const adminFindBuckets = async (accessToken: string): Promise<Array<strin
     });
   }
 
-  return adminFindBucketsResponse.body.data;
+  return adminFindBucketsResponse.body;
 };

apps/frontend/src/api/bucket/queries/admin/adminFindBuckets/adminFindBucketsQueryOptions.ts

@@ -1,10 +1,12 @@
 import { type UseQueryOptions, queryOptions } from '@tanstack/react-query';
 
+import { type FindBucketsResponseBody } from '@common/contracts';
+
 import { adminFindBuckets } from './adminFindBuckets';
 
 export const adminFindBucketsQueryOptions = (
   accessToken: string,
-): UseQueryOptions<string[], Error, string[], string[]> =>
+): UseQueryOptions<FindBucketsResponseBody, Error, FindBucketsResponseBody, string[]> =>
   queryOptions({
     queryKey: ['findBuckets'],
     queryFn: () => adminFindBuckets(accessToken),

apps/frontend/src/api/user/admin/mutations/grantUserBucketAccessMutation/grantUserBucketAccessMutation.ts

@@ -0,0 +1,38 @@
+import { useMutation, type UseMutationOptions, type UseMutationResult } from '@tanstack/react-query';
+
+import { type GrantBucketAccessPathParams } from '@common/contracts';
+
+import { HttpService } from '../../../../../services/httpService/httpService';
+import { type BaseApiError } from '../../../../../services/httpService/types/baseApiError';
+
+export type GrantUserBucketAccessPayload = GrantBucketAccessPathParams & {
+  bucketName: string;
+  accessToken: string;
+};
+
+export const useGrantBucketAccessMutation = (
+  options: UseMutationOptions<null, BaseApiError, GrantUserBucketAccessPayload>,
+): UseMutationResult<null, BaseApiError, GrantUserBucketAccessPayload, unknown> => {
+  const grantBucketAccess = async (payload: GrantUserBucketAccessPayload): Promise<null> => {
+    const response = await HttpService.post<null>({
+      url: `/admin/users/${payload.id}/grant-bucket-access`,
+      body: {
+        bucketName: payload.bucketName,
+      },
+      headers: {
+        Authorization: `Bearer ${payload.accessToken}`,
+      },
+    });
+
+    if (!response.success) {
+      throw new Error(response.body.message);
+    }
+
+    return response.body;
+  };
+
+  return useMutation({
+    mutationFn: grantBucketAccess,
+    ...options,
+  });
+};

apps/frontend/src/api/user/admin/queries/findUsersQuery/findUsers.ts

@@ -0,0 +1,41 @@
+import { type FindUsersQueryParams, type FindUsersResponseBody } from '@common/contracts';
+
+import { HttpService } from '../../../../../services/httpService/httpService';
+
+export type AdminFindUsersPayload = FindUsersQueryParams & {
+  accessToken: string;
+};
+
+export const adminFindUsers = async (payload: AdminFindUsersPayload): Promise<FindUsersResponseBody> => {
+  const { accessToken, page, pageSize } = payload;
+
+  let queryParams: Record<string, string> = {};
+
+  if (page) {
+    queryParams = {
+      ...queryParams,
+      page: `${page}`,
+    };
+  }
+
+  if (pageSize) {
+    queryParams = {
+      ...queryParams,
+      pageSize: `${pageSize}`,
+    };
+  }
+
+  const response = await HttpService.get<FindUsersResponseBody>({
+    url: `/admin/users`,
+    queryParams,
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.success) {
+    throw new Error(response.body.message);
+  }
+
+  return response.body;
+};

apps/frontend/src/api/user/admin/queries/findUsersQuery/findUsersQueryOptions.ts

@@ -0,0 +1,13 @@
+import { type UseQueryOptions, queryOptions } from '@tanstack/react-query';
+
+import { type FindUsersResponseBody } from '@common/contracts';
+
+import { type AdminFindUsersPayload, adminFindUsers } from './findUsers';
+
+export const adminFindUsersQueryOptions = (
+  payload: AdminFindUsersPayload,
+): UseQueryOptions<FindUsersResponseBody, Error, FindUsersResponseBody, string[]> =>
+  queryOptions({
+    queryKey: ['findUsers'],
+    queryFn: () => adminFindUsers(payload),
+  });

apps/frontend/src/api/user/all/queries/findMeQuery/findMeQueryOptions.ts

@@ -10,7 +10,7 @@ export async function findMe(payload: FindMePayload): Promise<FindMyUserResponse
   const { accessToken } = payload;
 
   const response = await HttpService.get<FindMyUserResponseBody>({
-    url: 'api/users/me',
+    url: '/users/me',
     headers: {
       Authorization: `Bearer ${accessToken}`,
     },