102 admin approval mid fi (#106)

* feat: UI from figma WIP

* responsive UI impl from figma; approved section

* feat: handle not found + deny (delete) user

* feat: button confirmation popups

* refine

Author: thaninbew

apps/backend/src/auth/auth.controller.ts

@@ -59,6 +59,28 @@ export class AuthController {
     }
   }
 
+  @Post('/admin-deny')
+  @UseGuards(AuthGuard('jwt'))
+  @UseInterceptors(CurrentUserInterceptor)
+  async adminDeny(
+    @Req() req: any,
+    @Body() body: { email: string },
+  ): Promise<void> {
+    if (req.user.status !== Status.ADMIN) {
+      throw new ForbiddenException('Only admins can deny users');
+    }
+    try {
+      await this.authService.deleteUser(body.email);
+    } catch (e) {
+      console.error('Admin deny error:', e);
+      throw new BadRequestException(e.message);
+    }
+    const dbUsers = await this.usersService.find(body.email);
+    if (dbUsers.length > 0) {
+      await this.usersService.remove(dbUsers[0].id);
+    }
+  }
+
   @Get('/users')
   @UseGuards(AuthGuard('jwt'))
   @UseInterceptors(CurrentUserInterceptor)
@@ -69,9 +91,11 @@ export class AuthController {
       const results = await Promise.all(
         cognitoUsers.map(async (cu) => {
           const email = cu.Attributes.find((a) => a.Name === 'email')?.Value;
+          const name = cu.Attributes.find((a) => a.Name === 'name')?.Value;
           const dbUsers = email ? await this.usersService.find(email) : [];
           return {
             username: cu.Username,
+            name,
             status: cu.UserStatus, // UNCONFIRMED, CONFIRMED, etc.
             email,
             dbUser: dbUsers[0] || null,

apps/frontend/src/components/ConfirmationModal.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { X } from 'lucide-react';
+import { Button } from './ui/button';
+
+export interface ConfirmationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  heading: React.ReactNode;
+  description: React.ReactNode;
+  confirmText?: string;
+  cancelText?: string;
+  confirmVariant?:
+    | 'default'
+    | 'outline'
+    | 'secondary'
+    | 'ghost'
+    | 'destructive'
+    | 'success'
+    | 'share'
+    | 'link'
+    | 'unstyled';
+  isConfirming?: boolean;
+  position?: { top?: number; right?: number; bottom?: number; left?: number };
+}
+
+export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  heading,
+  description,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  confirmVariant = 'success',
+  isConfirming = false,
+  position,
+}) => {
+  if (!isOpen) return null;
+
+  const content = (
+    <div
+      className={`bg-white rounded-xl ${position ? 'shadow-2xl border border-[#e5e5e5]' : 'shadow-lg'} w-[440px] max-w-full overflow-hidden`}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-6 pt-6 pb-4">
+        <h2 className="text-xl font-semibold text-[#171717]">{title}</h2>
+        <button
+          onClick={onClose}
+          className="text-gray-500 hover:text-gray-700 transition-colors"
+          aria-label="Close modal"
+        >
+          <X size={20} strokeWidth={2} />
+        </button>
+      </div>
+
+      {/* Body */}
+      <div className="px-6 pb-8">
+        <h3 className="text-lg font-semibold text-[#171717] mb-2">{heading}</h3>
+        <div className="text-[15px] leading-relaxed text-[#737373]">
+          {description}
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center gap-4 px-6 pb-6 mt-2">
+        <Button
+          variant="outline"
+          onClick={onClose}
+          disabled={isConfirming}
+          className="flex-1 rounded-[10px] h-12 text-base font-normal border-[#e5e5e5] text-black bg-white hover:bg-gray-50 shadow-sm"
+        >
+          {cancelText}
+        </Button>
+        <Button
+          variant={confirmVariant}
+          onClick={onConfirm}
+          disabled={isConfirming}
+          className="flex-1 rounded-[10px] h-12 text-base font-normal"
+        >
+          {isConfirming ? 'Loading...' : confirmText}
+        </Button>
+      </div>
+    </div>
+  );
+
+  if (position) {
+    return (
+      <>
+        {/* Invisible backdrop to capture outside clicks and close the popover */}
+        <div className="fixed inset-0 z-40" onClick={onClose} />
+        <div
+          className="fixed z-50 font-['Source_Sans_Pro']"
+          style={{ ...position, position: 'fixed' }}
+        >
+          {content}
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm font-['Source_Sans_Pro']">
+      {content}
+    </div>
+  );
+};