refactor(sidebar): improve class order in Sidebar components

- Reorganize class names for better readability and consistency - Maintain functionality while optimizing CSS class arrangements feat(user): add endpoint to retrieve user details by ID - Implement new API route to fetch user information based on user ID - Enhance user management features for better admin interactions
ballerine-io · Mar 1, 2025 · 5705dbd · 5705dbd
1 parent 2eb95f9
commit 5705dbd
Show file tree

Hide file tree

Showing 19 changed files with 51 additions and 19 deletions.
diff --git a/apps/backoffice-v2/src/common/components/organisms/Sidebar/Sidebar.GroupAction.tsx b/apps/backoffice-v2/src/common/components/organisms/Sidebar/Sidebar.GroupAction.tsx
@@ -13,7 +13,7 @@ export const SidebarGroupAction = React.forwardRef<
       ref={ref}
       data-sidebar="group-action"
       className={ctw(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&>svg]:size-4 absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
         'after:absolute after:-inset-2 after:md:hidden',
         'group-data-[collapsible=icon]:hidden',

diff --git a/apps/backoffice-v2/src/common/components/organisms/Sidebar/Sidebar.GroupLabel.tsx b/apps/backoffice-v2/src/common/components/organisms/Sidebar/Sidebar.GroupLabel.tsx
@@ -13,7 +13,7 @@ export const SidebarGroupLabel = React.forwardRef<
       ref={ref}
       data-sidebar="group-label"
       className={ctw(
-        'text-sidebar-foreground/70 ring-sidebar-ring [&>svg]:size-4 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:shrink-0',
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
         className,
       )}

diff --git a/apps/backoffice-v2/src/common/components/organisms/Sidebar/Sidebar.Inset.tsx b/apps/backoffice-v2/src/common/components/organisms/Sidebar/Sidebar.Inset.tsx
@@ -7,7 +7,7 @@ export const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProp
       <main
         ref={ref}
         className={ctw(
-          'min-h-svh relative flex flex-1 flex-col bg-background',
+          'relative flex min-h-svh flex-1 flex-col bg-background',
           'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
           className,
         )}

diff --git a/apps/backoffice-v2/src/common/components/organisms/Sidebar/Sidebar.MenuAction.tsx b/apps/backoffice-v2/src/common/components/organisms/Sidebar/Sidebar.MenuAction.tsx
@@ -16,7 +16,7 @@ export const SidebarMenuAction = React.forwardRef<
       ref={ref}
       data-sidebar="menu-action"
       className={ctw(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
         'after:absolute after:-inset-2 after:md:hidden',
         'peer-data-[size=sm]/menu-button:top-1',

diff --git a/apps/backoffice-v2/src/common/components/organisms/Sidebar/Sidebar.MenuBadge.tsx b/apps/backoffice-v2/src/common/components/organisms/Sidebar/Sidebar.MenuBadge.tsx
@@ -7,7 +7,7 @@ export const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.Component
       ref={ref}
       data-sidebar="menu-badge"
       className={ctw(
-        'text-sidebar-foreground min-w-5 pointer-events-none absolute right-1 flex h-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums',
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums',
         'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
         'peer-data-[size=sm]/menu-button:top-1',
         'peer-data-[size=default]/menu-button:top-1.5',

diff --git a/apps/backoffice-v2/src/common/components/organisms/Sidebar/Sidebar.MenuSubButton.tsx b/apps/backoffice-v2/src/common/components/organisms/Sidebar/Sidebar.MenuSubButton.tsx
@@ -19,7 +19,7 @@ export const SidebarMenuSubButton = React.forwardRef<
       data-size={size}
       data-active={isActive}
       className={ctw(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground [&>svg]:size-4 flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
         'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
         size === 'sm' && 'text-xs',
         size === 'md' && 'text-sm',

diff --git a/apps/backoffice-v2/src/common/components/organisms/Sidebar/Sidebar.Provider.tsx b/apps/backoffice-v2/src/common/components/organisms/Sidebar/Sidebar.Provider.tsx
@@ -109,7 +109,7 @@ export const SidebarProvider = React.forwardRef<
               } as React.CSSProperties
             }
             className={ctw(
-              'group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar min-h-svh flex w-full',
+              'group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full',
               className,
             )}
             ref={ref}

diff --git a/apps/backoffice-v2/src/common/components/organisms/Sidebar/Sidebar.tsx b/apps/backoffice-v2/src/common/components/organisms/Sidebar/Sidebar.tsx
@@ -97,7 +97,7 @@ const Sidebar = React.forwardRef<
         {/* This is what handles the sidebar gap on desktop */}
         <div
           className={ctw(
-            'h-svh relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear 2xl:w-[--sidebar-width-xl]',
+            'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear 2xl:w-[--sidebar-width-xl]',
             'group-data-[collapsible=offcanvas]:w-0',
             'group-data-[side=right]:rotate-180',
             variant === 'floating' || variant === 'inset'
@@ -107,7 +107,7 @@ const Sidebar = React.forwardRef<
         />
         <div
           className={ctw(
-            'h-svh fixed inset-y-0 z-10 hidden w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex 2xl:w-[--sidebar-width-xl]',
+            'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex 2xl:w-[--sidebar-width-xl]',
             side === 'left'
               ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
               : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',

diff --git a/apps/backoffice-v2/src/common/components/organisms/TextEditor/components/ShortcutKey.tsx b/apps/backoffice-v2/src/common/components/organisms/TextEditor/components/ShortcutKey.tsx
@@ -22,7 +22,7 @@ export const ShortcutKey = React.forwardRef<HTMLSpanElement, ShortcutKeyProps>(
           <kbd
             key={shortcut.symbol}
             className={ctw(
-              'min-w-2.5 inline-block text-center align-baseline font-sans text-xs font-medium capitalize text-[rgb(156,157,160)]',
+              'inline-block min-w-2.5 text-center align-baseline font-sans text-xs font-medium capitalize text-[rgb(156,157,160)]',
 
               className,
             )}

diff --git a/...e-v2/src/common/components/organisms/TextEditor/components/bubble-menu/LinkBubbleMenu.tsx b/...e-v2/src/common/components/organisms/TextEditor/components/bubble-menu/LinkBubbleMenu.tsx
@@ -99,7 +99,7 @@ export const LinkBubbleMenu: React.FC<LinkBubbleMenuProps> = ({ editor }) => {
           defaultText={selectedText}
           defaultIsNewTab={linkAttrs.target === '_blank'}
           onSave={onSetLink}
-          className="min-w-80 w-full rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none"
+          className="w-full min-w-80 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none"
         />
       ) : (
         <LinkPopoverBlock onClear={onUnsetLink} url={linkAttrs.href} onEdit={handleEdit} />

diff --git a/...koffice-v2/src/common/components/organisms/TextEditor/components/link/LinkEditPopover.tsx b/...koffice-v2/src/common/components/organisms/TextEditor/components/link/LinkEditPopover.tsx
@@ -58,7 +58,7 @@ const LinkEditPopover = ({ editor, size, variant }: LinkEditPopoverProps) => {
           <Link2Icon className="size-5" />
         </ToolbarButton>
       </PopoverTrigger>
-      <PopoverContent className="min-w-80 w-full" align="end" side="bottom">
+      <PopoverContent className="w-full min-w-80" align="end" side="bottom">
         <LinkEditBlock onSave={onSetLink} defaultText={text} />
       </PopoverContent>
     </Popover>

diff --git a/apps/backoffice-v2/src/common/components/organisms/TextEditor/components/section/three.tsx b/apps/backoffice-v2/src/common/components/organisms/TextEditor/components/section/three.tsx
@@ -79,7 +79,7 @@ const MemoizedColorButton = React.memo<{
     <Tooltip>
       <TooltipTrigger asChild>
         <ToggleGroupItem
-          className="size-7 relative rounded-md p-0"
+          className="relative size-7 rounded-md p-0"
           value={color.cssVar}
           aria-label={label}
           style={{ backgroundColor: color.cssVar }}
@@ -89,7 +89,7 @@ const MemoizedColorButton = React.memo<{
           }}
         >
           {isSelected && (
-            <CheckIcon className="size-6 absolute inset-0 m-auto" style={{ color: inverse }} />
+            <CheckIcon className="absolute inset-0 m-auto size-6" style={{ color: inverse }} />
           )}
         </ToggleGroupItem>
       </TooltipTrigger>

diff --git a/...src/common/components/organisms/TextEditor/extensions/image/components/ImageViewBlock.tsx b/...src/common/components/organisms/TextEditor/extensions/image/components/ImageViewBlock.tsx
@@ -221,7 +221,7 @@ export const ImageViewBlock: React.FC<NodeViewProps> = ({
             },
           )}
         >
-          <div className="contain-paint h-full">
+          <div className="h-full contain-paint">
             <div className="relative h-full">
               {!imageState.imageLoaded && !imageState.error && (
                 <div className="absolute inset-0 flex items-center justify-center">

diff --git a/apps/backoffice-v2/src/pages/Entity/components/Case/Case.Actions.tsx b/apps/backoffice-v2/src/pages/Entity/components/Case/Case.Actions.tsx
@@ -67,7 +67,7 @@ export const Actions: FunctionComponent<IActionsProps> = ({
         />
         <CaseOptions />
       </div>
-      <div className={`min-h-20 flex justify-between gap-4`}>
+      <div className={`flex min-h-20 justify-between gap-4`}>
         <div className={`flex flex-col space-y-3`}>
           <div className={`flex space-x-4`}>
             <Avatar

diff --git a/services/workflows-service/src/business-report/business-report.controller.external.ts b/services/workflows-service/src/business-report/business-report.controller.external.ts
@@ -16,7 +16,7 @@ import { AppLoggerService } from '@/common/app-logger/app-logger.service';
 import { CustomerService } from '@/customer/customer.service';
 import { BusinessService } from '@/business/business.service';
 import { CurrentProject } from '@/common/decorators/current-project.decorator';
-import type { TProjectId } from '@/types';
+import type { AuthenticatedEntity, TProjectId } from '@/types';
 import { GetLatestBusinessReportDto } from '@/business-report/get-latest-business-report.dto';
 import {
   BusinessReportListRequestParamDto,
@@ -41,6 +41,7 @@ import {
 } from '@/business-report/dtos/business-report-metrics.dto';
 import { BusinessReportMetricsDto } from './dtos/business-report-metrics-dto';
 import { BusinessReportStatusUpdateRequestParamsDto } from '@/business-report/dtos/business-report-status-update.dto';
+import { UserData } from '@/user/user-data.decorator';
 
 @ApiBearerAuth()
 @swagger.ApiTags('Business Reports')
@@ -263,6 +264,7 @@ export class BusinessReportControllerExternal {
     };
   }
 
+  @common.Post()
   @swagger.ApiOperation({
     summary: 'Create business report',
     description: 'Create a new business report for a merchant',
@@ -271,7 +273,6 @@ export class BusinessReportControllerExternal {
     type: CreateBusinessReportDto,
     description: 'Business report creation parameters',
   })
-  @common.Post()
   @swagger.ApiOkResponse({
     description: 'Business report created successfully',
   })
@@ -293,6 +294,7 @@ export class BusinessReportControllerExternal {
       workflowVersion,
     }: CreateBusinessReportDto,
     @CurrentProject() currentProjectId: TProjectId,
+    @UserData() user: AuthenticatedEntity,
   ) {
     const customer = await this.customerService.getByProjectId(currentProjectId);
     await this.businessReportService.checkBusinessReportsLimit(customer);
@@ -340,6 +342,7 @@ export class BusinessReportControllerExternal {
       workflowVersion,
       withQualityControl: customer.config?.withQualityControl ?? false,
       customerId: customer.id,
+      requestedByUserId: user.user?.id,
     });
   }
 

diff --git a/services/workflows-service/src/business-report/business-report.service.ts b/services/workflows-service/src/business-report/business-report.service.ts
@@ -55,6 +55,7 @@ export class BusinessReportService {
     compareToReportId,
     withQualityControl,
     customerId,
+    requestedByUserId,
   }: {
     reportType: MerchantReportType;
     business: Pick<Business, 'id' | 'correlationId'>;
@@ -65,6 +66,7 @@ export class BusinessReportService {
     workflowVersion: MerchantReportVersion;
     withQualityControl: boolean;
     customerId: string;
+    requestedByUserId: string | undefined;
   }) {
     await this.merchantMonitoringClient.create({
       reportType,
@@ -76,6 +78,7 @@ export class BusinessReportService {
       parentCompanyName: merchantName,
       ...(countryCode && { countryCode }),
       ...(compareToReportId && { compareToReportId }),
+      requestedByUserId,
     });
   }
 

diff --git a/services/workflows-service/src/common/guards/verify-unified-api-signature.guard.ts b/services/workflows-service/src/common/guards/verify-unified-api-signature.guard.ts
@@ -17,8 +17,8 @@ export class VerifyUnifiedApiSignatureGuard implements CanActivate {
     if (
       !verifySignature({
         payload: request.body,
-        signature,
         key: env.UNIFIED_API_SHARED_SECRET ?? '',
+        signature,
       })
     ) {
       throw new UnauthorizedException('Invalid signature');

diff --git a/services/workflows-service/src/merchant-monitoring/merchant-monitoring.client.ts b/services/workflows-service/src/merchant-monitoring/merchant-monitoring.client.ts
@@ -64,6 +64,7 @@ export class MerchantMonitoringClient {
     compareToReportId,
     withQualityControl,
     workflowRuntimeDataId,
+    requestedByUserId,
   }: {
     websiteUrl: string;
     countryCode?: CountryCode;
@@ -75,6 +76,7 @@ export class MerchantMonitoringClient {
     compareToReportId?: string;
     withQualityControl?: boolean;
     workflowRuntimeDataId?: string;
+    requestedByUserId?: string;
   }) {
     const response = await this.axios.post(`merchants/analysis`, {
       websiteUrl,
@@ -85,9 +87,11 @@ export class MerchantMonitoringClient {
       ...(compareToReportId && { compareToReportId }),
       withQualityControl,
       merchantId: businessId,
+      // TODO: Check if we can depreacte it, as we get the report infomration from the unified api - we dont need to ge this callback with the data.
       callbackUrl: `${env.APP_API_URL}/api/v1/internal/business-reports/hook?businessId=${businessId}`,
       metadata: {
         ...(workflowRuntimeDataId && { workflowRuntimeDataId }),
+        requestedByUserId,
       },
       customerId,
     });

diff --git a/services/workflows-service/src/user/user.controller.internal.ts b/services/workflows-service/src/user/user.controller.internal.ts
@@ -43,6 +43,28 @@ export class UserControllerInternal {
     );
   }
 
+  @common.Get(':id')
+  @UseGuards(AdminAuthGuard)
+  @swagger.ApiParam({ name: 'id', type: String, description: 'User ID' })
+  @swagger.ApiOkResponse({ type: UserModel })
+  @swagger.ApiNotFoundResponse({ description: 'User not found' })
+  @swagger.ApiForbiddenResponse()
+  async getById(@common.Param('id') id: string): Promise<UserModel> {
+    return this.service.getByIdUnscoped(id, {
+      select: {
+        id: true,
+        firstName: true,
+        lastName: true,
+        email: true,
+        phone: true,
+        avatarUrl: true,
+        updatedAt: true,
+        createdAt: true,
+        roles: true,
+      },
+    });
+  }
+
   @common.Post()
   @swagger.ApiCreatedResponse({ type: [UserModel] })
   @UseGuards(AdminAuthGuard)