From 6324c24803a22f170251e4b326aaae648a8b031d Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Mon, 17 Mar 2025 20:11:44 +0100
Subject: [PATCH 01/27] created members page

---
 .gitignore                                    |  1 +
 apps/frontend/src/app/members/page.tsx        | 45 +++++++++++++
 .../src/components/layout/sidebar.tsx         |  9 ++-
 .../src/components/member/memberRow.tsx       | 64 +++++++++++++++++++
 apps/frontend/src/components/ui/badge.tsx     | 32 ++++++++++
 apps/frontend/src/components/ui/card.tsx      | 49 ++++++++++++++
 apps/frontend/src/mocks/users.ts              | 49 ++++++++++++++
 apps/frontend/src/types/user.ts               | 15 +++++
 8 files changed, 263 insertions(+), 1 deletion(-)
 create mode 100644 apps/frontend/src/app/members/page.tsx
 create mode 100644 apps/frontend/src/components/member/memberRow.tsx
 create mode 100644 apps/frontend/src/components/ui/badge.tsx
 create mode 100644 apps/frontend/src/components/ui/card.tsx
 create mode 100644 apps/frontend/src/mocks/users.ts
 create mode 100644 apps/frontend/src/types/user.ts

diff --git a/.gitignore b/.gitignore
index f1175b1..22e7824 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ yarn-debug.log*
 yarn-error.log*
 .DS_Store
 .env
