Profile page

apps/backend/src/main.ts

@@ -10,6 +10,7 @@ async function bootstrap() {
       whitelist: true,
     })
   );
+  app.enableCors();
   await app.listen(3001);
 }
 bootstrap();

apps/frontend/package.json

@@ -20,11 +20,14 @@
     "@tanstack/react-table": "^8.20.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.14.4",
+    "axios": "^1.7.9",
+    "framer": "^2.4.1",
+    "framer-motion": "^11.15.0",
     "geist": "^1.3.1",
     "lucide-react": "^0.468.0",
     "next": "14.2.13",
     "next-themes": "^0.4.4",
+    "radix-ui": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "shadcn": "^2.1.7",

apps/frontend/src/app/profile/[id]/page.tsx

@@ -0,0 +1,5 @@
+import ProfilePageComponent from '@/components/profile-page';
+
+export default function ProfilePage() {
+  return <ProfilePageComponent />;
+}

apps/frontend/src/components/profile-page.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import axios from 'axios';
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { User } from '@/types/user-dto';
+
+const url = 'http://localhost:3001/users/';
+
+export default function ProfilePageComponent() {
+  const [user, setUser] = useState<User>();
+  const userId = useParams().id;
+  const finalURL = url + userId;
+
+  const getUser = async () => {
+    axios.get<User>(finalURL).then((res) => {
+      setUser(res.data);
+    });
+  };
+
+  useEffect(() => {
+    getUser();
+  }, []);
+
+  return (
+    <div className='container mx-auto p-4'>
+      <Card className='max-w-2xl mx-auto'>
+        <CardHeader className='flex flex-row items-center gap-4'>
+          <Avatar className='w-20 h-20'>
+            <AvatarImage src='' alt={user?.name} />
+            <AvatarFallback>
+              {user?.name
+                .split(' ')
+                .map((n) => n[0])
+                .join('')}
+            </AvatarFallback>
+          </Avatar>
+          <div>
+            <CardTitle className='text-2xl'>{user?.name}</CardTitle>
+            <p className='text-muted-foreground'>{user?.email}</p>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <dl className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
+            <div>
+              <dt className='font-medium text-muted-foreground'>Phone Number</dt>
+              <dd>{user?.phone}</dd>
+            </div>
+            <div>
+              <dt className='font-medium text-muted-foreground'>Room Number</dt>
+              <dd>{user?.roomNumber}</dd>
+            </div>
+            <div className='col-span-full'>
+              <dd className='flex flex-wrap gap-2'>
+                <Badge variant={user?.isDormResident ? 'default' : 'secondary'}>
+                  {user?.isDormResident ? 'Kolis' : 'Nem kolis'}
+                </Badge>
+                <Badge variant={user?.role === 'ADMIN' || user?.role === 'GATEKEEPER' ? 'default' : 'secondary'}>
+                  {user?.role === 'ADMIN' || user?.role === 'GATEKEEPER' ? 'Beengedő' : 'Felhasználó'}
+                </Badge>
+              </dd>
+            </div>
+          </dl>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

apps/frontend/src/components/ui/avatar.tsx

@@ -29,13 +29,8 @@ AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
-    {...props}
-  />
-));
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+>(({ className, ...props }, ref) => <AvatarPrimitive.Fallback ref={ref} {...props} />);
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 export { Avatar, AvatarFallback, AvatarImage };

apps/frontend/src/components/ui/badge.tsx

@@ -0,0 +1,32 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-orange-500 text-slate-50 hover:bg-orange-400/80 dark:bg-orange-700 dark:text-slate-50 dark:hover:bg-orange-500/80',
+        secondary:
+          'border-transparent bg-slate-100 text-slate-900 hover:bg-slate-400/80 dark:bg-zinc-700 dark:text-slate-50 dark:hover:bg-zinc-500/80',
+        destructive:
+          'border-transparent bg-red-500 text-slate-50 hover:bg-red-500/80 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/80',
+        outline: 'text-slate-950 dark:text-slate-50',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

apps/frontend/src/components/ui/card.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable react/prop-types */
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border border-orange-500 bg-white text-slate-950 shadow-sm dark:border-orange-650 dark:bg-zinc-900 dark:text-slate-50',
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm text-slate-500 dark:text-slate-400', className)} {...props} />
+  )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

apps/frontend/src/types/user-dto.tsx

@@ -0,0 +1,15 @@
+import { CardRight, ProfilePicture } from '@prisma/client';
+
+export type User = {
+  id: number;
+  name: string;
+  email: string;
+  phone?: string;
+  isDormResident: boolean;
+  roomNumber?: string;
+  role: string;
+  cardRight?: CardRight;
+  profilePicture?: ProfilePicture;
+  created_at: string;
+  updated_at: string;
+};