+.env
diff --git a/apps/frontend/src/app/members/page.tsx b/apps/frontend/src/app/members/page.tsx
new file mode 100644
index 0000000..89af84e
--- /dev/null
+++ b/apps/frontend/src/app/members/page.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import MemberRow from '@components/member/memberRow';
+import { Input } from '@components/ui/input';
+import { Table, TableBody, TableCell, TableRow } from '@components/ui/table';
+import { useEffect, useState } from 'react';
+
+import { mockUsers } from '@/mocks/users';
+
+export default function Members() {
+  const data = mockUsers;
+  const [filteredData, setFilteredData] = useState(data);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  useEffect(() => {
+    setFilteredData(data.filter((user) => user.name.toLowerCase().includes(searchTerm.toLowerCase())));
+  }, [searchTerm]);
+
+  return (
+    <div className='w-full'>
+      <div className='flex items-center justify-between flex-row p-4'>
+        <h1 className='text-2xl font-semibold text-primary'>Felhasználók</h1>
+        <Input
+          placeholder='Keresés...'
+          value={searchTerm}
+          onChange={(event) => setSearchTerm(event.target.value)}
+          className='max-w-sm target:ring-0'
+        />
+      </div>
+      <Table>
+        <TableBody>
+          {filteredData.length ? (
+            filteredData.map((user) => <MemberRow user={user} key={user.id} />)
+          ) : (
+            <TableRow>
+              <TableCell colSpan={4} className='h-24 text-center'>
+                Nincs találat.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/layout/sidebar.tsx b/apps/frontend/src/components/layout/sidebar.tsx
index 333fbc0..3c1846f 100644
--- a/apps/frontend/src/components/layout/sidebar.tsx
+++ b/apps/frontend/src/components/layout/sidebar.tsx
@@ -8,6 +8,7 @@ import {
   MicVocal,
   Plus,
   Radio,
+  Users2,
 } from 'lucide-react';
 import Link from 'next/link';
 
@@ -26,11 +27,17 @@ export function Sidebar() {
             </Link>
           </Button>
           <Button variant='blast' className='w-full justify-start' asChild>
-            <Link href='/'>
+            <Link href='/bands'>
               <ListMusic className='mr-2 h-4 w-4' />
               Bands
             </Link>
           </Button>
+          <Button variant='blast' className='w-full justify-start' asChild>
+            <Link href='/members'>
+              <Users2 className='mr-2 h-4 w-4' />
+              Members
+            </Link>
+          </Button>
         </div>
 
         <div className='pt-4'>
diff --git a/apps/frontend/src/components/member/memberRow.tsx b/apps/frontend/src/components/member/memberRow.tsx
new file mode 100644
index 0000000..e7fac1f
--- /dev/null
+++ b/apps/frontend/src/components/member/memberRow.tsx
@@ -0,0 +1,64 @@
+import { Collapsible } from '@components/ui/collapsible';
+import { TableCell, TableRow } from '@components/ui/table';
+
+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';
+
+export default function MemberRow({ user }: { user: User }) {
+  return (
+    <Collapsible key={user.id} asChild>
+      <>
+        <TableRow className='border-0'>
+          <TableCell>
+            <Card>
+              <div className='flex justify-between'>
+                <div>
+                  <CardHeader>
+                    <div className='col-span-full'>
+                      <div>
+                        <CardTitle className='text-xl'>{user?.name}</CardTitle>
+                        <dd className='text-muted-foreground flex flex-wrap gap-2'>
+                          <p>{user?.email}</p>
+                          <p>{user?.phone}</p>
+                        </dd>
+                        <p className='text-muted-foreground'>{user?.roomNumber}</p>
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <div className='col-span-full'>
+                      <dd className='flex flex-wrap gap-2'>
+                        {user.role === 'ADMIN' && <Badge variant='destructive'>Admin</Badge>}
+                        <Badge
+                          variant={user?.role === 'ADMIN' || user?.role === 'GATEKEEPER' ? 'default' : 'secondary'}
+                        >
+                          {user?.role === 'ADMIN' || user?.role === 'GATEKEEPER' ? 'Beengedő' : 'Felhasználó'}
+                        </Badge>
+                        <Badge variant={user?.isDormResident ? 'default' : 'secondary'}>
+                          {user?.isDormResident ? 'Kolis' : 'Nem kolis'}
+                        </Badge>
+                      </dd>
+                    </div>
+                  </CardContent>
+                </div>
+                <div className='col-span-full flex items-center mr-5'>
+                  <Avatar className='w-24 h-24'>
+                    <AvatarImage src='' alt={user?.name} />
+                    <AvatarFallback>
+                      {user?.name
+                        .split(' ')
+                        .map((n) => n[0])
+                        .join('')}
+                    </AvatarFallback>
+                  </Avatar>
+                </div>
+              </div>
+            </Card>
+          </TableCell>
+        </TableRow>
+      </>
+    </Collapsible>
+  );
+}
diff --git a/apps/frontend/src/components/ui/badge.tsx b/apps/frontend/src/components/ui/badge.tsx
new file mode 100644
index 0000000..ddffd45
--- /dev/null
+++ b/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 };
diff --git a/apps/frontend/src/components/ui/card.tsx b/apps/frontend/src/components/ui/card.tsx
new file mode 100644
index 0000000..45f7a8d
--- /dev/null
+++ b/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 };
diff --git a/apps/frontend/src/mocks/users.ts b/apps/frontend/src/mocks/users.ts
new file mode 100644
index 0000000..e5667c5
--- /dev/null
+++ b/apps/frontend/src/mocks/users.ts
@@ -0,0 +1,49 @@
+import { User } from '@/types/user';
+
+export const mockUsers: User[] = [
+  {
+    id: 1,
+    name: 'Alice Walker',
+    email: 'alice@email.com',
+    isDormResident: true,
+    roomNumber: '201',
+    role: 'USER',
+    profilePicture: '/placeholder.svg',
+    created_at: '2021-08-01T00:00:00.000Z',
+    updated_at: '2021-08-01T00:00:00.000Z',
+  },
+  {
+    id: 2,
+    name: 'Bob Smith',
+    email: 'bob@email.com',
+    phone: '987654321',
+    isDormResident: false,
+    role: 'ADMIN',
+    profilePicture: '/placeholder.svg',
+    created_at: '2021-08-01T00:00:00.000Z',
+    updated_at: '2021-08-01T00:00:00.000Z',
+  },
+  {
+    id: 3,
+    name: 'Charlie Brown',
+    email: 'charlie@email.com',
+    phone: '123456789',
+    isDormResident: true,
+    roomNumber: '202',
+    role: 'GATEKEEPER',
+    profilePicture: '/placeholder.svg',
+    created_at: '2021-08-01T00:00:00.000Z',
+    updated_at: '2021-08-01T00:00:00.000Z',
+  },
+  {
+    id: 4,
+    name: 'David Johnson',
+    email: 'david@email.com',
+    phone: '1239874748',
+    isDormResident: false,
+    role: 'USER',
+    profilePicture: '/placeholder.svg',
+    created_at: '2021-08-01T00:00:00.000Z',
+    updated_at: '2021-08-01T00:00:00.000Z',
+  },
+];
diff --git a/apps/frontend/src/types/user.ts b/apps/frontend/src/types/user.ts
new file mode 100644
index 0000000..068cef0
--- /dev/null
+++ b/apps/frontend/src/types/user.ts
@@ -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 | string;
+  created_at: string;
+  updated_at: string;
+};

From ad549d41a87377d2c72699a0e0d9989f8cc9386e Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Mon, 17 Mar 2025 20:12:25 +0100
Subject: [PATCH 02/27] fixed git ignore

---
 .gitignore | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 22e7824..f1175b1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,4 +6,3 @@ yarn-debug.log*
 yarn-error.log*
 .DS_Store
 .env
-.env

From f40677973b5cb15fdda4ed424643a349fbeb69cd Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Mon, 17 Mar 2025 20:23:44 +0100
Subject: [PATCH 03/27] fixed eslint issue

---
 .../src/components/member/memberRow.tsx       | 90 +++++++++----------
 1 file changed, 43 insertions(+), 47 deletions(-)

diff --git a/apps/frontend/src/components/member/memberRow.tsx b/apps/frontend/src/components/member/memberRow.tsx
index e7fac1f..5939c05 100644
--- a/apps/frontend/src/components/member/memberRow.tsx
+++ b/apps/frontend/src/components/member/memberRow.tsx
@@ -9,56 +9,52 @@ import { User } from '@/types/user';
 export default function MemberRow({ user }: { user: User }) {
   return (
     <Collapsible key={user.id} asChild>
-      <>
-        <TableRow className='border-0'>
-          <TableCell>
-            <Card>
-              <div className='flex justify-between'>
-                <div>
-                  <CardHeader>
-                    <div className='col-span-full'>
-                      <div>
-                        <CardTitle className='text-xl'>{user?.name}</CardTitle>
-                        <dd className='text-muted-foreground flex flex-wrap gap-2'>
-                          <p>{user?.email}</p>
-                          <p>{user?.phone}</p>
-                        </dd>
-                        <p className='text-muted-foreground'>{user?.roomNumber}</p>
-                      </div>
-                    </div>
-                  </CardHeader>
-                  <CardContent>
-                    <div className='col-span-full'>
-                      <dd className='flex flex-wrap gap-2'>
-                        {user.role === 'ADMIN' && <Badge variant='destructive'>Admin</Badge>}
-                        <Badge
-                          variant={user?.role === 'ADMIN' || user?.role === 'GATEKEEPER' ? 'default' : 'secondary'}
-                        >
-                          {user?.role === 'ADMIN' || user?.role === 'GATEKEEPER' ? 'Beengedő' : 'Felhasználó'}
-                        </Badge>
-                        <Badge variant={user?.isDormResident ? 'default' : 'secondary'}>
-                          {user?.isDormResident ? 'Kolis' : 'Nem kolis'}
-                        </Badge>
+      <TableRow className='border-0'>
+        <TableCell>
+          <Card>
+            <div className='flex justify-between'>
+              <div>
+                <CardHeader>
+                  <div className='col-span-full'>
+                    <div>
+                      <CardTitle className='text-xl'>{user?.name}</CardTitle>
+                      <dd className='text-muted-foreground flex flex-wrap gap-2'>
+                        <p>{user?.email}</p>
+                        <p>{user?.phone}</p>
                       </dd>
+                      <p className='text-muted-foreground'>{user?.roomNumber}</p>
                     </div>
-                  </CardContent>
-                </div>
-                <div className='col-span-full flex items-center mr-5'>
-                  <Avatar className='w-24 h-24'>
-                    <AvatarImage src='' alt={user?.name} />
-                    <AvatarFallback>
-                      {user?.name
-                        .split(' ')
-                        .map((n) => n[0])
-                        .join('')}
-                    </AvatarFallback>
-                  </Avatar>
-                </div>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className='col-span-full'>
+                    <dd className='flex flex-wrap gap-2'>
+                      {user.role === 'ADMIN' && <Badge variant='destructive'>Admin</Badge>}
+                      <Badge variant={user?.role === 'ADMIN' || user?.role === 'GATEKEEPER' ? 'default' : 'secondary'}>
+                        {user?.role === 'ADMIN' || user?.role === 'GATEKEEPER' ? 'Beengedő' : 'Felhasználó'}
+                      </Badge>
+                      <Badge variant={user?.isDormResident ? 'default' : 'secondary'}>
+                        {user?.isDormResident ? 'Kolis' : 'Nem kolis'}
+                      </Badge>
+                    </dd>
+                  </div>
+                </CardContent>
+              </div>
+              <div className='col-span-full flex items-center mr-5'>
+                <Avatar className='w-24 h-24'>
+                  <AvatarImage src='' alt={user?.name} />
+                  <AvatarFallback>
+                    {user?.name
+                      .split(' ')
+                      .map((n) => n[0])
+                      .join('')}
+                  </AvatarFallback>
+                </Avatar>
               </div>
-            </Card>
-          </TableCell>
-        </TableRow>
-      </>
+            </div>
+          </Card>
+        </TableCell>
+      </TableRow>
     </Collapsible>
   );
 }

From 7d8eabbfb78d01f4460d0e5f39b5936ed249008b Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Tue, 17 Jun 2025 16:34:33 +0200
Subject: [PATCH 04/27] new tile design

---
 apps/frontend/src/app/members/page.tsx        | 25 +++----
 .../src/components/member/memberRow.tsx       | 60 -----------------
 .../src/components/member/memberTile.tsx      | 67 +++++++++++++++++++
 3 files changed, 77 insertions(+), 75 deletions(-)
 delete mode 100644 apps/frontend/src/components/member/memberRow.tsx
 create mode 100644 apps/frontend/src/components/member/memberTile.tsx

diff --git a/apps/frontend/src/app/members/page.tsx b/apps/frontend/src/app/members/page.tsx
index 89af84e..1c51b1a 100644
--- a/apps/frontend/src/app/members/page.tsx
+++ b/apps/frontend/src/app/members/page.tsx
@@ -1,10 +1,9 @@
 'use client';
 
-import MemberRow from '@components/member/memberRow';
 import { Input } from '@components/ui/input';
-import { Table, TableBody, TableCell, TableRow } from '@components/ui/table';
 import { useEffect, useState } from 'react';
 
+import MemberTile from '@/components/member/memberTile';
 import { mockUsers } from '@/mocks/users';
 
 export default function Members() {
@@ -27,19 +26,15 @@ export default function Members() {
           className='max-w-sm target:ring-0'
         />
       </div>
-      <Table>
-        <TableBody>
-          {filteredData.length ? (
-            filteredData.map((user) => <MemberRow user={user} key={user.id} />)
-          ) : (
-            <TableRow>
-              <TableCell colSpan={4} className='h-24 text-center'>
-                Nincs találat.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
+      {filteredData.length ? (
+        <div className='grid gap-4 py-4 auto-rows-fr grid-cols-[repeat(auto-fit,minmax(240px,1fr))]'>
+          {filteredData.map((user) => (
+            <MemberTile user={user} key={user.id} />
+          ))}
+        </div>
+      ) : (
+        <div className='h-24 flex items-center justify-center text-center'>Nincs találat.</div>
+      )}
     </div>
   );
 }
diff --git a/apps/frontend/src/components/member/memberRow.tsx b/apps/frontend/src/components/member/memberRow.tsx
deleted file mode 100644
index 5939c05..0000000
--- a/apps/frontend/src/components/member/memberRow.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Collapsible } from '@components/ui/collapsible';
-import { TableCell, TableRow } from '@components/ui/table';
-
-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';
-
-export default function MemberRow({ user }: { user: User }) {
-  return (
-    <Collapsible key={user.id} asChild>
-      <TableRow className='border-0'>
-        <TableCell>
-          <Card>
-            <div className='flex justify-between'>
-              <div>
-                <CardHeader>
-                  <div className='col-span-full'>
-                    <div>
-                      <CardTitle className='text-xl'>{user?.name}</CardTitle>
-                      <dd className='text-muted-foreground flex flex-wrap gap-2'>
-                        <p>{user?.email}</p>
-                        <p>{user?.phone}</p>
-                      </dd>
-                      <p className='text-muted-foreground'>{user?.roomNumber}</p>
-                    </div>
-                  </div>
-                </CardHeader>
-                <CardContent>
-                  <div className='col-span-full'>
-                    <dd className='flex flex-wrap gap-2'>
-                      {user.role === 'ADMIN' && <Badge variant='destructive'>Admin</Badge>}
-                      <Badge variant={user?.role === 'ADMIN' || user?.role === 'GATEKEEPER' ? 'default' : 'secondary'}>
-                        {user?.role === 'ADMIN' || user?.role === 'GATEKEEPER' ? 'Beengedő' : 'Felhasználó'}
-                      </Badge>
-                      <Badge variant={user?.isDormResident ? 'default' : 'secondary'}>
-                        {user?.isDormResident ? 'Kolis' : 'Nem kolis'}
-                      </Badge>
-                    </dd>
-                  </div>
-                </CardContent>
-              </div>
-              <div className='col-span-full flex items-center mr-5'>
-                <Avatar className='w-24 h-24'>
-                  <AvatarImage src='' alt={user?.name} />
-                  <AvatarFallback>
-                    {user?.name
-                      .split(' ')
-                      .map((n) => n[0])
-                      .join('')}
-                  </AvatarFallback>
-                </Avatar>
-              </div>
-            </div>
-          </Card>
-        </TableCell>
-      </TableRow>
-    </Collapsible>
-  );
-}
diff --git a/apps/frontend/src/components/member/memberTile.tsx b/apps/frontend/src/components/member/memberTile.tsx
new file mode 100644
index 0000000..7d4b6c7
--- /dev/null
+++ b/apps/frontend/src/components/member/memberTile.tsx
@@ -0,0 +1,67 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Card } from '@/components/ui/card';
+import { User } from '@/types/user';
+
+function getRoleLabel(role: string) {
+  switch (role) {
+    case 'ADMIN':
+      return 'Admin';
+    case 'GATEKEEPER':
+      return 'Beengedő';
+    default:
+      return 'Felhasználó';
+  }
+}
+
+function getRoleVariant(role: string) {
+  switch (role) {
+    case 'ADMIN':
+      return 'destructive';
+    case 'GATEKEEPER':
+      return 'default';
+    default:
+      return 'secondary';
+  }
+}
+
+export default function MemberTile({ user }: { user: User }) {
+  return (
+    <div className='flex flex-col items-center'>
+      <Card className='w-full max-w-60 h-64 flex flex-col items-center justify-between p-4 relative'>
+        {/* Role badge at the top */}
+        <div className='flex justify-end w-full'>
+          <Badge className='py-1 text-xs' variant={getRoleVariant(user.role)}>
+            {getRoleLabel(user.role)}
+          </Badge>
+        </div>
+        {/* Profile picture */}
+        <div className='flex-1 flex flex-col justify-center items-center mt-2 mb-2'>
+          <Avatar className='w-32 h-32'>
+            <AvatarImage src={typeof user.profilePicture === 'string' ? user.profilePicture : ''} alt={user.name} />
+            <AvatarFallback>
+              {user.name
+                .split(' ')
+                .map((n) => n[0])
+                .join('')}
+            </AvatarFallback>
+          </Avatar>
+        </div>
+        {/* Name */}
+        <div className='text-left font-semibold text-lg truncate w-full'>{user.name}</div>
+      </Card>
+      {/* Details below the tile */}
+      <div className='flex flex-row justify-between mt-2 text-sm w-full max-w-60'>
+        <div className='flex flex-col items-start ml-4'>
+          <span>{user.email}</span>
+          {user.phone && <span>{user.phone}</span>}
+        </div>
+        {user.roomNumber && (
+          <div className='flex flex-col items-end mr-4'>
+            <span>{user.roomNumber}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

From 6fe6079acea2412fe45effc4430d2621ac19061f Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Tue, 17 Jun 2025 17:22:51 +0200
Subject: [PATCH 05/27] created stats page

---
 apps/frontend/src/app/members/page.tsx        |  2 +-
 apps/frontend/src/app/stats/page.tsx          | 61 +++++++++++++++++++
 .../src/components/layout/sidebar.tsx         |  2 +-
 apps/frontend/src/mocks/gatekeepings.ts       | 10 +++
 apps/frontend/src/types/gatekeeping.ts        |  5 ++
 5 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 apps/frontend/src/app/stats/page.tsx
 create mode 100644 apps/frontend/src/mocks/gatekeepings.ts
 create mode 100644 apps/frontend/src/types/gatekeeping.ts

diff --git a/apps/frontend/src/app/members/page.tsx b/apps/frontend/src/app/members/page.tsx
index 1c51b1a..e78a654 100644
--- a/apps/frontend/src/app/members/page.tsx
+++ b/apps/frontend/src/app/members/page.tsx
@@ -7,7 +7,7 @@ import MemberTile from '@/components/member/memberTile';
 import { mockUsers } from '@/mocks/users';
 
 export default function Members() {
-  const data = mockUsers;
+  const data = mockUsers; //TODO: replace with real data
   const [filteredData, setFilteredData] = useState(data);
   const [searchTerm, setSearchTerm] = useState('');
 
diff --git a/apps/frontend/src/app/stats/page.tsx b/apps/frontend/src/app/stats/page.tsx
new file mode 100644
index 0000000..64a6054
--- /dev/null
+++ b/apps/frontend/src/app/stats/page.tsx
@@ -0,0 +1,61 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { mockGatekeepings } from '@/mocks/gatekeepings';
+import { mockUsers } from '@/mocks/users';
+import { User } from '@/types/user';
+
+const currentUser: User = mockUsers[1]; //TODO: replace with real user
+const data = mockGatekeepings; //TODO: replace with real data
+
+function isAuthorized(user: User) {
+  return user.role === 'ADMIN' || user.role === 'GATEKEEPER';
+}
+
+function getCurrentPeriodStart() {
+  //TODO: replace with real period
+  const now = new Date();
+  return new Date(now.getFullYear(), now.getMonth(), 1);
+}
+
+export default function Stats() {
+  if (!isAuthorized(currentUser)) {
+    return (
+      <div className='w-full'>
+        <div className='p-8 text-center text-red-500 font-bold'>
+          Access denied. You do not have permission to view this page.
+        </div>
+      </div>
+    );
+  }
+
+  const periodStart = getCurrentPeriodStart();
+  const gatekeepers = mockUsers.filter((u) => u.role === 'GATEKEEPER' || u.role === 'ADMIN');
+
+  const gatekeepingCounts = gatekeepers.map((gk) => {
+    const count = data.filter((gkEvent) => gkEvent.userId === gk.id && new Date(gkEvent.date) >= periodStart).length;
+    return { ...gk, count };
+  });
+
+  return (
+    <div className='w-full'>
+      <div className='flex items-center justify-between flex-row p-4'>
+        <h1 className='text-2xl font-semibold text-primary'>Beengedési statisztika</h1>
+      </div>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className='font-semibold'>Név</TableHead>
+            <TableHead className='font-semibold'>Beengedések</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {gatekeepingCounts.map((gk) => (
+            <TableRow key={gk.id}>
+              <TableCell className='font-medium'>{gk.name}</TableCell>
+              <TableCell>{gk.count}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/layout/sidebar.tsx b/apps/frontend/src/components/layout/sidebar.tsx
index 3c1846f..22ed5d5 100644
--- a/apps/frontend/src/components/layout/sidebar.tsx
+++ b/apps/frontend/src/components/layout/sidebar.tsx
@@ -74,7 +74,7 @@ export function Sidebar() {
               </Link>
             </Button>
             <Button variant='blast' className='w-full justify-start' asChild>
-              <Link href='/'>
+              <Link href='/stats'>
                 <BarChart3 className='mr-2 h-4 w-4' />
                 Statistics
               </Link>
diff --git a/apps/frontend/src/mocks/gatekeepings.ts b/apps/frontend/src/mocks/gatekeepings.ts
new file mode 100644
index 0000000..740703e
--- /dev/null
+++ b/apps/frontend/src/mocks/gatekeepings.ts
@@ -0,0 +1,10 @@
+export const mockGatekeepings = [
+  { id: 1, userId: 3, date: '2025-06-01T10:00:00.000Z' },
+  { id: 2, userId: 3, date: '2025-06-02T12:00:00.000Z' },
+  { id: 3, userId: 2, date: '2025-06-03T14:00:00.000Z' },
+  { id: 4, userId: 3, date: '2025-06-04T16:00:00.000Z' },
+  { id: 5, userId: 2, date: '2025-06-05T18:00:00.000Z' },
+  { id: 6, userId: 3, date: '2025-06-06T20:00:00.000Z' },
+  { id: 7, userId: 2, date: '2025-06-07T22:00:00.000Z' },
+  { id: 8, userId: 3, date: '2025-06-08T23:00:00.000Z' },
+];
diff --git a/apps/frontend/src/types/gatekeeping.ts b/apps/frontend/src/types/gatekeeping.ts
new file mode 100644
index 0000000..a14557e
--- /dev/null
+++ b/apps/frontend/src/types/gatekeeping.ts
@@ -0,0 +1,5 @@
+export type Gatekeeping = {
+  id: number;
+  userId: number;
+  date: string;
+};

From 0a48c563d7b01803ec84ea695671aa4aa3c2c3b5 Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Wed, 18 Jun 2025 15:20:32 +0200
Subject: [PATCH 06/27] created rules page

---
 apps/frontend/src/app/rules/page.tsx | 221 +++++++++++++++++++++++++++
 1 file changed, 221 insertions(+)
 create mode 100644 apps/frontend/src/app/rules/page.tsx

diff --git a/apps/frontend/src/app/rules/page.tsx b/apps/frontend/src/app/rules/page.tsx
new file mode 100644
index 0000000..a9a7620
--- /dev/null
+++ b/apps/frontend/src/app/rules/page.tsx
@@ -0,0 +1,221 @@
+import { Card, CardContent } from '@/components/ui/card';
+
+export default function Rules() {
+  return (
+    <div className='w-full overflow-y-auto'>
+      <div className='flex items-center justify-between flex-row p-4'>
+        <h1 className='text-2xl font-semibold text-primary'>Próbaterem Szabályzat</h1>
+      </div>
+      <Card className='m-4'>
+        <CardContent>
+          <h1 className='text-2xl font-semibold mt-8 mb-4'>Általános tudnivalók</h1>
+          <p className='mb-4'>
+            A próbatermet csak olyan zenekarok használhatják, melyeknek van legalább egy volt vagy jelenlegi BME-s
+            tagja.
+          </p>
+          <p className='mb-4'>
+            Ha olyan problémád van, melyet a lent leírtak nem fednek, úgy a{' '}
+            <a href='/about' className='text-orange-500 underline' target='_blank' rel='noopener noreferrer'>
+              főispánt / teremispánt
+            </a>{' '}
+            kell keresni.
+          </p>
+
+          <h2 className='text-2xl font-semibold mt-8 mb-4'>Próbaterem használatához szükséges teendők:</h2>
+          <ol className='list-decimal list-inside space-y-2 mb-4'>
+            <li>
+              <a href='/register' className='text-orange-500 underline' target='_blank' rel='noopener noreferrer'>
+                Regisztrálj
+              </a>{' '}
+              vagy{' '}
+              <a href='/login' className='text-orange-500 underline' target='_blank' rel='noopener noreferrer'>
+                jelentkezz be.
+              </a>
+            </li>
+            <li>
+              Iratkozz fel a{' '}
+              <a
+                href='https://lists.sch.bme.hu/wws/subscribe/probaterem'
+                className='text-orange-500 underline'
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                levlistánkra.
+              </a>
+            </li>
+            <li>
+              Töltsd ki a profilod. Ha korábban regisztráltál, ellenőrizd, hogy az elérhetőségeid még aktuálisak-e!
+            </li>
+            <li>Jelentkezz időszakra a profilodon. (Jobb felső sarokban a profilnevedre kattintva)</li>
+            <li>Foglald le első időpontod a foglalás fül alatt.</li>
+            <li>
+              Az első próbád után, ha úgy döntöttél szeretnél a próbatermünkbe járni akkor kérd meg a beengedőd a
+              regisztrációd elfogadtatására.
+            </li>
+            <li>
+              Ha bandával akarsz próbálni, minden tag regisztrációja és jelentkezésének elfogadása után írj a
+              teremispánnak egy e-mailt a banda nevével és a tagok felhasználóneveinek listájával, létrehozás után
+              minden tag tud a banda nevében foglalni.
+            </li>
+          </ol>
+          <p className='mb-4'>
+            A fentiekkel kapcsolatban bármilyen probléma esetén írjatok a levlistára (
+            <a href='mailto:probaterem@sch.bme.hu' className='text-orange-500 underline'>
+              probaterem@sch.bme.hu
+            </a>
+            ).
+          </p>
+
+          <h2 className='text-2xl font-semibold mt-8 mb-4'>Bejutás a koliba:</h2>
+          <ul className='list-disc list-inside mb-4 space-y-2'>
+            <li>Ha van SCH-s tag, akkor vendégül tudja fogadni a többieket.</li>
+            <li>A külsősöket a beengedő tudja fogadni.</li>
+          </ul>
+
+          <h2 className='text-2xl font-semibold mt-8 mb-4'>Próbarend:</h2>
+          <ol className='list-decimal list-inside mb-4 space-y-2'>
+            <li>
+              Első próba alkalmával jelezd a beengedődnek, hogy mondja el a szükséges tudnivalókat a terem használatával
+              kapcsolatban. Ezeket a beengedők bármikor szívesen elmondják újra, kérdezd őket bátran!
+            </li>
+            <li>
+              Csak elfogadott jelentkezéssel rendelkező tagok használhatják a próbatermet. Ez alól még egy szám erejéig
+              sem lehet kivételt tenni.
+            </li>
+            <li>
+              Időpontot a weblapon tudsz foglalni. Ezt minél hamarabb elintézed, annál esélyesebb, hogy lesz beengedőd.
+              Amennyiben nincs, írj a listánkra! (
+              <a href='mailto:probaterem@sch.bme.hu' className='text-orange-500 underline'>
+                probaterem@sch.bme.hu
+              </a>
+              )
+            </li>
+            <li>
+              Egy héten összesen 6 óra, naponta pedig 3 óra foglalható fixen. Természetesen foglalhatsz többet is, de az
+              már feltételes foglalás lesz, ami azt jelenti, hogy bárki ráfoglalhat erre az időpontra (akár Te is
+              másokéra). Figyeljetek rá, hogy az egyéni tagok foglalásai nem ekvivalensek a bandák foglalásaival (lásd:{' '}
+              <a href='#sanctions' className='text-orange-500 underline'>
+                Szankciók
+              </a>
+              ).
+            </li>
+            <li>
+              A próba időpontjában a weben kiírt beengedőt kell keresni, hogy kinyissa a termet. A beengedő
+              elérhetőségei szintén a honlapon találhatóak (szobaszám, mobilszám).
+            </li>
+            <li>
+              Ha lefoglalsz egy időpontot, igyekezz pontosan megjelenni, mert 10 perces késés esetén a beengedő nem
+              köteles beengedni.
+            </li>
+            <li>
+              A beengedő segít beállítani a felszerelést, ha próba közben bármi kérdés vagy gond van, akkor hozzá kell
+              fordulni.
+            </li>
+            <li>
+              A teremfelszerelést a próba végeztével tedd a helyére, oda, és olyan állapotban, ahogy azt találtad, vagy
+              a beengedővel megbeszélted. Ha a beengedő úgy találja, hogy a terem nincs rendben, kötelezhet téged az
+              újbóli rendrakásra.
+            </li>
+            <li>
+              Figyelj rá, hogy a terem pontban a foglalásod végeztével átadható állapotban legyen. Tapasztalatunk
+              szerint egy bandának az összepakoláshoz kb. 15 perc szükséges.
+            </li>
+            <li>
+              A termet a próba végeztével a beengedő jelenléte és jóváhagyása nélkül semmilyen esetben sem hagyhatod el.
+            </li>
+            <li>A próbaterem területén az alkoholfogyasztás és a teljes épület területén a dohányzás tilos.</li>
+            <li>
+              A próbateremben tilos szemetelni (papírzsepi, törött dobverő, stb.), ezeket a próba végén dobd ki a
+              szemetesbe.
+            </li>
+          </ol>
+
+          <h2 className='text-2xl font-semibold mt-8 mb-4'>Szerkók:</h2>
+          <ul className='list-disc list-inside mb-4 space-y-2'>
+            <li>A próbaterem felszereléseinek kölcsönadására nincs lehetőségünk!</li>
+            <li>Az eszközökre tilos nyitott tetejű edényben bármilyen folyadékot, ételt rakni!</li>
+          </ul>
+
+          <h3 className='text-lg font-semibold mt-6 mb-2'>Dobcucc:</h3>
+          <ul className='list-disc list-inside mb-4 space-y-2'>
+            <li>Vigyázz, hogy ne érjenek egymáshoz a dobtestek és a cintányérok se érjenek hozzá a falhoz!</li>
+            <li>Figyelj a cintányérok helyes beállítására, használat során mindig láss rá a tetejükre.</li>
+            <li>Ne húzd túl a szárnyas csavarokat, mert könnyen megszakadhat a menet!</li>
+            <li>Ha végeztél, engedd le a sodronyt a pergőn, és engedd le a lábcint, hogy ne feszüljenek a rugók!</li>
+          </ul>
+
+          <h3 className='text-lg font-semibold mt-6 mb-2'>Basszuserősítő:</h3>
+          <ul className='list-disc list-inside mb-4 space-y-2'>
+            <li>Ki- és bekapcsolásnál a hangerő legyen nullán!</li>
+            <li>
+              Bekapcsolás előtt győződj meg róla, hogy a láda nem ér a falhoz, a csatlakoztatott kábel feje nem feszül a
+              fal és a láda közé.
+            </li>
+            <li>A ládát a helyéről ne mozgasd el, illetve ne ülj rá.</li>
+            <li>Figyelj rá, hogy a fej szellőző nyílása szabadon maradjon a tetején.</li>
+            <li>Ne tekerdd túl a hangerőt, ha villog a peek led, vegyél vissza!</li>
+            <li>Kikapcsolás után kapcsold le a hálózati elosztót!</li>
+          </ul>
+
+          <h3 className='text-lg font-semibold mt-6 mb-2'>Peavey:</h3>
+          <ul className='list-disc list-inside mb-4 space-y-2'>
+            <li>Ki-be kapcsolásnál a hangerők (tiszta és torzított csatorna) legyen lecsavarva!</li>
+            <li>
+              Bekapcsolásnál a jobb oldali kapcsolót (Power) kapcsold fel először, ez fűti a csöveket, majd csak 1-2
+              perccel később kapcsold fel a másikat (Standby) is!
+            </li>
+            <li>
+              Kikapcsolásnál fordított sorrendben kapcsold ki a kapcsolókat: először a Standby-t, és várj fél percet,
+              mielőtt lekapcsolod a Powert is.
+            </li>
+            <li>Kikapcsolás után kapcsold le a hálózati elosztót!</li>
+          </ul>
+
+          <h3 className='text-lg font-semibold mt-6 mb-2'>Line6:</h3>
+          <ul className='list-disc list-inside mb-4 space-y-2'>
+            <li>Ki-be kapcsolásnál a master hangerő legyen lecsavarva!</li>
+            <li>Kikapcsolás után kapcsold le a hálózati elosztót!</li>
+          </ul>
+
+          <h3 className='text-lg font-semibold mt-6 mb-2'>Keverő és hangfalak:</h3>
+          <ul className='list-disc list-inside mb-4 space-y-2'>
+            <li>
+              Ezeket az eszközöket kizárólag a beengedők kezelhetik. A próbátok elején jelezzétek, ha szükségetek van
+              rá.
+            </li>
+          </ul>
+
+          <h2 className='text-2xl font-semibold mt-8 mb-4' id='sanctions'>
+            Szankciók:
+          </h2>
+          <p className='mb-2'>
+            A büntetések szintjei: szóbeli figyelmeztetés (1), állandó időpont megvonás (2), minden foglalásod
+            feltételessé válik (3), foglalási jog megvonása (5).
+          </p>
+          <p className='mb-2'>
+            Az kihágások megítélésében a beengedőknek abszolút joga van, ha nem érzed igazságosnak, keresd meg a
+            körvezetőt! A szankciók jogosságát a körvezetőség ítéli meg.
+          </p>
+          <p className='mb-2'>Néhány kihágás és az értük járó büntetőpont, a teljesség igénye nélkül:</p>
+          <ul className='list-disc list-inside mb-4 space-y-2'>
+            <li>A terem késedelmes átadása (akár a rendrakási kötelezettség miatt) – 1 pont / 5 perc</li>
+            <li>A terem állapotának megrongálása – 1-2 pont</li>
+            <li>
+              A terem felszerelésének megrongálása – 1-5 pont (a rendeltetésszerű használatból eredő károkért nem
+              számolunk fel büntetőpontot)
+            </li>
+            <li>Észrevehető kár jelentésének elmulasztása – 2 pont (rendeltetésszerű használat esetén is)</li>
+            <li>Időpontban nem megjelenés, előzetes értesítés nélkül – 2 pont</li>
+            <li>A terem elhagyása nem átadható állapotban a próba végeztével a beengedő jelenlétében – 3 pont</li>
+            <li>A terem elhagyása a beengedő jelenléte nélkül – 4 pont</li>
+            <li>A vezetőség engedélye nélkül a próbálón/bandán kívüli személyek terembe való beengedése - 5 pont</li>
+            <li>Nyitott belső ajtó mellett való próba - 2 pont</li>
+            <li>A próbaterem külső ajtajának nyitva hagyása - 2 pont</li>
+            <li>Egyéb kihágásokért a körvezetőség egyéni megítélése szerint járhat büntetőpont.</li>
+          </ul>
+          <p className='mt-8 font-semibold text-2xl'>A szabályzat megváltoztatásának jogát fenntartjuk.</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

From 5830f38d784ba82d96800ea2dc2b32c75f0aff70 Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Wed, 18 Jun 2025 15:20:49 +0200
Subject: [PATCH 07/27] made sidebar interactive

---
 .../src/components/layout/sidebar.tsx         | 63 ++++++++++++++-----
 1 file changed, 49 insertions(+), 14 deletions(-)

diff --git a/apps/frontend/src/components/layout/sidebar.tsx b/apps/frontend/src/components/layout/sidebar.tsx
index 22ed5d5..914e7cd 100644
--- a/apps/frontend/src/components/layout/sidebar.tsx
+++ b/apps/frontend/src/components/layout/sidebar.tsx
@@ -1,3 +1,4 @@
+'use client';
 import {
   BarChart3,
   BookAudio,
@@ -11,28 +12,38 @@ import {
   Users2,
 } from 'lucide-react';
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
 import ActionButton from '@/components/ui/action-button';
 import { Button } from '@/components/ui/button';
 
 export function Sidebar() {
+  const pathname = usePathname();
   return (
     <div className='w-64 p-4 flex flex-col'>
       <div className='mt-10 space-y-10'>
         <div className='space-y-2'>
-          <Button variant='blastActive' className='w-full justify-start' asChild>
+          <Button variant={pathname === '/' ? 'blastActive' : 'blast'} className='w-full justify-start' asChild>
             <Link href='/'>
               <Radio className='mr-2 h-4 w-4' />
               Feed
             </Link>
           </Button>
-          <Button variant='blast' className='w-full justify-start' asChild>
+          <Button
+            variant={pathname.startsWith('/bands') ? 'blastActive' : 'blast'}
+            className='w-full justify-start'
+            asChild
+          >
             <Link href='/bands'>
               <ListMusic className='mr-2 h-4 w-4' />
               Bands
             </Link>
           </Button>
-          <Button variant='blast' className='w-full justify-start' asChild>
+          <Button
+            variant={pathname.startsWith('/members') ? 'blastActive' : 'blast'}
+            className='w-full justify-start'
+            asChild
+          >
             <Link href='/members'>
               <Users2 className='mr-2 h-4 w-4' />
               Members
@@ -43,20 +54,32 @@ export function Sidebar() {
         <div className='pt-4'>
           <h2 className='text-xs uppercase text-zinc-400 font-bold mb-2'>About Us</h2>
           <div className='space-y-2'>
-            <Button variant='blast' className='w-full justify-start' asChild>
-              <Link href='/'>
+            <Button
+              variant={pathname.startsWith('/about') ? 'blastActive' : 'blast'}
+              className='w-full justify-start'
+              asChild
+            >
+              <Link href='/about'>
                 <Heart className='mr-2 h-4 w-4' />
                 MMMK
               </Link>
             </Button>
-            <Button variant='blast' className='w-full justify-start' asChild>
-              <Link href='/'>
+            <Button
+              variant={pathname.startsWith('/room') ? 'blastActive' : 'blast'}
+              className='w-full justify-start'
+              asChild
+            >
+              <Link href='/room'>
                 <MicVocal className='mr-2 h-4 w-4' />
                 The Room
               </Link>
             </Button>
-            <Button variant='blast' className='w-full justify-start' asChild>
-              <Link href='/'>
+            <Button
+              variant={pathname.startsWith('/rules') ? 'blastActive' : 'blast'}
+              className='w-full justify-start'
+              asChild
+            >
+              <Link href='/rules'>
                 <BookAudio className='mr-2 h-4 w-4' />
                 Rules
               </Link>
@@ -67,13 +90,21 @@ export function Sidebar() {
         <div className='pt-4'>
           <h2 className='text-xs uppercase text-zinc-400 font-bold mb-2'>For Members</h2>
           <div className='space-y-2'>
-            <Button variant='blast' className='w-full justify-start' asChild>
-              <Link href='/'>
+            <Button
+              variant={pathname.startsWith('/reservations') ? 'blastActive' : 'blast'}
+              className='w-full justify-start'
+              asChild
+            >
+              <Link href='/reservations'>
                 <CalendarPlus className='mr-2 h-4 w-4' />
                 New Reservations
               </Link>
             </Button>
-            <Button variant='blast' className='w-full justify-start' asChild>
+            <Button
+              variant={pathname.startsWith('/stats') ? 'blastActive' : 'blast'}
+              className='w-full justify-start'
+              asChild
+            >
               <Link href='/stats'>
                 <BarChart3 className='mr-2 h-4 w-4' />
                 Statistics
@@ -85,8 +116,12 @@ export function Sidebar() {
         <div className='pt-4'>
           <h2 className='text-xs uppercase text-zinc-400 font-bold mb-2'>Admin</h2>
           <div className='space-y-2'>
-            <Button variant='blast' className='w-full justify-start' asChild>
-              <Link href='/'>
+            <Button
+              variant={pathname.startsWith('/super') ? 'blastActive' : 'blast'}
+              className='w-full justify-start'
+              asChild
+            >
+              <Link href='/super'>
                 <KeyboardMusic className='mr-2 h-4 w-4' />
                 Super View
               </Link>

From e57c70904802547e9e783c555e872d02d4f0898d Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Thu, 19 Jun 2025 18:17:50 +0200
Subject: [PATCH 08/27] created news page

---
 apps/frontend/src/app/news/page.tsx           | 140 ++++++++++++++++++
 .../src/components/layout/sidebar.tsx         |  23 ++-
 .../src/components/member/memberTile.tsx      |   4 -
 apps/frontend/src/components/ui/textarea.tsx  |  22 +++
 apps/frontend/src/mocks/posts.ts              |  76 ++++++++++
 apps/frontend/src/types/post.ts               |   6 +
 6 files changed, 255 insertions(+), 16 deletions(-)
 create mode 100644 apps/frontend/src/app/news/page.tsx
 create mode 100644 apps/frontend/src/components/ui/textarea.tsx
 create mode 100644 apps/frontend/src/mocks/posts.ts
 create mode 100644 apps/frontend/src/types/post.ts

diff --git a/apps/frontend/src/app/news/page.tsx b/apps/frontend/src/app/news/page.tsx
new file mode 100644
index 0000000..1830c2e
--- /dev/null
+++ b/apps/frontend/src/app/news/page.tsx
@@ -0,0 +1,140 @@
+'use client';
+
+import { Pencil, Trash } from 'lucide-react';
+import { useState } from 'react';
+
+import { TextArea } from '@/components/ui/textarea';
+import { mockUsers } from '@/mocks/users';
+import { User } from '@/types/user';
+
+import { Button } from '../../components/ui/button';
+import { Card, CardContent, CardFooter, CardTitle } from '../../components/ui/card';
+import { Input } from '../../components/ui/input';
+import { posts as mockNewsPosts } from '../../mocks/posts';
+import { Post } from '../../types/post';
+
+const POSTS_PER_PAGE = 10;
+
+function NewsForm({
+  initial,
+  onSave,
+  onCancel,
+}: {
+  initial?: Partial<Post>;
+  onSave: (post: Omit<Post, 'id' | 'createdAt'>) => void;
+  onCancel: () => void;
+}) {
+  const [title, setTitle] = useState(initial?.title || '');
+  const [body, setBody] = useState(initial?.body || '');
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSave({ title, body });
+      }}
+      className='space-y-2 px-4'
+    >
+      <Input placeholder='Title' value={title} onChange={(e) => setTitle(e.target.value)} required />
+      <TextArea placeholder='Body' value={body} onChange={(e) => setBody(e.target.value)} required rows={3} />
+      <div className='flex gap-2'>
+        <Button type='submit'>Save</Button>
+        <Button type='button' variant='secondary' onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+export default function NewsPage() {
+  const currentUser: User = mockUsers[1]; //TODO: replace with real user
+  const isAdmin = currentUser.role === 'ADMIN';
+  const [posts, setPosts] = useState<Post[]>(mockNewsPosts);
+  const [page, setPage] = useState(1);
+  const [editing, setEditing] = useState<Post | null>(null);
+  const [creating, setCreating] = useState(false);
+
+  const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
+  const paginated = posts.slice((page - 1) * POSTS_PER_PAGE, page * POSTS_PER_PAGE);
+
+  function handleCreate(post: Omit<Post, 'id' | 'createdAt'>) {
+    setPosts([
+      {
+        id: (Math.random() * 100000).toFixed(0),
+        title: post.title,
+        body: post.body,
+        createdAt: new Date().toISOString(),
+      },
+      ...posts,
+    ]);
+    setCreating(false);
+    setPage(1);
+  }
+
+  function handleEdit(post: Omit<Post, 'id' | 'createdAt'>) {
+    if (!editing) return;
+    setPosts(posts.map((p) => (p.id === editing.id ? { ...p, ...post } : p)));
+    setEditing(null);
+  }
+
+  function handleDelete(id: string) {
+    setPosts(posts.filter((p) => p.id !== id));
+  }
+
+  return (
+    <div className='w-full overflow-y-auto'>
+      <div className='flex items-center justify-between flex-row p-4'>
+        <h1 className='text-2xl font-semibold text-primary'>Hírek</h1>
+        {isAdmin && (
+          <div>
+            {creating ? (
+              <NewsForm onSave={handleCreate} onCancel={() => setCreating(false)} />
+            ) : (
+              <Button onClick={() => setCreating(true)}>Create New Post</Button>
+            )}
+          </div>
+        )}
+      </div>
+      <div className='m-4'>
+        <div className='space-y-4'>
+          {paginated.map((post) => (
+            <Card key={post.id} className='relative'>
+              <CardTitle className='p-4'>{editing?.id === post.id ? 'Szerkesztés' : post.title}</CardTitle>
+              {editing?.id === post.id && (
+                <div className='mt-4'>
+                  <NewsForm initial={editing} onSave={handleEdit} onCancel={() => setEditing(null)} />
+                </div>
+              )}
+              {isAdmin && (
+                <div className='absolute top-4 right-4 flex gap-2'>
+                  <Button size='sm' variant='secondary' onClick={() => setEditing(post)}>
+                    <Pencil className='w-4 h-4' />
+                  </Button>
+                  <Button size='sm' variant='destructive' onClick={() => handleDelete(post.id)}>
+                    <Trash className='w-4 h-4' />
+                  </Button>
+                </div>
+              )}
+              <CardContent className='p-4'>{editing?.id === post.id ? null : post.body}</CardContent>
+              <CardFooter className='py-2 px-4 text-sm text-gray-500 dark:text-gray-400'>
+                {editing?.id === post.id ? null : new Date(post.createdAt).toLocaleDateString('hu-HU')}
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+        <div className='flex justify-center gap-2 mt-8'>
+          <Button variant='secondary' disabled={page === 1} onClick={() => setPage(page - 1)}>
+            Previous
+          </Button>
+          <span className='px-2 py-1'>
+            Page {page} of {totalPages}
+          </span>
+          <Button variant='secondary' disabled={page === totalPages} onClick={() => setPage(page + 1)}>
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/layout/sidebar.tsx b/apps/frontend/src/components/layout/sidebar.tsx
index 914e7cd..f330e9e 100644
--- a/apps/frontend/src/components/layout/sidebar.tsx
+++ b/apps/frontend/src/components/layout/sidebar.tsx
@@ -26,7 +26,7 @@ export function Sidebar() {
           <Button variant={pathname === '/' ? 'blastActive' : 'blast'} className='w-full justify-start' asChild>
             <Link href='/'>
               <Radio className='mr-2 h-4 w-4' />
-              Feed
+              Hírek
             </Link>
           </Button>
           <Button
@@ -36,7 +36,7 @@ export function Sidebar() {
           >
             <Link href='/bands'>
               <ListMusic className='mr-2 h-4 w-4' />
-              Bands
+              Zenekarok
             </Link>
           </Button>
           <Button
@@ -46,13 +46,13 @@ export function Sidebar() {
           >
             <Link href='/members'>
               <Users2 className='mr-2 h-4 w-4' />
-              Members
+              Tagok
             </Link>
           </Button>
         </div>
 
         <div className='pt-4'>
-          <h2 className='text-xs uppercase text-zinc-400 font-bold mb-2'>About Us</h2>
+          <h2 className='text-xs uppercase text-zinc-400 font-bold mb-2'>Rólunk</h2>
           <div className='space-y-2'>
             <Button
               variant={pathname.startsWith('/about') ? 'blastActive' : 'blast'}
@@ -70,8 +70,7 @@ export function Sidebar() {
               asChild
             >
               <Link href='/room'>
-                <MicVocal className='mr-2 h-4 w-4' />
-                The Room
+                <MicVocal className='mr-2 h-4 w-4' />A Próbaterem
               </Link>
             </Button>
             <Button
@@ -81,14 +80,14 @@ export function Sidebar() {
             >
               <Link href='/rules'>
                 <BookAudio className='mr-2 h-4 w-4' />
-                Rules
+                Szabályzat
               </Link>
             </Button>
           </div>
         </div>
 
         <div className='pt-4'>
-          <h2 className='text-xs uppercase text-zinc-400 font-bold mb-2'>For Members</h2>
+          <h2 className='text-xs uppercase text-zinc-400 font-bold mb-2'>Tagoknak</h2>
           <div className='space-y-2'>
             <Button
               variant={pathname.startsWith('/reservations') ? 'blastActive' : 'blast'}
@@ -97,7 +96,7 @@ export function Sidebar() {
             >
               <Link href='/reservations'>
                 <CalendarPlus className='mr-2 h-4 w-4' />
-                New Reservations
+                Foglalás
               </Link>
             </Button>
             <Button
@@ -107,7 +106,7 @@ export function Sidebar() {
             >
               <Link href='/stats'>
                 <BarChart3 className='mr-2 h-4 w-4' />
-                Statistics
+                Statisztika
               </Link>
             </Button>
           </div>
@@ -123,14 +122,14 @@ export function Sidebar() {
             >
               <Link href='/super'>
                 <KeyboardMusic className='mr-2 h-4 w-4' />
-                Super View
+                Admin Nézet
               </Link>
             </Button>
           </div>
         </div>
 
         <div className='pt-4'>
-          <ActionButton text='Make new Reservation' icon={<Plus />} variant='ghostPrimary' />
+          <ActionButton text='Új foglalás' icon={<Plus />} variant='ghostPrimary' />
         </div>
       </div>
     </div>
diff --git a/apps/frontend/src/components/member/memberTile.tsx b/apps/frontend/src/components/member/memberTile.tsx
index 7d4b6c7..83e9f2a 100644
--- a/apps/frontend/src/components/member/memberTile.tsx
+++ b/apps/frontend/src/components/member/memberTile.tsx
@@ -29,13 +29,11 @@ export default function MemberTile({ user }: { user: User }) {
   return (
     <div className='flex flex-col items-center'>
       <Card className='w-full max-w-60 h-64 flex flex-col items-center justify-between p-4 relative'>
-        {/* Role badge at the top */}
         <div className='flex justify-end w-full'>
           <Badge className='py-1 text-xs' variant={getRoleVariant(user.role)}>
             {getRoleLabel(user.role)}
           </Badge>
         </div>
-        {/* Profile picture */}
         <div className='flex-1 flex flex-col justify-center items-center mt-2 mb-2'>
           <Avatar className='w-32 h-32'>
             <AvatarImage src={typeof user.profilePicture === 'string' ? user.profilePicture : ''} alt={user.name} />
@@ -47,10 +45,8 @@ export default function MemberTile({ user }: { user: User }) {
             </AvatarFallback>
           </Avatar>
         </div>
-        {/* Name */}
         <div className='text-left font-semibold text-lg truncate w-full'>{user.name}</div>
       </Card>
-      {/* Details below the tile */}
       <div className='flex flex-row justify-between mt-2 text-sm w-full max-w-60'>
         <div className='flex flex-col items-start ml-4'>
           <span>{user.email}</span>
diff --git a/apps/frontend/src/components/ui/textarea.tsx b/apps/frontend/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..ebaa6e9
--- /dev/null
+++ b/apps/frontend/src/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const TextArea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'textarea'>>(
+  // eslint-disable-next-line react/prop-types
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+TextArea.displayName = 'TextArea';
+
+export { TextArea };
diff --git a/apps/frontend/src/mocks/posts.ts b/apps/frontend/src/mocks/posts.ts
new file mode 100644
index 0000000..ccb3469
--- /dev/null
+++ b/apps/frontend/src/mocks/posts.ts
@@ -0,0 +1,76 @@
+import { Post } from '../types/post';
+
+export const posts: Post[] = [
+  {
+    id: '1',
+    title: 'Welcome to the News!',
+    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu eleifend nibh. Nullam sed diam ac augue vestibulum sodales. Aliquam venenatis sapien eu interdum pharetra. Aliquam in dapibus sapien. In hac habitasse platea dictumst. Suspendisse et faucibus metus. In hac habitasse platea dictumst. Mauris eget elit at mauris semper viverra. Morbi dui risus, pellentesque ac condimentum in, finibus in tortor. Vestibulum consequat vel nisl a rutrum. Etiam tincidunt id enim non sagittis.',
+    createdAt: '2024-06-01T10:00:00Z',
+  },
+  {
+    id: '2',
+    title: 'Feature Release',
+    body: 'We have released a new feature. Check it out in your dashboard.',
+    createdAt: '2024-06-02T12:00:00Z',
+  },
+  {
+    id: '3',
+    title: 'Maintenance Notice',
+    body: 'Scheduled maintenance will occur this weekend.',
+    createdAt: '2024-06-03T14:00:00Z',
+  },
+  {
+    id: '4',
+    title: 'Bug Fixes',
+    body: 'Several bugs have been fixed in the latest update.',
+    createdAt: '2024-06-04T16:00:00Z',
+  },
+  {
+    id: '5',
+    title: 'Community Event',
+    body: 'Join our community event this Friday!',
+    createdAt: '2024-06-05T18:00:00Z',
+  },
+  {
+    id: '6',
+    title: 'Survey',
+    body: 'Please fill out our user survey to help us improve.',
+    createdAt: '2024-06-06T20:00:00Z',
+  },
+  {
+    id: '7',
+    title: 'New Admin Tools',
+    body: 'Admins now have access to new moderation tools.',
+    createdAt: '2024-06-07T09:00:00Z',
+  },
+  {
+    id: '8',
+    title: 'Performance Improvements',
+    body: 'The site should feel faster after recent optimizations.',
+    createdAt: '2024-06-08T11:00:00Z',
+  },
+  {
+    id: '9',
+    title: 'Security Update',
+    body: 'A security update has been applied. Please log out and back in.',
+    createdAt: '2024-06-09T13:00:00Z',
+  },
+  {
+    id: '10',
+    title: 'Mobile App',
+    body: 'Our mobile app is now available for download.',
+    createdAt: '2024-06-10T15:00:00Z',
+  },
+  {
+    id: '11',
+    title: 'User Guide',
+    body: 'A new user guide is available in the help section.',
+    createdAt: '2024-06-11T17:00:00Z',
+  },
+  {
+    id: '12',
+    title: 'Thank You!',
+    body: 'Thank you for being part of our community!',
+    createdAt: '2024-06-12T19:00:00Z',
+  },
+];
diff --git a/apps/frontend/src/types/post.ts b/apps/frontend/src/types/post.ts
new file mode 100644
index 0000000..e5c56c2
--- /dev/null
+++ b/apps/frontend/src/types/post.ts
@@ -0,0 +1,6 @@
+export interface Post {
+  id: string;
+  title: string;
+  body: string;
+  createdAt: string;
+}

From 32a35a0f17cada9c0f9ffa8041383361d18f6f40 Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Thu, 19 Jun 2025 18:27:57 +0200
Subject: [PATCH 09/27] modified sidebar

---
 apps/frontend/src/components/layout/sidebar.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/components/layout/sidebar.tsx b/apps/frontend/src/components/layout/sidebar.tsx
index f330e9e..7ac194b 100644
--- a/apps/frontend/src/components/layout/sidebar.tsx
+++ b/apps/frontend/src/components/layout/sidebar.tsx
@@ -23,8 +23,8 @@ export function Sidebar() {
     <div className='w-64 p-4 flex flex-col'>
       <div className='mt-10 space-y-10'>
         <div className='space-y-2'>
-          <Button variant={pathname === '/' ? 'blastActive' : 'blast'} className='w-full justify-start' asChild>
-            <Link href='/'>
+          <Button variant={pathname === '/news' ? 'blastActive' : 'blast'} className='w-full justify-start' asChild>
+            <Link href='/news'>
               <Radio className='mr-2 h-4 w-4' />
               Hírek
             </Link>
@@ -46,7 +46,7 @@ export function Sidebar() {
           >
             <Link href='/members'>
               <Users2 className='mr-2 h-4 w-4' />
-              Tagok
+              Felhasználók
             </Link>
           </Button>
         </div>
@@ -70,7 +70,8 @@ export function Sidebar() {
               asChild
             >
               <Link href='/room'>
-                <MicVocal className='mr-2 h-4 w-4' />A Próbaterem
+                <MicVocal className='mr-2 h-4 w-4' />
+                Próbaterem
               </Link>
             </Button>
             <Button

From 007d0656791bce6ef63207e360d37a984a9e4801 Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Thu, 19 Jun 2025 18:57:22 +0200
Subject: [PATCH 10/27] modified pagination buttons

---
 apps/frontend/src/app/news/page.tsx | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/app/news/page.tsx b/apps/frontend/src/app/news/page.tsx
index 1830c2e..b13cc41 100644
--- a/apps/frontend/src/app/news/page.tsx
+++ b/apps/frontend/src/app/news/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Pencil, Trash } from 'lucide-react';
+import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, Pencil, Trash } from 'lucide-react';
 import { useState } from 'react';
 
 import { TextArea } from '@/components/ui/textarea';
@@ -124,14 +124,27 @@ export default function NewsPage() {
           ))}
         </div>
         <div className='flex justify-center gap-2 mt-8'>
-          <Button variant='secondary' disabled={page === 1} onClick={() => setPage(page - 1)}>
-            Previous
+          <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(1)}>
+            <ChevronFirst />
+            Első
+          </Button>
+          <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(page - 1)}>
+            <ChevronLeft />
+            Előző
           </Button>
           <span className='px-2 py-1'>
-            Page {page} of {totalPages}
+            {page}. oldal / {totalPages}
           </span>
-          <Button variant='secondary' disabled={page === totalPages} onClick={() => setPage(page + 1)}>
-            Next
+          <Button className='pl-5' variant='secondary' disabled={page === totalPages} onClick={() => setPage(page + 1)}>
+            Következő <ChevronRight />
+          </Button>
+          <Button
+            className='pl-5'
+            variant='secondary'
+            disabled={page === totalPages}
+            onClick={() => setPage(totalPages)}
+          >
+            Utolsó <ChevronLast />
           </Button>
         </div>
       </div>

From fb4218bc6063ec539ed74b99890f030f08b2a9b0 Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Wed, 25 Jun 2025 19:07:57 +0200
Subject: [PATCH 11/27] use popup form for post create and edit

---
 apps/frontend/package.json                 |   2 +
 apps/frontend/src/app/news/page.tsx        | 286 +++++++++++++------
 apps/frontend/src/components/ui/dialog.tsx | 118 ++++++++
 yarn.lock                                  | 305 ++++++++++++++++++++-
 4 files changed, 626 insertions(+), 85 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/dialog.tsx

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index ca4f32c..b059b3c 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -14,10 +14,12 @@
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@tanstack/react-table": "^8.20.5",
+    "axios": "^1.10.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.14.4",
diff --git a/apps/frontend/src/app/news/page.tsx b/apps/frontend/src/app/news/page.tsx
index b13cc41..a8af176 100644
--- a/apps/frontend/src/app/news/page.tsx
+++ b/apps/frontend/src/app/news/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, Pencil, Trash } from 'lucide-react';
-import { useState } from 'react';
+import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, Pencil, Plus, Trash } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 import { TextArea } from '@/components/ui/textarea';
 import { mockUsers } from '@/mocks/users';
@@ -9,9 +9,9 @@ import { User } from '@/types/user';
 
 import { Button } from '../../components/ui/button';
 import { Card, CardContent, CardFooter, CardTitle } from '../../components/ui/card';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../components/ui/dialog';
 import { Input } from '../../components/ui/input';
-import { posts as mockNewsPosts } from '../../mocks/posts';
-import { Post } from '../../types/post';
+import { apiService, Post as ApiPost } from '../../lib/api';
 
 const POSTS_PER_PAGE = 10;
 
@@ -19,67 +19,173 @@ function NewsForm({
   initial,
   onSave,
   onCancel,
+  isOpen,
+  onOpenChange,
+  isLoading,
 }: {
-  initial?: Partial<Post>;
-  onSave: (post: Omit<Post, 'id' | 'createdAt'>) => void;
+  initial?: Partial<ApiPost>;
+  onSave: (post: { title: string; body: string }) => void;
   onCancel: () => void;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  isLoading: boolean;
 }) {
   const [title, setTitle] = useState(initial?.title || '');
   const [body, setBody] = useState(initial?.body || '');
 
+  useEffect(() => {
+    setTitle(initial?.title || '');
+    setBody(initial?.body || '');
+  }, [initial]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave({ title, body });
+    onOpenChange(false);
+    setTitle('');
+    setBody('');
+  };
+
+  const handleCancel = () => {
+    onCancel();
+    onOpenChange(false);
+    setTitle('');
+    setBody('');
+  };
+
   return (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault();
-        onSave({ title, body });
-      }}
-      className='space-y-2 px-4'
-    >
-      <Input placeholder='Title' value={title} onChange={(e) => setTitle(e.target.value)} required />
-      <TextArea placeholder='Body' value={body} onChange={(e) => setBody(e.target.value)} required rows={3} />
-      <div className='flex gap-2'>
-        <Button type='submit'>Save</Button>
-        <Button type='button' variant='secondary' onClick={onCancel}>
-          Cancel
-        </Button>
-      </div>
-    </form>
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{initial ? 'Szerkesztés' : 'Új poszt'}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className='space-y-4'>
+          <Input
+            placeholder='Cím'
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+            disabled={isLoading}
+          />
+          <TextArea
+            placeholder='Tartalom'
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            required
+            rows={6}
+            disabled={isLoading}
+          />
+          <div className='flex gap-2 justify-end'>
+            <Button type='button' variant='secondary' onClick={handleCancel} disabled={isLoading}>
+              Mégsem
+            </Button>
+            <Button type='submit' disabled={isLoading}>
+              {isLoading ? 'Mentés...' : 'Mentés'}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
   );
 }
 
 export default function NewsPage() {
   const currentUser: User = mockUsers[1]; //TODO: replace with real user
   const isAdmin = currentUser.role === 'ADMIN';
-  const [posts, setPosts] = useState<Post[]>(mockNewsPosts);
+  const [posts, setPosts] = useState<ApiPost[]>([]);
   const [page, setPage] = useState(1);
-  const [editing, setEditing] = useState<Post | null>(null);
+  const [totalPages, setTotalPages] = useState(1);
+  const [editing, setEditing] = useState<ApiPost | null>(null);
   const [creating, setCreating] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingPosts, setIsLoadingPosts] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-  const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
-  const paginated = posts.slice((page - 1) * POSTS_PER_PAGE, page * POSTS_PER_PAGE);
-
-  function handleCreate(post: Omit<Post, 'id' | 'createdAt'>) {
-    setPosts([
-      {
-        id: (Math.random() * 100000).toFixed(0),
-        title: post.title,
-        body: post.body,
-        createdAt: new Date().toISOString(),
-      },
-      ...posts,
-    ]);
-    setCreating(false);
-    setPage(1);
+  useEffect(() => {
+    loadPosts();
+  }, [page]);
+
+  async function loadPosts() {
+    try {
+      setIsLoadingPosts(true);
+      setError(null);
+      const response = await apiService.getPosts(page, POSTS_PER_PAGE);
+      setPosts(response.posts);
+      setTotalPages(Math.ceil(response.total / POSTS_PER_PAGE));
+    } catch (err) {
+      setError('Failed to load posts');
+      console.error('Error loading posts:', err);
+    } finally {
+      setIsLoadingPosts(false);
+    }
+  }
+
+  async function handleCreate(post: { title: string; body: string }) {
+    try {
+      setIsLoading(true);
+      await apiService.createPost(post);
+      setCreating(false);
+      setPage(1);
+      await loadPosts();
+    } catch (err) {
+      setError('Failed to create post');
+      console.error('Error creating post:', err);
+    } finally {
+      setIsLoading(false);
+    }
   }
 
-  function handleEdit(post: Omit<Post, 'id' | 'createdAt'>) {
+  async function handleEdit(post: { title: string; body: string }) {
     if (!editing) return;
-    setPosts(posts.map((p) => (p.id === editing.id ? { ...p, ...post } : p)));
+    try {
+      setIsLoading(true);
+      await apiService.updatePost(editing.id, post);
+      setEditing(null);
+      await loadPosts();
+    } catch (err) {
+      setError('Failed to update post');
+      console.error('Error updating post:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function handleDelete(id: number) {
+    try {
+      await apiService.deletePost(id);
+      await loadPosts();
+    } catch (err) {
+      setError('Failed to delete post');
+      console.error('Error deleting post:', err);
+    }
+  }
+
+  function openCreateDialog() {
+    setCreating(true);
     setEditing(null);
+    setDialogOpen(true);
+  }
+
+  function openEditDialog(post: ApiPost) {
+    setEditing(post);
+    setCreating(false);
+    setDialogOpen(true);
   }
 
-  function handleDelete(id: string) {
-    setPosts(posts.filter((p) => p.id !== id));
+  if (isLoadingPosts) {
+    return (
+      <div className='w-full overflow-y-auto'>
+        <div className='flex items-center justify-between flex-row p-4'>
+          <h1 className='text-2xl font-semibold text-primary'>Hírek</h1>
+        </div>
+        <div className='m-4'>
+          <div className='flex items-center justify-center h-64'>
+            <p>Hírek betöltése...</p>
+          </div>
+        </div>
+      </div>
+    );
   }
 
   return (
@@ -87,28 +193,20 @@ export default function NewsPage() {
       <div className='flex items-center justify-between flex-row p-4'>
         <h1 className='text-2xl font-semibold text-primary'>Hírek</h1>
         {isAdmin && (
-          <div>
-            {creating ? (
-              <NewsForm onSave={handleCreate} onCancel={() => setCreating(false)} />
-            ) : (
-              <Button onClick={() => setCreating(true)}>Create New Post</Button>
-            )}
-          </div>
+          <Button onClick={openCreateDialog}>
+            <Plus className='w-4 h-4' />
+          </Button>
         )}
       </div>
       <div className='m-4'>
+        {error && <div className='mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded'>{error}</div>}
         <div className='space-y-4'>
-          {paginated.map((post) => (
+          {posts.map((post) => (
             <Card key={post.id} className='relative'>
-              <CardTitle className='p-4'>{editing?.id === post.id ? 'Szerkesztés' : post.title}</CardTitle>
-              {editing?.id === post.id && (
-                <div className='mt-4'>
-                  <NewsForm initial={editing} onSave={handleEdit} onCancel={() => setEditing(null)} />
-                </div>
-              )}
+              <CardTitle className='p-4'>{post.title}</CardTitle>
               {isAdmin && (
                 <div className='absolute top-4 right-4 flex gap-2'>
-                  <Button size='sm' variant='secondary' onClick={() => setEditing(post)}>
+                  <Button size='sm' variant='secondary' onClick={() => openEditDialog(post)}>
                     <Pencil className='w-4 h-4' />
                   </Button>
                   <Button size='sm' variant='destructive' onClick={() => handleDelete(post.id)}>
@@ -116,38 +214,58 @@ export default function NewsPage() {
                   </Button>
                 </div>
               )}
-              <CardContent className='p-4'>{editing?.id === post.id ? null : post.body}</CardContent>
+              <CardContent className='p-4'>{post.body}</CardContent>
               <CardFooter className='py-2 px-4 text-sm text-gray-500 dark:text-gray-400'>
-                {editing?.id === post.id ? null : new Date(post.createdAt).toLocaleDateString('hu-HU')}
+                {new Date(post.createdAt).toLocaleDateString('hu-HU')}
+                {post.author && ` • ${post.author.name}`}
               </CardFooter>
             </Card>
           ))}
         </div>
-        <div className='flex justify-center gap-2 mt-8'>
-          <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(1)}>
-            <ChevronFirst />
-            Első
-          </Button>
-          <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(page - 1)}>
-            <ChevronLeft />
-            Előző
-          </Button>
-          <span className='px-2 py-1'>
-            {page}. oldal / {totalPages}
-          </span>
-          <Button className='pl-5' variant='secondary' disabled={page === totalPages} onClick={() => setPage(page + 1)}>
-            Következő <ChevronRight />
-          </Button>
-          <Button
-            className='pl-5'
-            variant='secondary'
-            disabled={page === totalPages}
-            onClick={() => setPage(totalPages)}
-          >
-            Utolsó <ChevronLast />
-          </Button>
-        </div>
+        {totalPages > 1 && (
+          <div className='flex justify-center gap-2 mt-8'>
+            <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(1)}>
+              <ChevronFirst />
+              Első
+            </Button>
+            <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(page - 1)}>
+              <ChevronLeft />
+              Előző
+            </Button>
+            <span className='px-2 py-1'>
+              {page}. oldal / {totalPages}
+            </span>
+            <Button
+              className='pl-5'
+              variant='secondary'
+              disabled={page === totalPages}
+              onClick={() => setPage(page + 1)}
+            >
+              Következő <ChevronRight />
+            </Button>
+            <Button
+              className='pl-5'
+              variant='secondary'
+              disabled={page === totalPages}
+              onClick={() => setPage(totalPages)}
+            >
+              Utolsó <ChevronLast />
+            </Button>
+          </div>
+        )}
       </div>
+
+      <NewsForm
+        initial={editing || undefined}
+        onSave={creating ? handleCreate : handleEdit}
+        onCancel={() => {
+          setCreating(false);
+          setEditing(null);
+        }}
+        isOpen={dialogOpen}
+        onOpenChange={setDialogOpen}
+        isLoading={isLoading}
+      />
     </div>
   );
 }
diff --git a/apps/frontend/src/components/ui/dialog.tsx b/apps/frontend/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..c257bde
--- /dev/null
+++ b/apps/frontend/src/components/ui/dialog.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+interface DialogOverlayProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {
+  className?: string;
+}
+
+const DialogOverlay = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Overlay>, DialogOverlayProps>(
+  ({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      className={cn(
+        'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  className?: string;
+}
+
+const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
+  ({ className, children, ...props }, ref) => (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          className
+        )}
+        {...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'>
+          <X className='h-4 w-4' />
+          <span className='sr-only'>Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+const DialogHeader = ({ className, ...props }: DialogHeaderProps) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+const DialogFooter = ({ className, ...props }: DialogFooterProps) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+interface DialogTitleProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
+  className?: string;
+}
+
+const DialogTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, DialogTitleProps>(
+  ({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+interface DialogDescriptionProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> {
+  className?: string;
+}
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  DialogDescriptionProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
diff --git a/yarn.lock b/yarn.lock
index 79224fa..a9baa56 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -735,6 +735,11 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.1.tgz#fc169732d755c7fbad33ba8d0cd7fd10c90dc8e3"
   integrity sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==
 
+"@radix-ui/primitive@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.2.tgz#83f415c4425f21e3d27914c12b3272a32e3dae65"
+  integrity sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==
+
 "@radix-ui/react-arrow@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz#744f388182d360b86285217e43b6c63633f39e7a"
@@ -786,6 +791,11 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz#6f766faa975f8738269ebb8a23bad4f5a8d2faec"
   integrity sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==
 
+"@radix-ui/react-compose-refs@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz#a2c4c47af6337048ee78ff6dc0d090b390d2bb30"
+  integrity sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==
+
 "@radix-ui/react-context@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.0.tgz#6df8d983546cfd1999c8512f3a8ad85a6e7fcee8"
@@ -796,6 +806,31 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a"
   integrity sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==
 
+"@radix-ui/react-context@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.2.tgz#61628ef269a433382c364f6f1e3788a6dc213a36"
+  integrity sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==
+
+"@radix-ui/react-dialog@^1.1.14":
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz#4c69c80c258bc6561398cfce055202ea11075107"
+  integrity sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.2"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-dismissable-layer" "1.1.10"
+    "@radix-ui/react-focus-guards" "1.1.2"
+    "@radix-ui/react-focus-scope" "1.1.7"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-portal" "1.1.9"
+    "@radix-ui/react-presence" "1.1.4"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-slot" "1.2.3"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+    aria-hidden "^1.2.4"
+    react-remove-scroll "^2.6.3"
+
 "@radix-ui/react-direction@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc"
@@ -812,6 +847,17 @@
     "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-escape-keydown" "1.1.0"
 
+"@radix-ui/react-dismissable-layer@1.1.10":
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz#429b9bada3672c6895a5d6a642aca6ecaf4f18c3"
+  integrity sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.2"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    "@radix-ui/react-use-escape-keydown" "1.1.1"
+
 "@radix-ui/react-dropdown-menu@^2.1.2":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.2.tgz#acc49577130e3c875ef0133bd1e271ea3392d924"
@@ -830,6 +876,11 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz#8635edd346304f8b42cae86b05912b61aef27afe"
   integrity sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==
 
+"@radix-ui/react-focus-guards@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz#4ec9a7e50925f7fb661394460045b46212a33bed"
+  integrity sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==
+
 "@radix-ui/react-focus-scope@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz#ebe2891a298e0a33ad34daab2aad8dea31caf0b2"
@@ -839,6 +890,15 @@
     "@radix-ui/react-primitive" "2.0.0"
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
+"@radix-ui/react-focus-scope@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz#dfe76fc103537d80bf42723a183773fd07bfb58d"
+  integrity sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+
 "@radix-ui/react-id@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
@@ -846,6 +906,13 @@
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
+"@radix-ui/react-id@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.1.tgz#1404002e79a03fe062b7e3864aa01e24bd1471f7"
+  integrity sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/react-menu@2.1.2":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.1.2.tgz#91f6815845a4298dde775563ed2d80b7ad667899"
@@ -894,6 +961,14 @@
     "@radix-ui/react-primitive" "2.0.0"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
+"@radix-ui/react-portal@1.1.9":
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.9.tgz#14c3649fe48ec474ac51ed9f2b9f5da4d91c4472"
+  integrity sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==
+  dependencies:
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/react-presence@1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.1.tgz#98aba423dba5e0c687a782c0669dcd99de17f9b1"
@@ -910,6 +985,14 @@
     "@radix-ui/react-compose-refs" "1.1.1"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
+"@radix-ui/react-presence@1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.4.tgz#253ac0ad4946c5b4a9c66878335f5cf07c967ced"
+  integrity sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/react-primitive@2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz#fe05715faa9203a223ccc0be15dc44b9f9822884"
@@ -924,6 +1007,13 @@
   dependencies:
     "@radix-ui/react-slot" "1.1.1"
 
+"@radix-ui/react-primitive@2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz#db9b8bcff49e01be510ad79893fb0e4cda50f1bc"
+  integrity sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==
+  dependencies:
+    "@radix-ui/react-slot" "1.2.3"
+
 "@radix-ui/react-roving-focus@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz#b30c59daf7e714c748805bfe11c76f96caaac35e"
@@ -970,11 +1060,23 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.1"
 
+"@radix-ui/react-slot@1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.2.3.tgz#502d6e354fc847d4169c3bc5f189de777f68cfe1"
+  integrity sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+
 "@radix-ui/react-use-callback-ref@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1"
   integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==
 
+"@radix-ui/react-use-callback-ref@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz#62a4dba8b3255fdc5cc7787faeac1c6e4cc58d40"
+  integrity sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==
+
 "@radix-ui/react-use-controllable-state@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz#1321446857bb786917df54c0d4d084877aab04b0"
@@ -982,6 +1084,21 @@
   dependencies:
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
+"@radix-ui/react-use-controllable-state@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz#905793405de57d61a439f4afebbb17d0645f3190"
+  integrity sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==
+  dependencies:
+    "@radix-ui/react-use-effect-event" "0.0.2"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
+"@radix-ui/react-use-effect-event@0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz#090cf30d00a4c7632a15548512e9152217593907"
+  integrity sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/react-use-escape-keydown@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz#31a5b87c3b726504b74e05dac1edce7437b98754"
@@ -989,11 +1106,23 @@
   dependencies:
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
+"@radix-ui/react-use-escape-keydown@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz#b3fed9bbea366a118f40427ac40500aa1423cc29"
+  integrity sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+
 "@radix-ui/react-use-layout-effect@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
   integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
 
+"@radix-ui/react-use-layout-effect@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz#0c4230a9eed49d4589c967e2d9c0d9d60a23971e"
+  integrity sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==
+
 "@radix-ui/react-use-previous@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz#d4dd37b05520f1d996a384eb469320c2ada8377c"
@@ -1670,6 +1799,13 @@ aria-hidden@^1.1.1:
   dependencies:
     tslib "^2.0.0"
 
+aria-hidden@^1.2.4:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.6.tgz#73051c9b088114c795b1ea414e9c0fff874ffc1a"
+  integrity sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==
+  dependencies:
+    tslib "^2.0.0"
+
 aria-query@^5.3.0:
   version "5.3.0"
   resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz"
@@ -1803,6 +1939,11 @@ ast-types@^0.16.1:
   dependencies:
     tslib "^2.0.1"
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
 available-typed-arrays@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz"
@@ -1815,6 +1956,15 @@ axe-core@=4.7.0:
   resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.7.0.tgz"
   integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
 
+axios@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.10.0.tgz#af320aee8632eaf2a400b6a1979fa75856f38d54"
+  integrity sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz"
@@ -1948,6 +2098,14 @@ bytes@3.1.2:
   resolved "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz"
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
 
+call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz#4b5428c222be985d79c3d82657479dbe0b59b2d6"
+  integrity sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+
 call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz"
@@ -2134,6 +2292,13 @@ color-name@~1.1.4:
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 commander@4.1.1, commander@^4.0.0:
   version "4.1.1"
   resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
@@ -2363,6 +2528,11 @@ define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 depd@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz"
@@ -2424,6 +2594,15 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dunder-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
+  integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-errors "^1.3.0"
+    gopd "^1.2.0"
+
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
@@ -2533,6 +2712,11 @@ es-define-property@^1.0.0:
   dependencies:
     get-intrinsic "^1.2.4"
 
+es-define-property@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
+  integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
+
 es-errors@^1.1.0, es-errors@^1.2.1, es-errors@^1.3.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz"
@@ -2570,6 +2754,13 @@ es-object-atoms@^1.0.0:
   dependencies:
     es-errors "^1.3.0"
 
+es-object-atoms@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz#1c4f2c4837327597ce69d2ca190a7fdd172338c1"
+  integrity sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==
+  dependencies:
+    es-errors "^1.3.0"
+
 es-set-tostringtag@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz"
@@ -2579,6 +2770,16 @@ es-set-tostringtag@^2.0.3:
     has-tostringtag "^1.0.2"
     hasown "^2.0.1"
 
+es-set-tostringtag@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz#f31dbbe0c183b00a6d26eb6325c810c0fd18bd4d"
+  integrity sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==
+  dependencies:
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
 es-shim-unscopables@^1.0.0, es-shim-unscopables@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz"
@@ -3055,6 +3256,11 @@ flatted@^3.2.9:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz"
   integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
+follow-redirects@^1.15.6:
+  version "1.15.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz"
@@ -3088,6 +3294,17 @@ fork-ts-checker-webpack-plugin@9.0.2:
     semver "^7.3.5"
     tapable "^2.2.1"
 
+form-data@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.3.tgz#608b1b3f3e28be0fccf5901fc85fb3641e5cf0ae"
+  integrity sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    es-set-tostringtag "^2.1.0"
+    hasown "^2.0.2"
+    mime-types "^2.1.12"
+
 formdata-polyfill@^4.0.10:
   version "4.0.10"
   resolved "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz"
@@ -3188,6 +3405,22 @@ get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.3, get-intrinsic@
     has-symbols "^1.0.3"
     hasown "^2.0.0"
 
+get-intrinsic@^1.2.6:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz#743f0e3b6964a93a5491ed1bffaae054d7f98d01"
+  integrity sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==
+  dependencies:
+    call-bind-apply-helpers "^1.0.2"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.1.1"
+    function-bind "^1.1.2"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    math-intrinsics "^1.1.0"
+
 get-nonce@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
@@ -3198,6 +3431,14 @@ get-own-enumerable-keys@^1.0.0:
   resolved "https://registry.yarnpkg.com/get-own-enumerable-keys/-/get-own-enumerable-keys-1.0.0.tgz#59bbda0f7e7469c8c74086e08f79f1381b203899"
   integrity sha512-PKsK2FSrQCyxcGHsGrLDcK0lx+0Ke+6e8KFFozA9/fIQLhQzPaRvJFdcz7+Axg3jUH/Mq+NI4xa5u/UT2tQskA==
 
+get-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-proto/-/get-proto-1.0.1.tgz#150b3f2743869ef3e851ec0c49d15b1d14d00ee1"
+  integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-object-atoms "^1.0.0"
+
 get-stream@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz"
@@ -3320,6 +3561,11 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
+gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
 graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.11, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
   version "4.2.11"
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
@@ -3367,6 +3613,11 @@ has-symbols@^1.0.2, has-symbols@^1.0.3:
   resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz"
   integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
 
+has-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
+  integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
+
 has-tostringtag@^1.0.0, has-tostringtag@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz"
@@ -4045,6 +4296,11 @@ make-error@^1.1.1:
   resolved "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
 
+math-intrinsics@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
+  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz"
@@ -4090,7 +4346,7 @@ mime-db@1.52.0:
   resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.1.27, mime-types@~2.1.24, mime-types@~2.1.34:
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.35"
   resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -4748,6 +5004,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 punycode@^2.1.0:
   version "2.3.1"
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
@@ -4808,6 +5069,14 @@ react-remove-scroll-bar@^2.3.6:
     react-style-singleton "^2.2.1"
     tslib "^2.0.0"
 
+react-remove-scroll-bar@^2.3.7:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz#99c20f908ee467b385b68a3469b4a3e750012223"
+  integrity sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==
+  dependencies:
+    react-style-singleton "^2.2.2"
+    tslib "^2.0.0"
+
 react-remove-scroll@2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz#fb03a0845d7768a4f1519a99fdb84983b793dc07"
@@ -4819,6 +5088,17 @@ react-remove-scroll@2.6.0:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-remove-scroll@^2.6.3:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz#d2101d414f6d81d7d3bf033f3c1cb4785789f753"
+  integrity sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==
+  dependencies:
+    react-remove-scroll-bar "^2.3.7"
+    react-style-singleton "^2.2.3"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.3"
+    use-sidecar "^1.1.3"
+
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
@@ -4828,6 +5108,14 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
+react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.3.tgz#4265608be69a4d70cfe3047f2c6c88b2c3ace388"
+  integrity sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==
+  dependencies:
+    get-nonce "^1.0.0"
+    tslib "^2.0.0"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
@@ -5864,6 +6152,13 @@ use-callback-ref@^1.3.0:
   dependencies:
     tslib "^2.0.0"
 
+use-callback-ref@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.3.tgz#98d9fab067075841c5b2c6852090d5d0feabe2bf"
+  integrity sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==
+  dependencies:
+    tslib "^2.0.0"
+
 use-sidecar@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
@@ -5872,6 +6167,14 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
+use-sidecar@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.3.tgz#10e7fd897d130b896e2c546c63a5e8233d00efdb"
+  integrity sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"

From dc5e9efb7ed86868b57c45f331b80e3aea4d1858 Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Wed, 25 Jun 2025 19:08:12 +0200
Subject: [PATCH 12/27] backend functionality for posts

---
 apps/backend/prisma/schema.prisma             | 10 +++
 apps/backend/src/app.module.ts                | 10 ++-
 apps/backend/src/posts/dto/create-post.dto.ts | 11 +++
 apps/backend/src/posts/dto/update-post.dto.ts |  5 ++
 .../backend/src/posts/entities/post.entity.ts | 10 +++
 apps/backend/src/posts/posts.controller.ts    | 39 ++++++++++
 apps/backend/src/posts/posts.module.ts        | 10 +++
 apps/backend/src/posts/posts.service.ts       | 77 +++++++++++++++++++
 apps/frontend/src/lib/api.ts                  | 71 +++++++++++++++++
 9 files changed, 242 insertions(+), 1 deletion(-)
 create mode 100644 apps/backend/src/posts/dto/create-post.dto.ts
 create mode 100644 apps/backend/src/posts/dto/update-post.dto.ts
 create mode 100644 apps/backend/src/posts/entities/post.entity.ts
 create mode 100644 apps/backend/src/posts/posts.controller.ts
 create mode 100644 apps/backend/src/posts/posts.module.ts
 create mode 100644 apps/backend/src/posts/posts.service.ts
 create mode 100644 apps/frontend/src/lib/api.ts

diff --git a/apps/backend/prisma/schema.prisma b/apps/backend/prisma/schema.prisma
index 35ae8da..9c48077 100644
--- a/apps/backend/prisma/schema.prisma
+++ b/apps/backend/prisma/schema.prisma
@@ -20,6 +20,7 @@ model User {
   profilePicture  ProfilePicture?
   gateKeeping     Reservation[]    @relation("GateKeeping")
   reservations    Reservation[]    @relation("Reservations")
+  posts           Post[]
 }
 
 model ProfilePicture {
@@ -83,6 +84,15 @@ model Period {
   endDate   DateTime
 }
 
+model Post {
+  id        Int      @id @default(autoincrement())
+  title     String
+  body      String
+  createdAt DateTime @default(now())
+  authorId  Int
+  author    User     @relation(fields: [authorId], references: [id])
+}
+
 enum Role {
   USER
   GATEKEEPER
diff --git a/apps/backend/src/app.module.ts b/apps/backend/src/app.module.ts
index 535ce29..e6401d4 100644
--- a/apps/backend/src/app.module.ts
+++ b/apps/backend/src/app.module.ts
@@ -5,11 +5,19 @@ import { AppController } from './app.controller';
 import { AppService } from './app.service';
 import { BandModule } from './band/band.module';
 import { CommentsModule } from './comments/comments.module';
+import { PostsModule } from './posts/posts.module';
 import { ReservationsModule } from './reservations/reservations.module';
 import { UsersModule } from './users/users.module';
 
 @Module({
-  imports: [PrismaModule.forRoot({ isGlobal: true }), UsersModule, ReservationsModule, CommentsModule, BandModule],
+  imports: [
+    PrismaModule.forRoot({ isGlobal: true }),
+    UsersModule,
+    ReservationsModule,
+    CommentsModule,
+    BandModule,
+    PostsModule,
+  ],
   controllers: [AppController],
   providers: [AppService],
 })
diff --git a/apps/backend/src/posts/dto/create-post.dto.ts b/apps/backend/src/posts/dto/create-post.dto.ts
new file mode 100644
index 0000000..69628d3
--- /dev/null
+++ b/apps/backend/src/posts/dto/create-post.dto.ts
@@ -0,0 +1,11 @@
+import { IsNotEmpty, IsString } from 'class-validator';
+
+export class CreatePostDto {
+  @IsNotEmpty()
+  @IsString()
+  title: string;
+
+  @IsNotEmpty()
+  @IsString()
+  body: string;
+}
diff --git a/apps/backend/src/posts/dto/update-post.dto.ts b/apps/backend/src/posts/dto/update-post.dto.ts
new file mode 100644
index 0000000..c52434d
--- /dev/null
+++ b/apps/backend/src/posts/dto/update-post.dto.ts
@@ -0,0 +1,5 @@
+import { PartialType } from '@nestjs/mapped-types';
+
+import { CreatePostDto } from './create-post.dto';
+
+export class UpdatePostDto extends PartialType(CreatePostDto) {}
diff --git a/apps/backend/src/posts/entities/post.entity.ts b/apps/backend/src/posts/entities/post.entity.ts
new file mode 100644
index 0000000..9166e58
--- /dev/null
+++ b/apps/backend/src/posts/entities/post.entity.ts
@@ -0,0 +1,10 @@
+import { User } from '../../users/entities/user.entity';
+
+export class Post {
+  id: number;
+  title: string;
+  body: string;
+  createdAt: Date;
+  authorId: number;
+  author?: User;
+}
diff --git a/apps/backend/src/posts/posts.controller.ts b/apps/backend/src/posts/posts.controller.ts
new file mode 100644
index 0000000..29cb1b8
--- /dev/null
+++ b/apps/backend/src/posts/posts.controller.ts
@@ -0,0 +1,39 @@
+import { Body, Controller, Delete, Get, Param, Patch, Post, Query } from '@nestjs/common';
+
+import { CreatePostDto } from './dto/create-post.dto';
+import { UpdatePostDto } from './dto/update-post.dto';
+import { PostsService } from './posts.service';
+
+@Controller('posts')
+export class PostsController {
+  constructor(private readonly postsService: PostsService) {}
+
+  @Post()
+  create(@Body() createPostDto: CreatePostDto) {
+    // TODO: Get authorId from authenticated user
+    const authorId = 1; // Temporary hardcoded value
+    return this.postsService.create(createPostDto, authorId);
+  }
+
+  @Get()
+  findAll(@Query('page') page?: string, @Query('limit') limit?: string) {
+    const pageNum = page ? parseInt(page) : 1;
+    const limitNum = limit ? parseInt(limit) : 10;
+    return this.postsService.findAll(pageNum, limitNum);
+  }
+
+  @Get(':id')
+  findOne(@Param('id') id: string) {
+    return this.postsService.findOne(Number(id));
+  }
+
+  @Patch(':id')
+  update(@Param('id') id: string, @Body() updatePostDto: UpdatePostDto) {
+    return this.postsService.update(Number(id), updatePostDto);
+  }
+
+  @Delete(':id')
+  remove(@Param('id') id: string) {
+    return this.postsService.remove(Number(id));
+  }
+}
diff --git a/apps/backend/src/posts/posts.module.ts b/apps/backend/src/posts/posts.module.ts
new file mode 100644
index 0000000..ff76628
--- /dev/null
+++ b/apps/backend/src/posts/posts.module.ts
@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+
+import { PostsController } from './posts.controller';
+import { PostsService } from './posts.service';
+
+@Module({
+  controllers: [PostsController],
+  providers: [PostsService],
+})
+export class PostsModule {}
diff --git a/apps/backend/src/posts/posts.service.ts b/apps/backend/src/posts/posts.service.ts
new file mode 100644
index 0000000..8693c3b
--- /dev/null
+++ b/apps/backend/src/posts/posts.service.ts
@@ -0,0 +1,77 @@
+import { Injectable, NotFoundException } from '@nestjs/common';
+import { PrismaService } from 'nestjs-prisma';
+
+import { CreatePostDto } from './dto/create-post.dto';
+import { UpdatePostDto } from './dto/update-post.dto';
+import { Post } from './entities/post.entity';
+
+@Injectable()
+export class PostsService {
+  constructor(private prisma: PrismaService) {}
+
+  async create(createPostDto: CreatePostDto, authorId: number): Promise<Post> {
+    return this.prisma.post.create({
+      data: {
+        ...createPostDto,
+        authorId,
+      },
+      include: {
+        author: true,
+      },
+    });
+  }
+
+  async findAll(page: number = 1, limit: number = 10): Promise<{ posts: Post[]; total: number }> {
+    const skip = (page - 1) * limit;
+
+    const [posts, total] = await Promise.all([
+      this.prisma.post.findMany({
+        skip,
+        take: limit,
+        orderBy: {
+          createdAt: 'desc',
+        },
+        include: {
+          author: true,
+        },
+      }),
+      this.prisma.post.count(),
+    ]);
+
+    return { posts, total };
+  }
+
+  async findOne(id: number): Promise<Post> {
+    const post = await this.prisma.post.findUnique({
+      where: { id },
+      include: {
+        author: true,
+      },
+    });
+
+    if (!post) {
+      throw new NotFoundException(`Post with ID ${id} not found`);
+    }
+
+    return post;
+  }
+
+  async update(id: number, updatePostDto: UpdatePostDto): Promise<Post> {
+    await this.findOne(id);
+
+    return this.prisma.post.update({
+      where: { id },
+      data: updatePostDto,
+      include: {
+        author: true,
+      },
+    });
+  }
+
+  async remove(id: number): Promise<void> {
+    await this.findOne(id);
+    await this.prisma.post.delete({
+      where: { id },
+    });
+  }
+}
diff --git a/apps/frontend/src/lib/api.ts b/apps/frontend/src/lib/api.ts
new file mode 100644
index 0000000..f9dd4a1
--- /dev/null
+++ b/apps/frontend/src/lib/api.ts
@@ -0,0 +1,71 @@
+import axios from 'axios';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+
+export interface Post {
+  id: number;
+  title: string;
+  body: string;
+  createdAt: string;
+  authorId: number;
+  author?: {
+    id: number;
+    name: string;
+    email: string;
+  };
+}
+
+export interface CreatePostDto {
+  title: string;
+  body: string;
+}
+
+export interface UpdatePostDto {
+  title?: string;
+  body?: string;
+}
+
+export interface PostsResponse {
+  posts: Post[];
+  total: number;
+}
+
+class ApiService {
+  private api;
+
+  constructor(baseURL: string) {
+    this.api = axios.create({
+      baseURL,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  }
+
+  // Posts API
+  async getPosts(page: number = 1, limit: number = 10): Promise<PostsResponse> {
+    const response = await this.api.get<PostsResponse>(`/posts?page=${page}&limit=${limit}`);
+    return response.data;
+  }
+
+  async getPost(id: number): Promise<Post> {
+    const response = await this.api.get<Post>(`/posts/${id}`);
+    return response.data;
+  }
+
+  async createPost(data: CreatePostDto): Promise<Post> {
+    const response = await this.api.post<Post>('/posts', data);
+    return response.data;
+  }
+
+  async updatePost(id: number, data: UpdatePostDto): Promise<Post> {
+    const response = await this.api.patch<Post>(`/posts/${id}`, data);
+    return response.data;
+  }
+
+  async deletePost(id: number): Promise<void> {
+    await this.api.delete(`/posts/${id}`);
+  }
+}
+
+export const apiService = new ApiService(API_BASE_URL);

From e0477b9f69d8e5a8ada01db1a75f1ea21818c3a3 Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Thu, 3 Jul 2025 20:27:57 +0200
Subject: [PATCH 13/27] reverted backed

---
 apps/backend/prisma/schema.prisma             |   2 +-
 apps/backend/src/app.module.ts                |  10 +-
 apps/backend/src/posts/dto/create-post.dto.ts |  11 -
 apps/backend/src/posts/dto/update-post.dto.ts |   5 -
 .../backend/src/posts/entities/post.entity.ts |  10 -
 apps/backend/src/posts/posts.controller.ts    |  39 ----
 apps/backend/src/posts/posts.module.ts        |  10 -
 apps/backend/src/posts/posts.service.ts       |  77 -------
 apps/frontend/package.json                    |   1 +
 apps/frontend/src/app/layout.tsx              |   4 +-
 apps/frontend/src/app/news/page.tsx           | 199 ++++++------------
 .../frontend/src/components/layout/footer.tsx |  34 +++
 .../src/components/layout/sidebar.tsx         |  26 +--
 apps/frontend/src/lib/api.ts                  |  71 -------
 apps/frontend/src/mocks/posts.ts              |   2 +-
 yarn.lock                                     |   5 +
 16 files changed, 116 insertions(+), 390 deletions(-)
 delete mode 100644 apps/backend/src/posts/dto/create-post.dto.ts
 delete mode 100644 apps/backend/src/posts/dto/update-post.dto.ts
 delete mode 100644 apps/backend/src/posts/entities/post.entity.ts
 delete mode 100644 apps/backend/src/posts/posts.controller.ts
 delete mode 100644 apps/backend/src/posts/posts.module.ts
 delete mode 100644 apps/backend/src/posts/posts.service.ts
 create mode 100644 apps/frontend/src/components/layout/footer.tsx
 delete mode 100644 apps/frontend/src/lib/api.ts

diff --git a/apps/backend/prisma/schema.prisma b/apps/backend/prisma/schema.prisma
index 9c48077..7cff323 100644
--- a/apps/backend/prisma/schema.prisma
+++ b/apps/backend/prisma/schema.prisma
@@ -89,8 +89,8 @@ model Post {
   title     String
   body      String
   createdAt DateTime @default(now())
-  authorId  Int
   author    User     @relation(fields: [authorId], references: [id])
+  authorId  Int
 }
 
 enum Role {
diff --git a/apps/backend/src/app.module.ts b/apps/backend/src/app.module.ts
index e6401d4..535ce29 100644
--- a/apps/backend/src/app.module.ts
+++ b/apps/backend/src/app.module.ts
@@ -5,19 +5,11 @@ import { AppController } from './app.controller';
 import { AppService } from './app.service';
 import { BandModule } from './band/band.module';
 import { CommentsModule } from './comments/comments.module';
-import { PostsModule } from './posts/posts.module';
 import { ReservationsModule } from './reservations/reservations.module';
 import { UsersModule } from './users/users.module';
 
 @Module({
-  imports: [
-    PrismaModule.forRoot({ isGlobal: true }),
-    UsersModule,
-    ReservationsModule,
-    CommentsModule,
-    BandModule,
-    PostsModule,
-  ],
+  imports: [PrismaModule.forRoot({ isGlobal: true }), UsersModule, ReservationsModule, CommentsModule, BandModule],
   controllers: [AppController],
   providers: [AppService],
 })
diff --git a/apps/backend/src/posts/dto/create-post.dto.ts b/apps/backend/src/posts/dto/create-post.dto.ts
deleted file mode 100644
index 69628d3..0000000
--- a/apps/backend/src/posts/dto/create-post.dto.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { IsNotEmpty, IsString } from 'class-validator';
-
-export class CreatePostDto {
-  @IsNotEmpty()
-  @IsString()
-  title: string;
-
-  @IsNotEmpty()
-  @IsString()
-  body: string;
-}
diff --git a/apps/backend/src/posts/dto/update-post.dto.ts b/apps/backend/src/posts/dto/update-post.dto.ts
deleted file mode 100644
index c52434d..0000000
--- a/apps/backend/src/posts/dto/update-post.dto.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { PartialType } from '@nestjs/mapped-types';
-
-import { CreatePostDto } from './create-post.dto';
-
-export class UpdatePostDto extends PartialType(CreatePostDto) {}
diff --git a/apps/backend/src/posts/entities/post.entity.ts b/apps/backend/src/posts/entities/post.entity.ts
deleted file mode 100644
index 9166e58..0000000
--- a/apps/backend/src/posts/entities/post.entity.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { User } from '../../users/entities/user.entity';
-
-export class Post {
-  id: number;
-  title: string;
-  body: string;
-  createdAt: Date;
-  authorId: number;
-  author?: User;
-}
diff --git a/apps/backend/src/posts/posts.controller.ts b/apps/backend/src/posts/posts.controller.ts
deleted file mode 100644
index 29cb1b8..0000000
--- a/apps/backend/src/posts/posts.controller.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Body, Controller, Delete, Get, Param, Patch, Post, Query } from '@nestjs/common';
-
-import { CreatePostDto } from './dto/create-post.dto';
-import { UpdatePostDto } from './dto/update-post.dto';
-import { PostsService } from './posts.service';
-
-@Controller('posts')
-export class PostsController {
-  constructor(private readonly postsService: PostsService) {}
-
-  @Post()
-  create(@Body() createPostDto: CreatePostDto) {
-    // TODO: Get authorId from authenticated user
-    const authorId = 1; // Temporary hardcoded value
-    return this.postsService.create(createPostDto, authorId);
-  }
-
-  @Get()
-  findAll(@Query('page') page?: string, @Query('limit') limit?: string) {
-    const pageNum = page ? parseInt(page) : 1;
-    const limitNum = limit ? parseInt(limit) : 10;
-    return this.postsService.findAll(pageNum, limitNum);
-  }
-
-  @Get(':id')
-  findOne(@Param('id') id: string) {
-    return this.postsService.findOne(Number(id));
-  }
-
-  @Patch(':id')
-  update(@Param('id') id: string, @Body() updatePostDto: UpdatePostDto) {
-    return this.postsService.update(Number(id), updatePostDto);
-  }
-
-  @Delete(':id')
-  remove(@Param('id') id: string) {
-    return this.postsService.remove(Number(id));
-  }
-}
diff --git a/apps/backend/src/posts/posts.module.ts b/apps/backend/src/posts/posts.module.ts
deleted file mode 100644
index ff76628..0000000
--- a/apps/backend/src/posts/posts.module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Module } from '@nestjs/common';
-
-import { PostsController } from './posts.controller';
-import { PostsService } from './posts.service';
-
-@Module({
-  controllers: [PostsController],
-  providers: [PostsService],
-})
-export class PostsModule {}
diff --git a/apps/backend/src/posts/posts.service.ts b/apps/backend/src/posts/posts.service.ts
deleted file mode 100644
index 8693c3b..0000000
--- a/apps/backend/src/posts/posts.service.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Injectable, NotFoundException } from '@nestjs/common';
-import { PrismaService } from 'nestjs-prisma';
-
-import { CreatePostDto } from './dto/create-post.dto';
-import { UpdatePostDto } from './dto/update-post.dto';
-import { Post } from './entities/post.entity';
-
-@Injectable()
-export class PostsService {
-  constructor(private prisma: PrismaService) {}
-
-  async create(createPostDto: CreatePostDto, authorId: number): Promise<Post> {
-    return this.prisma.post.create({
-      data: {
-        ...createPostDto,
-        authorId,
-      },
-      include: {
-        author: true,
-      },
-    });
-  }
-
-  async findAll(page: number = 1, limit: number = 10): Promise<{ posts: Post[]; total: number }> {
-    const skip = (page - 1) * limit;
-
-    const [posts, total] = await Promise.all([
-      this.prisma.post.findMany({
-        skip,
-        take: limit,
-        orderBy: {
-          createdAt: 'desc',
-        },
-        include: {
-          author: true,
-        },
-      }),
-      this.prisma.post.count(),
-    ]);
-
-    return { posts, total };
-  }
-
-  async findOne(id: number): Promise<Post> {
-    const post = await this.prisma.post.findUnique({
-      where: { id },
-      include: {
-        author: true,
-      },
-    });
-
-    if (!post) {
-      throw new NotFoundException(`Post with ID ${id} not found`);
-    }
-
-    return post;
-  }
-
-  async update(id: number, updatePostDto: UpdatePostDto): Promise<Post> {
-    await this.findOne(id);
-
-    return this.prisma.post.update({
-      where: { id },
-      data: updatePostDto,
-      include: {
-        author: true,
-      },
-    });
-  }
-
-  async remove(id: number): Promise<void> {
-    await this.findOne(id);
-    await this.prisma.post.delete({
-      where: { id },
-    });
-  }
-}
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index b059b3c..c706cdd 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -29,6 +29,7 @@
     "next-themes": "^0.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.5.0",
     "shadcn": "^2.1.7",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7"
diff --git a/apps/frontend/src/app/layout.tsx b/apps/frontend/src/app/layout.tsx
index 97b9468..759c24a 100644
--- a/apps/frontend/src/app/layout.tsx
+++ b/apps/frontend/src/app/layout.tsx
@@ -3,8 +3,8 @@ import './globals.css';
 import { GeistSans } from 'geist/font/sans';
 import type { Metadata } from 'next';
 
+import { Footer } from '@/components/layout/footer';
 import { Header } from '@/components/layout/header';
-import { Player } from '@/components/layout/player';
 import { RightSidebar } from '@/components/layout/right-sidebar';
 import { Sidebar } from '@/components/layout/sidebar';
 import { ThemeProvider } from '@/components/theme-provider';
@@ -30,7 +30,7 @@ export default function RootLayout({
               {children}
               <RightSidebar />
             </div>
-            <Player />
+            <Footer />
           </div>
         </ThemeProvider>
       </body>
diff --git a/apps/frontend/src/app/news/page.tsx b/apps/frontend/src/app/news/page.tsx
index a8af176..76b3239 100644
--- a/apps/frontend/src/app/news/page.tsx
+++ b/apps/frontend/src/app/news/page.tsx
@@ -4,6 +4,7 @@ import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, Pencil, Plus, Tra
 import { useEffect, useState } from 'react';
 
 import { TextArea } from '@/components/ui/textarea';
+import { mockPosts as mockNewsPosts } from '@/mocks/posts';
 import { mockUsers } from '@/mocks/users';
 import { User } from '@/types/user';
 
@@ -11,7 +12,7 @@ import { Button } from '../../components/ui/button';
 import { Card, CardContent, CardFooter, CardTitle } from '../../components/ui/card';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../components/ui/dialog';
 import { Input } from '../../components/ui/input';
-import { apiService, Post as ApiPost } from '../../lib/api';
+import { Post } from '../../types/post';
 
 const POSTS_PER_PAGE = 10;
 
@@ -21,14 +22,12 @@ function NewsForm({
   onCancel,
   isOpen,
   onOpenChange,
-  isLoading,
 }: {
-  initial?: Partial<ApiPost>;
-  onSave: (post: { title: string; body: string }) => void;
+  initial?: Partial<Post>;
+  onSave: (post: Omit<Post, 'id' | 'createdAt'>) => void;
   onCancel: () => void;
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
-  isLoading: boolean;
 }) {
   const [title, setTitle] = useState(initial?.title || '');
   const [body, setBody] = useState(initial?.body || '');
@@ -57,31 +56,16 @@ function NewsForm({
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>{initial ? 'Szerkesztés' : 'Új poszt'}</DialogTitle>
+          <DialogTitle>{initial ? 'Edit Post' : 'Create New Post'}</DialogTitle>
         </DialogHeader>
         <form onSubmit={handleSubmit} className='space-y-4'>
-          <Input
-            placeholder='Cím'
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            required
-            disabled={isLoading}
-          />
-          <TextArea
-            placeholder='Tartalom'
-            value={body}
-            onChange={(e) => setBody(e.target.value)}
-            required
-            rows={6}
-            disabled={isLoading}
-          />
+          <Input placeholder='Title' value={title} onChange={(e) => setTitle(e.target.value)} required />
+          <TextArea placeholder='Body' value={body} onChange={(e) => setBody(e.target.value)} required rows={6} />
           <div className='flex gap-2 justify-end'>
-            <Button type='button' variant='secondary' onClick={handleCancel} disabled={isLoading}>
-              Mégsem
-            </Button>
-            <Button type='submit' disabled={isLoading}>
-              {isLoading ? 'Mentés...' : 'Mentés'}
+            <Button type='button' variant='secondary' onClick={handleCancel}>
+              Cancel
             </Button>
+            <Button type='submit'>Save</Button>
           </div>
         </form>
       </DialogContent>
@@ -92,73 +76,37 @@ function NewsForm({
 export default function NewsPage() {
   const currentUser: User = mockUsers[1]; //TODO: replace with real user
   const isAdmin = currentUser.role === 'ADMIN';
-  const [posts, setPosts] = useState<ApiPost[]>([]);
+  const [posts, setPosts] = useState<Post[]>(mockNewsPosts);
   const [page, setPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(1);
-  const [editing, setEditing] = useState<ApiPost | null>(null);
+  const [editing, setEditing] = useState<Post | null>(null);
   const [creating, setCreating] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isLoadingPosts, setIsLoadingPosts] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    loadPosts();
-  }, [page]);
 
-  async function loadPosts() {
-    try {
-      setIsLoadingPosts(true);
-      setError(null);
-      const response = await apiService.getPosts(page, POSTS_PER_PAGE);
-      setPosts(response.posts);
-      setTotalPages(Math.ceil(response.total / POSTS_PER_PAGE));
-    } catch (err) {
-      setError('Failed to load posts');
-      console.error('Error loading posts:', err);
-    } finally {
-      setIsLoadingPosts(false);
-    }
-  }
-
-  async function handleCreate(post: { title: string; body: string }) {
-    try {
-      setIsLoading(true);
-      await apiService.createPost(post);
-      setCreating(false);
-      setPage(1);
-      await loadPosts();
-    } catch (err) {
-      setError('Failed to create post');
-      console.error('Error creating post:', err);
-    } finally {
-      setIsLoading(false);
-    }
+  const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
+  const paginated = posts.slice((page - 1) * POSTS_PER_PAGE, page * POSTS_PER_PAGE);
+
+  function handleCreate(post: Omit<Post, 'id' | 'createdAt'>) {
+    setPosts([
+      {
+        id: (Math.random() * 100000).toFixed(0),
+        title: post.title,
+        body: post.body,
+        createdAt: new Date().toISOString(),
+      },
+      ...posts,
+    ]);
+    setCreating(false);
+    setPage(1);
   }
 
-  async function handleEdit(post: { title: string; body: string }) {
+  function handleEdit(post: Omit<Post, 'id' | 'createdAt'>) {
     if (!editing) return;
-    try {
-      setIsLoading(true);
-      await apiService.updatePost(editing.id, post);
-      setEditing(null);
-      await loadPosts();
-    } catch (err) {
-      setError('Failed to update post');
-      console.error('Error updating post:', err);
-    } finally {
-      setIsLoading(false);
-    }
+    setPosts(posts.map((p) => (p.id === editing.id ? { ...p, ...post } : p)));
+    setEditing(null);
   }
 
-  async function handleDelete(id: number) {
-    try {
-      await apiService.deletePost(id);
-      await loadPosts();
-    } catch (err) {
-      setError('Failed to delete post');
-      console.error('Error deleting post:', err);
-    }
+  function handleDelete(id: string) {
+    setPosts(posts.filter((p) => p.id !== id));
   }
 
   function openCreateDialog() {
@@ -167,49 +115,33 @@ export default function NewsPage() {
     setDialogOpen(true);
   }
 
-  function openEditDialog(post: ApiPost) {
+  function openEditDialog(post: Post) {
     setEditing(post);
     setCreating(false);
     setDialogOpen(true);
   }
 
-  if (isLoadingPosts) {
-    return (
-      <div className='w-full overflow-y-auto'>
-        <div className='flex items-center justify-between flex-row p-4'>
-          <h1 className='text-2xl font-semibold text-primary'>Hírek</h1>
-        </div>
-        <div className='m-4'>
-          <div className='flex items-center justify-center h-64'>
-            <p>Hírek betöltése...</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className='w-full overflow-y-auto'>
       <div className='flex items-center justify-between flex-row p-4'>
         <h1 className='text-2xl font-semibold text-primary'>Hírek</h1>
         {isAdmin && (
           <Button onClick={openCreateDialog}>
-            <Plus className='w-4 h-4' />
+            <Plus />
           </Button>
         )}
       </div>
       <div className='m-4'>
-        {error && <div className='mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded'>{error}</div>}
         <div className='space-y-4'>
-          {posts.map((post) => (
-            <Card key={post.id} className='relative'>
+          {paginated.map((post) => (
+            <Card key={post.id} className='relative border-0 border-l-4'>
               <CardTitle className='p-4'>{post.title}</CardTitle>
               {isAdmin && (
                 <div className='absolute top-4 right-4 flex gap-2'>
                   <Button size='sm' variant='secondary' onClick={() => openEditDialog(post)}>
                     <Pencil className='w-4 h-4' />
                   </Button>
-                  <Button size='sm' variant='destructive' onClick={() => handleDelete(post.id)}>
+                  <Button className='bg-red-500' size='sm' variant='destructive' onClick={() => handleDelete(post.id)}>
                     <Trash className='w-4 h-4' />
                   </Button>
                 </div>
@@ -217,42 +149,34 @@ export default function NewsPage() {
               <CardContent className='p-4'>{post.body}</CardContent>
               <CardFooter className='py-2 px-4 text-sm text-gray-500 dark:text-gray-400'>
                 {new Date(post.createdAt).toLocaleDateString('hu-HU')}
-                {post.author && ` • ${post.author.name}`}
               </CardFooter>
             </Card>
           ))}
         </div>
-        {totalPages > 1 && (
-          <div className='flex justify-center gap-2 mt-8'>
-            <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(1)}>
-              <ChevronFirst />
-              Első
-            </Button>
-            <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(page - 1)}>
-              <ChevronLeft />
-              Előző
-            </Button>
-            <span className='px-2 py-1'>
-              {page}. oldal / {totalPages}
-            </span>
-            <Button
-              className='pl-5'
-              variant='secondary'
-              disabled={page === totalPages}
-              onClick={() => setPage(page + 1)}
-            >
-              Következő <ChevronRight />
-            </Button>
-            <Button
-              className='pl-5'
-              variant='secondary'
-              disabled={page === totalPages}
-              onClick={() => setPage(totalPages)}
-            >
-              Utolsó <ChevronLast />
-            </Button>
-          </div>
-        )}
+        <div className='flex justify-center gap-2 mt-8'>
+          <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(1)}>
+            <ChevronFirst />
+            Első
+          </Button>
+          <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(page - 1)}>
+            <ChevronLeft />
+            Előző
+          </Button>
+          <span className='px-2 py-1'>
+            {page}. oldal / {totalPages}
+          </span>
+          <Button className='pl-5' variant='secondary' disabled={page === totalPages} onClick={() => setPage(page + 1)}>
+            Következő <ChevronRight />
+          </Button>
+          <Button
+            className='pl-5'
+            variant='secondary'
+            disabled={page === totalPages}
+            onClick={() => setPage(totalPages)}
+          >
+            Utolsó <ChevronLast />
+          </Button>
+        </div>
       </div>
 
       <NewsForm
@@ -264,7 +188,6 @@ export default function NewsPage() {
         }}
         isOpen={dialogOpen}
         onOpenChange={setDialogOpen}
-        isLoading={isLoading}
       />
     </div>
   );
diff --git a/apps/frontend/src/components/layout/footer.tsx b/apps/frontend/src/components/layout/footer.tsx
new file mode 100644
index 0000000..2ccc45f
--- /dev/null
+++ b/apps/frontend/src/components/layout/footer.tsx
@@ -0,0 +1,34 @@
+import Link from 'next/link';
+import { FaFacebookF } from 'react-icons/fa';
+import { LuHeart } from 'react-icons/lu';
+import { SiGmail } from 'react-icons/si';
+
+export function Footer() {
+  return (
+    <footer className='p-4 dark:bg-zinc-900 border-t border-orange-500'>
+      <div className='grid grid-cols-1 lg:grid-cols-3 w-full container mx-auto gap-4 items-center'>
+        <div className='flex gap-4 justify-center lg:justify-start items-center'>
+          <Link
+            href='https://www.facebook.com/muzsikamivelomernokokklubja'
+            target='_blank'
+            className='flex items-center'
+          >
+            <FaFacebookF size={20} />
+          </Link>
+          <Link href='mailto:mmmk@sch.bme.hu' className='flex items-center'>
+            <SiGmail size={22} />
+          </Link>
+        </div>
+        <Link href='https://kir-dev.hu' target='_blank'>
+          <p className='text-sm text-center lg:text-center flex items-center justify-center gap-1'>
+            Made with <LuHeart size={14} /> by
+            <span className='opacity-80 font-bold bg-gradient-to-r from-red-600 via-orange-500 to-yellow-500 text-transparent bg-clip-text'>
+              Kir-Dev
+            </span>
+          </p>
+        </Link>
+        <p className='text-sm text-center lg:text-right '>&copy; 2025 MMMK</p>
+      </div>
+    </footer>
+  );
+}
diff --git a/apps/frontend/src/components/layout/sidebar.tsx b/apps/frontend/src/components/layout/sidebar.tsx
index 7ac194b..657bbe9 100644
--- a/apps/frontend/src/components/layout/sidebar.tsx
+++ b/apps/frontend/src/components/layout/sidebar.tsx
@@ -7,14 +7,12 @@ import {
   KeyboardMusic,
   ListMusic,
   MicVocal,
-  Plus,
   Radio,
   Users2,
 } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import ActionButton from '@/components/ui/action-button';
 import { Button } from '@/components/ui/button';
 
 export function Sidebar() {
@@ -39,16 +37,6 @@ export function Sidebar() {
               Zenekarok
             </Link>
           </Button>
-          <Button
-            variant={pathname.startsWith('/members') ? 'blastActive' : 'blast'}
-            className='w-full justify-start'
-            asChild
-          >
-            <Link href='/members'>
-              <Users2 className='mr-2 h-4 w-4' />
-              Felhasználók
-            </Link>
-          </Button>
         </div>
 
         <div className='pt-4'>
@@ -100,6 +88,16 @@ export function Sidebar() {
                 Foglalás
               </Link>
             </Button>
+            <Button
+              variant={pathname.startsWith('/members') ? 'blastActive' : 'blast'}
+              className='w-full justify-start'
+              asChild
+            >
+              <Link href='/members'>
+                <Users2 className='mr-2 h-4 w-4' />
+                Felhasználók
+              </Link>
+            </Button>
             <Button
               variant={pathname.startsWith('/stats') ? 'blastActive' : 'blast'}
               className='w-full justify-start'
@@ -128,10 +126,6 @@ export function Sidebar() {
             </Button>
           </div>
         </div>
-
-        <div className='pt-4'>
-          <ActionButton text='Új foglalás' icon={<Plus />} variant='ghostPrimary' />
-        </div>
       </div>
     </div>
   );
diff --git a/apps/frontend/src/lib/api.ts b/apps/frontend/src/lib/api.ts
deleted file mode 100644
index f9dd4a1..0000000
--- a/apps/frontend/src/lib/api.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import axios from 'axios';
-
-const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
-
-export interface Post {
-  id: number;
-  title: string;
-  body: string;
-  createdAt: string;
-  authorId: number;
-  author?: {
-    id: number;
-    name: string;
-    email: string;
-  };
-}
-
-export interface CreatePostDto {
-  title: string;
-  body: string;
-}
-
-export interface UpdatePostDto {
-  title?: string;
-  body?: string;
-}
-
-export interface PostsResponse {
-  posts: Post[];
-  total: number;
-}
-
-class ApiService {
-  private api;
-
-  constructor(baseURL: string) {
-    this.api = axios.create({
-      baseURL,
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-  }
-
-  // Posts API
-  async getPosts(page: number = 1, limit: number = 10): Promise<PostsResponse> {
-    const response = await this.api.get<PostsResponse>(`/posts?page=${page}&limit=${limit}`);
-    return response.data;
-  }
-
-  async getPost(id: number): Promise<Post> {
-    const response = await this.api.get<Post>(`/posts/${id}`);
-    return response.data;
-  }
-
-  async createPost(data: CreatePostDto): Promise<Post> {
-    const response = await this.api.post<Post>('/posts', data);
-    return response.data;
-  }
-
-  async updatePost(id: number, data: UpdatePostDto): Promise<Post> {
-    const response = await this.api.patch<Post>(`/posts/${id}`, data);
-    return response.data;
-  }
-
-  async deletePost(id: number): Promise<void> {
-    await this.api.delete(`/posts/${id}`);
-  }
-}
-
-export const apiService = new ApiService(API_BASE_URL);
diff --git a/apps/frontend/src/mocks/posts.ts b/apps/frontend/src/mocks/posts.ts
index ccb3469..1fd2f2b 100644
--- a/apps/frontend/src/mocks/posts.ts
+++ b/apps/frontend/src/mocks/posts.ts
@@ -1,6 +1,6 @@
 import { Post } from '../types/post';
 
-export const posts: Post[] = [
+export const mockPosts: Post[] = [
   {
     id: '1',
     title: 'Welcome to the News!',
diff --git a/yarn.lock b/yarn.lock
index a9baa56..d66862f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5056,6 +5056,11 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-icons@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.5.0.tgz#8aa25d3543ff84231685d3331164c00299cdfaf2"
+  integrity sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"

From 12ff60c3b5856fe4600f4081cb204598d600cfae Mon Sep 17 00:00:00 2001
From: mozsarmate <mozsarmatee@gmail.com>
Date: Thu, 3 Jul 2025 20:44:44 +0200
Subject: [PATCH 14/27] posts generated

---
 apps/backend/src/app.module.ts                |  3 +-
 apps/backend/src/posts/dto/create-post.dto.ts |  1 +
 apps/backend/src/posts/dto/update-post.dto.ts |  4 +++
 .../backend/src/posts/entities/post.entity.ts |  1 +
 apps/backend/src/posts/posts.controller.ts    | 35 +++++++++++++++++++
 apps/backend/src/posts/posts.module.ts        |  9 +++++
 apps/backend/src/posts/posts.service.ts       | 27 ++++++++++++++
 7 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 apps/backend/src/posts/dto/create-post.dto.ts
 create mode 100644 apps/backend/src/posts/dto/update-post.dto.ts
 create mode 100644 apps/backend/src/posts/entities/post.entity.ts
 create mode 100644 apps/backend/src/posts/posts.controller.ts
 create mode 100644 apps/backend/src/posts/posts.module.ts
 create mode 100644 apps/backend/src/posts/posts.service.ts

diff --git a/apps/backend/src/app.module.ts b/apps/backend/src/app.module.ts
index 535ce29..0c16bee 100644
--- a/apps/backend/src/app.module.ts
+++ b/apps/backend/src/app.module.ts
@@ -7,9 +7,10 @@ import { BandModule } from './band/band.module';
 import { CommentsModule } from './comments/comments.module';
 import { ReservationsModule } from './reservations/reservations.module';
 import { UsersModule } from './users/users.module';
+import { PostsModule } from './posts/posts.module';
 
 @Module({
-  imports: [PrismaModule.forRoot({ isGlobal: true }), UsersModule, ReservationsModule, CommentsModule, BandModule],
+  imports: [PrismaModule.forRoot({ isGlobal: true }), UsersModule, ReservationsModule, CommentsModule, BandModule, PostsModule],
   controllers: [AppController],
   providers: [AppService],
 })
diff --git a/apps/backend/src/posts/dto/create-post.dto.ts b/apps/backend/src/posts/dto/create-post.dto.ts
new file mode 100644
index 0000000..1a2b3c5
--- /dev/null
+++ b/apps/backend/src/posts/dto/create-post.dto.ts
@@ -0,0 +1 @@
+export class CreatePostDto {}
diff --git a/apps/backend/src/posts/dto/update-post.dto.ts b/apps/backend/src/posts/dto/update-post.dto.ts
new file mode 100644
index 0000000..7545cd5
--- /dev/null
+++ b/apps/backend/src/posts/dto/update-post.dto.ts
@@ -0,0 +1,4 @@
+import { PartialType } from '@nestjs/swagger';
+import { CreatePostDto } from './create-post.dto';
+
+export class UpdatePostDto extends PartialType(CreatePostDto) {}
diff --git a/apps/backend/src/posts/entities/post.entity.ts b/apps/backend/src/posts/entities/post.entity.ts
new file mode 100644
index 0000000..54fbf02
--- /dev/null
+++ b/apps/backend/src/posts/entities/post.entity.ts
@@ -0,0 +1 @@
+export class Post {}
diff --git a/apps/backend/src/posts/posts.controller.ts b/apps/backend/src/posts/posts.controller.ts
new file mode 100644
index 0000000..29c53b6
--- /dev/null
+++ b/apps/backend/src/posts/posts.controller.ts
@@ -0,0 +1,35 @@
+import { Body, Controller, Delete, Get, Param, Patch, Post } from '@nestjs/common';
+
+import { CreatePostDto } from './dto/create-post.dto';
+import { UpdatePostDto } from './dto/update-post.dto';
+import { PostsService } from './posts.service';
+
+@Controller('posts')
+export class PostsController {
+  constructor(private readonly postsService: PostsService) {}
+
+  @Post()
+  create(@Body() createPostDto: CreatePostDto) {
+    return this.postsService.create(createPostDto);
+  }
+
+  @Get()
+  findAll() {
+    return this.postsService.findAll();
+  }
+
+  @Get(':id')
+  findOne(@Param('id') id: string) {
+    return this.postsService.findOne(Number(id));
+  }
+
+  @Patch(':id')
+  update(@Param('id') id: string, @Body() updatePostDto: UpdatePostDto) {
+    return this.postsService.update(Number(id), updatePostDto);
+  }
+
+  @Delete(':id')
+  remove(@Param('id') id: string) {
+    return this.postsService.remove(Number(id));
+  }
+}
diff --git a/apps/backend/src/posts/posts.module.ts b/apps/backend/src/posts/posts.module.ts
new file mode 100644
index 0000000..0a83378
--- /dev/null
+++ b/apps/backend/src/posts/posts.module.ts
@@ -0,0 +1,9 @@
+import { Module } from '@nestjs/common';
+import { PostsService } from './posts.service';
+import { PostsController } from './posts.controller';
+
+@Module({
+  controllers: [PostsController],
+  providers: [PostsService],
+})
+export class PostsModule {}
diff --git a/apps/backend/src/posts/posts.service.ts b/apps/backend/src/posts/posts.service.ts
new file mode 100644
index 0000000..4f9567d
--- /dev/null
+++ b/apps/backend/src/posts/posts.service.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@nestjs/common';
+
+import { CreatePostDto } from './dto/create-post.dto';
+import { UpdatePostDto } from './dto/update-post.dto';
+
+@Injectable()
+export class PostsService {
+  create(createPostDto: CreatePostDto) {
+    return 'This action adds a new post';
+  }
+
+  findAll() {
+    return `This action returns all posts`;
+  }
+
+  findOne(id: number) {
+    return `This action returns a #${id} post`;
+  }
+
+  update(id: number, updatePostDto: UpdatePostDto) {
+    return `This action updates a #${id} post`;
+  }
+
+  remove(id: number) {
+    return `This action removes a #${id} post`;
+  }
+}

From 71545ff42aea6fd228e2257178051bd9ed7e3c3e Mon Sep 17 00:00:00 2001
From: mozsarmate <mozsarmatee@gmail.com>
Date: Thu, 3 Jul 2025 20:51:51 +0200
Subject: [PATCH 15/27] dto s

---
 apps/backend/src/posts/dto/create-post.dto.ts |  6 ++++-
 apps/backend/src/posts/dto/update-post.dto.ts |  1 +
 .../backend/src/posts/entities/post.entity.ts | 22 ++++++++++++++++++-
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/apps/backend/src/posts/dto/create-post.dto.ts b/apps/backend/src/posts/dto/create-post.dto.ts
index 1a2b3c5..40242d6 100644
--- a/apps/backend/src/posts/dto/create-post.dto.ts
+++ b/apps/backend/src/posts/dto/create-post.dto.ts
@@ -1 +1,5 @@
-export class CreatePostDto {}
+import { OmitType } from '@nestjs/swagger';
+
+import { Post } from '../entities/post.entity';
+
+export class CreatePostDto extends OmitType(Post, ['id', 'createdAt', 'authorId']) {}
diff --git a/apps/backend/src/posts/dto/update-post.dto.ts b/apps/backend/src/posts/dto/update-post.dto.ts
index 7545cd5..8f7ae5b 100644
--- a/apps/backend/src/posts/dto/update-post.dto.ts
+++ b/apps/backend/src/posts/dto/update-post.dto.ts
@@ -1,4 +1,5 @@
 import { PartialType } from '@nestjs/swagger';
+
 import { CreatePostDto } from './create-post.dto';
 
 export class UpdatePostDto extends PartialType(CreatePostDto) {}
diff --git a/apps/backend/src/posts/entities/post.entity.ts b/apps/backend/src/posts/entities/post.entity.ts
index 54fbf02..d7aef50 100644
--- a/apps/backend/src/posts/entities/post.entity.ts
+++ b/apps/backend/src/posts/entities/post.entity.ts
@@ -1 +1,21 @@
-export class Post {}
+import { IsDate, IsNotEmpty, IsNumber, IsString } from 'class-validator';
+
+export class Post {
+  @IsNotEmpty()
+  @IsNumber()
+  id: number;
+
+  @IsNotEmpty()
+  @IsNumber()
+  title: string;
+
+  @IsString()
+  body: string;
+
+  @IsNotEmpty()
+  @IsDate()
+  createdAt: Date;
+
+  @IsNumber()
+  authorId: number;
+}

From d3ed24c33c6fee4b2745b43bc01d515b37b1b0fa Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Thu, 3 Jul 2025 21:01:48 +0200
Subject: [PATCH 16/27] posts controller and service

---
 .env.example                                  |  8 --
 apps/backend/.env.example                     |  1 -
 .../20250703183905_posts/migration.sql        | 13 +++
 apps/backend/src/posts/posts.controller.ts    | 18 ++--
 apps/backend/src/posts/posts.module.ts        |  3 +-
 apps/backend/src/posts/posts.service.ts       | 90 +++++++++++++++++--
 6 files changed, 105 insertions(+), 28 deletions(-)
 delete mode 100644 .env.example
 delete mode 100644 apps/backend/.env.example
 create mode 100644 apps/backend/prisma/migrations/20250703183905_posts/migration.sql

diff --git a/.env.example b/.env.example
deleted file mode 100644
index a47e4b3..0000000
--- a/.env.example
+++ /dev/null
@@ -1,8 +0,0 @@
-#Common
-BACKEND_PORT=3300
-# Database
-POSTGRES_USER=postgres
-POSTGRES_PASSWORD=postgres
-POSTGRES_DB=mmmk
-POSTGRES_PORT=5432
-DATABASE_URL=postgresql://postgres:postgres@localhost:5432/mmmk?schema=public
diff --git a/apps/backend/.env.example b/apps/backend/.env.example
deleted file mode 100644
index 63bdc7e..0000000
--- a/apps/backend/.env.example
+++ /dev/null
@@ -1 +0,0 @@
-DATABASE_URL="postgresql://postgres:postgres@localhost:5432/mmmk?schema=public"
diff --git a/apps/backend/prisma/migrations/20250703183905_posts/migration.sql b/apps/backend/prisma/migrations/20250703183905_posts/migration.sql
new file mode 100644
index 0000000..93781d0
--- /dev/null
+++ b/apps/backend/prisma/migrations/20250703183905_posts/migration.sql
@@ -0,0 +1,13 @@
+-- CreateTable
+CREATE TABLE "Post" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "body" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "authorId" INTEGER NOT NULL,
+
+    CONSTRAINT "Post_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "Post" ADD CONSTRAINT "Post_authorId_fkey" FOREIGN KEY ("authorId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
diff --git a/apps/backend/src/posts/posts.controller.ts b/apps/backend/src/posts/posts.controller.ts
index 29c53b6..c13c12c 100644
--- a/apps/backend/src/posts/posts.controller.ts
+++ b/apps/backend/src/posts/posts.controller.ts
@@ -1,4 +1,4 @@
-import { Body, Controller, Delete, Get, Param, Patch, Post } from '@nestjs/common';
+import { Body, Controller, Delete, Get, Param, ParseIntPipe, Patch, Post, Query } from '@nestjs/common';
 
 import { CreatePostDto } from './dto/create-post.dto';
 import { UpdatePostDto } from './dto/update-post.dto';
@@ -14,22 +14,22 @@ export class PostsController {
   }
 
   @Get()
-  findAll() {
-    return this.postsService.findAll();
+  findAll(@Query('page', ParseIntPipe) page: number, @Query('page_size', ParseIntPipe) pageSize: number) {
+    return this.postsService.findAll(page, pageSize);
   }
 
   @Get(':id')
-  findOne(@Param('id') id: string) {
-    return this.postsService.findOne(Number(id));
+  findOne(@Param('id', ParseIntPipe) id: number) {
+    return this.postsService.findOne(id);
   }
 
   @Patch(':id')
-  update(@Param('id') id: string, @Body() updatePostDto: UpdatePostDto) {
-    return this.postsService.update(Number(id), updatePostDto);
+  update(@Param('id', ParseIntPipe) id: number, @Body() updatePostDto: UpdatePostDto) {
+    return this.postsService.update(id, updatePostDto);
   }
 
   @Delete(':id')
-  remove(@Param('id') id: string) {
-    return this.postsService.remove(Number(id));
+  remove(@Param('id', ParseIntPipe) id: number) {
+    return this.postsService.remove(id);
   }
 }
diff --git a/apps/backend/src/posts/posts.module.ts b/apps/backend/src/posts/posts.module.ts
index 0a83378..ff76628 100644
--- a/apps/backend/src/posts/posts.module.ts
+++ b/apps/backend/src/posts/posts.module.ts
@@ -1,6 +1,7 @@
 import { Module } from '@nestjs/common';
-import { PostsService } from './posts.service';
+
 import { PostsController } from './posts.controller';
+import { PostsService } from './posts.service';
 
 @Module({
   controllers: [PostsController],
diff --git a/apps/backend/src/posts/posts.service.ts b/apps/backend/src/posts/posts.service.ts
index 4f9567d..391b5ce 100644
--- a/apps/backend/src/posts/posts.service.ts
+++ b/apps/backend/src/posts/posts.service.ts
@@ -1,27 +1,99 @@
-import { Injectable } from '@nestjs/common';
+import { Injectable, InternalServerErrorException, NotFoundException } from '@nestjs/common';
+import { Prisma } from '@prisma/client';
+import { PrismaService } from 'nestjs-prisma';
+import { PaginationDto } from 'src/dto/pagination.dto';
 
 import { CreatePostDto } from './dto/create-post.dto';
 import { UpdatePostDto } from './dto/update-post.dto';
+import { Post } from './entities/post.entity';
 
 @Injectable()
 export class PostsService {
+  constructor(private readonly prisma: PrismaService) {}
+
   create(createPostDto: CreatePostDto) {
-    return 'This action adds a new post';
+    return this.prisma.post.create({
+      data: {
+        ...createPostDto,
+      },
+    });
   }
 
-  findAll() {
-    return `This action returns all posts`;
+  findAll(page?: number, pageSize?: number): Promise<PaginationDto<Post>> {
+    const hasPagination = page !== -1 && pageSize !== -1;
+    const posts = this.prisma.post.findMany({
+      skip: hasPagination ? (page - 1) * pageSize : undefined,
+      take: hasPagination ? pageSize : undefined,
+    });
+
+    const count = this.prisma.post.count();
+
+    return Promise.all([posts, count])
+      .then(([posts, count]) => {
+        const limit = hasPagination ? Math.floor(count / pageSize) : 0;
+        return {
+          data: posts,
+          count,
+          page,
+          limit,
+        };
+      })
+      .catch(() => {
+        throw new InternalServerErrorException('An error occurred.');
+      });
   }
 
-  findOne(id: number) {
-    return `This action returns a #${id} post`;
+  async findOne(id: number) {
+    try {
+      return await this.prisma.post.findUniqueOrThrow({
+        where: {
+          id,
+        },
+      });
+    } catch (e) {
+      if (e instanceof Prisma.PrismaClientKnownRequestError) {
+        if (e.code === 'P2025') {
+          throw new NotFoundException(`This post doesn't exist.`);
+        }
+        throw new InternalServerErrorException('An error occurred.');
+      }
+    }
   }
 
-  update(id: number, updatePostDto: UpdatePostDto) {
-    return `This action updates a #${id} post`;
+  async update(id: number, updatePostDto: UpdatePostDto) {
+    try {
+      return await this.prisma.post.update({
+        where: {
+          id,
+        },
+        data: {
+          ...updatePostDto,
+        },
+      });
+    } catch (e) {
+      if (e instanceof Prisma.PrismaClientKnownRequestError) {
+        if (e.code === 'P2025') {
+          throw new NotFoundException(`This post doesn't exist.`);
+        }
+        throw new InternalServerErrorException('An error occurred.');
+      }
+    }
   }
 
   remove(id: number) {
-    return `This action removes a #${id} post`;
+    try {
+      return this.prisma.post.delete({
+        where: {
+          id,
+        },
+      });
+    } catch (e) {
+      if (e instanceof Prisma.PrismaClientKnownRequestError) {
+        if (e.code === 'P2025') {
+          throw new NotFoundException(`This post doesn't exist.`);
+        }
+        throw new InternalServerErrorException('An error occurred.');
+      }
+    }
   }
 }

From ef95f926133892459b76e5b3eeccdff334303b03 Mon Sep 17 00:00:00 2001
From: mozsarmate <mozsarmatee@gmail.com>
Date: Thu, 3 Jul 2025 21:05:44 +0200
Subject: [PATCH 17/27] swr

---
 apps/frontend/.env.example          |  1 +
 apps/frontend/package.json          |  1 +
 apps/frontend/src/utils/apiSetup.ts | 19 +++++++++++++++++++
 apps/frontend/src/utils/fetchers.ts | 16 ++++++++++++++++
 apps/frontend/src/utils/getPosts.ts |  5 +++++
 5 files changed, 42 insertions(+)
 create mode 100644 apps/frontend/.env.example
 create mode 100644 apps/frontend/src/utils/apiSetup.ts
 create mode 100644 apps/frontend/src/utils/fetchers.ts
 create mode 100644 apps/frontend/src/utils/getPosts.ts

diff --git a/apps/frontend/.env.example b/apps/frontend/.env.example
new file mode 100644
index 0000000..d658484
--- /dev/null
+++ b/apps/frontend/.env.example
@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=http://localhost:3001
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index c706cdd..d63fdd2 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -31,6 +31,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^5.5.0",
     "shadcn": "^2.1.7",
+    "swr": "^2.3.4",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/apps/frontend/src/utils/apiSetup.ts b/apps/frontend/src/utils/apiSetup.ts
new file mode 100644
index 0000000..d9873e4
--- /dev/null
+++ b/apps/frontend/src/utils/apiSetup.ts
@@ -0,0 +1,19 @@
+import axios from 'axios';
+import Cookies from 'js-cookie';
+
+const api = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+api.interceptors.request.use((config) => {
+  const token = Cookies.get('jwt');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export default api;
diff --git a/apps/frontend/src/utils/fetchers.ts b/apps/frontend/src/utils/fetchers.ts
new file mode 100644
index 0000000..3faf18b
--- /dev/null
+++ b/apps/frontend/src/utils/fetchers.ts
@@ -0,0 +1,16 @@
+import api from '@/utils/apiSetup';
+
+export async function axiosGetFetcher<T>(url: string): Promise<T> {
+  const response = await api.get(url);
+  return response.data;
+}
+
+export async function axiosPostFetcher<T, U>(url: string, { arg }: { arg: U }): Promise<T> {
+  const response = await api.post(url, arg);
+  return response.data;
+}
+
+export async function axiosPatchFetcher<T, U>(url: string, { arg }: { arg: U }): Promise<T> {
+  const response = await api.patch(url, arg);
+  return response.data;
+}
diff --git a/apps/frontend/src/utils/getPosts.ts b/apps/frontend/src/utils/getPosts.ts
new file mode 100644
index 0000000..7d2dc4a
--- /dev/null
+++ b/apps/frontend/src/utils/getPosts.ts
@@ -0,0 +1,5 @@
+import { axiosGetFetcher } from '@/utils/fetchers';
+
+export default function GetPosts(num: number, page: number) {
+  return axiosGetFetcher(`/posts?page=${page}&pageSize=${num}`);
+}

From dcbdeb0690b73564e9244d51a1272c7c140d8d94 Mon Sep 17 00:00:00 2001
From: mozsarmate <mozsarmatee@gmail.com>
Date: Thu, 3 Jul 2025 21:23:11 +0200
Subject: [PATCH 18/27] fix + cors + page

---
 apps/backend/src/main.ts                      |  6 ++++++
 apps/backend/src/posts/dto/create-post.dto.ts |  2 +-
 apps/frontend/src/app/news/page.tsx           | 19 +++++++++++++++++--
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/apps/backend/src/main.ts b/apps/backend/src/main.ts
index 0ecd081..5324779 100644
--- a/apps/backend/src/main.ts
+++ b/apps/backend/src/main.ts
@@ -10,6 +10,12 @@ async function bootstrap() {
       whitelist: true,
     })
   );
+  app.enableCors({
+    origin: [process.env.FRONTEND_URL, 'http://localhost:3000', RegExp('([a-zA-Z0-9-]+)*kir-dev.vercel.app/')],
+    methods: ['GET', 'POST', 'PATCH', 'DELETE', 'PUT'],
+    credentials: true,
+  });
   await app.listen(3001);
 }
+
 bootstrap();
diff --git a/apps/backend/src/posts/dto/create-post.dto.ts b/apps/backend/src/posts/dto/create-post.dto.ts
index 40242d6..e7b72f6 100644
--- a/apps/backend/src/posts/dto/create-post.dto.ts
+++ b/apps/backend/src/posts/dto/create-post.dto.ts
@@ -2,4 +2,4 @@ import { OmitType } from '@nestjs/swagger';
 
 import { Post } from '../entities/post.entity';
 
-export class CreatePostDto extends OmitType(Post, ['id', 'createdAt', 'authorId']) {}
+export class CreatePostDto extends OmitType(Post, ['id', 'createdAt']) {}
diff --git a/apps/frontend/src/app/news/page.tsx b/apps/frontend/src/app/news/page.tsx
index 76b3239..1fd33fd 100644
--- a/apps/frontend/src/app/news/page.tsx
+++ b/apps/frontend/src/app/news/page.tsx
@@ -2,11 +2,14 @@
 
 import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, Pencil, Plus, Trash } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import useSWR from 'swr';
 
 import { TextArea } from '@/components/ui/textarea';
 import { mockPosts as mockNewsPosts } from '@/mocks/posts';
 import { mockUsers } from '@/mocks/users';
 import { User } from '@/types/user';
+import api from '@/utils/apiSetup';
+import { axiosGetFetcher } from '@/utils/fetchers';
 
 import { Button } from '../../components/ui/button';
 import { Card, CardContent, CardFooter, CardTitle } from '../../components/ui/card';
@@ -77,6 +80,7 @@ export default function NewsPage() {
   const currentUser: User = mockUsers[1]; //TODO: replace with real user
   const isAdmin = currentUser.role === 'ADMIN';
   const [posts, setPosts] = useState<Post[]>(mockNewsPosts);
+  const { data, isLoading } = useSWR<Post[]>(`/posts?page=${0}&pageSize=${10}`, axiosGetFetcher, {});
   const [page, setPage] = useState(1);
   const [editing, setEditing] = useState<Post | null>(null);
   const [creating, setCreating] = useState(false);
@@ -85,8 +89,14 @@ export default function NewsPage() {
   const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
   const paginated = posts.slice((page - 1) * POSTS_PER_PAGE, page * POSTS_PER_PAGE);
 
+  useEffect(() => {
+    if (data) {
+      setPosts(data);
+    }
+  }, [data]);
+
   function handleCreate(post: Omit<Post, 'id' | 'createdAt'>) {
-    setPosts([
+    /*    setPosts([
       {
         id: (Math.random() * 100000).toFixed(0),
         title: post.title,
@@ -96,7 +106,11 @@ export default function NewsPage() {
       ...posts,
     ]);
     setCreating(false);
-    setPage(1);
+    setPage(1);*/
+    api.post('/posts', {
+      title: post.title,
+      body: post.body,
+    });
   }
 
   function handleEdit(post: Omit<Post, 'id' | 'createdAt'>) {
@@ -133,6 +147,7 @@ export default function NewsPage() {
       </div>
       <div className='m-4'>
         <div className='space-y-4'>
+          {isLoading && <p>skibidi sigma</p>}
           {paginated.map((post) => (
             <Card key={post.id} className='relative border-0 border-l-4'>
               <CardTitle className='p-4'>{post.title}</CardTitle>

From bc5fc6655b21ebf9c557e0391b15d875720b21d2 Mon Sep 17 00:00:00 2001
From: mozsarmate <mozsarmatee@gmail.com>
Date: Thu, 3 Jul 2025 21:40:13 +0200
Subject: [PATCH 19/27] connection

---
 .../backend/src/posts/entities/post.entity.ts |  2 +-
 apps/backend/src/posts/posts.service.ts       | 27 +++++-----
 apps/frontend/src/app/news/page.tsx           | 50 +++++++++++--------
 3 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/apps/backend/src/posts/entities/post.entity.ts b/apps/backend/src/posts/entities/post.entity.ts
index d7aef50..0cd6c3d 100644
--- a/apps/backend/src/posts/entities/post.entity.ts
+++ b/apps/backend/src/posts/entities/post.entity.ts
@@ -6,7 +6,7 @@ export class Post {
   id: number;
 
   @IsNotEmpty()
-  @IsNumber()
+  @IsString()
   title: string;
 
   @IsString()
diff --git a/apps/backend/src/posts/posts.service.ts b/apps/backend/src/posts/posts.service.ts
index 391b5ce..8f91e6f 100644
--- a/apps/backend/src/posts/posts.service.ts
+++ b/apps/backend/src/posts/posts.service.ts
@@ -19,7 +19,7 @@ export class PostsService {
     });
   }
 
-  findAll(page?: number, pageSize?: number): Promise<PaginationDto<Post>> {
+  async findAll(page?: number, pageSize?: number): Promise<PaginationDto<Post>> {
     const hasPagination = page !== -1 && pageSize !== -1;
     const posts = this.prisma.post.findMany({
       skip: hasPagination ? (page - 1) * pageSize : undefined,
@@ -28,19 +28,18 @@ export class PostsService {
 
     const count = this.prisma.post.count();
 
-    return Promise.all([posts, count])
-      .then(([posts, count]) => {
-        const limit = hasPagination ? Math.floor(count / pageSize) : 0;
-        return {
-          data: posts,
-          count,
-          page,
-          limit,
-        };
-      })
-      .catch(() => {
-        throw new InternalServerErrorException('An error occurred.');
-      });
+    try {
+      const [postsa, counta] = await Promise.all([posts, count]);
+      const limit = hasPagination ? Math.floor(counta / pageSize) : 0;
+      return {
+        data: postsa,
+        count: counta,
+        page,
+        limit,
+      };
+    } catch {
+      throw new InternalServerErrorException('An error occurred.');
+    }
   }
 
   async findOne(id: number) {
diff --git a/apps/frontend/src/app/news/page.tsx b/apps/frontend/src/app/news/page.tsx
index 1fd33fd..f19096e 100644
--- a/apps/frontend/src/app/news/page.tsx
+++ b/apps/frontend/src/app/news/page.tsx
@@ -79,15 +79,16 @@ function NewsForm({
 export default function NewsPage() {
   const currentUser: User = mockUsers[1]; //TODO: replace with real user
   const isAdmin = currentUser.role === 'ADMIN';
+  const { data, isLoading } = useSWR<Post[]>(`/posts?page=${-1}&page_size=${-1}`, axiosGetFetcher);
   const [posts, setPosts] = useState<Post[]>(mockNewsPosts);
-  const { data, isLoading } = useSWR<Post[]>(`/posts?page=${0}&pageSize=${10}`, axiosGetFetcher, {});
   const [page, setPage] = useState(1);
   const [editing, setEditing] = useState<Post | null>(null);
   const [creating, setCreating] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
 
   const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
-  const paginated = posts.slice((page - 1) * POSTS_PER_PAGE, page * POSTS_PER_PAGE);
+  //const paginated = posts.slice((page - 1) * POSTS_PER_PAGE, page * POSTS_PER_PAGE);
+  const paginated = 1;
 
   useEffect(() => {
     if (data) {
@@ -110,6 +111,7 @@ export default function NewsPage() {
     api.post('/posts', {
       title: post.title,
       body: post.body,
+      authorId: 1,
     });
   }
 
@@ -148,25 +150,31 @@ export default function NewsPage() {
       <div className='m-4'>
         <div className='space-y-4'>
           {isLoading && <p>skibidi sigma</p>}
-          {paginated.map((post) => (
-            <Card key={post.id} className='relative border-0 border-l-4'>
-              <CardTitle className='p-4'>{post.title}</CardTitle>
-              {isAdmin && (
-                <div className='absolute top-4 right-4 flex gap-2'>
-                  <Button size='sm' variant='secondary' onClick={() => openEditDialog(post)}>
-                    <Pencil className='w-4 h-4' />
-                  </Button>
-                  <Button className='bg-red-500' size='sm' variant='destructive' onClick={() => handleDelete(post.id)}>
-                    <Trash className='w-4 h-4' />
-                  </Button>
-                </div>
-              )}
-              <CardContent className='p-4'>{post.body}</CardContent>
-              <CardFooter className='py-2 px-4 text-sm text-gray-500 dark:text-gray-400'>
-                {new Date(post.createdAt).toLocaleDateString('hu-HU')}
-              </CardFooter>
-            </Card>
-          ))}
+          {Array.isArray(posts) &&
+            posts.map((post) => (
+              <Card key={post.id} className='relative border-0 border-l-4'>
+                <CardTitle className='p-4'>{post.title}</CardTitle>
+                {isAdmin && (
+                  <div className='absolute top-4 right-4 flex gap-2'>
+                    <Button size='sm' variant='secondary' onClick={() => openEditDialog(post)}>
+                      <Pencil className='w-4 h-4' />
+                    </Button>
+                    <Button
+                      className='bg-red-500'
+                      size='sm'
+                      variant='destructive'
+                      onClick={() => handleDelete(post.id)}
+                    >
+                      <Trash className='w-4 h-4' />
+                    </Button>
+                  </div>
+                )}
+                <CardContent className='p-4'>{post.body}</CardContent>
+                <CardFooter className='py-2 px-4 text-sm text-gray-500 dark:text-gray-400'>
+                  {new Date(post.createdAt).toLocaleDateString('hu-HU')}
+                </CardFooter>
+              </Card>
+            ))}
         </div>
         <div className='flex justify-center gap-2 mt-8'>
           <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(1)}>

From af922ce4413698217e81f4af55ec26c36bccfa33 Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Thu, 3 Jul 2025 21:40:38 +0200
Subject: [PATCH 20/27] added swr

---
 apps/backend/src/app.module.ts | 11 +++++++++--
 yarn.lock                      | 13 +++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/apps/backend/src/app.module.ts b/apps/backend/src/app.module.ts
index 0c16bee..e6401d4 100644
--- a/apps/backend/src/app.module.ts
+++ b/apps/backend/src/app.module.ts
@@ -5,12 +5,19 @@ import { AppController } from './app.controller';
 import { AppService } from './app.service';
 import { BandModule } from './band/band.module';
 import { CommentsModule } from './comments/comments.module';
+import { PostsModule } from './posts/posts.module';
 import { ReservationsModule } from './reservations/reservations.module';
 import { UsersModule } from './users/users.module';
-import { PostsModule } from './posts/posts.module';
 
 @Module({
-  imports: [PrismaModule.forRoot({ isGlobal: true }), UsersModule, ReservationsModule, CommentsModule, BandModule, PostsModule],
+  imports: [
+    PrismaModule.forRoot({ isGlobal: true }),
+    UsersModule,
+    ReservationsModule,
+    CommentsModule,
+    BandModule,
+    PostsModule,
+  ],
   controllers: [AppController],
   providers: [AppService],
 })
diff --git a/yarn.lock b/yarn.lock
index d66862f..6d4ef4c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5785,6 +5785,14 @@ swagger-ui-dist@5.11.2:
   resolved "https://registry.npmjs.org/swagger-ui-dist/-/swagger-ui-dist-5.11.2.tgz"
   integrity sha512-jQG0cRgJNMZ7aCoiFofnoojeSaa/+KgWaDlfgs8QN+BXoGMpxeMVY5OEnjq4OlNvF3yjftO8c9GRAgcHlO+u7A==
 
+swr@^2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.3.4.tgz#60bcb5b97cae157a6ef69eff0ed2beb9010eba69"
+  integrity sha512-bYd2lrhc+VarcpkgWclcUi92wYCpOgMws9Sd1hG1ntAu0NEy+14CbotuFjshBU2kt9rYj9TSmDcybpxpeTU1fg==
+  dependencies:
+    dequal "^2.0.3"
+    use-sync-external-store "^1.4.0"
+
 symbol-observable@4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz"
@@ -6180,6 +6188,11 @@ use-sidecar@^1.1.3:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
+use-sync-external-store@^1.4.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz#55122e2a3edd2a6c106174c27485e0fd59bcfca0"
+  integrity sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"

From 43f4797e71f7b3880c0fbb8c2860648ba5e4d98d Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Mon, 7 Jul 2025 16:57:27 +0200
Subject: [PATCH 21/27] posts are now connected to the backend

---
 apps/frontend/package.json                    |   2 +
 apps/frontend/src/app/bands/page.tsx          |   2 +-
 apps/frontend/src/app/members/page.tsx        |   2 +-
 apps/frontend/src/app/news/page.tsx           | 181 ++++++------------
 .../band/{bandRow.tsx => band-row.tsx}        |   0
 .../{memberTile.tsx => member-tile.tsx}       |   0
 .../src/components/news/news-form.tsx         |  64 +++++++
 apps/frontend/src/hooks/use-post.tsx          |  10 +
 apps/frontend/src/types/post.ts               |   8 +
 .../src/utils/{apiSetup.ts => api-setup.ts}   |   0
 apps/frontend/src/utils/fetchers.ts           |   2 +-
 .../src/utils/{getPosts.ts => get-posts.ts}   |   0
 yarn.lock                                     |  10 +
 13 files changed, 151 insertions(+), 130 deletions(-)
 rename apps/frontend/src/components/band/{bandRow.tsx => band-row.tsx} (100%)
 rename apps/frontend/src/components/member/{memberTile.tsx => member-tile.tsx} (100%)
 create mode 100644 apps/frontend/src/components/news/news-form.tsx
 create mode 100644 apps/frontend/src/hooks/use-post.tsx
 rename apps/frontend/src/utils/{apiSetup.ts => api-setup.ts} (100%)
 rename apps/frontend/src/utils/{getPosts.ts => get-posts.ts} (100%)

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index d63fdd2..0bd571d 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -24,6 +24,7 @@
     "clsx": "^2.1.1",
     "framer-motion": "^11.14.4",
     "geist": "^1.3.1",
+    "js-cookie": "^3.0.5",
     "lucide-react": "^0.468.0",
     "next": "14.2.13",
     "next-themes": "^0.4.4",
@@ -37,6 +38,7 @@
   },
   "devDependencies": {
     "@shadcn/ui": "^0.0.4",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
diff --git a/apps/frontend/src/app/bands/page.tsx b/apps/frontend/src/app/bands/page.tsx
index 36ecd8c..62a014c 100644
--- a/apps/frontend/src/app/bands/page.tsx
+++ b/apps/frontend/src/app/bands/page.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 
-import BandRow from '@/components/band/bandRow';
+import BandRow from '@/components/band/band-row';
 import { Input } from '@/components/ui/input';
 import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
 import { dummyBands } from '@/mocks/bands';
diff --git a/apps/frontend/src/app/members/page.tsx b/apps/frontend/src/app/members/page.tsx
index e78a654..18a2248 100644
--- a/apps/frontend/src/app/members/page.tsx
+++ b/apps/frontend/src/app/members/page.tsx
@@ -3,7 +3,7 @@
 import { Input } from '@components/ui/input';
 import { useEffect, useState } from 'react';
 
-import MemberTile from '@/components/member/memberTile';
+import MemberTile from '@/components/member/member-tile';
 import { mockUsers } from '@/mocks/users';
 
 export default function Members() {
diff --git a/apps/frontend/src/app/news/page.tsx b/apps/frontend/src/app/news/page.tsx
index f19096e..b6d4312 100644
--- a/apps/frontend/src/app/news/page.tsx
+++ b/apps/frontend/src/app/news/page.tsx
@@ -1,128 +1,48 @@
 'use client';
 
 import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, Pencil, Plus, Trash } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import useSWR from 'swr';
+import { useState } from 'react';
 
-import { TextArea } from '@/components/ui/textarea';
-import { mockPosts as mockNewsPosts } from '@/mocks/posts';
+import { NewsForm } from '@/components/news/news-form';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardFooter, CardTitle } from '@/components/ui/card';
+import usePosts from '@/hooks/use-post';
 import { mockUsers } from '@/mocks/users';
+import { Post } from '@/types/post';
 import { User } from '@/types/user';
-import api from '@/utils/apiSetup';
-import { axiosGetFetcher } from '@/utils/fetchers';
-
-import { Button } from '../../components/ui/button';
-import { Card, CardContent, CardFooter, CardTitle } from '../../components/ui/card';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../components/ui/dialog';
-import { Input } from '../../components/ui/input';
-import { Post } from '../../types/post';
-
-const POSTS_PER_PAGE = 10;
-
-function NewsForm({
-  initial,
-  onSave,
-  onCancel,
-  isOpen,
-  onOpenChange,
-}: {
-  initial?: Partial<Post>;
-  onSave: (post: Omit<Post, 'id' | 'createdAt'>) => void;
-  onCancel: () => void;
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-}) {
-  const [title, setTitle] = useState(initial?.title || '');
-  const [body, setBody] = useState(initial?.body || '');
-
-  useEffect(() => {
-    setTitle(initial?.title || '');
-    setBody(initial?.body || '');
-  }, [initial]);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    onSave({ title, body });
-    onOpenChange(false);
-    setTitle('');
-    setBody('');
-  };
-
-  const handleCancel = () => {
-    onCancel();
-    onOpenChange(false);
-    setTitle('');
-    setBody('');
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{initial ? 'Edit Post' : 'Create New Post'}</DialogTitle>
-        </DialogHeader>
-        <form onSubmit={handleSubmit} className='space-y-4'>
-          <Input placeholder='Title' value={title} onChange={(e) => setTitle(e.target.value)} required />
-          <TextArea placeholder='Body' value={body} onChange={(e) => setBody(e.target.value)} required rows={6} />
-          <div className='flex gap-2 justify-end'>
-            <Button type='button' variant='secondary' onClick={handleCancel}>
-              Cancel
-            </Button>
-            <Button type='submit'>Save</Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+import api from '@/utils/api-setup';
 
 export default function NewsPage() {
   const currentUser: User = mockUsers[1]; //TODO: replace with real user
   const isAdmin = currentUser.role === 'ADMIN';
-  const { data, isLoading } = useSWR<Post[]>(`/posts?page=${-1}&page_size=${-1}`, axiosGetFetcher);
-  const [posts, setPosts] = useState<Post[]>(mockNewsPosts);
+  const { data: posts, isLoading, mutate } = usePosts(1, 10);
   const [page, setPage] = useState(1);
   const [editing, setEditing] = useState<Post | null>(null);
   const [creating, setCreating] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
 
-  const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
-  //const paginated = posts.slice((page - 1) * POSTS_PER_PAGE, page * POSTS_PER_PAGE);
-  const paginated = 1;
-
-  useEffect(() => {
-    if (data) {
-      setPosts(data);
-    }
-  }, [data]);
-
-  function handleCreate(post: Omit<Post, 'id' | 'createdAt'>) {
-    /*    setPosts([
-      {
-        id: (Math.random() * 100000).toFixed(0),
-        title: post.title,
-        body: post.body,
-        createdAt: new Date().toISOString(),
-      },
-      ...posts,
-    ]);
-    setCreating(false);
-    setPage(1);*/
-    api.post('/posts', {
+  async function handleCreate(post: Omit<Post, 'id' | 'createdAt'>) {
+    await api.post('/posts', {
       title: post.title,
       body: post.body,
       authorId: 1,
     });
+    await mutate();
   }
 
-  function handleEdit(post: Omit<Post, 'id' | 'createdAt'>) {
+  async function handleEdit(post: Omit<Post, 'id' | 'createdAt'>) {
     if (!editing) return;
-    setPosts(posts.map((p) => (p.id === editing.id ? { ...p, ...post } : p)));
+    await api.patch(`/posts/${editing.id}`, {
+      title: post.title,
+      body: post.body,
+    });
+    await mutate();
     setEditing(null);
   }
 
-  function handleDelete(id: string) {
-    setPosts(posts.filter((p) => p.id !== id));
+  async function handleDelete(id: string) {
+    await api.delete(`/posts/${id}`);
+    await mutate();
   }
 
   function openCreateDialog() {
@@ -149,9 +69,9 @@ export default function NewsPage() {
       </div>
       <div className='m-4'>
         <div className='space-y-4'>
-          {isLoading && <p>skibidi sigma</p>}
-          {Array.isArray(posts) &&
-            posts.map((post) => (
+          {isLoading && <p>Loading...</p>}
+          {posts?.data &&
+            posts.data.map((post: Post) => (
               <Card key={post.id} className='relative border-0 border-l-4'>
                 <CardTitle className='p-4'>{post.title}</CardTitle>
                 {isAdmin && (
@@ -175,30 +95,37 @@ export default function NewsPage() {
                 </CardFooter>
               </Card>
             ))}
-        </div>
-        <div className='flex justify-center gap-2 mt-8'>
-          <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(1)}>
-            <ChevronFirst />
-            Első
-          </Button>
-          <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(page - 1)}>
-            <ChevronLeft />
-            Előző
-          </Button>
-          <span className='px-2 py-1'>
-            {page}. oldal / {totalPages}
-          </span>
-          <Button className='pl-5' variant='secondary' disabled={page === totalPages} onClick={() => setPage(page + 1)}>
-            Következő <ChevronRight />
-          </Button>
-          <Button
-            className='pl-5'
-            variant='secondary'
-            disabled={page === totalPages}
-            onClick={() => setPage(totalPages)}
-          >
-            Utolsó <ChevronLast />
-          </Button>
+          {posts && posts.count > 0 && (
+            <div className='flex justify-center gap-2 mt-8'>
+              <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(1)}>
+                <ChevronFirst />
+                Első
+              </Button>
+              <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(page - 1)}>
+                <ChevronLeft />
+                Előző
+              </Button>
+              <span className='px-2 py-1'>
+                {page}. oldal / {Math.ceil(posts.count / 10)}
+              </span>
+              <Button
+                className='pl-5'
+                variant='secondary'
+                disabled={page === Math.ceil(posts.count / 10)}
+                onClick={() => setPage(page + 1)}
+              >
+                Következő <ChevronRight />
+              </Button>
+              <Button
+                className='pl-5'
+                variant='secondary'
+                disabled={page === Math.ceil(posts.count / 10)}
+                onClick={() => setPage(Math.ceil(posts.count / 10))}
+              >
+                Utolsó <ChevronLast />
+              </Button>
+            </div>
+          )}
         </div>
       </div>
 
diff --git a/apps/frontend/src/components/band/bandRow.tsx b/apps/frontend/src/components/band/band-row.tsx
similarity index 100%
rename from apps/frontend/src/components/band/bandRow.tsx
rename to apps/frontend/src/components/band/band-row.tsx
diff --git a/apps/frontend/src/components/member/memberTile.tsx b/apps/frontend/src/components/member/member-tile.tsx
similarity index 100%
rename from apps/frontend/src/components/member/memberTile.tsx
rename to apps/frontend/src/components/member/member-tile.tsx
diff --git a/apps/frontend/src/components/news/news-form.tsx b/apps/frontend/src/components/news/news-form.tsx
new file mode 100644
index 0000000..2f8b8a0
--- /dev/null
+++ b/apps/frontend/src/components/news/news-form.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { TextArea } from '@/components/ui/textarea';
+import { Post } from '@/types/post';
+
+export function NewsForm({
+  initial,
+  onSave,
+  onCancel,
+  isOpen,
+  onOpenChange,
+}: {
+  initial?: Partial<Post>;
+  onSave: (post: Omit<Post, 'id' | 'createdAt'>) => void;
+  onCancel: () => void;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const [title, setTitle] = useState(initial?.title || '');
+  const [body, setBody] = useState(initial?.body || '');
+
+  useEffect(() => {
+    setTitle(initial?.title || '');
+    setBody(initial?.body || '');
+  }, [initial]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave({ title, body });
+    onOpenChange(false);
+    setTitle('');
+    setBody('');
+  };
+
+  const handleCancel = () => {
+    onCancel();
+    onOpenChange(false);
+    setTitle('');
+    setBody('');
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{initial ? 'Edit Post' : 'Create New Post'}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className='space-y-4'>
+          <Input placeholder='Title' value={title} onChange={(e) => setTitle(e.target.value)} required />
+          <TextArea placeholder='Body' value={body} onChange={(e) => setBody(e.target.value)} required rows={6} />
+          <div className='flex gap-2 justify-end'>
+            <Button type='button' variant='secondary' onClick={handleCancel}>
+              Cancel
+            </Button>
+            <Button type='submit'>Save</Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/frontend/src/hooks/use-post.tsx b/apps/frontend/src/hooks/use-post.tsx
new file mode 100644
index 0000000..a79bad2
--- /dev/null
+++ b/apps/frontend/src/hooks/use-post.tsx
@@ -0,0 +1,10 @@
+import useSWR from 'swr';
+
+import { PaginatedPosts } from '@/types/post';
+import { axiosGetFetcher } from '@/utils/fetchers';
+
+export default function usePosts(pageIndex: number, pageSize: number) {
+  return useSWR<PaginatedPosts>(`/posts/?page=${pageIndex}&page_size=${pageSize}`, axiosGetFetcher, {
+    shouldRetryOnError: false,
+  });
+}
diff --git a/apps/frontend/src/types/post.ts b/apps/frontend/src/types/post.ts
index e5c56c2..2d1468a 100644
--- a/apps/frontend/src/types/post.ts
+++ b/apps/frontend/src/types/post.ts
@@ -3,4 +3,12 @@ export interface Post {
   title: string;
   body: string;
   createdAt: string;
+  authorId: string;
+}
+
+export interface PaginatedPosts {
+  data: Post[];
+  count: number;
+  page: number;
+  limit: number;
 }
diff --git a/apps/frontend/src/utils/apiSetup.ts b/apps/frontend/src/utils/api-setup.ts
similarity index 100%
rename from apps/frontend/src/utils/apiSetup.ts
rename to apps/frontend/src/utils/api-setup.ts
diff --git a/apps/frontend/src/utils/fetchers.ts b/apps/frontend/src/utils/fetchers.ts
index 3faf18b..469dd61 100644
--- a/apps/frontend/src/utils/fetchers.ts
+++ b/apps/frontend/src/utils/fetchers.ts
@@ -1,4 +1,4 @@
-import api from '@/utils/apiSetup';
+import api from '@/utils/api-setup';
 
 export async function axiosGetFetcher<T>(url: string): Promise<T> {
   const response = await api.get(url);
diff --git a/apps/frontend/src/utils/getPosts.ts b/apps/frontend/src/utils/get-posts.ts
similarity index 100%
rename from apps/frontend/src/utils/getPosts.ts
rename to apps/frontend/src/utils/get-posts.ts
diff --git a/yarn.lock b/yarn.lock
index 6d4ef4c..2810464 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1291,6 +1291,11 @@
   resolved "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz"
   integrity sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==
 
+"@types/js-cookie@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.6.tgz#a04ca19e877687bd449f5ad37d33b104b71fdf95"
+  integrity sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==
+
 "@types/json-schema@*", "@types/json-schema@^7.0.15", "@types/json-schema@^7.0.8":
   version "7.0.15"
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
@@ -4043,6 +4048,11 @@ jiti@^1.21.0:
   resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz"
   integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"

From f945bdd25b3ded194cf07713c621e22a05796fdd Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Mon, 7 Jul 2025 17:01:33 +0200
Subject: [PATCH 22/27] fixed eslint error

---
 apps/backend/src/app.module.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/backend/src/app.module.ts b/apps/backend/src/app.module.ts
index 615bcd3..915c1d6 100644
--- a/apps/backend/src/app.module.ts
+++ b/apps/backend/src/app.module.ts
@@ -15,7 +15,7 @@ import { UsersModule } from './users/users.module';
     UsersModule,
     ReservationsModule,
     CommentsModule,
-    BandModule,
+    BandsModule,
     PostsModule,
   ],
   controllers: [AppController],

From 79bb3c9828a5f2b8060006963c5978eca0c75f96 Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Mon, 7 Jul 2025 17:52:14 +0200
Subject: [PATCH 23/27] fixed pagiantion

---
 apps/frontend/src/app/news/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/app/news/page.tsx b/apps/frontend/src/app/news/page.tsx
index b6d4312..e24634b 100644
--- a/apps/frontend/src/app/news/page.tsx
+++ b/apps/frontend/src/app/news/page.tsx
@@ -15,8 +15,8 @@ import api from '@/utils/api-setup';
 export default function NewsPage() {
   const currentUser: User = mockUsers[1]; //TODO: replace with real user
   const isAdmin = currentUser.role === 'ADMIN';
-  const { data: posts, isLoading, mutate } = usePosts(1, 10);
   const [page, setPage] = useState(1);
+  const { data: posts, isLoading, mutate } = usePosts(page, 10);
   const [editing, setEditing] = useState<Post | null>(null);
   const [creating, setCreating] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);

From f3aee1edd08727b9886816475ef7c51772e43e86 Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Mon, 7 Jul 2025 18:36:16 +0200
Subject: [PATCH 24/27] made /news the root page

---
 apps/frontend/src/app/news/page.tsx           | 144 ------------------
 apps/frontend/src/app/page.tsx                |   4 +-
 .../src/components/layout/sidebar.tsx         |   4 +-
 apps/frontend/src/components/news/news.tsx    | 100 ++++++++++++
 4 files changed, 104 insertions(+), 148 deletions(-)
 delete mode 100644 apps/frontend/src/app/news/page.tsx
 create mode 100644 apps/frontend/src/components/news/news.tsx

diff --git a/apps/frontend/src/app/news/page.tsx b/apps/frontend/src/app/news/page.tsx
deleted file mode 100644
index e24634b..0000000
--- a/apps/frontend/src/app/news/page.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-'use client';
-
-import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, Pencil, Plus, Trash } from 'lucide-react';
-import { useState } from 'react';
-
-import { NewsForm } from '@/components/news/news-form';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardFooter, CardTitle } from '@/components/ui/card';
-import usePosts from '@/hooks/use-post';
-import { mockUsers } from '@/mocks/users';
-import { Post } from '@/types/post';
-import { User } from '@/types/user';
-import api from '@/utils/api-setup';
-
-export default function NewsPage() {
-  const currentUser: User = mockUsers[1]; //TODO: replace with real user
-  const isAdmin = currentUser.role === 'ADMIN';
-  const [page, setPage] = useState(1);
-  const { data: posts, isLoading, mutate } = usePosts(page, 10);
-  const [editing, setEditing] = useState<Post | null>(null);
-  const [creating, setCreating] = useState(false);
-  const [dialogOpen, setDialogOpen] = useState(false);
-
-  async function handleCreate(post: Omit<Post, 'id' | 'createdAt'>) {
-    await api.post('/posts', {
-      title: post.title,
-      body: post.body,
-      authorId: 1,
-    });
-    await mutate();
-  }
-
-  async function handleEdit(post: Omit<Post, 'id' | 'createdAt'>) {
-    if (!editing) return;
-    await api.patch(`/posts/${editing.id}`, {
-      title: post.title,
-      body: post.body,
-    });
-    await mutate();
-    setEditing(null);
-  }
-
-  async function handleDelete(id: string) {
-    await api.delete(`/posts/${id}`);
-    await mutate();
-  }
-
-  function openCreateDialog() {
-    setCreating(true);
-    setEditing(null);
-    setDialogOpen(true);
-  }
-
-  function openEditDialog(post: Post) {
-    setEditing(post);
-    setCreating(false);
-    setDialogOpen(true);
-  }
-
-  return (
-    <div className='w-full overflow-y-auto'>
-      <div className='flex items-center justify-between flex-row p-4'>
-        <h1 className='text-2xl font-semibold text-primary'>Hírek</h1>
-        {isAdmin && (
-          <Button onClick={openCreateDialog}>
-            <Plus />
-          </Button>
-        )}
-      </div>
-      <div className='m-4'>
-        <div className='space-y-4'>
-          {isLoading && <p>Loading...</p>}
-          {posts?.data &&
-            posts.data.map((post: Post) => (
-              <Card key={post.id} className='relative border-0 border-l-4'>
-                <CardTitle className='p-4'>{post.title}</CardTitle>
-                {isAdmin && (
-                  <div className='absolute top-4 right-4 flex gap-2'>
-                    <Button size='sm' variant='secondary' onClick={() => openEditDialog(post)}>
-                      <Pencil className='w-4 h-4' />
-                    </Button>
-                    <Button
-                      className='bg-red-500'
-                      size='sm'
-                      variant='destructive'
-                      onClick={() => handleDelete(post.id)}
-                    >
-                      <Trash className='w-4 h-4' />
-                    </Button>
-                  </div>
-                )}
-                <CardContent className='p-4'>{post.body}</CardContent>
-                <CardFooter className='py-2 px-4 text-sm text-gray-500 dark:text-gray-400'>
-                  {new Date(post.createdAt).toLocaleDateString('hu-HU')}
-                </CardFooter>
-              </Card>
-            ))}
-          {posts && posts.count > 0 && (
-            <div className='flex justify-center gap-2 mt-8'>
-              <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(1)}>
-                <ChevronFirst />
-                Első
-              </Button>
-              <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(page - 1)}>
-                <ChevronLeft />
-                Előző
-              </Button>
-              <span className='px-2 py-1'>
-                {page}. oldal / {Math.ceil(posts.count / 10)}
-              </span>
-              <Button
-                className='pl-5'
-                variant='secondary'
-                disabled={page === Math.ceil(posts.count / 10)}
-                onClick={() => setPage(page + 1)}
-              >
-                Következő <ChevronRight />
-              </Button>
-              <Button
-                className='pl-5'
-                variant='secondary'
-                disabled={page === Math.ceil(posts.count / 10)}
-                onClick={() => setPage(Math.ceil(posts.count / 10))}
-              >
-                Utolsó <ChevronLast />
-              </Button>
-            </div>
-          )}
-        </div>
-      </div>
-
-      <NewsForm
-        initial={editing || undefined}
-        onSave={creating ? handleCreate : handleEdit}
-        onCancel={() => {
-          setCreating(false);
-          setEditing(null);
-        }}
-        isOpen={dialogOpen}
-        onOpenChange={setDialogOpen}
-      />
-    </div>
-  );
-}
diff --git a/apps/frontend/src/app/page.tsx b/apps/frontend/src/app/page.tsx
index 1ae74ed..903bdae 100644
--- a/apps/frontend/src/app/page.tsx
+++ b/apps/frontend/src/app/page.tsx
@@ -1,5 +1,5 @@
-import { MainContent } from '@/components/main-content';
+import News from '../components/news/news';
 
 export default function Home() {
-  return <MainContent />;
+  return <News />;
 }
diff --git a/apps/frontend/src/components/layout/sidebar.tsx b/apps/frontend/src/components/layout/sidebar.tsx
index 657bbe9..1b68ab7 100644
--- a/apps/frontend/src/components/layout/sidebar.tsx
+++ b/apps/frontend/src/components/layout/sidebar.tsx
@@ -21,8 +21,8 @@ export function Sidebar() {
     <div className='w-64 p-4 flex flex-col'>
       <div className='mt-10 space-y-10'>
         <div className='space-y-2'>
-          <Button variant={pathname === '/news' ? 'blastActive' : 'blast'} className='w-full justify-start' asChild>
-            <Link href='/news'>
+          <Button variant={pathname === '/' ? 'blastActive' : 'blast'} className='w-full justify-start' asChild>
+            <Link href='/'>
               <Radio className='mr-2 h-4 w-4' />
               Hírek
             </Link>
diff --git a/apps/frontend/src/components/news/news.tsx b/apps/frontend/src/components/news/news.tsx
new file mode 100644
index 0000000..d35d8b9
--- /dev/null
+++ b/apps/frontend/src/components/news/news.tsx
@@ -0,0 +1,100 @@
+'use client';
+
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+
+import NewsCard from '@/components/news/news-card';
+import { NewsForm } from '@/components/news/news-form';
+import { Button } from '@/components/ui/button';
+import Pagination from '@/components/ui/pagination';
+import usePosts from '@/hooks/use-post';
+import { mockUsers } from '@/mocks/users';
+import { Post } from '@/types/post';
+import { User } from '@/types/user';
+import api from '@/utils/api-setup';
+
+export default function News() {
+  const currentUser: User = mockUsers[1]; //TODO: replace with real user
+  const isAdmin = currentUser.role === 'ADMIN';
+  const [page, setPage] = useState(1);
+  const { data: posts, isLoading, mutate } = usePosts(page, 10);
+  const [editing, setEditing] = useState<Post | null>(null);
+  const [creating, setCreating] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  async function handleCreate(post: Omit<Post, 'id' | 'createdAt'>) {
+    await api.post('/posts', {
+      title: post.title,
+      body: post.body,
+      authorId: 1,
+    });
+    await mutate();
+  }
+
+  async function handleEdit(post: Omit<Post, 'id' | 'createdAt'>) {
+    if (!editing) return;
+    await api.patch(`/posts/${editing.id}`, {
+      title: post.title,
+      body: post.body,
+    });
+    await mutate();
+    setEditing(null);
+  }
+
+  async function handleDelete(id: string) {
+    await api.delete(`/posts/${id}`);
+    await mutate();
+  }
+
+  function openCreateDialog() {
+    setCreating(true);
+    setEditing(null);
+    setDialogOpen(true);
+  }
+
+  function openEditDialog(post: Post) {
+    setEditing(post);
+    setCreating(false);
+    setDialogOpen(true);
+  }
+
+  return (
+    <div className='w-full overflow-y-auto'>
+      <div className='flex items-center justify-between flex-row p-4'>
+        <h1 className='text-2xl font-semibold text-primary'>Hírek</h1>
+        {isAdmin && (
+          <Button onClick={openCreateDialog}>
+            <Plus />
+          </Button>
+        )}
+      </div>
+      <div className='m-4'>
+        <div className='space-y-4'>
+          {isLoading && <p>Loading...</p>}
+          {posts?.data &&
+            posts.data.map((post: Post) => (
+              <NewsCard
+                key={post.id}
+                post={post}
+                isAdmin={isAdmin}
+                openEditDialog={openEditDialog}
+                handleDelete={handleDelete}
+              />
+            ))}
+          {posts && posts.count > 0 && <Pagination page={page} setPage={setPage} posts={posts} />}
+        </div>
+      </div>
+
+      <NewsForm
+        initial={editing || undefined}
+        onSave={creating ? handleCreate : handleEdit}
+        onCancel={() => {
+          setCreating(false);
+          setEditing(null);
+        }}
+        isOpen={dialogOpen}
+        onOpenChange={setDialogOpen}
+      />
+    </div>
+  );
+}

From e3f20453be6124d4c858094a364127febacba360 Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Mon, 7 Jul 2025 18:36:30 +0200
Subject: [PATCH 25/27] refactored news page

---
 .../src/components/news/news-card.tsx         | 38 +++++++++++++++
 .../src/components/news/news-form.tsx         |  2 +-
 .../frontend/src/components/ui/pagination.tsx | 47 +++++++++++++++++++
 3 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 apps/frontend/src/components/news/news-card.tsx
 create mode 100644 apps/frontend/src/components/ui/pagination.tsx

diff --git a/apps/frontend/src/components/news/news-card.tsx b/apps/frontend/src/components/news/news-card.tsx
new file mode 100644
index 0000000..27cc51c
--- /dev/null
+++ b/apps/frontend/src/components/news/news-card.tsx
@@ -0,0 +1,38 @@
+import { Pencil, Trash } from 'lucide-react';
+
+import { Post } from '@/types/post';
+
+import { Button } from '../ui/button';
+import { Card, CardContent, CardFooter, CardTitle } from '../ui/card';
+
+export default function NewsCard({
+  post,
+  isAdmin,
+  openEditDialog,
+  handleDelete,
+}: {
+  post: Post;
+  isAdmin: boolean;
+  openEditDialog: (post: Post) => void;
+  handleDelete: (id: string) => Promise<void>;
+}) {
+  return (
+    <Card key={post.id} className='relative border-0 border-l-4'>
+      <CardTitle className='p-4'>{post.title}</CardTitle>
+      {isAdmin && (
+        <div className='absolute top-4 right-4 flex gap-2'>
+          <Button size='sm' variant='secondary' onClick={() => openEditDialog(post)}>
+            <Pencil className='w-4 h-4' />
+          </Button>
+          <Button className='bg-red-500' size='sm' variant='destructive' onClick={() => handleDelete(post.id)}>
+            <Trash className='w-4 h-4' />
+          </Button>
+        </div>
+      )}
+      <CardContent className='p-4'>{post.body}</CardContent>
+      <CardFooter className='py-2 px-4 text-sm text-gray-500 dark:text-gray-400'>
+        {new Date(post.createdAt).toLocaleDateString('hu-HU')}
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/apps/frontend/src/components/news/news-form.tsx b/apps/frontend/src/components/news/news-form.tsx
index 2f8b8a0..e0f1b14 100644
--- a/apps/frontend/src/components/news/news-form.tsx
+++ b/apps/frontend/src/components/news/news-form.tsx
@@ -29,7 +29,7 @@ export function NewsForm({
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    onSave({ title, body });
+    onSave({ title, body, authorId: '1' }); //TODO: replace with real authorId
     onOpenChange(false);
     setTitle('');
     setBody('');
diff --git a/apps/frontend/src/components/ui/pagination.tsx b/apps/frontend/src/components/ui/pagination.tsx
new file mode 100644
index 0000000..d480aba
--- /dev/null
+++ b/apps/frontend/src/components/ui/pagination.tsx
@@ -0,0 +1,47 @@
+import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight } from 'lucide-react';
+
+import { PaginatedPosts } from '@/types/post';
+
+import { Button } from './button';
+
+export default function Pagination({
+  page,
+  setPage,
+  posts,
+}: {
+  page: number;
+  setPage: (page: number) => void;
+  posts: PaginatedPosts;
+}) {
+  return (
+    <div className='flex justify-center gap-2 mt-8'>
+      <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(1)}>
+        <ChevronFirst />
+        Első
+      </Button>
+      <Button className='pr-5' variant='secondary' disabled={page === 1} onClick={() => setPage(page - 1)}>
+        <ChevronLeft />
+        Előző
+      </Button>
+      <span className='px-2 py-1'>
+        {page}. oldal / {Math.ceil(posts.count / 10)}
+      </span>
+      <Button
+        className='pl-5'
+        variant='secondary'
+        disabled={page === Math.ceil(posts.count / 10)}
+        onClick={() => setPage(page + 1)}
+      >
+        Következő <ChevronRight />
+      </Button>
+      <Button
+        className='pl-5'
+        variant='secondary'
+        disabled={page === Math.ceil(posts.count / 10)}
+        onClick={() => setPage(Math.ceil(posts.count / 10))}
+      >
+        Utolsó <ChevronLast />
+      </Button>
+    </div>
+  );
+}

From 219bff098eec9b94d745e4584360bc5d5da4fc13 Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Mon, 7 Jul 2025 18:42:35 +0200
Subject: [PATCH 26/27] made page header sticky

---
 apps/frontend/src/components/news/news.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/news/news.tsx b/apps/frontend/src/components/news/news.tsx
index d35d8b9..6725e7c 100644
--- a/apps/frontend/src/components/news/news.tsx
+++ b/apps/frontend/src/components/news/news.tsx
@@ -60,7 +60,7 @@ export default function News() {
 
   return (
     <div className='w-full overflow-y-auto'>
-      <div className='flex items-center justify-between flex-row p-4'>
+      <div className='flex items-center justify-between flex-row p-4 sticky top-0 bg-background z-10'>
         <h1 className='text-2xl font-semibold text-primary'>Hírek</h1>
         {isAdmin && (
           <Button onClick={openCreateDialog}>

From 8f40757911d51f8b68f61bb00ee07d8d3543b96c Mon Sep 17 00:00:00 2001
From: justnyx <bakonyiattilaksi04@gmail.com>
Date: Mon, 7 Jul 2025 18:45:03 +0200
Subject: [PATCH 27/27] renamed file

---
 apps/frontend/src/app/page.tsx                                | 2 +-
 apps/frontend/src/components/news/{news.tsx => news-page.tsx} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename apps/frontend/src/components/news/{news.tsx => news-page.tsx} (100%)

diff --git a/apps/frontend/src/app/page.tsx b/apps/frontend/src/app/page.tsx
index 903bdae..96a448f 100644
--- a/apps/frontend/src/app/page.tsx
+++ b/apps/frontend/src/app/page.tsx
@@ -1,4 +1,4 @@
-import News from '../components/news/news';
+import News from '../components/news/news-page';
 
 export default function Home() {
   return <News />;
diff --git a/apps/frontend/src/components/news/news.tsx b/apps/frontend/src/components/news/news-page.tsx
similarity index 100%
rename from apps/frontend/src/components/news/news.tsx
rename to apps/frontend/src/components/news/news-page.tsx