From 08a2fbe750208ce04a22334fbfdc38387c0b289e Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Fri, 14 Nov 2025 20:38:06 +0200
Subject: [PATCH 01/26] feat: add Accountant role with tailored permissions
 across frontend and backend

- Added "Accountant" to user roles with specific access restrictions and UI updates in UserManagement and Navigation pages.
- Updated role-based document filtering logic to allow Accountants access only to accounting documents.
- Enabled Accountants to upload, view, and delete accounting documents while restricting actions on other document types.
- Updated backend endpoints and file operations to enforce Accountant
---
 mp_web_app/backend/files/operations.py        |  3 +-
 mp_web_app/backend/files/routers.py           | 38 ++++++++-
 mp_web_app/backend/users/roles.py             |  4 +-
 mp_web_app/backend/users/routers.py           | 12 ++-
 mp_web_app/frontend/app-config.ts             |  4 +-
 .../frontend/components/upload-file.tsx       | 35 ++++++--
 mp_web_app/frontend/pages/Navigation.tsx      | 83 ++++++++++++++++---
 .../frontend/pages/admin/UserManagement.tsx   |  2 +
 8 files changed, 151 insertions(+), 30 deletions(-)

diff --git a/mp_web_app/backend/files/operations.py b/mp_web_app/backend/files/operations.py
index bbad6bd..eb962d0 100644
--- a/mp_web_app/backend/files/operations.py
+++ b/mp_web_app/backend/files/operations.py
@@ -137,7 +137,7 @@ def download_file(file_metadata: FileMetadata | list[FileMetadata], user: User,
   file_meta_object = get_db_metadata(file_metadata, repo)
 
   user_id = None
-  if user.role != UserRole.REGULAR_USER.value:
+  if user.role != UserRole.REGULAR_USER.value and user.role != UserRole.ACCOUNTANT.value:
     user_id = user.id
 
   is_allowed = _check_file_allowed_to_user(file_meta_object, user_id)
@@ -190,6 +190,7 @@ def _check_file_allowed_to_user(file_metadata: FileMetadata, user_id: str | None
     FileType.private_documents.value,
     FileType.others.value,
   ]
+  
   is_allowed_to_user = True
   if user_id:
     is_allowed_type = file_metadata.file_type.value in private_allowed_types
diff --git a/mp_web_app/backend/files/routers.py b/mp_web_app/backend/files/routers.py
index 57054f6..b5c96d3 100644
--- a/mp_web_app/backend/files/routers.py
+++ b/mp_web_app/backend/files/routers.py
@@ -25,9 +25,15 @@ async def file_create(
   allowed_to: list[str] = Form([]),
   file: UploadFile = File(...),
   repo: FileMetadataRepository = Depends(get_uploads_repository),
-  user=Depends(role_required([UserRole.ADMIN])),
+  user=Depends(role_required([UserRole.ADMIN, UserRole.ACCOUNTANT])),
 ):
   try:
+    # Accountants can only upload accounting documents
+    if user.role == UserRole.ACCOUNTANT.value and file_type != FileType.accounting:
+      raise HTTPException(
+        status_code=403, detail="Accountants can only upload accounting documents"
+      )
+    
     file_metadata = FileMetadataFull(
       file_name=file_name, file_type=file_type, allowed_to=allowed_to, uploaded_by=user.id
     )
@@ -46,9 +52,21 @@ async def file_create(
 async def files_list(
   file_type: str,
   repo: FileMetadataRepository = Depends(get_uploads_repository),
-  user=Depends(role_required([UserRole.ADMIN])),
+  user=Depends(role_required([UserRole.REGULAR_USER, UserRole.ACCOUNTANT, UserRole.BOARD, UserRole.CONTROL, UserRole.ADMIN])),
 ):
   try:
+    # Accountants can only list accounting documents
+    if user.role == UserRole.ACCOUNTANT.value and file_type != "accounting":
+      raise HTTPException(
+        status_code=403, detail="Accountants can only access accounting documents"
+      )
+    
+    # Regular users cannot list accounting documents
+    if user.role == UserRole.REGULAR_USER.value and file_type == "accounting":
+      raise HTTPException(
+        status_code=403, detail="You don't have access to this document type"
+      )
+    
     return get_files_metadata(file_type, repo)
   except MetadataError as e:
     raise HTTPException(status_code=500, detail=str(e))
@@ -58,10 +76,22 @@ async def files_list(
 async def file_delete(
   file_id: str,
   repo: FileMetadataRepository = Depends(get_uploads_repository),
-  user=Depends(role_required([UserRole.ADMIN])),
+  user=Depends(role_required([UserRole.ADMIN, UserRole.ACCOUNTANT])),
 ):
-  """Delete a single file by ID (ADMIN only)."""
+  """Delete a single file by ID (ADMIN and ACCOUNTANT)."""
   try:
+    # Accountants can only delete accounting documents
+    if user.role == UserRole.ACCOUNTANT.value:
+      response = repo.table.get_item(Key={"id": file_id})
+      if "Item" not in response:
+        raise HTTPException(status_code=404, detail="File not found")
+      
+      file_metadata = repo.convert_item_to_object_full(response["Item"])
+      if file_metadata.file_type != FileType.accounting:
+        raise HTTPException(
+          status_code=403, detail="Accountants can only delete accounting documents"
+        )
+    
     delete_file(file_id, repo)
   except FileNotFoundError as e:
     raise HTTPException(status_code=404, detail=str(e))
diff --git a/mp_web_app/backend/users/roles.py b/mp_web_app/backend/users/roles.py
index 1446b92..c2d4303 100644
--- a/mp_web_app/backend/users/roles.py
+++ b/mp_web_app/backend/users/roles.py
@@ -5,12 +5,14 @@ class UserRole(StrEnum):
   REGULAR_USER = "regular"
   BOARD = "board"
   CONTROL = "control"
+  ACCOUNTANT = "accountant"
   ADMIN = "admin"
 
 
 ROLE_HIERARCHY: dict[UserRole, list[UserRole]] = {
-  UserRole.ADMIN: [UserRole.ADMIN, UserRole.CONTROL, UserRole.BOARD, UserRole.REGULAR_USER],
+  UserRole.ADMIN: [UserRole.ADMIN, UserRole.CONTROL, UserRole.BOARD, UserRole.ACCOUNTANT, UserRole.REGULAR_USER],
   UserRole.CONTROL: [UserRole.CONTROL, UserRole.BOARD, UserRole.REGULAR_USER],
   UserRole.BOARD: [UserRole.BOARD, UserRole.REGULAR_USER],
+  UserRole.ACCOUNTANT: [UserRole.ACCOUNTANT],
   UserRole.REGULAR_USER: [UserRole.REGULAR_USER],
 }
diff --git a/mp_web_app/backend/users/routers.py b/mp_web_app/backend/users/routers.py
index ca64a5f..56f72f9 100644
--- a/mp_web_app/backend/users/routers.py
+++ b/mp_web_app/backend/users/routers.py
@@ -26,7 +26,8 @@
 
 @user_router.get("/list", response_model=list[User], status_code=status.HTTP_200_OK)
 async def users_list(
-  user_repo: UserRepository = Depends(get_user_repository), user=Depends(role_required([UserRole.REGULAR_USER]))
+  user_repo: UserRepository = Depends(get_user_repository), 
+  user=Depends(role_required([UserRole.REGULAR_USER, UserRole.ACCOUNTANT]))
 ):
   try:
     return list_users(user_repo)
@@ -146,6 +147,15 @@ async def user_update(
 ):
   """Update a user (ADMIN only)."""
   try:
+    # Validate role if provided
+    if user_data.role is not None:
+      valid_roles = [role.value for role in UserRole]
+      if user_data.role not in valid_roles:
+        raise HTTPException(
+          status_code=400, 
+          detail=f"Invalid role. Must be one of: {', '.join(valid_roles)}"
+        )
+    
     # Get user by ID to get their email
     existing_user = get_user_by_id(user_id, user_repo)
     return update_user(user_id, existing_user.email, user_data, user_repo)
diff --git a/mp_web_app/frontend/app-config.ts b/mp_web_app/frontend/app-config.ts
index 57e38b7..58fd49e 100644
--- a/mp_web_app/frontend/app-config.ts
+++ b/mp_web_app/frontend/app-config.ts
@@ -3,5 +3,5 @@
 
 // For production, use your custom API domain.
 // Make sure the subdomain matches the one in your cdk/app.py
-export const API_BASE_URL = "https://api.ivan-partsunev.com/api/";
-// export const API_BASE_URL = "http://127.0.0.1:8000/api/";
+// export const API_BASE_URL = "https://api.ivan-partsunev.com/api/";
+export const API_BASE_URL = "http://127.0.0.1:8000/api/";
diff --git a/mp_web_app/frontend/components/upload-file.tsx b/mp_web_app/frontend/components/upload-file.tsx
index 85a7829..2e1dc11 100644
--- a/mp_web_app/frontend/components/upload-file.tsx
+++ b/mp_web_app/frontend/components/upload-file.tsx
@@ -45,7 +45,10 @@ export default function UploadFile() {
   const [usersError, setUsersError] = useState<string>("");
   const [selectedUserIds, setSelectedUserIds] = useState<string[]>([]);
 
-  // Frontend guard: only allow admins to access this page (keep your current logic if you prefer)
+  // Get user role
+  const [userRole, setUserRole] = useState<string>("");
+  
+  // Frontend guard: only allow admins and accountants to access this page
   useEffect(() => {
     try {
       const token = localStorage.getItem("access_token");
@@ -59,9 +62,17 @@ export default function UploadFile() {
         .replace(/_/g, "/")
         .padEnd(Math.ceil(base64Url.length / 4) * 4, "=");
       const payload = JSON.parse(atob(base64));
-      if (String(payload?.role ?? "").toUpperCase() !== "ADMIN") {
+      const role = String(payload?.role ?? "").toLowerCase();
+      setUserRole(role);
+      
+      if (role !== "admin" && role !== "accountant") {
         navigate("/");
       }
+      
+      // If accountant, set default file type to accounting
+      if (role === "accountant") {
+        setFileType("accounting");
+      }
     } catch {
       navigate("/login");
     }
@@ -175,16 +186,22 @@ export default function UploadFile() {
                   value={fileType}
                   onChange={(e) => setFileType(e.target.value)}
                   className="h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                  disabled={submitting}
+                  disabled={submitting || userRole === "accountant"}
                   required
                 >
-                  {fileTypeOptions.map((opt) => (
-                    <option key={opt.value} value={opt.value}>
-                      {opt.label}
-                    </option>
-                  ))}
+                  {fileTypeOptions
+                    .filter((opt) => userRole !== "accountant" || opt.value === "accounting")
+                    .map((opt) => (
+                      <option key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </option>
+                    ))}
                 </select>
-                <p className="text-xs text-muted-foreground">Използвайте валидна стойност според FileType в бекенда.</p>
+                <p className="text-xs text-muted-foreground">
+                  {userRole === "accountant" 
+                    ? "Счетоводителите могат да качват само счетоводни документи."
+                    : "Използвайте валидна стойност според FileType в бекенда."}
+                </p>
               </div>
 
               <div className="grid gap-3">
diff --git a/mp_web_app/frontend/pages/Navigation.tsx b/mp_web_app/frontend/pages/Navigation.tsx
index 2bfb390..8fdcb60 100644
--- a/mp_web_app/frontend/pages/Navigation.tsx
+++ b/mp_web_app/frontend/pages/Navigation.tsx
@@ -117,7 +117,7 @@ export function Navigation() {
   const filterDropdown = (dropdown: any[]) => dropdown.filter((item) => !item.requiresAuth || isLoggedIn);
 
   // Decode role from access token to check role
-  const getUserRole = (): "admin" | "board" | "control" | "regular" | null => {
+  const getUserRole = (): "admin" | "board" | "control" | "accountant" | "regular" | null => {
     try {
       const token = localStorage.getItem("access_token");
       if (!token) return null;
@@ -128,7 +128,7 @@ export function Navigation() {
         .padEnd(Math.ceil(base64Url.length / 4) * 4, "=");
       const payload = JSON.parse(atob(base64));
       const role = String(payload?.role || "").toLowerCase();
-      if (role === "admin" || role === "board" || role === "control" || role === "regular") return role as any;
+      if (role === "admin" || role === "board" || role === "control" || role === "accountant" || role === "regular") return role as any;
       return null;
     } catch {
       return null;
@@ -137,6 +137,7 @@ export function Navigation() {
 
   const role = getUserRole();
   const isAdmin = role === "admin";
+  const isAccountant = role === "accountant";
   const isBoardOrControl = role === "board" || role === "control";
 
   // Handle animation for mobile menu
@@ -202,11 +203,30 @@ export function Navigation() {
           }
 
           // Role-based filtering for Documents
-          const documentsItems = isDocuments
-            ? isAdmin || isBoardOrControl
-              ? link.dropdown
-              : link.dropdown.filter((item: any) => item.to === "/governing-documents" || item.to === "/forms")
-            : filterDropdown(link.dropdown);
+          let documentsItems = link.dropdown;
+          if (isDocuments) {
+            if (isAdmin || isBoardOrControl) {
+              // Admin, Board, Control: see all documents
+              documentsItems = link.dropdown;
+            } else if (isAccountant) {
+              // Accountant: see ONLY accounting documents
+              documentsItems = link.dropdown.filter((item: any) => 
+                item.to === "/accounting-documents"
+              );
+            } else {
+              // Regular users: see all except "Счетоводни документи" (accounting)
+              documentsItems = link.dropdown.filter((item: any) => 
+                item.to === "/governing-documents" || 
+                item.to === "/forms" || 
+                item.to === "/minutes" || 
+                item.to === "/transcripts" || 
+                item.to === "/mydocuments" ||
+                item.to === "/others"
+              );
+            }
+          } else {
+            documentsItems = filterDropdown(link.dropdown);
+          }
 
           const itemsToRender = isDocuments ? documentsItems : link.dropdown;
 
@@ -254,6 +274,18 @@ export function Navigation() {
             </Button>
           </>
         )}
+        {/* Accountant upload action for mobile */}
+        {isLoggedIn && isAccountant && (
+          <Button
+            className="mt-2 w-full rounded-lg shadow-md active:opacity-75 transition-opacity"
+            onClick={() => {
+              setMobileMenuOpen(false);
+              window.location.assign("/upload");
+            }}
+          >
+            Качи документ
+          </Button>
+        )}
         {/* Auth section for mobile */}
         {!isLoggedIn ? (
           <div className="mt-4">
@@ -321,11 +353,30 @@ export function Navigation() {
                 }
 
                 // Role-based filtering for Documents
-                const documentsItems = isDocuments
-                  ? isAdmin || isBoardOrControl
-                    ? link.dropdown
-                    : link.dropdown.filter((item: any) => item.to === "/governing-documents" || item.to === "/forms")
-                  : filterDropdown(link.dropdown);
+                let documentsItems = link.dropdown;
+                if (isDocuments) {
+                  if (isAdmin || isBoardOrControl) {
+                    // Admin, Board, Control: see all documents
+                    documentsItems = link.dropdown;
+                  } else if (isAccountant) {
+                    // Accountant: see ONLY accounting documents
+                    documentsItems = link.dropdown.filter((item: any) => 
+                      item.to === "/accounting-documents"
+                    );
+                  } else {
+                    // Regular users: see all except "Счетоводні документи" (accounting)
+                    documentsItems = link.dropdown.filter((item: any) => 
+                      item.to === "/governing-documents" || 
+                      item.to === "/forms" || 
+                      item.to === "/minutes" || 
+                      item.to === "/transcripts" || 
+                      item.to === "/mydocuments" ||
+                      item.to === "/others"
+                    );
+                  }
+                } else {
+                  documentsItems = filterDropdown(link.dropdown);
+                }
 
                 const itemsToRender = isDocuments ? documentsItems : link.dropdown;
 
@@ -368,6 +419,14 @@ export function Navigation() {
                   </NavigationMenuItem>
                 </>
               )}
+              {/* Accountant upload action for desktop */}
+              {isLoggedIn && isAccountant && (
+                <NavigationMenuItem>
+                  <Button asChild className="ml-2">
+                    <Link to="/upload">Качи документ</Link>
+                  </Button>
+                </NavigationMenuItem>
+              )}
               {/* Auth section for desktop */}
               {!isLoggedIn ? (
                 <NavigationMenuItem>
diff --git a/mp_web_app/frontend/pages/admin/UserManagement.tsx b/mp_web_app/frontend/pages/admin/UserManagement.tsx
index c03aad1..818816e 100644
--- a/mp_web_app/frontend/pages/admin/UserManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/UserManagement.tsx
@@ -25,6 +25,7 @@ const roleTranslations: Record<string, string> = {
   regular: "Обикновен",
   board: "УС",
   control: "КС",
+  accountant: "Счетоводител",
   admin: "Админ",
 };
 
@@ -191,6 +192,7 @@ export default function UserManagement() {
                       <SelectItem value="regular">Обикновен</SelectItem>
                       <SelectItem value="board">УС</SelectItem>
                       <SelectItem value="control">КС</SelectItem>
+                      <SelectItem value="accountant">Счетоводител</SelectItem>
                       <SelectItem value="admin">Администратор</SelectItem>
                     </SelectContent>
                   </Select>

From 6eab9abfb3d819ea14c99046269838bd1ca7ca0b Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sat, 15 Nov 2025 01:24:32 +0200
Subject: [PATCH 02/26] feat: improve navigation and enhance UI responsiveness
 across components

- Added `useNavigate` hook and introduced smooth navigation transitions to prevent flickering on mobile.
- Adjusted breakpoint for mobile devices and improved display across varying screen sizes.
- Enhanced `Table`, `Navigation`, and `Card` components with responsive layouts and refined styles.
- Introduced `TableSkeleton` and `TablePagination` for better loading indicators and pagination control.
- Updated admin and product-related layouts to follow consistent visual hierarchy.
- Improved gallery card and news card interactions with animated scaling effects.
---
 .../frontend/components/admin-layout.tsx      |   4 +-
 .../frontend/components/files-table.tsx       |  25 +-
 .../components/gallery-image-card.tsx         |  60 ++--
 mp_web_app/frontend/components/logo.tsx       |  48 ++-
 mp_web_app/frontend/components/news-card.tsx  |  93 ++++--
 .../frontend/components/products-table.tsx    |   6 +-
 mp_web_app/frontend/components/ui/button.tsx  |  57 ++--
 mp_web_app/frontend/components/ui/card.tsx    |  36 ++-
 mp_web_app/frontend/components/ui/dialog.tsx  |   4 +-
 .../components/ui/loading-spinner.tsx         |   4 +-
 .../components/ui/navigation-menu.tsx         |   4 +-
 mp_web_app/frontend/components/ui/select.tsx  |   4 +-
 mp_web_app/frontend/components/ui/table.tsx   | 133 ++++++++-
 .../frontend/components/upload-file.tsx       |  90 +++++-
 mp_web_app/frontend/index.html                |   3 +
 mp_web_app/frontend/pages/Base.tsx            |  18 +-
 mp_web_app/frontend/pages/Gallery.tsx         | 107 +++++--
 mp_web_app/frontend/pages/Home.tsx            | 140 +++++----
 mp_web_app/frontend/pages/Navigation.tsx      | 274 +++++++++++-------
 mp_web_app/frontend/pages/Products.tsx        |  20 +-
 mp_web_app/frontend/pages/about-us/Board.tsx  |  23 +-
 .../frontend/pages/about-us/Control.tsx       |  23 +-
 .../frontend/pages/admin/AdminPanel.tsx       |  84 ++++--
 .../pages/admin/DocumentsManagement.tsx       |   5 +-
 .../frontend/pages/admin/NewsManagement.tsx   |  24 +-
 .../pages/admin/ProductsManagement.tsx        |   9 +-
 .../frontend/pages/admin/UserManagement.tsx   |  10 +-
 .../pages/lists/CooperativeMembers.tsx        |  26 +-
 mp_web_app/frontend/pages/lists/Proxies.tsx   |  92 ++++--
 mp_web_app/frontend/src/styles/global.css     | 194 ++++++++++++-
 30 files changed, 1185 insertions(+), 435 deletions(-)

diff --git a/mp_web_app/frontend/components/admin-layout.tsx b/mp_web_app/frontend/components/admin-layout.tsx
index 07b51a1..269cc38 100644
--- a/mp_web_app/frontend/components/admin-layout.tsx
+++ b/mp_web_app/frontend/components/admin-layout.tsx
@@ -8,12 +8,12 @@ interface AdminLayoutProps {
 
 export function AdminLayout({title, children}: AdminLayoutProps) {
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div className="w-full px-2 xl:container xl:mx-auto xl:px-4 py-8">
       <Card>
         <CardHeader>
           <CardTitle className="text-2xl">{title}</CardTitle>
         </CardHeader>
-        <CardContent>{children}</CardContent>
+        <CardContent className="px-0 [&>div]:space-y-4 [&>div>div:not(:has(table))]:px-6 [&>div>p]:px-6">{children}</CardContent>
       </Card>
     </div>
   );
diff --git a/mp_web_app/frontend/components/files-table.tsx b/mp_web_app/frontend/components/files-table.tsx
index a36f7f0..39e922f 100644
--- a/mp_web_app/frontend/components/files-table.tsx
+++ b/mp_web_app/frontend/components/files-table.tsx
@@ -119,15 +119,28 @@ export function FilesTable({fileType, title = "Документи"}: FilesTableP
   };
 
   return (
-    <section className="container mx-auto px-4 py-8">
-      {title && <h1 className="text-3xl font-bold mb-6">{title}</h1>}
+    <div className="min-h-screen">
+      {/* Hero Section */}
+      {title && (
+        <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-white to-primary/10 dark:from-gray-900 dark:via-gray-800 dark:to-primary/5 border-b border-gray-200/50">
+          <div className="absolute inset-0 bg-grid-pattern opacity-5" />
+          <div className="container mx-auto px-4 py-12 md:py-16 relative">
+            <div className="max-w-4xl mx-auto text-center">
+              <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-primary to-gray-900 dark:from-white dark:via-primary dark:to-white bg-clip-text text-transparent animate-in fade-in slide-in-from-bottom-4 duration-1000">
+                {title}
+              </h1>
+            </div>
+          </div>
+        </section>
+      )}
+
+      <section className="w-full px-2 xl:container xl:mx-auto xl:px-4 py-8">
 
       <Card>
         <CardHeader>
           <CardTitle>Списък с налични файлове</CardTitle>
         </CardHeader>
-        <CardContent>
-          <div className="overflow-x-auto">
+        <CardContent className="px-0">
             <Table>
             <TableHeader>
               <TableRow>
@@ -177,7 +190,6 @@ export function FilesTable({fileType, title = "Документи"}: FilesTableP
                 ))}
             </TableBody>
           </Table>
-          </div>
 
           {/* Pagination footer */}
         {totalPages > 1 && (
@@ -289,6 +301,7 @@ export function FilesTable({fileType, title = "Документи"}: FilesTableP
         )}
         </CardContent>
       </Card>
-    </section>
+      </section>
+    </div>
   );
 }
diff --git a/mp_web_app/frontend/components/gallery-image-card.tsx b/mp_web_app/frontend/components/gallery-image-card.tsx
index 8e66ff3..12dd538 100644
--- a/mp_web_app/frontend/components/gallery-image-card.tsx
+++ b/mp_web_app/frontend/components/gallery-image-card.tsx
@@ -1,14 +1,13 @@
 import React, {useState} from "react";
 import {Card} from "@/components/ui/card";
-import {Dialog, DialogContent, DialogTitle} from "@/components/ui/dialog";
 
 interface GalleryImageCardProps {
   imageUrl: string;
   imageName: string;
+  onClick?: () => void;
 }
 
-export function GalleryImageCard({imageUrl, imageName}: GalleryImageCardProps) {
-  const [isOpen, setIsOpen] = useState(false);
+export function GalleryImageCard({imageUrl, imageName, onClick}: GalleryImageCardProps) {
   const [imageLoaded, setImageLoaded] = useState(false);
   const [aspectRatio, setAspectRatio] = useState<"portrait" | "landscape" | "square">("square");
 
@@ -29,41 +28,26 @@ export function GalleryImageCard({imageUrl, imageName}: GalleryImageCardProps) {
   };
 
   return (
-    <>
-      <Card
-        className={`overflow-hidden cursor-pointer hover:shadow-lg transition-shadow p-0 ${
-          aspectRatio === "portrait" ? "row-span-2" : ""
-        }`}
-        onClick={() => setIsOpen(true)}
-      >
-        <div className="relative w-full h-full bg-muted">
-          {!imageLoaded && (
-            <div className="absolute inset-0 flex items-center justify-center">
-              <p className="text-sm text-muted-foreground">Зареждане...</p>
-            </div>
-          )}
-          <img
-            src={imageUrl}
-            alt={imageName}
-            className={`w-full h-full object-cover transition-opacity ${imageLoaded ? "opacity-100" : "opacity-0"}`}
-            loading="lazy"
-            onLoad={handleImageLoad}
-          />
-        </div>
-      </Card>
-
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent className="max-w-[95vw] max-h-[95vh] p-0 border-0 bg-transparent shadow-none">
-          <DialogTitle className="sr-only">{imageName}</DialogTitle>
-          <div className="relative w-full h-full flex items-center justify-center">
-            <img
-              src={imageUrl}
-              alt={imageName}
-              className="max-w-full max-h-[95vh] w-auto h-auto object-contain rounded-lg"
-            />
+    <Card
+      className={`overflow-hidden cursor-pointer hover:shadow-lg hover:scale-[1.02] transition-all duration-200 p-0 ${
+        aspectRatio === "portrait" ? "row-span-2" : ""
+      }`}
+      onClick={onClick}
+    >
+      <div className="relative w-full h-full bg-muted">
+        {!imageLoaded && (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <p className="text-sm text-muted-foreground">Зареждане...</p>
           </div>
-        </DialogContent>
-      </Dialog>
-    </>
+        )}
+        <img
+          src={imageUrl}
+          alt={imageName}
+          className={`w-full h-full object-cover transition-opacity duration-300 ${imageLoaded ? "opacity-100" : "opacity-0"}`}
+          loading="lazy"
+          onLoad={handleImageLoad}
+        />
+      </div>
+    </Card>
   );
 }
diff --git a/mp_web_app/frontend/components/logo.tsx b/mp_web_app/frontend/components/logo.tsx
index 7d6250e..fb7f6fd 100644
--- a/mp_web_app/frontend/components/logo.tsx
+++ b/mp_web_app/frontend/components/logo.tsx
@@ -1,26 +1,42 @@
 export function Logo() {
+
   return (
-    <div className="relative flex flex-col sm:flex-row items-center sm:items-center gap-2 sm:gap-6 px-4 py-4 overflow-hidden">
-      {/* background image */}
+    <div className="relative flex flex-col sm:flex-row items-center sm:items-center gap-3 sm:gap-6 px-4 py-4 overflow-hidden min-h-[110px] sm:min-h-[130px]">
+      {/* Forest-themed hero background image */}
       <div
-        className="absolute inset-0 bg-[url('/imgs/background.jpg')] bg-center bg-cover opacity-50 "
+        className="absolute inset-0 bg-[url('/imgs/background.jpg')] bg-center bg-cover opacity-40"
         aria-hidden="true"
       />
 
-      {/* your content */}
-      <img
-        src="/imgs/logo-cmyk.svg"
-        alt="Logo"
-        className="relative h-24 w-auto sm:h-30 max-w-[200px] drop-shadow-sm drop-shadow-white"
+      {/* Modern gradient overlay */}
+      <div
+        className="absolute inset-0 bg-gradient-to-br from-white/30 via-white/50 to-white/70 dark:from-gray-900/30 dark:via-gray-900/50 dark:to-gray-900/70"
+        aria-hidden="true"
       />
-      <span
-        className="relative drop-shadow-sm drop-shadow-white text-center sm:text-left font-serif font-bold leading-tight
-                   text-[1.1em] sm:text-[1.3em] text-gray-800"
-      >
-        ГОРОВЛАДЕЛЧЕСКА ПРОИЗВОДИТЕЛНА
-        <br />
-        КООПЕРАЦИЯ &quot;МУРДЖОВ ПОЖАР&quot;
-      </span>
+
+      {/* Logo with modern styling */}
+      <div className="relative z-10 group">
+        <div className="absolute inset-0 bg-white/80 dark:bg-gray-900/80 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-500" />
+        <img
+          src="/imgs/logo-cmyk.svg"
+          alt="Горовладелческа Производителна Кооперация Мурджов Пожар Logo"
+          className="relative h-[67px] w-auto sm:h-[84px] max-w-[147px] drop-shadow-2xl transition-transform duration-500 group-hover:scale-105"
+        />
+      </div>
+      
+      {/* Company name with modern typography */}
+      <div className="relative z-10 text-center sm:text-left">
+        <span
+          className="block font-serif font-bold leading-tight text-[1.0em] sm:text-[1.155em] text-gray-900/80 dark:text-white/80 drop-shadow-sm"
+        >
+          ГОРОВЛАДЕЛЧЕСКА ПРОИЗВОДИТЕЛНА
+        </span>
+        <span
+          className="block font-serif font-bold leading-tight text-[1.0em] sm:text-[1.155em] text-gray-900/80 dark:text-white/80 drop-shadow-sm mt-1"
+        >
+          КООПЕРАЦИЯ &quot;МУРДЖОВ ПОЖАР&quot;
+        </span>
+      </div>
     </div>
   );
 }
diff --git a/mp_web_app/frontend/components/news-card.tsx b/mp_web_app/frontend/components/news-card.tsx
index c3dc6c8..4f242c1 100644
--- a/mp_web_app/frontend/components/news-card.tsx
+++ b/mp_web_app/frontend/components/news-card.tsx
@@ -1,5 +1,5 @@
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
-import {Badge} from "@/components/ui/badge";
+import {useState} from "react";
+import {Calendar, Lock} from "lucide-react";
 
 interface NewsCardProps {
   title: string;
@@ -9,6 +9,8 @@ interface NewsCardProps {
 }
 
 export function NewsCard({title, content, created_at, news_type}: NewsCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  
   const formattedDate = new Date(created_at).toLocaleDateString("bg-BG", {
     year: "numeric",
     month: "long",
@@ -17,28 +19,75 @@ export function NewsCard({title, content, created_at, news_type}: NewsCardProps)
     minute: "2-digit",
   });
 
+  const isPrivate = news_type === "private";
+  const shouldTruncate = content.length > 200;
+  const displayContent = !isExpanded && shouldTruncate ? content.slice(0, 200) + "..." : content;
+
   return (
-    <Card className="w-full hover:shadow-2xl hover:-translate-y-1 transition-all duration-300 border-l-4 border-l-primary/50 hover:border-l-primary">
-      <CardHeader className="space-y-3">
-        <div className="flex justify-between items-start gap-3">
-          <CardTitle className="text-xl font-bold leading-tight hover:text-primary transition-colors">
+    <div 
+      className="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-800 border border-gray-200/50 dark:border-gray-700/50 shadow-lg hover:shadow-2xl transition-all duration-500 hover:-translate-y-2"
+      style={{
+        backdropFilter: "blur(10px)",
+      }}
+    >
+      {/* Animated gradient overlay */}
+      <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+      
+      {/* Accent line with animation */}
+      <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary via-primary/60 to-primary transform origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-700" />
+      
+      <div className="relative p-6 space-y-4">
+        {/* Header */}
+        <div className="flex items-start justify-between gap-4">
+          <h3 className="text-xl font-bold text-gray-900 dark:text-white leading-tight group-hover:text-primary transition-colors duration-300">
             {title}
-          </CardTitle>
-          <Badge
-            variant={news_type === "private" ? "default" : "secondary"}
-            className="shrink-0 px-3 py-1 rounded-full"
-          >
-            {news_type === "private" ? "За членове" : "Обществена"}
-          </Badge>
+          </h3>
+          
+          {/* Badge with icon - only show for private news */}
+          {isPrivate && (
+            <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all duration-300 bg-primary/10 text-primary border border-primary/20 group-hover:bg-primary/20">
+              <Lock className="w-3 h-3" />
+              За членове
+            </div>
+          )}
+        </div>
+
+        {/* Date with icon */}
+        <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+          <Calendar className="w-4 h-4 text-primary" />
+          <time dateTime={created_at}>{formattedDate}</time>
         </div>
-        <CardDescription className="text-sm flex items-center gap-2">
-          <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary/60"></span>
-          {formattedDate}
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <p className="text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed">{content}</p>
-      </CardContent>
-    </Card>
+
+        {/* Content */}
+        <div className="relative">
+          <p className="text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-wrap">
+            {displayContent}
+          </p>
+          
+          {/* Read more button */}
+          {shouldTruncate && (
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="mt-3 text-sm font-semibold text-primary hover:text-primary/80 transition-colors duration-200 flex items-center gap-1 group/btn"
+            >
+              {isExpanded ? "Покажи по-малко" : "Прочети повече"}
+              <svg 
+                className={`w-4 h-4 transition-transform duration-300 ${isExpanded ? "rotate-180" : ""}`}
+                fill="none" 
+                stroke="currentColor" 
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Bottom shine effect */}
+      <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+    </div>
   );
 }
+
+export default NewsCard;
diff --git a/mp_web_app/frontend/components/products-table.tsx b/mp_web_app/frontend/components/products-table.tsx
index 00bdc2f..4e116ee 100644
--- a/mp_web_app/frontend/components/products-table.tsx
+++ b/mp_web_app/frontend/components/products-table.tsx
@@ -65,15 +65,14 @@ export function ProductsTable({title = "Продукти"}: ProductsTableProps)
   };
 
   return (
-    <section className="container mx-auto px-4 py-8">
+    <section className="w-full px-2 xl:container xl:mx-auto xl:px-4 py-8">
       {title && <h1 className="text-3xl font-bold mb-6">{title}</h1>}
 
       <Card>
         <CardHeader>
           <CardTitle>Списък с налични продукти</CardTitle>
         </CardHeader>
-        <CardContent>
-          <div className="overflow-x-auto">
+        <CardContent className="px-0">
             <Table>
             <TableHeader>
               <TableRow>
@@ -121,7 +120,6 @@ export function ProductsTable({title = "Продукти"}: ProductsTableProps)
                 ))}
             </TableBody>
           </Table>
-          </div>
 
           {/* Pagination footer */}
         {totalPages > 1 && (
diff --git a/mp_web_app/frontend/components/ui/button.tsx b/mp_web_app/frontend/components/ui/button.tsx
index 1dbc226..b9386e7 100644
--- a/mp_web_app/frontend/components/ui/button.tsx
+++ b/mp_web_app/frontend/components/ui/button.tsx
@@ -1,30 +1,31 @@
 import * as React from "react";
 import {Slot} from "@radix-ui/react-slot";
 import {cva, type VariantProps} from "class-variance-authority";
+import {Loader2} from "lucide-react";
 
 import {cn} from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-all duration-300 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 overflow-hidden group",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-gradient-to-r from-primary to-primary/90 text-white shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/40 hover:scale-105 active:scale-95 before:absolute before:inset-0 before:bg-gradient-to-r before:from-white/20 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-gradient-to-r from-red-600 to-red-700 text-white shadow-lg shadow-red-500/25 hover:shadow-xl hover:shadow-red-500/40 hover:scale-105 active:scale-95",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+          "border-2 border-gray-200 dark:border-gray-700 bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm hover:border-primary hover:bg-primary/5 hover:scale-105 active:scale-95 shadow-sm hover:shadow-md",
+        secondary: "bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 text-gray-900 dark:text-white shadow-md hover:shadow-lg hover:scale-105 active:scale-95",
+        ghost: "hover:bg-gray-100/80 dark:hover:bg-gray-800/80 hover:scale-105 active:scale-95 backdrop-blur-sm",
+        link: "text-primary underline-offset-4 hover:underline hover:text-primary/80",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        default: "h-9 px-[1.425rem] py-2 has-[>svg]:px-[0.95rem]",
+        sm: "h-8 rounded-lg gap-1.5 px-[0.95rem] has-[>svg]:px-[0.713rem] text-xs",
+        lg: "h-11 rounded-xl px-[2.375rem] has-[>svg]:px-[1.9rem] text-base",
         icon: "size-9",
         "icon-sm": "size-8",
-        "icon-lg": "size-10",
+        "icon-lg": "size-11",
       },
     },
     defaultVariants: {
@@ -34,17 +35,31 @@ const buttonVariants = cva(
   }
 );
 
-const Button = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> &
-    VariantProps<typeof buttonVariants> & {
-      asChild?: boolean;
-    }
->(({className, variant, size, asChild = false, ...props}, ref) => {
-  const Comp = asChild ? Slot : "button";
+interface ButtonProps
+  extends React.ComponentProps<"button">,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  loading?: boolean;
+}
 
-  return <Comp ref={ref} data-slot="button" className={cn(buttonVariants({variant, size, className}))} {...props} />;
-});
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({className, variant, size, asChild = false, loading = false, children, disabled, ...props}, ref) => {
+    const Comp = asChild ? Slot : "button";
+
+    return (
+      <Comp
+        ref={ref}
+        data-slot="button"
+        className={cn(buttonVariants({variant, size, className}))}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading && <Loader2 className="size-4 animate-spin" />}
+        {children}
+      </Comp>
+    );
+  }
+);
 
 Button.displayName = "Button";
 
diff --git a/mp_web_app/frontend/components/ui/card.tsx b/mp_web_app/frontend/components/ui/card.tsx
index 558d04e..4b9dbf7 100644
--- a/mp_web_app/frontend/components/ui/card.tsx
+++ b/mp_web_app/frontend/components/ui/card.tsx
@@ -1,14 +1,34 @@
 import * as React from "react";
+import {cva, type VariantProps} from "class-variance-authority";
 
 import {cn} from "@/lib/utils";
 
-function Card({className, ...props}: React.ComponentProps<"div">) {
+const cardVariants = cva(
+  "relative bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-800 text-card-foreground flex flex-col gap-6 rounded-2xl py-6 transition-all duration-500 overflow-hidden group",
+  {
+    variants: {
+      variant: {
+        default: "border border-gray-200/50 dark:border-gray-700/50 shadow-lg hover:shadow-2xl before:absolute before:inset-0 before:bg-gradient-to-br before:from-primary/5 before:via-transparent before:to-primary/10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-500 before:pointer-events-none",
+        elevated: "border border-gray-200/50 dark:border-gray-700/50 shadow-xl hover:shadow-2xl backdrop-blur-sm",
+        outlined: "border-2 border-gray-300 dark:border-gray-600 shadow-md hover:shadow-xl hover:border-primary/50",
+      },
+      hoverable: {
+        true: "hover:shadow-2xl hover:-translate-y-2 cursor-pointer after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-gradient-to-r after:from-transparent after:via-primary/50 after:to-transparent after:opacity-0 hover:after:opacity-100 after:transition-opacity after:duration-500 after:pointer-events-none",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      hoverable: false,
+    },
+  }
+);
+
+interface CardProps extends React.ComponentProps<"div">, VariantProps<typeof cardVariants> {}
+
+function Card({className, variant, hoverable, ...props}: CardProps) {
   return (
-    <div
-      data-slot="card"
-      className={cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className)}
-      {...props}
-    />
+    <div data-slot="card" className={cn(cardVariants({variant, hoverable}), className)} {...props} />
   );
 }
 
@@ -17,7 +37,7 @@ function CardHeader({className, ...props}: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "relative z-10 @container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
         className
       )}
       {...props}
@@ -44,7 +64,7 @@ function CardAction({className, ...props}: React.ComponentProps<"div">) {
 }
 
 function CardContent({className, ...props}: React.ComponentProps<"div">) {
-  return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
+  return <div data-slot="card-content" className={cn("relative z-10 px-6", className)} {...props} />;
 }
 
 function CardFooter({className, ...props}: React.ComponentProps<"div">) {
diff --git a/mp_web_app/frontend/components/ui/dialog.tsx b/mp_web_app/frontend/components/ui/dialog.tsx
index 23d13dc..eadcb7d 100644
--- a/mp_web_app/frontend/components/ui/dialog.tsx
+++ b/mp_web_app/frontend/components/ui/dialog.tsx
@@ -27,7 +27,7 @@ function DialogOverlay({className, ...props}: React.ComponentProps<typeof Dialog
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
         className
       )}
       {...props}
@@ -49,7 +49,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-background 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-top-[2%] data-[state=open]:slide-in-from-top-[2%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-300 sm:max-w-lg",
           className
         )}
         {...props}
diff --git a/mp_web_app/frontend/components/ui/loading-spinner.tsx b/mp_web_app/frontend/components/ui/loading-spinner.tsx
index ce8c488..236d323 100644
--- a/mp_web_app/frontend/components/ui/loading-spinner.tsx
+++ b/mp_web_app/frontend/components/ui/loading-spinner.tsx
@@ -15,8 +15,8 @@ export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({size = "md", text
 
   return (
     <div className={`flex flex-col items-center justify-center p-8 ${className}`}>
-      <div className={`${sizeClasses[size]} border-4 border-gray-200 border-t-blue-600 rounded-full animate-spin`} />
-      {text && <p className="mt-4 text-sm text-gray-600 animate-pulse">{text}</p>}
+      <div className={`${sizeClasses[size]} border-2 border-gray-200 dark:border-gray-700 border-t-green-600 dark:border-t-green-500 rounded-full animate-spin`} />
+      {text && <p className="mt-4 text-sm text-gray-600 dark:text-gray-400 animate-pulse">{text}</p>}
     </div>
   );
 };
diff --git a/mp_web_app/frontend/components/ui/navigation-menu.tsx b/mp_web_app/frontend/components/ui/navigation-menu.tsx
index 001adcc..03ee768 100644
--- a/mp_web_app/frontend/components/ui/navigation-menu.tsx
+++ b/mp_web_app/frontend/components/ui/navigation-menu.tsx
@@ -42,7 +42,7 @@ function NavigationMenuItem({className, ...props}: React.ComponentProps<typeof N
 }
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-base font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-10 w-max items-center justify-center rounded-xl bg-transparent hover:bg-white/50 hover:dark:bg-gray-900/50 backdrop-blur-sm px-4 py-2 text-[0.9625rem] font-medium disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-white/80 data-[state=open]:dark:bg-gray-900/80 focus-visible:ring-2 focus-visible:ring-ring/50 outline-none transition-all duration-300"
 );
 
 function NavigationMenuTrigger({
@@ -99,7 +99,7 @@ function NavigationMenuLink({className, ...props}: React.ComponentProps<typeof N
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "data-[active=true]:bg-white/80 data-[active=true]:dark:bg-gray-900/80 hover:bg-white/60 hover:dark:bg-gray-900/60 hover:shadow-md focus:bg-white/80 focus:dark:bg-gray-900/80 focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-lg p-3 text-sm transition-all duration-300 outline-none [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/mp_web_app/frontend/components/ui/select.tsx b/mp_web_app/frontend/components/ui/select.tsx
index 2c22664..624be21 100644
--- a/mp_web_app/frontend/components/ui/select.tsx
+++ b/mp_web_app/frontend/components/ui/select.tsx
@@ -54,7 +54,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className
@@ -68,7 +68,7 @@ function SelectContent({
           className={cn(
             "p-1",
             position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
           )}
         >
           {children}
diff --git a/mp_web_app/frontend/components/ui/table.tsx b/mp_web_app/frontend/components/ui/table.tsx
index 6238765..f21c798 100644
--- a/mp_web_app/frontend/components/ui/table.tsx
+++ b/mp_web_app/frontend/components/ui/table.tsx
@@ -1,17 +1,19 @@
 import * as React from "react";
+import {ArrowUpDown, ChevronLeft, ChevronRight} from "lucide-react";
 
 import {cn} from "@/lib/utils";
+import {Button} from "./button";
 
 function Table({className, ...props}: React.ComponentProps<"table">) {
   return (
-    <div data-slot="table-container" className="relative w-full overflow-x-auto">
-      <table data-slot="table" className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    <div data-slot="table-container" className="relative w-[95%] mx-auto overflow-x-auto rounded-xl border border-gray-200/50 dark:border-gray-700/50 bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm">
+      <table data-slot="table" className={cn("w-full caption-bottom text-sm min-w-[600px] xl:table-fixed", className)} {...props} />
     </div>
   );
 }
 
 function TableHeader({className, ...props}: React.ComponentProps<"thead">) {
-  return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
+  return <thead data-slot="table-header" className={cn("[&_tr]:border-b [&_tr]:bg-gradient-to-r [&_tr]:from-gray-50 [&_tr]:to-gray-100 dark:[&_tr]:from-gray-800 dark:[&_tr]:to-gray-700", className)} {...props} />;
 }
 
 function TableBody({className, ...props}: React.ComponentProps<"tbody">) {
@@ -28,26 +30,51 @@ function TableFooter({className, ...props}: React.ComponentProps<"tfoot">) {
   );
 }
 
-function TableRow({className, ...props}: React.ComponentProps<"tr">) {
+interface TableRowProps extends React.ComponentProps<"tr"> {
+  zebra?: boolean;
+}
+
+function TableRow({className, zebra, ...props}: TableRowProps) {
   return (
     <tr
       data-slot="table-row"
-      className={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)}
+      className={cn(
+        "hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent data-[state=selected]:bg-primary/10 border-b border-gray-200/50 dark:border-gray-700/50 transition-all duration-300 hover:shadow-sm",
+        zebra && "even:bg-gray-50/50 dark:even:bg-gray-800/30",
+        className
+      )}
       {...props}
     />
   );
 }
 
-function TableHead({className, ...props}: React.ComponentProps<"th">) {
+interface TableHeadProps extends React.ComponentProps<"th"> {
+  sortable?: boolean;
+  onSort?: () => void;
+  sortDirection?: "asc" | "desc" | null;
+}
+
+function TableHead({className, sortable, onSort, sortDirection, children, ...props}: TableHeadProps) {
   return (
     <th
       data-slot="table-head"
       className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "text-foreground h-10 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        sortable && "cursor-pointer select-none hover:bg-muted/50",
         className
       )}
+      onClick={sortable ? onSort : undefined}
       {...props}
-    />
+    >
+      {sortable ? (
+        <div className="flex items-center gap-2">
+          {children}
+          <ArrowUpDown className={cn("size-4", sortDirection && "text-primary")} />
+        </div>
+      ) : (
+        children
+      )}
+    </th>
   );
 }
 
@@ -56,7 +83,7 @@ function TableCell({className, ...props}: React.ComponentProps<"td">) {
     <td
       data-slot="table-cell"
       className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "px-4 py-3 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         className
       )}
       {...props}
@@ -70,4 +97,90 @@ function TableCaption({className, ...props}: React.ComponentProps<"caption">) {
   );
 }
 
-export {Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption};
+// Loading skeleton for table
+function TableSkeleton({rows = 5, columns = 4}: {rows?: number; columns?: number}) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          {Array.from({length: columns}).map((_, i) => (
+            <TableHead key={i}>
+              <div className="h-4 w-20 bg-muted animate-pulse rounded" />
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {Array.from({length: rows}).map((_, rowIndex) => (
+          <TableRow key={rowIndex}>
+            {Array.from({length: columns}).map((_, colIndex) => (
+              <TableCell key={colIndex}>
+                <div className="h-4 bg-muted animate-pulse rounded" style={{width: `${60 + Math.random() * 40}%`}} />
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+// Pagination component for tables
+interface TablePaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  pageSize?: number;
+  totalItems?: number;
+}
+
+function TablePagination({currentPage, totalPages, onPageChange, pageSize, totalItems}: TablePaginationProps) {
+  return (
+    <div className="flex items-center justify-between px-2 py-4">
+      <div className="text-sm text-muted-foreground">
+        {totalItems && pageSize && (
+          <span>
+            Showing {Math.min((currentPage - 1) * pageSize + 1, totalItems)} to{" "}
+            {Math.min(currentPage * pageSize, totalItems)} of {totalItems} results
+          </span>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+        >
+          <ChevronLeft className="size-4" />
+          Previous
+        </Button>
+        <div className="text-sm font-medium">
+          Page {currentPage} of {totalPages}
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+        >
+          Next
+          <ChevronRight className="size-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+  TableSkeleton,
+  TablePagination,
+};
diff --git a/mp_web_app/frontend/components/upload-file.tsx b/mp_web_app/frontend/components/upload-file.tsx
index 2e1dc11..78d5980 100644
--- a/mp_web_app/frontend/components/upload-file.tsx
+++ b/mp_web_app/frontend/components/upload-file.tsx
@@ -44,6 +44,7 @@ export default function UploadFile() {
   const [loadingUsers, setLoadingUsers] = useState(false);
   const [usersError, setUsersError] = useState<string>("");
   const [selectedUserIds, setSelectedUserIds] = useState<string[]>([]);
+  const [isDragging, setIsDragging] = useState(false);
 
   // Get user role
   const [userRole, setUserRole] = useState<string>("");
@@ -145,9 +146,38 @@ export default function UploadFile() {
 
   const isPrivate = fileType === "private_documents";
 
+  // Drag and drop handlers
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const files = e.dataTransfer.files;
+    if (files && files.length > 0) {
+      setFile(files[0]);
+    }
+  };
+
   return (
-    <div className="flex min-h-svh w-full items-start justify-center">
-      <div className="w-full max-w-lg">
+    <div className="flex min-h-svh w-full items-start justify-center p-4">
+      <div className="w-full max-w-3xl">
         <Card>
           <CardHeader>
             <CardTitle>Качи документ</CardTitle>
@@ -257,18 +287,52 @@ export default function UploadFile() {
                   disabled={submitting}
                   required
                 />
-                <div className="flex items-center gap-3">
-                  <Button asChild variant="secondary" disabled={submitting}>
-                    <label htmlFor="file">Избери файл</label>
-                  </Button>
-                </div>
-                <span
-                  className="text-sm text-muted-foreground truncate"
-                  title={file?.name || "Няма избран файл"}
-                  style={{maxWidth: "calc(100% - 140px)"}}
+                
+                {/* Drag and drop zone */}
+                <div
+                  className={`relative border-2 border-dashed rounded-lg p-8 text-center transition-all duration-200 ${
+                    isDragging
+                      ? "border-primary bg-primary/5 scale-[1.02]"
+                      : "border-muted-foreground/25 hover:border-primary/50 hover:bg-accent/50"
+                  } ${submitting ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
+                  onDragEnter={handleDragEnter}
+                  onDragOver={handleDragOver}
+                  onDragLeave={handleDragLeave}
+                  onDrop={handleDrop}
+                  onClick={() => !submitting && document.getElementById("file")?.click()}
                 >
-                  {file?.name || "Няма избран файл"}
-                </span>
+                  <div className="flex flex-col items-center gap-2">
+                    <svg
+                      className="w-12 h-12 text-muted-foreground"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                      />
+                    </svg>
+                    {file ? (
+                      <div className="space-y-1">
+                        <p className="text-sm font-medium text-foreground">{file.name}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {(file.size / 1024 / 1024).toFixed(2)} MB
+                        </p>
+                        <p className="text-xs text-primary">Кликни или пусни файл за промяна</p>
+                      </div>
+                    ) : (
+                      <div className="space-y-1">
+                        <p className="text-sm font-medium text-foreground">
+                          {isDragging ? "Пусни файла тук" : "Кликни или пусни файл"}
+                        </p>
+                        <p className="text-xs text-muted-foreground">Поддържат се всички типове файлове</p>
+                      </div>
+                    )}
+                  </div>
+                </div>
               </div>
 
               <div className="flex flex-col gap-3">
diff --git a/mp_web_app/frontend/index.html b/mp_web_app/frontend/index.html
index 8fc8564..d945422 100644
--- a/mp_web_app/frontend/index.html
+++ b/mp_web_app/frontend/index.html
@@ -3,6 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
     <link href="/src/styles/global.css" rel="stylesheet">
 </head>
 <body>
diff --git a/mp_web_app/frontend/pages/Base.tsx b/mp_web_app/frontend/pages/Base.tsx
index 57cd81a..6659a21 100644
--- a/mp_web_app/frontend/pages/Base.tsx
+++ b/mp_web_app/frontend/pages/Base.tsx
@@ -1,22 +1,20 @@
-import {Outlet} from "react-router-dom";
-import {Logo} from "@/components/logo";
+import { Outlet } from "react-router-dom";
+import { Header } from "@/components/header";
+import { Footer } from "@/components/footer";
 
 export default function Base() {
   return (
     <div className="min-h-screen flex flex-col">
-      {/* Example: header or logo can go here */}
-      <header>
-        <Logo />
-      </header>
+      {/* Modern Header with hero image and parallax effect */}
+      <Header />
 
-      {/* This is where child routes render */}
+      {/* Main content area - child routes render here */}
       <main className="flex-grow">
         <Outlet />
       </main>
 
-      <footer>
-        <p>&copy; 2025</p>
-      </footer>
+      {/* Modern Footer with company information */}
+      <Footer />
     </div>
   );
 }
diff --git a/mp_web_app/frontend/pages/Gallery.tsx b/mp_web_app/frontend/pages/Gallery.tsx
index d44a14f..4a3759b 100644
--- a/mp_web_app/frontend/pages/Gallery.tsx
+++ b/mp_web_app/frontend/pages/Gallery.tsx
@@ -1,5 +1,6 @@
 import {useEffect, useState} from "react";
 import {GalleryImageCard} from "@/components/gallery-image-card";
+import {GalleryModal} from "@/components/gallery-modal";
 import {API_BASE_URL} from "@/app-config";
 
 interface GalleryImage {
@@ -16,6 +17,7 @@ export default function Gallery() {
   const [images, setImages] = useState<GalleryImage[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [selectedImageIndex, setSelectedImageIndex] = useState<number | null>(null);
 
   useEffect(() => {
     const fetchGallery = async () => {
@@ -38,36 +40,89 @@ export default function Gallery() {
     fetchGallery();
   }, []);
 
+  const handleImageClick = (index: number) => {
+    setSelectedImageIndex(index);
+  };
+
+  const handleCloseModal = () => {
+    setSelectedImageIndex(null);
+  };
+
+  const handleNextImage = () => {
+    if (selectedImageIndex !== null && selectedImageIndex < images.length - 1) {
+      setSelectedImageIndex(selectedImageIndex + 1);
+    }
+  };
+
+  const handlePreviousImage = () => {
+    if (selectedImageIndex !== null && selectedImageIndex > 0) {
+      setSelectedImageIndex(selectedImageIndex - 1);
+    }
+  };
+
   return (
-    <section className="container mx-auto px-4 py-8">
-      {loading && (
-        <div className="text-center py-8">
-          <p className="text-muted-foreground">Зареждане на галерията...</p>
+    <div className="min-h-screen">
+      {/* Hero Section */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-white to-primary/10 dark:from-gray-900 dark:via-gray-800 dark:to-primary/5 border-b border-gray-200/50">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5" />
+        <div className="container mx-auto px-4 py-12 md:py-16 relative">
+          <div className="max-w-4xl mx-auto text-center">
+            <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-primary to-gray-900 dark:from-white dark:via-primary dark:to-white bg-clip-text text-transparent animate-in fade-in slide-in-from-bottom-4 duration-1000">
+              Галерия
+            </h1>
+          </div>
         </div>
-      )}
+      </section>
 
-      {error && (
-        <div className="text-center py-8">
-          <p className="text-destructive">{error}</p>
-        </div>
-      )}
+      <section className="container mx-auto px-4 py-8">
+        {loading && (
+          <div className="text-center py-8">
+            <p className="text-muted-foreground">Зареждане на галерията...</p>
+          </div>
+        )}
 
-      {!loading && !error && images.length === 0 && (
-        <div className="text-center py-8">
-          <p className="text-muted-foreground">Няма налични снимки</p>
-        </div>
-      )}
+        {error && (
+          <div className="text-center py-8">
+            <p className="text-destructive">{error}</p>
+          </div>
+        )}
 
-      {!loading && !error && images.length > 0 && (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 auto-rows-[200px] gap-4">
-          {images.map(
-            (image) =>
-              image.url && (
-                <GalleryImageCard key={image.id} imageUrl={image.url} imageName={image.image_name} />
-              )
-          )}
-        </div>
-      )}
-    </section>
+        {!loading && !error && images.length === 0 && (
+          <div className="text-center py-8">
+            <p className="text-muted-foreground">Няма налични снимки</p>
+          </div>
+        )}
+
+        {!loading && !error && images.length > 0 && (
+          <>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 auto-rows-[200px] gap-4">
+            {images.map((image, index) =>
+              image.url ? (
+                <GalleryImageCard
+                  key={image.id}
+                  imageUrl={image.url}
+                  imageName={image.image_name}
+                  onClick={() => handleImageClick(index)}
+                />
+              ) : null
+            )}
+          </div>
+
+          <GalleryModal
+            isOpen={selectedImageIndex !== null}
+            onClose={handleCloseModal}
+            imageUrl={selectedImageIndex !== null ? images[selectedImageIndex]?.url || "" : ""}
+            imageName={selectedImageIndex !== null ? images[selectedImageIndex]?.image_name || "" : ""}
+            currentIndex={selectedImageIndex !== null ? selectedImageIndex + 1 : 0}
+            totalImages={images.length}
+            onNext={handleNextImage}
+            onPrevious={handlePreviousImage}
+            hasNext={selectedImageIndex !== null && selectedImageIndex < images.length - 1}
+            hasPrevious={selectedImageIndex !== null && selectedImageIndex > 0}
+          />
+          </>
+        )}
+      </section>
+    </div>
   );
 }
diff --git a/mp_web_app/frontend/pages/Home.tsx b/mp_web_app/frontend/pages/Home.tsx
index a95c680..85eef4b 100644
--- a/mp_web_app/frontend/pages/Home.tsx
+++ b/mp_web_app/frontend/pages/Home.tsx
@@ -84,64 +84,103 @@ export default function Home() {
   };
 
   return (
-    <section className="container mx-auto px-4 py-8">
-
-      {loading && (
-        <div className="text-center py-8">
-          <p className="text-muted-foreground">Зареждане на новини...</p>
+    <div className="min-h-screen">
+      {/* Hero Section */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-white to-primary/10 dark:from-gray-900 dark:via-gray-800 dark:to-primary/5 border-b border-gray-200/50">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5" />
+        <div className="container mx-auto px-4 py-16 md:py-24 relative">
+          <div className="max-w-4xl mx-auto text-center space-y-4">
+            <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-primary to-gray-900 dark:from-white dark:via-primary dark:to-white bg-clip-text text-transparent animate-in fade-in slide-in-from-bottom-4 duration-1000">
+              Добре дошли в ГПК
+            </h1>
+            <p className="text-base md:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-150">
+              Следете последните новини и актуализации от нашата кооперация
+            </p>
+          </div>
         </div>
-      )}
+      </section>
 
-      {error && (
-        <div className="text-center py-8">
-          <p className="text-destructive mb-4">{error}</p>
-          <button
-            onClick={() => {
-              setError(null);
-              setLoading(true);
-              apiClient
-                .get("news/get")
-                .then((response) => setNews(response.data || []))
-                .catch((err) => {
-                  if (err.response?.status !== 401) {
-                    setError("Неуспешно зареждане на новините");
-                  }
-                  setNews([]);
-                })
-                .finally(() => setLoading(false));
-            }}
-            className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
-          >
-            Опитай отново
-          </button>
-        </div>
-      )}
+      {/* News Section */}
+      <section className="container mx-auto px-4 py-12">
+        {loading && (
+          <div className="flex flex-col items-center justify-center py-20 space-y-4">
+            <div className="relative w-16 h-16">
+              <div className="absolute inset-0 border-4 border-primary/20 rounded-full" />
+              <div className="absolute inset-0 border-4 border-primary border-t-transparent rounded-full animate-spin" />
+            </div>
+            <p className="text-gray-600 dark:text-gray-400 animate-pulse">Зареждане на новини...</p>
+          </div>
+        )}
 
-      {!loading && !error && news.length === 0 && (
-        <div className="text-center py-8">
-          <p className="text-muted-foreground">Няма налични новини</p>
-        </div>
-      )}
+        {error && (
+          <div className="max-w-md mx-auto text-center py-20">
+            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-2xl p-8 space-y-4">
+              <div className="w-16 h-16 mx-auto bg-red-100 dark:bg-red-900/40 rounded-full flex items-center justify-center">
+                <svg className="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <p className="text-red-800 dark:text-red-200 font-semibold">{error}</p>
+              <button
+                onClick={() => {
+                  setError(null);
+                  setLoading(true);
+                  apiClient
+                    .get("news/get")
+                    .then((response) => setNews(response.data || []))
+                    .catch((err) => {
+                      if (err.response?.status !== 401) {
+                        setError("Неуспешно зареждане на новините");
+                      }
+                      setNews([]);
+                    })
+                    .finally(() => setLoading(false));
+                }}
+                className="px-6 py-3 bg-red-600 hover:bg-red-700 text-white rounded-xl font-semibold transition-all duration-200 hover:scale-105 active:scale-95"
+              >
+                Опитай отново
+              </button>
+            </div>
+          </div>
+        )}
 
-      {!loading && !error && news.length > 0 && (
-        <>
-          <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-2">
-            {pageItems.map((item) => (
-              <NewsCard
-                key={item.id}
-                title={item.title}
-                content={item.content}
-                created_at={item.created_at}
-                news_type={item.news_type}
-              />
-            ))}
+        {!loading && !error && news.length === 0 && (
+          <div className="max-w-md mx-auto text-center py-20">
+            <div className="bg-gray-50 dark:bg-gray-800 rounded-2xl p-12 space-y-4">
+              <div className="w-20 h-20 mx-auto bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
+                <svg className="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
+                </svg>
+              </div>
+              <p className="text-gray-600 dark:text-gray-400 text-lg">Няма налични новини</p>
+            </div>
           </div>
+        )}
+
+        {!loading && !error && news.length > 0 && (
+          <>
+            <div className="grid gap-8 md:grid-cols-1 lg:grid-cols-2 animate-in fade-in slide-in-from-bottom-8 duration-700">
+              {pageItems.map((item, index) => (
+                <div
+                  key={item.id}
+                  className="animate-in fade-in slide-in-from-bottom-4"
+                  style={{animationDelay: `${index * 100}ms`, animationFillMode: "backwards"}}
+                >
+                  <NewsCard
+                    title={item.title}
+                    content={item.content}
+                    created_at={item.created_at}
+                    news_type={item.news_type}
+                  />
+                </div>
+              ))}
+            </div>
 
           {/* Pagination */}
           {totalPages > 1 && (
-            <div className="mt-8">
+            <div className="mt-12">
               <Pagination>
-                <PaginationContent>
+                <PaginationContent className="gap-2">
                   <PaginationItem>
                     <PaginationPrevious
                       href="#"
@@ -246,6 +285,7 @@ export default function Home() {
           )}
         </>
       )}
-    </section>
+      </section>
+    </div>
   );
 }
diff --git a/mp_web_app/frontend/pages/Navigation.tsx b/mp_web_app/frontend/pages/Navigation.tsx
index 8fdcb60..797a41a 100644
--- a/mp_web_app/frontend/pages/Navigation.tsx
+++ b/mp_web_app/frontend/pages/Navigation.tsx
@@ -1,5 +1,5 @@
 import {useState, useEffect} from "react";
-import {Link} from "react-router-dom";
+import {Link, useNavigate} from "react-router-dom";
 import {Outlet} from "react-router-dom";
 import {useAuth} from "@/context/AuthContext";
 import {
@@ -18,8 +18,8 @@ import {Button} from "@/components/ui/button";
 const NAV_LINKS = [
   {label: "Начало", to: "/home"},
   {label: "Продукти", to: "/products"},
-  {label: "Контакти", to: "/contacts"},
   {label: "Галерия", to: "/gallery"},
+  {label: "Контакти", to: "/contacts"},
   {
     label: "Списъци",
     dropdown: [
@@ -106,12 +106,14 @@ function useWindowWidth() {
 
 export function Navigation() {
   const {isLoggedIn, logout} = useAuth();
+  const navigate = useNavigate();
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [showMobileMenu, setShowMobileMenu] = useState(false);
   const [menuAnimating, setMenuAnimating] = useState(false);
+  const [isNavigating, setIsNavigating] = useState(false);
 
   const windowWidth = useWindowWidth();
-  const isMobile = windowWidth < 980;
+  const isMobile = windowWidth < 1200;
 
   // Helper to filter dropdown items based on auth
   const filterDropdown = (dropdown: any[]) => dropdown.filter((item) => !item.requiresAuth || isLoggedIn);
@@ -140,13 +142,33 @@ export function Navigation() {
   const isAccountant = role === "accountant";
   const isBoardOrControl = role === "board" || role === "control";
 
+  // Handle smooth navigation without flickering
+  const handleNavigation = (path: string) => {
+    if (isMobile) {
+      setIsNavigating(true);
+      // Close mobile menu with animation
+      setMobileMenuOpen(false);
+      // Wait for menu close animation to complete before navigating
+      setTimeout(() => {
+        navigate(path);
+        setIsNavigating(false);
+      }, 300);
+    } else {
+      navigate(path);
+    }
+  };
+
   // Handle animation for mobile menu
   useEffect(() => {
     if (mobileMenuOpen) {
       setShowMobileMenu(true);
+      // Prevent body scroll when menu is open
+      document.body.style.overflow = 'hidden';
       setTimeout(() => setMenuAnimating(true), 10);
     } else if (showMobileMenu) {
       setMenuAnimating(false);
+      // Restore body scroll
+      document.body.style.overflow = '';
       const timeout = setTimeout(() => setShowMobileMenu(false), 300);
       return () => clearTimeout(timeout);
     }
@@ -157,7 +179,7 @@ export function Navigation() {
     <div
       className={`
         fixed inset-0 z-50 bg-background flex flex-col p-6
-        transition-all duration-300 overflow-y-auto
+        transition-all duration-300 ease-in-out overflow-y-auto
         ${
           menuAnimating
             ? "opacity-100 translate-x-0 pointer-events-auto"
@@ -166,27 +188,30 @@ export function Navigation() {
       `}
     >
       <div className="flex justify-between items-center mb-8">
-        <span className="text-xl font-bold">Меню</span>
+        <span className="text-xl font-bold text-foreground">Меню</span>
         <Button
           onClick={() => setMobileMenuOpen(false)}
-          className="p-2 rounded hover:bg-accent menu-button bg-primary"
+          size="icon"
           aria-label="Затвори менюто"
         >
-          <CloseIcon size={28} />
+          <CloseIcon className="w-5 h-5" />
         </Button>
       </div>
-      <nav className="flex flex-col gap-4">
+      <nav className="flex flex-col gap-2">
         {NAV_LINKS.map((link) => {
           if (!link.dropdown) {
             return (
-              <Link
+              <a
                 key={link.label}
-                to={link.to}
-                className="block py-2 text-lg font-medium"
-                onClick={() => setMobileMenuOpen(false)}
+                href={link.to}
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleNavigation(link.to);
+                }}
+                className="block px-4 py-3 rounded-lg hover:bg-accent active:bg-accent/80 active:scale-[0.98] transition-all duration-150 text-foreground font-medium"
               >
                 {link.label}
-              </Link>
+              </a>
             );
           }
 
@@ -235,88 +260,94 @@ export function Navigation() {
           }
 
           return (
-            <div key={link.label} className="mt-4">
-              <div className="font-semibold mb-2">{link.label}</div>
-              {itemsToRender.map((item: any) => (
-                <Link
-                  key={item.label}
-                  to={item.to}
-                  className="block w-full mb-1 px-4 py-3 rounded-lg shadow-md bg-secondary text-secondary-foreground hover:bg-secondary/90 active:opacity-75 transition-opacity"
-                  onClick={() => setMobileMenuOpen(false)}
-                >
-                  {item.label}
-                  <div className="text-xs text-muted-foreground">{item.description}</div>
-                </Link>
-              ))}
+            <div key={link.label} className="mt-2">
+              <div className="font-semibold mb-2 px-4 text-primary text-sm uppercase tracking-wide">{link.label}</div>
+              <div className="space-y-1">
+                {itemsToRender.map((item: any) => (
+                  <a
+                    key={item.label}
+                    href={item.to}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleNavigation(item.to);
+                    }}
+                    className="block px-4 py-2 rounded-lg hover:bg-accent active:bg-accent/80 active:scale-[0.98] transition-all duration-150"
+                  >
+                    <div className="font-medium text-foreground">{item.label}</div>
+                    <div className="text-xs text-muted-foreground mt-0.5">{item.description}</div>
+                  </a>
+                ))}
+              </div>
             </div>
           );
         })}
         {/* Admin upload action for mobile */}
         {isLoggedIn && isAdmin && (
-          <>
+          <div className="mt-4 space-y-2">
             <Button
-              className="mt-2 w-full rounded-lg shadow-md active:opacity-75 transition-opacity"
-              onClick={() => {
-                setMobileMenuOpen(false);
-                window.location.assign("/upload");
-              }}
+              className="w-full"
+              onClick={() => handleNavigation("/upload")}
+              disabled={isNavigating}
             >
               Качи документ
             </Button>
             <Button
-              className="mt-2 w-full rounded-lg shadow-md active:opacity-75 transition-opacity"
-              onClick={() => {
-                setMobileMenuOpen(false);
-                window.location.assign("/admin");
-              }}
+              className="w-full"
+              onClick={() => handleNavigation("/admin")}
+              disabled={isNavigating}
             >
               Админ панел
             </Button>
-          </>
+          </div>
         )}
         {/* Accountant upload action for mobile */}
         {isLoggedIn && isAccountant && (
-          <Button
-            className="mt-2 w-full rounded-lg shadow-md active:opacity-75 transition-opacity"
-            onClick={() => {
-              setMobileMenuOpen(false);
-              window.location.assign("/upload");
-            }}
-          >
-            Качи документ
-          </Button>
+          <div className="mt-4">
+            <Button
+              className="w-full"
+              onClick={() => handleNavigation("/upload")}
+              disabled={isNavigating}
+            >
+              Качи документ
+            </Button>
+          </div>
         )}
         {/* Auth section for mobile */}
         {!isLoggedIn ? (
-          <div className="mt-4">
-            <div className="font-semibold mb-2">Вход</div>
-            <Link
-              to="/login"
-              className="block w-full mb-1 px-4 py-3 rounded-lg shadow-md bg-secondary text-secondary-foreground hover:bg-secondary/90 active:opacity-75 transition-opacity"
-              onClick={() => setMobileMenuOpen(false)}
+          <div className="mt-4 space-y-2">
+            <div className="font-semibold mb-2 px-4 text-primary text-sm uppercase tracking-wide">Вход</div>
+            <Button
+              onClick={() => handleNavigation("/login")}
+              variant="outline"
+              className="w-full h-auto py-3 flex-col items-start"
+              disabled={isNavigating}
             >
-              Влез
-              <div className="text-xs text-muted-foreground">Влезе в своя акаунт</div>
-            </Link>
-            <Link
-              to="/register"
-              className="block w-full mb-1 px-4 py-3 rounded-lg shadow-md bg-secondary text-secondary-foreground hover:bg-secondary/90 active:opacity-75 transition-opacity"
-              onClick={() => setMobileMenuOpen(false)}
+              <div className="font-medium">Влез</div>
+              <div className="text-xs text-muted-foreground mt-0.5">Влезе в своя акаунт</div>
+            </Button>
+            <Button
+              onClick={() => handleNavigation("/register")}
+              variant="outline"
+              className="w-full h-auto py-3 flex-col items-start"
+              disabled={isNavigating}
             >
-              Създай
-              <div className="text-xs text-muted-foreground">Създай акаунт ако си член на ГПК</div>
-            </Link>
+              <div className="font-medium">Създай</div>
+              <div className="text-xs text-muted-foreground mt-0.5">Създай акаунт ако си член на ГПК</div>
+            </Button>
           </div>
         ) : (
-          <Button
-            className="mt-4 w-full rounded-lg shadow-md active:opacity-75 transition-opacity"
-            onClick={() => {
-              logout();
-              setMobileMenuOpen(false);
-            }}
-          >
-            Изход
-          </Button>
+          <div className="mt-4">
+            <Button
+              className="w-full"
+              onClick={() => {
+                logout();
+                setMobileMenuOpen(false);
+              }}
+              disabled={isNavigating}
+            >
+              Изход
+            </Button>
+          </div>
         )}
       </nav>
     </div>
@@ -326,15 +357,20 @@ export function Navigation() {
     <div>
       {/* Desktop Navigation */}
       {!isMobile && (
-        <div className="sticky top-0 z-40 flex p-3 border-t-2 border-b-2 border-primary w-full items-center justify-center bg-background/80 backdrop-blur-md shadow-sm transition-all duration-300">
+        <div className="sticky top-0 z-40 flex p-3 w-full items-center justify-center bg-background/95 backdrop-blur-md shadow-sm transition-all duration-300 border-t-2 border-b-2 border-transparent" style={{borderImage: 'linear-gradient(to right, oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56 / 0.8)) 1'}}>
           <NavigationMenu viewport={false}>
-            <NavigationMenuList>
+            <NavigationMenuList className="gap-2">
               {NAV_LINKS.map((link) => {
                 if (!link.dropdown) {
                   return (
                     <NavigationMenuItem key={link.label}>
                       <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-                        <Link to={link.to}>{link.label}</Link>
+                        <Link 
+                          to={link.to}
+                          className="transition-all duration-200 hover:scale-105"
+                        >
+                          {link.label}
+                        </Link>
                       </NavigationMenuLink>
                     </NavigationMenuItem>
                   );
@@ -386,19 +422,24 @@ export function Navigation() {
 
                 return (
                   <NavigationMenuItem key={link.label}>
-                    <NavigationMenuTrigger>{link.label}</NavigationMenuTrigger>
+                    <NavigationMenuTrigger className="transition-all duration-200">
+                      {link.label}
+                    </NavigationMenuTrigger>
                     <NavigationMenuContent className="relative z-50">
-                      <ul className="grid w-[250px] gap-4">
-                        <li>
-                          {itemsToRender.map((item: any) => (
-                            <NavigationMenuLink asChild key={item.label}>
-                              <Link to={item.to}>
-                                <div className="font-medium">{item.label}</div>
-                                <div className="text-muted-foreground text-xs">{item.description}</div>
+                      <ul className="grid w-[280px] gap-1 p-2">
+                        {itemsToRender.map((item: any) => (
+                          <li key={item.label}>
+                            <NavigationMenuLink asChild>
+                              <Link 
+                                to={item.to}
+                                className="block select-none rounded-lg p-3 leading-none no-underline outline-none transition-all duration-200 hover:bg-gray-100/80 dark:hover:bg-gray-800/80 hover:shadow-md border border-transparent hover:border-gray-200/50 dark:hover:border-gray-700/50"
+                              >
+                                <div className="font-medium text-sm leading-none mb-1 text-gray-900 dark:text-white">{item.label}</div>
+                                <div className="text-gray-600 dark:text-gray-400 text-xs leading-snug">{item.description}</div>
                               </Link>
                             </NavigationMenuLink>
-                          ))}
-                        </li>
+                          </li>
+                        ))}
                       </ul>
                     </NavigationMenuContent>
                   </NavigationMenuItem>
@@ -408,42 +449,58 @@ export function Navigation() {
               {isLoggedIn && isAdmin && (
                 <>
                   <NavigationMenuItem>
-                    <Button asChild className="ml-2">
-                      <Link to="/upload">Качи документ</Link>
-                    </Button>
+                    <Link to="/upload">
+                      <Button className="ml-2 transition-all duration-200 hover:scale-105 hover:shadow-md">
+                        Качи документ
+                      </Button>
+                    </Link>
                   </NavigationMenuItem>
                   <NavigationMenuItem>
-                    <Button asChild className="ml-2">
-                      <Link to="/admin">Админ панел</Link>
-                    </Button>
+                    <Link to="/admin">
+                      <Button className="ml-2 transition-all duration-200 hover:scale-105 hover:shadow-md">
+                        Админ панел
+                      </Button>
+                    </Link>
                   </NavigationMenuItem>
                 </>
               )}
               {/* Accountant upload action for desktop */}
               {isLoggedIn && isAccountant && (
                 <NavigationMenuItem>
-                  <Button asChild className="ml-2">
-                    <Link to="/upload">Качи документ</Link>
-                  </Button>
+                  <Link to="/upload">
+                    <Button className="ml-2 transition-all duration-200 hover:scale-105 hover:shadow-md">
+                      Качи документ
+                    </Button>
+                  </Link>
                 </NavigationMenuItem>
               )}
               {/* Auth section for desktop */}
               {!isLoggedIn ? (
                 <NavigationMenuItem>
-                  <NavigationMenuTrigger>Вход</NavigationMenuTrigger>
+                  <NavigationMenuTrigger className="transition-all duration-200">
+                    Вход
+                  </NavigationMenuTrigger>
                   <NavigationMenuContent className="relative z-50">
-                    <ul className="grid w-[250px] gap-4">
+                    <ul className="grid w-[280px] gap-1 p-2">
                       <li>
                         <NavigationMenuLink asChild>
-                          <Link to="/login">
-                            <div className="font-medium">Влез</div>
-                            <div className="text-muted-foreground text-xs">Влезе в своя акаунт</div>
+                          <Link 
+                            to="/login"
+                            className="block select-none rounded-lg p-3 leading-none no-underline outline-none transition-all duration-200 hover:bg-gray-100/80 dark:hover:bg-gray-800/80 hover:shadow-md border border-transparent hover:border-gray-200/50 dark:hover:border-gray-700/50"
+                          >
+                            <div className="font-medium text-sm leading-none mb-1 text-gray-900 dark:text-white">Влез</div>
+                            <div className="text-gray-600 dark:text-gray-400 text-xs leading-snug">Влезе в своя акаунт</div>
                           </Link>
                         </NavigationMenuLink>
+                      </li>
+                      <li>
                         <NavigationMenuLink asChild>
-                          <Link to="/register">
-                            <div className="font-medium">Създай</div>
-                            <div className="text-muted-foreground text-xs">Създай акаунт ако си член на ГПК</div>
+                          <Link 
+                            to="/register"
+                            className="block select-none rounded-lg p-3 leading-none no-underline outline-none transition-all duration-200 hover:bg-gray-100/80 dark:hover:bg-gray-800/80 hover:shadow-md border border-transparent hover:border-gray-200/50 dark:hover:border-gray-700/50"
+                          >
+                            <div className="font-medium text-sm leading-none mb-1 text-gray-900 dark:text-white">Създай</div>
+                            <div className="text-gray-600 dark:text-gray-400 text-xs leading-snug">Създай акаунт ако си член на ГПК</div>
                           </Link>
                         </NavigationMenuLink>
                       </li>
@@ -452,7 +509,10 @@ export function Navigation() {
                 </NavigationMenuItem>
               ) : (
                 <NavigationMenuItem>
-                  <Button className="ml-2" onClick={logout}>
+                  <Button 
+                    className="ml-2 transition-all duration-200 hover:scale-105 hover:shadow-md" 
+                    onClick={logout}
+                  >
                     Изход
                   </Button>
                 </NavigationMenuItem>
@@ -464,14 +524,14 @@ export function Navigation() {
 
       {/* Hamburger Icon for Mobile */}
       {isMobile && (
-        <div className="sticky top-0 z-40 flex items-center p-3 border-t-2 border-b-2 border-primary w-full bg-background/80 backdrop-blur-md shadow-sm">
+        <div className="sticky top-0 z-40 flex items-center px-2 py-2 w-full bg-background/95 backdrop-blur-md shadow-sm border-t-2 border-transparent" style={{borderImageSource: 'linear-gradient(to right, oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56 / 0.8))', borderImageSlice: 1}}>
           <Button
             onClick={() => setMobileMenuOpen(true)}
-            className="flex items-center gap-3 px-5 py-3 bg-primary text-white rounded-lg shadow-md hover:shadow-lg hover:scale-105 transition-all"
+            className="w-full flex items-center justify-center py-2 h-[35px]"
             aria-label="Отвори менюто"
+            disabled={isNavigating}
           >
-            <MenuIcon className="w-6 h-6" />
-            <span className="text-lg font-semibold">Меню</span>
+            <MenuIcon className="w-5 h-5" />
           </Button>
         </div>
       )}
diff --git a/mp_web_app/frontend/pages/Products.tsx b/mp_web_app/frontend/pages/Products.tsx
index 4858bfa..fa58562 100644
--- a/mp_web_app/frontend/pages/Products.tsx
+++ b/mp_web_app/frontend/pages/Products.tsx
@@ -1,6 +1,22 @@
-
 import {ProductsTable} from "@/components/products-table";
 
 export default function Products() {
-  return <ProductsTable title="Продукти" />;
+  return (
+    <div className="min-h-screen">
+      {/* Hero Section */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-white to-primary/10 dark:from-gray-900 dark:via-gray-800 dark:to-primary/5 border-b border-gray-200/50">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5" />
+        <div className="container mx-auto px-4 py-12 md:py-16 relative">
+          <div className="max-w-4xl mx-auto text-center">
+            <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-primary to-gray-900 dark:from-white dark:via-primary dark:to-white bg-clip-text text-transparent animate-in fade-in slide-in-from-bottom-4 duration-1000">
+              Продукти
+            </h1>
+          </div>
+        </div>
+      </section>
+
+      {/* Content */}
+      <ProductsTable title="" />
+    </div>
+  );
 }
diff --git a/mp_web_app/frontend/pages/about-us/Board.tsx b/mp_web_app/frontend/pages/about-us/Board.tsx
index d7541a7..5557ea2 100644
--- a/mp_web_app/frontend/pages/about-us/Board.tsx
+++ b/mp_web_app/frontend/pages/about-us/Board.tsx
@@ -43,17 +43,28 @@ export default function Board() {
   }
 
   return (
-    <section className="container mx-auto px-4 py-8">
+    <div className="min-h-screen">
+      {/* Hero Section */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-white to-primary/10 dark:from-gray-900 dark:via-gray-800 dark:to-primary/5 border-b border-gray-200/50">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5" />
+        <div className="container mx-auto px-4 py-12 md:py-16 relative">
+          <div className="max-w-4xl mx-auto text-center">
+            <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-primary to-gray-900 dark:from-white dark:via-primary dark:to-white bg-clip-text text-transparent animate-in fade-in slide-in-from-bottom-4 duration-1000">
+              Управителен съвет
+            </h1>
+          </div>
+        </div>
+      </section>
 
-      <Card>
+      <section className="w-full px-2 xl:container xl:mx-auto xl:px-4 py-8">
+        <Card>
         <CardHeader>
           <CardTitle>Членове на управителния съвет</CardTitle>
         </CardHeader>
-        <CardContent>
+        <CardContent className="px-0">
           {members.length === 0 ? (
             <p className="text-center text-muted-foreground py-8">Няма налични данни</p>
           ) : (
-            <div className="overflow-x-auto">
               <Table>
                 <TableHeader>
                   <TableRow>
@@ -101,10 +112,10 @@ export default function Board() {
                   ))}
                 </TableBody>
               </Table>
-            </div>
           )}
         </CardContent>
       </Card>
-    </section>
+      </section>
+    </div>
   );
 }
diff --git a/mp_web_app/frontend/pages/about-us/Control.tsx b/mp_web_app/frontend/pages/about-us/Control.tsx
index 92d6bd5..e2a8304 100644
--- a/mp_web_app/frontend/pages/about-us/Control.tsx
+++ b/mp_web_app/frontend/pages/about-us/Control.tsx
@@ -43,17 +43,28 @@ export default function Control() {
   }
 
   return (
-    <section className="container mx-auto px-4 py-8">
+    <div className="min-h-screen">
+      {/* Hero Section */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-white to-primary/10 dark:from-gray-900 dark:via-gray-800 dark:to-primary/5 border-b border-gray-200/50">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5" />
+        <div className="container mx-auto px-4 py-12 md:py-16 relative">
+          <div className="max-w-4xl mx-auto text-center">
+            <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-primary to-gray-900 dark:from-white dark:via-primary dark:to-white bg-clip-text text-transparent animate-in fade-in slide-in-from-bottom-4 duration-1000">
+              Контролен съвет
+            </h1>
+          </div>
+        </div>
+      </section>
 
-      <Card>
+      <section className="w-full px-2 xl:container xl:mx-auto xl:px-4 py-8">
+        <Card>
         <CardHeader>
           <CardTitle>Членове на контролния съвет</CardTitle>
         </CardHeader>
-        <CardContent>
+        <CardContent className="px-0">
           {members.length === 0 ? (
             <p className="text-center text-muted-foreground py-8">Няма налични данни</p>
           ) : (
-            <div className="overflow-x-auto">
               <Table>
                 <TableHeader>
                   <TableRow>
@@ -101,10 +112,10 @@ export default function Control() {
                   ))}
                 </TableBody>
               </Table>
-            </div>
           )}
         </CardContent>
       </Card>
-    </section>
+      </section>
+    </div>
   );
 }
diff --git a/mp_web_app/frontend/pages/admin/AdminPanel.tsx b/mp_web_app/frontend/pages/admin/AdminPanel.tsx
index a1c2e61..d079a79 100644
--- a/mp_web_app/frontend/pages/admin/AdminPanel.tsx
+++ b/mp_web_app/frontend/pages/admin/AdminPanel.tsx
@@ -1,6 +1,7 @@
 import {useEffect, useState} from "react";
 import {useNavigate} from "react-router-dom";
 import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
 import {getAccessToken} from "@/context/tokenStore";
 import {getUserRole} from "@/context/jwt";
 import NewsManagement from "./NewsManagement";
@@ -13,6 +14,14 @@ export default function AdminPanel() {
   const navigate = useNavigate();
   const [isAdmin, setIsAdmin] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState("news");
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 1200);
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth < 1200);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
 
   useEffect(() => {
     const token = getAccessToken();
@@ -39,38 +48,63 @@ export default function AdminPanel() {
   }
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div className="w-full px-2 xl:container xl:mx-auto xl:px-4 py-8">
       <h1 className="text-3xl font-bold mb-6">Административен панел</h1>
 
-      <Tabs defaultValue="news" className="w-full">
-        <TabsList className="grid w-full grid-cols-5">
-          <TabsTrigger value="news">Новини</TabsTrigger>
-          <TabsTrigger value="users">Потребители</TabsTrigger>
-          <TabsTrigger value="products">Продукти</TabsTrigger>
-          <TabsTrigger value="documents">Документи</TabsTrigger>
-          <TabsTrigger value="gallery">Галерия</TabsTrigger>
-        </TabsList>
+      {isMobile ? (
+        <div className="w-full">
+          <Select value={activeTab} onValueChange={setActiveTab}>
+            <SelectTrigger className="w-full mb-6">
+              <SelectValue placeholder="Изберете секция" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="news">Новини</SelectItem>
+              <SelectItem value="users">Потребители</SelectItem>
+              <SelectItem value="products">Продукти</SelectItem>
+              <SelectItem value="documents">Документи</SelectItem>
+              <SelectItem value="gallery">Галерия</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <div className="mt-6">
+            {activeTab === "news" && <NewsManagement />}
+            {activeTab === "users" && <UserManagement />}
+            {activeTab === "products" && <ProductsManagement />}
+            {activeTab === "documents" && <DocumentsManagement />}
+            {activeTab === "gallery" && <GalleryManagement />}
+          </div>
+        </div>
+      ) : (
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+          <TabsList className="grid w-full grid-cols-5">
+            <TabsTrigger value="news">Новини</TabsTrigger>
+            <TabsTrigger value="users">Потребители</TabsTrigger>
+            <TabsTrigger value="products">Продукти</TabsTrigger>
+            <TabsTrigger value="documents">Документи</TabsTrigger>
+            <TabsTrigger value="gallery">Галерия</TabsTrigger>
+          </TabsList>
 
-        <TabsContent value="news" className="mt-6">
-          <NewsManagement />
-        </TabsContent>
+          <TabsContent value="news" className="mt-6">
+            <NewsManagement />
+          </TabsContent>
 
-        <TabsContent value="users" className="mt-6">
-          <UserManagement />
-        </TabsContent>
+          <TabsContent value="users" className="mt-6">
+            <UserManagement />
+          </TabsContent>
 
-        <TabsContent value="products" className="mt-6">
-          <ProductsManagement />
-        </TabsContent>
+          <TabsContent value="products" className="mt-6">
+            <ProductsManagement />
+          </TabsContent>
 
-        <TabsContent value="documents" className="mt-6">
-          <DocumentsManagement />
-        </TabsContent>
+          <TabsContent value="documents" className="mt-6">
+            <DocumentsManagement />
+          </TabsContent>
 
-        <TabsContent value="gallery" className="mt-6">
-          <GalleryManagement />
-        </TabsContent>
-      </Tabs>
+          <TabsContent value="gallery" className="mt-6">
+            <GalleryManagement />
+          </TabsContent>
+        </Tabs>
+      )}
     </div>
   );
 }
diff --git a/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx b/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx
index 674a315..b8656c6 100644
--- a/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx
@@ -6,6 +6,7 @@ import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/c
 import {Checkbox} from "@/components/ui/checkbox";
 import {ConfirmDialog} from "@/components/confirm-dialog";
 import {useToast} from "@/components/ui/use-toast";
+import {LoadingSpinner} from "@/components/ui/loading-spinner";
 import apiClient from "@/context/apiClient";
 
 interface FileMetadata {
@@ -151,7 +152,7 @@ export default function DocumentsManagement() {
               <SelectTrigger className="w-[280px]">
                 <SelectValue placeholder="Изберете тип документ" />
               </SelectTrigger>
-              <SelectContent>
+              <SelectContent sideOffset={5}>
                 {FILE_TYPES.map((type) => (
                   <SelectItem key={type.value} value={type.value}>
                     {type.label}
@@ -171,7 +172,7 @@ export default function DocumentsManagement() {
         </div>
 
         {loading ? (
-          <p className="text-center text-muted-foreground py-8">Зареждане...</p>
+          <LoadingSpinner />
         ) : filteredFiles.length === 0 ? (
           <p className="text-center text-muted-foreground py-8">
             Няма налични документи{selectedFileType !== "all" ? " от този тип" : ""}
diff --git a/mp_web_app/frontend/pages/admin/NewsManagement.tsx b/mp_web_app/frontend/pages/admin/NewsManagement.tsx
index 8909202..1c397ed 100644
--- a/mp_web_app/frontend/pages/admin/NewsManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/NewsManagement.tsx
@@ -16,6 +16,8 @@ import {
 import {Badge} from "@/components/ui/badge";
 import {ConfirmDialog} from "@/components/confirm-dialog";
 import {useToast} from "@/components/ui/use-toast";
+import {LoadingSpinner} from "@/components/ui/loading-spinner";
+import {Lock, Globe} from "lucide-react";
 import apiClient from "@/context/apiClient";
 import {getAccessToken} from "@/context/tokenStore";
 
@@ -146,7 +148,7 @@ export default function NewsManagement() {
     <AdminLayout title="Управление на новини">
       <div className="space-y-4">
         <div className="flex justify-between items-center">
-          <h3 className="text-lg font-semibold">Списък с новини</h3>
+          <h3 className="text-lg font-semibold">Списък с новини ({news.length})</h3>
           <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
             <DialogTrigger asChild>
               <Button>Създай новина</Button>
@@ -198,13 +200,14 @@ export default function NewsManagement() {
         </div>
 
         {loading ? (
-          <p className="text-center text-muted-foreground">Зареждане...</p>
+          <LoadingSpinner />
         ) : news.length === 0 ? (
           <p className="text-center text-muted-foreground py-8">Няма налични новини</p>
         ) : (
           <Table>
             <TableHeader>
               <TableRow>
+                <TableHead className="w-[60px]">№</TableHead>
                 <TableHead>Заглавие</TableHead>
                 <TableHead>Тип</TableHead>
                 <TableHead>Дата</TableHead>
@@ -212,13 +215,22 @@ export default function NewsManagement() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {news.map((item) => (
+              {news.map((item, index) => (
                 <TableRow key={item.id}>
+                  <TableCell className="font-medium">{index + 1}</TableCell>
                   <TableCell className="font-medium">{item.title}</TableCell>
                   <TableCell>
-                    <Badge variant={item.news_type === "private" ? "default" : "secondary"}>
-                      {item.news_type === "private" ? "За членове" : "Обществена"}
-                    </Badge>
+                    {item.news_type === "private" ? (
+                      <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap w-fit bg-primary/10 text-primary border border-primary/20">
+                        <Lock className="w-3 h-3" />
+                        За членове
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap w-fit bg-green-100 text-green-700 border border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800">
+                        <Globe className="w-3 h-3" />
+                        Обществена
+                      </div>
+                    )}
                   </TableCell>
                   <TableCell>{new Date(item.created_at).toLocaleDateString("bg-BG")}</TableCell>
                   <TableCell>
diff --git a/mp_web_app/frontend/pages/admin/ProductsManagement.tsx b/mp_web_app/frontend/pages/admin/ProductsManagement.tsx
index 65a0303..c8a4d06 100644
--- a/mp_web_app/frontend/pages/admin/ProductsManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/ProductsManagement.tsx
@@ -14,6 +14,7 @@ import {
 } from "@/components/ui/dialog";
 import {ConfirmDialog} from "@/components/confirm-dialog";
 import {useToast} from "@/components/ui/use-toast";
+import {LoadingSpinner} from "@/components/ui/loading-spinner";
 import apiClient from "@/context/apiClient";
 import {extractApiErrorDetails} from "@/lib/errorUtils";
 
@@ -178,7 +179,7 @@ export default function ProductsManagement() {
     <AdminLayout title="Управление на продукти">
       <div className="space-y-4">
         <div className="flex justify-between items-center">
-          <h3 className="text-lg font-semibold">Списък с продукти</h3>
+          <h3 className="text-lg font-semibold">Списък с продукти ({products.length})</h3>
           <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
             <DialogTrigger asChild>
               <Button>Създай продукт</Button>
@@ -247,13 +248,14 @@ export default function ProductsManagement() {
         </div>
 
         {loading ? (
-          <p className="text-center text-muted-foreground">Зареждане...</p>
+          <LoadingSpinner />
         ) : products.length === 0 ? (
           <p className="text-center text-muted-foreground py-8">Няма налични продукти</p>
         ) : (
           <Table>
             <TableHeader>
               <TableRow>
+                <TableHead className="w-[60px]">№</TableHead>
                 <TableHead>Име</TableHead>
                 <TableHead className="text-center">Дължина (см)</TableHead>
                 <TableHead className="text-center">Ширина (см)</TableHead>
@@ -263,8 +265,9 @@ export default function ProductsManagement() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {products.map((product) => (
+              {products.map((product, index) => (
                 <TableRow key={product.id}>
+                  <TableCell className="font-medium">{index + 1}</TableCell>
                   <TableCell className="font-medium">{product.name}</TableCell>
                   <TableCell className="text-center">{product.length ?? "-"}</TableCell>
                   <TableCell className="text-center">{product.width ?? "-"}</TableCell>
diff --git a/mp_web_app/frontend/pages/admin/UserManagement.tsx b/mp_web_app/frontend/pages/admin/UserManagement.tsx
index 818816e..daf8506 100644
--- a/mp_web_app/frontend/pages/admin/UserManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/UserManagement.tsx
@@ -7,6 +7,7 @@ import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/c
 import {Switch} from "@/components/ui/switch";
 import {ConfirmDialog} from "@/components/confirm-dialog";
 import {useToast} from "@/components/ui/use-toast";
+import {LoadingSpinner} from "@/components/ui/loading-spinner";
 import apiClient from "@/context/apiClient";
 
 interface User {
@@ -124,12 +125,16 @@ export default function UserManagement() {
   return (
     <AdminLayout title="Управление на потребители">
       <div className="space-y-4">
+        <div className="flex justify-between items-center">
+          <h3 className="text-lg font-semibold">Списък с потребители ({users.length})</h3>
+        </div>
         {loading ? (
-          <p className="text-center text-muted-foreground">Зареждане...</p>
+          <LoadingSpinner />
         ) : (
           <Table>
             <TableHeader>
               <TableRow>
+                <TableHead className="w-[60px]">№</TableHead>
                 <TableHead>Име</TableHead>
                 <TableHead>Email</TableHead>
                 <TableHead>Роля</TableHead>
@@ -139,8 +144,9 @@ export default function UserManagement() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {users.map((user) => (
+              {users.map((user, index) => (
                 <TableRow key={user.id}>
+                  <TableCell className="font-medium">{index + 1}</TableCell>
                   <TableCell className="font-medium">
                     {user.first_name} {user.last_name}
                   </TableCell>
diff --git a/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx b/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
index 21f23b9..f68fa0e 100644
--- a/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
+++ b/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
@@ -2,6 +2,7 @@ import {useEffect, useState} from "react";
 import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
 import {User as UserIcon} from "lucide-react";
+import {LoadingSpinner} from "@/components/ui/loading-spinner";
 import apiClient from "@/context/apiClient";
 
 interface Member {
@@ -34,23 +35,34 @@ export default function CooperativeMembers() {
   if (loading) {
     return (
       <section className="container mx-auto px-4 py-8">
-        <p className="text-center text-muted-foreground">Зареждане...</p>
+        <LoadingSpinner />
       </section>
     );
   }
 
   return (
-    <section className="container mx-auto px-4 py-8">
+    <div className="min-h-screen">
+      {/* Hero Section */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-white to-primary/10 dark:from-gray-900 dark:via-gray-800 dark:to-primary/5 border-b border-gray-200/50">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5" />
+        <div className="container mx-auto px-4 py-12 md:py-16 relative">
+          <div className="max-w-4xl mx-auto text-center">
+            <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-primary to-gray-900 dark:from-white dark:via-primary dark:to-white bg-clip-text text-transparent animate-in fade-in slide-in-from-bottom-4 duration-1000">
+              Член кооператори
+            </h1>
+          </div>
+        </div>
+      </section>
 
-      <Card>
+      <section className="w-full px-2 xl:container xl:mx-auto xl:px-4 py-8">
+        <Card>
         <CardHeader>
           <CardTitle>Списък на член кооператорите</CardTitle>
         </CardHeader>
-        <CardContent>
+        <CardContent className="px-0">
           {members.length === 0 ? (
             <p className="text-center text-muted-foreground py-8">Няма налични данни</p>
           ) : (
-            <div className="overflow-x-auto">
               <Table>
                 <TableHeader>
                   <TableRow>
@@ -74,10 +86,10 @@ export default function CooperativeMembers() {
                   ))}
                 </TableBody>
               </Table>
-            </div>
           )}
         </CardContent>
       </Card>
-    </section>
+      </section>
+    </div>
   );
 }
diff --git a/mp_web_app/frontend/pages/lists/Proxies.tsx b/mp_web_app/frontend/pages/lists/Proxies.tsx
index fef117a..d53ea4e 100644
--- a/mp_web_app/frontend/pages/lists/Proxies.tsx
+++ b/mp_web_app/frontend/pages/lists/Proxies.tsx
@@ -1,5 +1,8 @@
 import {useEffect, useState} from "react";
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
+import {User as UserIcon} from "lucide-react";
+import {LoadingSpinner} from "@/components/ui/loading-spinner";
 import apiClient from "@/context/apiClient";
 
 interface Member {
@@ -32,37 +35,66 @@ export default function Proxies() {
     fetchProxies();
   }, []);
 
-  return (
-    <section className="container mx-auto px-4 py-8">
+  if (loading) {
+    return (
+      <section className="container mx-auto px-4 py-8">
+        <LoadingSpinner />
+      </section>
+    );
+  }
 
-      {loading ? (
-        <p className="text-center text-muted-foreground">Зареждане...</p>
-      ) : error ? (
-        <p className="text-center text-destructive">{error}</p>
-      ) : members.length === 0 ? (
-        <p className="text-center text-muted-foreground">Няма налични пълномощници</p>
-      ) : (
-        <div className="rounded-lg border bg-card shadow-sm p-2">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="w-[80px]">№</TableHead>
-                <TableHead>Име</TableHead>
-                <TableHead>Фамилия</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {members.map((member, index) => (
-                <TableRow key={index}>
-                  <TableCell className="font-medium">{index + 1}</TableCell>
-                  <TableCell>{member.first_name}</TableCell>
-                  <TableCell>{member.last_name}</TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
+  return (
+    <div className="min-h-screen">
+      {/* Hero Section */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-white to-primary/10 dark:from-gray-900 dark:via-gray-800 dark:to-primary/5 border-b border-gray-200/50">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5" />
+        <div className="container mx-auto px-4 py-12 md:py-16 relative">
+          <div className="max-w-4xl mx-auto text-center">
+            <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-primary to-gray-900 dark:from-white dark:via-primary dark:to-white bg-clip-text text-transparent animate-in fade-in slide-in-from-bottom-4 duration-1000">
+              Пълномощници
+            </h1>
+          </div>
         </div>
-      )}
-    </section>
+      </section>
+
+      <section className="w-full px-2 xl:container xl:mx-auto xl:px-4 py-8">
+        <Card>
+        <CardHeader>
+          <CardTitle>Списък на пълномощниците</CardTitle>
+        </CardHeader>
+        <CardContent className="px-0">
+          {error ? (
+            <p className="text-center text-destructive py-8">{error}</p>
+          ) : members.length === 0 ? (
+            <p className="text-center text-muted-foreground py-8">Няма налични пълномощници</p>
+          ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-[80px]">№</TableHead>
+                    <TableHead>
+                      <div className="flex items-center gap-2">
+                        <UserIcon className="w-4 h-4" />
+                        Име
+                      </div>
+                    </TableHead>
+                    <TableHead>Фамилия</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {members.map((member, index) => (
+                    <TableRow key={index}>
+                      <TableCell className="font-medium">{index + 1}</TableCell>
+                      <TableCell>{member.first_name}</TableCell>
+                      <TableCell>{member.last_name}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+          )}
+        </CardContent>
+      </Card>
+      </section>
+    </div>
   );
 }
diff --git a/mp_web_app/frontend/src/styles/global.css b/mp_web_app/frontend/src/styles/global.css
index 45e9a76..ec45872 100644
--- a/mp_web_app/frontend/src/styles/global.css
+++ b/mp_web_app/frontend/src/styles/global.css
@@ -4,31 +4,52 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
+  /* Brand Colors - Company Green & White */
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.5889 0.145 154.56);
+  --primary: oklch(0.5889 0.145 154.56);        /* Company Green */
   --primary-foreground: oklch(0.985 0 0);
+  --primary-hover: oklch(0.52 0.15 154.56);     /* Slightly darker green for hover */
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
   --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --accent: oklch(0.65 0.12 154.56);            /* Lighter green accent */
+  --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.985 0 0);
+  --success: oklch(0.65 0.15 145);              /* Success green */
+  --success-foreground: oklch(0.985 0 0);
+  --warning: oklch(0.75 0.15 85);               /* Warning amber */
+  --warning-foreground: oklch(0.145 0 0);
+  --info: oklch(0.60 0.12 220);                 /* Info blue-green */
+  --info-foreground: oklch(0.985 0 0);
+  
+  /* UI Elements */
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --ring: oklch(0.5889 0.145 154.56);           /* Focus ring matches primary */
+  
+  /* Chart Colors */
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
+  
+  /* Border Radius */
   --radius: 0.625rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  
+  /* Sidebar */
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
@@ -37,6 +58,37 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  
+  /* Typography */
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;
+  
+  /* Spacing Scale */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --spacing-3xl: 4rem;
+  
+  /* Z-index Scale */
+  --z-base: 0;
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
 }
 
 .dark {
@@ -119,6 +171,138 @@
   }
 
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
+    font-family: var(--font-sans);
+    font-feature-settings: 'rlig' 1, 'calt' 1;
+  }
+  
+  /* Typography Hierarchy */
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-semibold tracking-tight;
+    line-height: 1.25;
+  }
+  
+  h1 {
+    @apply text-4xl md:text-5xl;
+  }
+  
+  h2 {
+    @apply text-3xl md:text-4xl;
+  }
+  
+  h3 {
+    @apply text-2xl md:text-3xl;
+  }
+  
+  h4 {
+    @apply text-xl md:text-2xl;
+  }
+  
+  h5 {
+    @apply text-lg md:text-xl;
+  }
+  
+  h6 {
+    @apply text-base md:text-lg;
+  }
+  
+  p {
+    @apply leading-7;
+  }
+  
+  /* Smooth Scrolling */
+  html {
+    scroll-behavior: smooth;
+  }
+  
+  /* Focus Visible */
+  *:focus-visible {
+    @apply outline-2 outline-offset-2 outline-ring;
+  }
+  
+  /* Selection */
+  ::selection {
+    background-color: oklch(0.5889 0.145 154.56 / 0.3);
+    color: oklch(0.145 0 0);
+  }
+  
+  /* Scrollbar Styling */
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  
+  ::-webkit-scrollbar-track {
+    @apply bg-muted;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    @apply bg-muted-foreground/30 rounded-lg;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-muted-foreground/50;
+  }
+}
+
+/* Utility Classes */
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+  
+  .animate-in {
+    animation: enter 0.2s ease-out;
+  }
+  
+  .animate-out {
+    animation: exit 0.15s ease-in;
+  }
+  
+  @keyframes enter {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  
+  @keyframes exit {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+  
+  /* Backdrop Blur Utility */
+  .backdrop-blur-sm {
+    backdrop-filter: blur(4px);
+  }
+  
+  .backdrop-blur {
+    backdrop-filter: blur(8px);
+  }
+  
+  .backdrop-blur-md {
+    backdrop-filter: blur(12px);
+  }
+  
+  .backdrop-blur-lg {
+    backdrop-filter: blur(16px);
+  }
+  
+  /* Grid Pattern Background */
+  .bg-grid-pattern {
+    background-image: 
+      linear-gradient(to right, rgb(0 0 0 / 0.05) 1px, transparent 1px),
+      linear-gradient(to bottom, rgb(0 0 0 / 0.05) 1px, transparent 1px);
+    background-size: 40px 40px;
   }
 }

From d09d8d87778480014b84672d8ad771430b9fa3ca Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sat, 15 Nov 2025 01:25:00 +0200
Subject: [PATCH 03/26] feat: add Footer, Header, and GalleryModal components
 with responsive design

- Introduced `Footer` with gradient overlays and placeholder text for branding.
- Added `Header` with dynamic background effect based on scroll position.
- Implemented `GalleryModal` for image previewing with keyboard and touch navigation support.
---
 mp_web_app/frontend/components/footer.tsx     |  24 +++
 .../frontend/components/gallery-modal.tsx     | 151 ++++++++++++++++++
 mp_web_app/frontend/components/header.tsx     |  35 ++++
 3 files changed, 210 insertions(+)
 create mode 100644 mp_web_app/frontend/components/footer.tsx
 create mode 100644 mp_web_app/frontend/components/gallery-modal.tsx
 create mode 100644 mp_web_app/frontend/components/header.tsx

diff --git a/mp_web_app/frontend/components/footer.tsx b/mp_web_app/frontend/components/footer.tsx
new file mode 100644
index 0000000..3e60e46
--- /dev/null
+++ b/mp_web_app/frontend/components/footer.tsx
@@ -0,0 +1,24 @@
+export function Footer() {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="relative w-full border-t border-gray-200/50 dark:border-gray-700/50 bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-800 mt-auto overflow-hidden">
+      {/* Subtle gradient overlay */}
+      <div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-transparent to-primary/5 opacity-50" />
+      
+      {/* Top accent line */}
+      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent" />
+      
+      <div className="container mx-auto px-4 py-8 relative">
+        <div className="flex flex-col items-center justify-center gap-3 text-center">
+          <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            © {currentYear} Горовладелческа Производителна Кооперация &quot;Мурджов Пожар&quot;
+          </p>
+          <p className="text-xs text-gray-600 dark:text-gray-400">
+            Всички права запазени
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/mp_web_app/frontend/components/gallery-modal.tsx b/mp_web_app/frontend/components/gallery-modal.tsx
new file mode 100644
index 0000000..3758d97
--- /dev/null
+++ b/mp_web_app/frontend/components/gallery-modal.tsx
@@ -0,0 +1,151 @@
+import {useEffect, useRef, useState} from "react";
+import {Dialog, DialogContent, DialogTitle} from "@/components/ui/dialog";
+import {Button} from "@/components/ui/button";
+import {ChevronLeft, ChevronRight, X} from "lucide-react";
+
+interface GalleryModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  imageUrl: string;
+  imageName: string;
+  currentIndex: number;
+  totalImages: number;
+  onNext: () => void;
+  onPrevious: () => void;
+  hasNext: boolean;
+  hasPrevious: boolean;
+}
+
+export function GalleryModal({
+  isOpen,
+  onClose,
+  imageUrl,
+  imageName,
+  currentIndex,
+  totalImages,
+  onNext,
+  onPrevious,
+  hasNext,
+  hasPrevious,
+}: GalleryModalProps) {
+  const [touchStart, setTouchStart] = useState<number | null>(null);
+  const [touchEnd, setTouchEnd] = useState<number | null>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  // Minimum swipe distance (in px)
+  const minSwipeDistance = 50;
+
+  // Keyboard navigation
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "ArrowRight" && hasNext) {
+        onNext();
+      } else if (e.key === "ArrowLeft" && hasPrevious) {
+        onPrevious();
+      } else if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, hasNext, hasPrevious, onNext, onPrevious, onClose]);
+
+  // Touch gesture handlers
+  const onTouchStart = (e: React.TouchEvent) => {
+    setTouchEnd(null);
+    setTouchStart(e.targetTouches[0].clientX);
+  };
+
+  const onTouchMove = (e: React.TouchEvent) => {
+    setTouchEnd(e.targetTouches[0].clientX);
+  };
+
+  const onTouchEnd = () => {
+    if (!touchStart || !touchEnd) return;
+
+    const distance = touchStart - touchEnd;
+    const isLeftSwipe = distance > minSwipeDistance;
+    const isRightSwipe = distance < -minSwipeDistance;
+
+    if (isLeftSwipe && hasNext) {
+      onNext();
+    } else if (isRightSwipe && hasPrevious) {
+      onPrevious();
+    }
+
+    setTouchStart(null);
+    setTouchEnd(null);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent
+        className="max-w-[100vw] max-h-[100vh] w-full h-full p-0 border-0 bg-black/95 backdrop-blur-sm"
+        onPointerDownOutside={(e) => e.preventDefault()}
+      >
+        <DialogTitle className="sr-only">{imageName}</DialogTitle>
+
+        {/* Close button */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="absolute top-4 right-4 z-50 text-white hover:bg-white/20 rounded-full w-12 h-12"
+          onClick={onClose}
+          aria-label="Затвори"
+        >
+          <X className="w-6 h-6" />
+        </Button>
+
+        {/* Image counter */}
+        <div className="absolute top-4 left-1/2 -translate-x-1/2 z-50 bg-black/50 text-white px-4 py-2 rounded-full text-sm font-medium">
+          {currentIndex} / {totalImages}
+        </div>
+
+        {/* Previous button */}
+        {hasPrevious && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute left-4 top-1/2 -translate-y-1/2 z-50 text-white hover:bg-white/20 rounded-full w-12 h-12"
+            onClick={onPrevious}
+            aria-label="Предишна снимка"
+          >
+            <ChevronLeft className="w-8 h-8" />
+          </Button>
+        )}
+
+        {/* Next button */}
+        {hasNext && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute right-4 top-1/2 -translate-y-1/2 z-50 text-white hover:bg-white/20 rounded-full w-12 h-12"
+            onClick={onNext}
+            aria-label="Следваща снимка"
+          >
+            <ChevronRight className="w-8 h-8" />
+          </Button>
+        )}
+
+        {/* Image container with touch gestures */}
+        <div
+          className="relative w-full h-full flex items-center justify-center p-4"
+          onTouchStart={onTouchStart}
+          onTouchMove={onTouchMove}
+          onTouchEnd={onTouchEnd}
+        >
+          <img
+            ref={imageRef}
+            src={imageUrl}
+            alt={imageName}
+            className="max-w-full max-h-full w-auto h-auto object-contain select-none transition-opacity duration-300"
+            draggable={false}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/mp_web_app/frontend/components/header.tsx b/mp_web_app/frontend/components/header.tsx
new file mode 100644
index 0000000..ae9bb8f
--- /dev/null
+++ b/mp_web_app/frontend/components/header.tsx
@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import { Logo } from "@/components/logo";
+
+export function Header() {
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 20);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <header
+      className={`
+        sticky top-0 z-50 w-full
+        transition-all duration-500
+        ${
+          scrolled
+            ? "bg-white/95 dark:bg-gray-900/95 backdrop-blur-xl shadow-xl border-b border-gray-200/50 dark:border-gray-700/50"
+            : "bg-gradient-to-b from-white/90 to-white/70 dark:from-gray-900/90 dark:to-gray-900/70 backdrop-blur-lg shadow-lg"
+        }
+      `}
+    >
+      <div className="relative">
+        {/* Subtle gradient overlay */}
+        <div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-transparent to-primary/5 opacity-50" />
+        <Logo />
+      </div>
+    </header>
+  );
+}

From 97c03516b2dbdf537f44dc83f2d8751dbc63c46d Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sat, 15 Nov 2025 01:26:44 +0200
Subject: [PATCH 04/26] chore: remove unused Badge import and update API base
 URL to production

---
 mp_web_app/frontend/app-config.ts                  | 4 ++--
 mp_web_app/frontend/pages/admin/NewsManagement.tsx | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/mp_web_app/frontend/app-config.ts b/mp_web_app/frontend/app-config.ts
index 58fd49e..57e38b7 100644
--- a/mp_web_app/frontend/app-config.ts
+++ b/mp_web_app/frontend/app-config.ts
@@ -3,5 +3,5 @@
 
 // For production, use your custom API domain.
 // Make sure the subdomain matches the one in your cdk/app.py
-// export const API_BASE_URL = "https://api.ivan-partsunev.com/api/";
-export const API_BASE_URL = "http://127.0.0.1:8000/api/";
+export const API_BASE_URL = "https://api.ivan-partsunev.com/api/";
+// export const API_BASE_URL = "http://127.0.0.1:8000/api/";
diff --git a/mp_web_app/frontend/pages/admin/NewsManagement.tsx b/mp_web_app/frontend/pages/admin/NewsManagement.tsx
index 1c397ed..f0244f1 100644
--- a/mp_web_app/frontend/pages/admin/NewsManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/NewsManagement.tsx
@@ -13,7 +13,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import {Badge} from "@/components/ui/badge";
 import {ConfirmDialog} from "@/components/confirm-dialog";
 import {useToast} from "@/components/ui/use-toast";
 import {LoadingSpinner} from "@/components/ui/loading-spinner";

From 07db8d85156265d2a65b7a2b288310a2620d0878 Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sat, 15 Nov 2025 01:55:50 +0200
Subject: [PATCH 05/26] feat: enhance mobile navigation, gallery modal, and
 image loading

- Improved `Navigation` button styles for better mobile interactions.
- Updated `GalleryModal` with adjusted layouts, hidden buttons on mobile, and enhanced close button styling.
- Introduced lazy loading for gallery images using Intersection Observer to optimize performance.
- Refined gallery grid with responsive masonry layout and image hover effects.
- Temporarily switched `API_BASE_URL` to the local development environment for testing.
---
 mp_web_app/frontend/app-config.ts             |   4 +-
 .../frontend/components/gallery-modal.tsx     |  37 ++---
 mp_web_app/frontend/pages/Gallery.tsx         | 140 +++++++++++-------
 mp_web_app/frontend/pages/Navigation.tsx      |   6 +-
 4 files changed, 114 insertions(+), 73 deletions(-)

diff --git a/mp_web_app/frontend/app-config.ts b/mp_web_app/frontend/app-config.ts
index 57e38b7..58fd49e 100644
--- a/mp_web_app/frontend/app-config.ts
+++ b/mp_web_app/frontend/app-config.ts
@@ -3,5 +3,5 @@
 
 // For production, use your custom API domain.
 // Make sure the subdomain matches the one in your cdk/app.py
-export const API_BASE_URL = "https://api.ivan-partsunev.com/api/";
-// export const API_BASE_URL = "http://127.0.0.1:8000/api/";
+// export const API_BASE_URL = "https://api.ivan-partsunev.com/api/";
+export const API_BASE_URL = "http://127.0.0.1:8000/api/";
diff --git a/mp_web_app/frontend/components/gallery-modal.tsx b/mp_web_app/frontend/components/gallery-modal.tsx
index 3758d97..908c5cd 100644
--- a/mp_web_app/frontend/components/gallery-modal.tsx
+++ b/mp_web_app/frontend/components/gallery-modal.tsx
@@ -83,8 +83,9 @@ export function GalleryModal({
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent
-        className="max-w-[100vw] max-h-[100vh] w-full h-full p-0 border-0 bg-black/95 backdrop-blur-sm"
+        className="!max-w-[100vw] !w-[100vw] h-[100vh] p-0 border-0 bg-white/40 dark:bg-gray-900/40 backdrop-blur-md md:!max-w-[85vw] md:!w-[85vw] md:h-[90vh]"
         onPointerDownOutside={(e) => e.preventDefault()}
+        showCloseButton={false}
       >
         <DialogTitle className="sr-only">{imageName}</DialogTitle>
 
@@ -92,24 +93,24 @@ export function GalleryModal({
         <Button
           variant="ghost"
           size="icon"
-          className="absolute top-4 right-4 z-50 text-white hover:bg-white/20 rounded-full w-12 h-12"
+          className="absolute top-2 right-2 z-50 text-foreground hover:bg-accent active:bg-accent/80 active:scale-[0.98] transition-all duration-150 rounded-full w-9 h-9 p-1.5"
           onClick={onClose}
           aria-label="Затвори"
         >
-          <X className="w-6 h-6" />
+          <X className="w-5 h-5" />
         </Button>
 
-        {/* Image counter */}
-        <div className="absolute top-4 left-1/2 -translate-x-1/2 z-50 bg-black/50 text-white px-4 py-2 rounded-full text-sm font-medium">
+        {/* Image counter - hidden on mobile */}
+        <div className="hidden md:block absolute top-4 left-1/2 -translate-x-1/2 z-50 bg-primary/90 text-white px-4 py-2 rounded-full text-sm font-medium">
           {currentIndex} / {totalImages}
         </div>
 
-        {/* Previous button */}
+        {/* Previous button - hidden on mobile, use swipe instead */}
         {hasPrevious && (
           <Button
             variant="ghost"
             size="icon"
-            className="absolute left-4 top-1/2 -translate-y-1/2 z-50 text-white hover:bg-white/20 rounded-full w-12 h-12"
+            className="hidden md:block absolute left-4 top-1/2 -translate-y-1/2 z-50 text-foreground hover:bg-accent rounded-full w-14 h-14"
             onClick={onPrevious}
             aria-label="Предишна снимка"
           >
@@ -117,12 +118,12 @@ export function GalleryModal({
           </Button>
         )}
 
-        {/* Next button */}
+        {/* Next button - hidden on mobile, use swipe instead */}
         {hasNext && (
           <Button
             variant="ghost"
             size="icon"
-            className="absolute right-4 top-1/2 -translate-y-1/2 z-50 text-white hover:bg-white/20 rounded-full w-12 h-12"
+            className="hidden md:block absolute right-4 top-1/2 -translate-y-1/2 z-50 text-foreground hover:bg-accent rounded-full w-14 h-14"
             onClick={onNext}
             aria-label="Следваща снимка"
           >
@@ -132,18 +133,20 @@ export function GalleryModal({
 
         {/* Image container with touch gestures */}
         <div
-          className="relative w-full h-full flex items-center justify-center p-4"
+          className="relative w-full h-full flex items-center justify-center overflow-hidden p-0 md:p-16"
           onTouchStart={onTouchStart}
           onTouchMove={onTouchMove}
           onTouchEnd={onTouchEnd}
         >
-          <img
-            ref={imageRef}
-            src={imageUrl}
-            alt={imageName}
-            className="max-w-full max-h-full w-auto h-auto object-contain select-none transition-opacity duration-300"
-            draggable={false}
-          />
+          <div className="relative w-full h-full flex items-center justify-center">
+            <img
+              ref={imageRef}
+              src={imageUrl}
+              alt={imageName}
+              className="max-w-full max-h-full w-auto h-auto object-contain select-none transition-opacity duration-300"
+              draggable={false}
+            />
+          </div>
         </div>
       </DialogContent>
     </Dialog>
diff --git a/mp_web_app/frontend/pages/Gallery.tsx b/mp_web_app/frontend/pages/Gallery.tsx
index 4a3759b..b9bc4cd 100644
--- a/mp_web_app/frontend/pages/Gallery.tsx
+++ b/mp_web_app/frontend/pages/Gallery.tsx
@@ -1,7 +1,8 @@
-import {useEffect, useState} from "react";
-import {GalleryImageCard} from "@/components/gallery-image-card";
+import {useEffect, useState, useRef} from "react";
 import {GalleryModal} from "@/components/gallery-modal";
 import {API_BASE_URL} from "@/app-config";
+import {LoadingSpinner} from "@/components/ui/loading-spinner";
+import {ImageIcon} from "lucide-react";
 
 interface GalleryImage {
   id: string;
@@ -10,7 +11,7 @@ interface GalleryImage {
   s3_bucket: string;
   uploaded_by: string;
   created_at: string;
-  url?: string;  // CloudFront or S3 presigned URL
+  url?: string;
 }
 
 export default function Gallery() {
@@ -18,12 +19,13 @@ export default function Gallery() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [selectedImageIndex, setSelectedImageIndex] = useState<number | null>(null);
+  const [loadedImages, setLoadedImages] = useState<Set<string>>(new Set());
+  const observerRef = useRef<IntersectionObserver | null>(null);
 
   useEffect(() => {
     const fetchGallery = async () => {
       try {
         setLoading(true);
-        // Fetch gallery images with URLs included
         const response = await fetch(`${API_BASE_URL}gallery/list`);
         if (!response.ok) {
           throw new Error("Failed to fetch gallery");
@@ -40,28 +42,34 @@ export default function Gallery() {
     fetchGallery();
   }, []);
 
-  const handleImageClick = (index: number) => {
-    setSelectedImageIndex(index);
-  };
-
-  const handleCloseModal = () => {
-    setSelectedImageIndex(null);
-  };
+  // Lazy loading with Intersection Observer
+  useEffect(() => {
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const img = entry.target as HTMLImageElement;
+            const src = img.dataset.src;
+            if (src && !loadedImages.has(src)) {
+              img.src = src;
+              setLoadedImages((prev) => new Set(prev).add(src));
+              observerRef.current?.unobserve(img);
+            }
+          }
+        });
+      },
+      {rootMargin: "50px"}
+    );
 
-  const handleNextImage = () => {
-    if (selectedImageIndex !== null && selectedImageIndex < images.length - 1) {
-      setSelectedImageIndex(selectedImageIndex + 1);
-    }
-  };
+    return () => observerRef.current?.disconnect();
+  }, [loadedImages]);
 
-  const handlePreviousImage = () => {
-    if (selectedImageIndex !== null && selectedImageIndex > 0) {
-      setSelectedImageIndex(selectedImageIndex - 1);
-    }
+  const handleImageClick = (index: number) => {
+    setSelectedImageIndex(index);
   };
 
   return (
-    <div className="min-h-screen">
+    <div className="min-h-screen bg-gradient-to-b from-background via-background to-primary/5">
       {/* Hero Section */}
       <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-white to-primary/10 dark:from-gray-900 dark:via-gray-800 dark:to-primary/5 border-b border-gray-200/50">
         <div className="absolute inset-0 bg-grid-pattern opacity-5" />
@@ -74,52 +82,80 @@ export default function Gallery() {
         </div>
       </section>
 
-      <section className="container mx-auto px-4 py-8">
+      <section className="container mx-auto px-4 py-12">
         {loading && (
-          <div className="text-center py-8">
-            <p className="text-muted-foreground">Зареждане на галерията...</p>
+          <div className="flex flex-col items-center justify-center py-20">
+            <LoadingSpinner />
+            <p className="text-muted-foreground mt-4">Зареждане на галерията...</p>
           </div>
         )}
 
         {error && (
-          <div className="text-center py-8">
-            <p className="text-destructive">{error}</p>
+          <div className="text-center py-20">
+            <p className="text-destructive text-lg">{error}</p>
           </div>
         )}
 
         {!loading && !error && images.length === 0 && (
-          <div className="text-center py-8">
-            <p className="text-muted-foreground">Няма налични снимки</p>
+          <div className="text-center py-20">
+            <p className="text-muted-foreground text-lg">Няма налични снимки</p>
           </div>
         )}
 
         {!loading && !error && images.length > 0 && (
           <>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 auto-rows-[200px] gap-4">
-            {images.map((image, index) =>
-              image.url ? (
-                <GalleryImageCard
-                  key={image.id}
-                  imageUrl={image.url}
-                  imageName={image.image_name}
-                  onClick={() => handleImageClick(index)}
-                />
-              ) : null
-            )}
-          </div>
+            {/* Masonry Grid */}
+            <div className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-4 space-y-4">
+              {images.map((image, index) =>
+                image.url ? (
+                  <div
+                    key={image.id}
+                    className="break-inside-avoid group cursor-pointer"
+                    onClick={() => handleImageClick(index)}
+                  >
+                    <div className="relative overflow-hidden rounded-xl bg-muted shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-[1.02]">
+                      <img
+                        data-src={image.url}
+                        alt={image.image_name}
+                        className="w-full h-auto object-cover transition-all duration-500 group-hover:scale-110"
+                        loading="lazy"
+                        ref={(el) => {
+                          if (el && observerRef.current) {
+                            observerRef.current.observe(el);
+                          }
+                        }}
+                      />
+                      <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/0 to-black/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        <div className="absolute bottom-0 left-0 right-0 p-4">
+                          <p className="text-white font-medium text-sm truncate">{image.image_name}</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ) : null
+              )}
+            </div>
 
-          <GalleryModal
-            isOpen={selectedImageIndex !== null}
-            onClose={handleCloseModal}
-            imageUrl={selectedImageIndex !== null ? images[selectedImageIndex]?.url || "" : ""}
-            imageName={selectedImageIndex !== null ? images[selectedImageIndex]?.image_name || "" : ""}
-            currentIndex={selectedImageIndex !== null ? selectedImageIndex + 1 : 0}
-            totalImages={images.length}
-            onNext={handleNextImage}
-            onPrevious={handlePreviousImage}
-            hasNext={selectedImageIndex !== null && selectedImageIndex < images.length - 1}
-            hasPrevious={selectedImageIndex !== null && selectedImageIndex > 0}
-          />
+            <GalleryModal
+              isOpen={selectedImageIndex !== null}
+              onClose={() => setSelectedImageIndex(null)}
+              imageUrl={selectedImageIndex !== null ? images[selectedImageIndex]?.url || "" : ""}
+              imageName={selectedImageIndex !== null ? images[selectedImageIndex]?.image_name || "" : ""}
+              currentIndex={selectedImageIndex !== null ? selectedImageIndex + 1 : 0}
+              totalImages={images.length}
+              onNext={() => {
+                if (selectedImageIndex !== null && selectedImageIndex < images.length - 1) {
+                  setSelectedImageIndex(selectedImageIndex + 1);
+                }
+              }}
+              onPrevious={() => {
+                if (selectedImageIndex !== null && selectedImageIndex > 0) {
+                  setSelectedImageIndex(selectedImageIndex - 1);
+                }
+              }}
+              hasNext={selectedImageIndex !== null && selectedImageIndex < images.length - 1}
+              hasPrevious={selectedImageIndex !== null && selectedImageIndex > 0}
+            />
           </>
         )}
       </section>
diff --git a/mp_web_app/frontend/pages/Navigation.tsx b/mp_web_app/frontend/pages/Navigation.tsx
index 797a41a..968cd94 100644
--- a/mp_web_app/frontend/pages/Navigation.tsx
+++ b/mp_web_app/frontend/pages/Navigation.tsx
@@ -191,7 +191,9 @@ export function Navigation() {
         <span className="text-xl font-bold text-foreground">Меню</span>
         <Button
           onClick={() => setMobileMenuOpen(false)}
+          variant="ghost"
           size="icon"
+          className="text-foreground hover:bg-accent active:bg-accent/80 active:scale-[0.98] transition-all duration-150 rounded-full w-9 h-9 p-1.5"
           aria-label="Затвори менюто"
         >
           <CloseIcon className="w-5 h-5" />
@@ -524,10 +526,10 @@ export function Navigation() {
 
       {/* Hamburger Icon for Mobile */}
       {isMobile && (
-        <div className="sticky top-0 z-40 flex items-center px-2 py-2 w-full bg-background/95 backdrop-blur-md shadow-sm border-t-2 border-transparent" style={{borderImageSource: 'linear-gradient(to right, oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56 / 0.8))', borderImageSlice: 1}}>
+        <div className="sticky top-0 z-40 flex items-center px-2 py-1.5 w-full bg-background/95 backdrop-blur-md shadow-sm border-t-2 border-transparent" style={{borderImageSource: 'linear-gradient(to right, oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56 / 0.8))', borderImageSlice: 1}}>
           <Button
             onClick={() => setMobileMenuOpen(true)}
-            className="w-full flex items-center justify-center py-2 h-[35px]"
+            className="w-full flex items-center justify-center py-1.5 h-[30px]"
             aria-label="Отвори менюто"
             disabled={isNavigating}
           >

From b77902dfa31b384a2f5f56a041e582423e74f5f1 Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sat, 15 Nov 2025 01:56:48 +0200
Subject: [PATCH 06/26] chore: remove unused ImageIcon import from Gallery page

---
 mp_web_app/frontend/pages/Gallery.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/mp_web_app/frontend/pages/Gallery.tsx b/mp_web_app/frontend/pages/Gallery.tsx
index b9bc4cd..2fd6e6a 100644
--- a/mp_web_app/frontend/pages/Gallery.tsx
+++ b/mp_web_app/frontend/pages/Gallery.tsx
@@ -2,7 +2,6 @@ import {useEffect, useState, useRef} from "react";
 import {GalleryModal} from "@/components/gallery-modal";
 import {API_BASE_URL} from "@/app-config";
 import {LoadingSpinner} from "@/components/ui/loading-spinner";
-import {ImageIcon} from "lucide-react";
 
 interface GalleryImage {
   id: string;

From dca7f5bd0f1037196e1988012c3f476893045689 Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sat, 15 Nov 2025 02:14:38 +0200
Subject: [PATCH 07/26] feat: refine GalleryModal styles for better
 responsiveness and visuals

- Removed `onPointerDownOutside` for improved gesture handling.
- Enhanced button styles with shadows, focus states, and better alignment.
- Adjusted layout paddings and image counter background for improved clarity.
- Updated navigation buttons for consistent hover and active effects.
---
 mp_web_app/frontend/components/gallery-modal.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/mp_web_app/frontend/components/gallery-modal.tsx b/mp_web_app/frontend/components/gallery-modal.tsx
index 908c5cd..7bd98ee 100644
--- a/mp_web_app/frontend/components/gallery-modal.tsx
+++ b/mp_web_app/frontend/components/gallery-modal.tsx
@@ -84,7 +84,6 @@ export function GalleryModal({
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent
         className="!max-w-[100vw] !w-[100vw] h-[100vh] p-0 border-0 bg-white/40 dark:bg-gray-900/40 backdrop-blur-md md:!max-w-[85vw] md:!w-[85vw] md:h-[90vh]"
-        onPointerDownOutside={(e) => e.preventDefault()}
         showCloseButton={false}
       >
         <DialogTitle className="sr-only">{imageName}</DialogTitle>
@@ -93,7 +92,7 @@ export function GalleryModal({
         <Button
           variant="ghost"
           size="icon"
-          className="absolute top-2 right-2 z-50 text-foreground hover:bg-accent active:bg-accent/80 active:scale-[0.98] transition-all duration-150 rounded-full w-9 h-9 p-1.5"
+          className="absolute top-2 right-2 z-50 text-foreground hover:shadow-lg active:shadow-xl active:scale-[0.98] transition-all duration-150 rounded-full w-9 h-9 p-1.5 flex items-center justify-center focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 !outline-none !ring-0"
           onClick={onClose}
           aria-label="Затвори"
         >
@@ -101,7 +100,7 @@ export function GalleryModal({
         </Button>
 
         {/* Image counter - hidden on mobile */}
-        <div className="hidden md:block absolute top-4 left-1/2 -translate-x-1/2 z-50 bg-primary/90 text-white px-4 py-2 rounded-full text-sm font-medium">
+        <div className="hidden md:block absolute top-4 left-1/2 -translate-x-1/2 z-50 bg-white/70 text-foreground px-4 py-2 rounded-full text-sm font-medium shadow-lg">
           {currentIndex} / {totalImages}
         </div>
 
@@ -110,7 +109,7 @@ export function GalleryModal({
           <Button
             variant="ghost"
             size="icon"
-            className="hidden md:block absolute left-4 top-1/2 -translate-y-1/2 z-50 text-foreground hover:bg-accent rounded-full w-14 h-14"
+            className="hidden md:flex absolute left-4 top-1/2 -translate-y-1/2 z-50 text-foreground hover:shadow-lg active:shadow-xl active:scale-[0.98] transition-all duration-150 rounded-full w-14 h-14 items-center justify-center"
             onClick={onPrevious}
             aria-label="Предишна снимка"
           >
@@ -123,7 +122,7 @@ export function GalleryModal({
           <Button
             variant="ghost"
             size="icon"
-            className="hidden md:block absolute right-4 top-1/2 -translate-y-1/2 z-50 text-foreground hover:bg-accent rounded-full w-14 h-14"
+            className="hidden md:flex absolute right-4 top-1/2 -translate-y-1/2 z-50 text-foreground hover:shadow-lg active:shadow-xl active:scale-[0.98] transition-all duration-150 rounded-full w-14 h-14 items-center justify-center"
             onClick={onNext}
             aria-label="Следваща снимка"
           >
@@ -133,7 +132,7 @@ export function GalleryModal({
 
         {/* Image container with touch gestures */}
         <div
-          className="relative w-full h-full flex items-center justify-center overflow-hidden p-0 md:p-16"
+          className="relative w-full h-full flex items-center justify-center overflow-hidden p-0 md:px-24 md:py-16"
           onTouchStart={onTouchStart}
           onTouchMove={onTouchMove}
           onTouchEnd={onTouchEnd}

From ae7bb51b1cc4f1c746d99e9a5ce76ff86833fbef Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sat, 15 Nov 2025 13:53:45 +0200
Subject: [PATCH 08/26] feat: replace manual API calls with React Query hooks
 and introduce caching

- Replaced manual `useEffect` data fetching with React Query hooks across multiple components (`ProductsTable`, `FilesTable`, `CooperativeMembers`, `Proxies`, `Board`, `Control`, `Home`).
- Centralized error handling and loading states for improved code maintainability.
- Added `CacheControlMiddleware` in the backend for configurable cache policies, optimizing API responses.
- Integrated `QueryClientProvider` for cache management in the frontend.
- Updated `GalleryModal` and UI components with styling improvements for better accessibility and responsiveness.
- Enhanced `package.json` with `@tanstack/react-query` dependency and synced lock files.
---
 mp_web_app/backend/api.py                     |  4 ++
 .../backend/middleware/cache_headers.py       | 55 +++++++++++++++
 .../frontend/components/files-table.tsx       | 49 ++-----------
 .../frontend/components/gallery-modal.tsx     |  2 +-
 .../frontend/components/products-table.tsx    | 39 ++---------
 mp_web_app/frontend/components/ui/dialog.tsx  | 27 ++++----
 mp_web_app/frontend/components/ui/select.tsx  |  2 +-
 mp_web_app/frontend/package.json              |  1 +
 mp_web_app/frontend/pages/Home.tsx            | 69 +++----------------
 mp_web_app/frontend/pages/about-us/Board.tsx  | 30 +-------
 .../frontend/pages/about-us/Control.tsx       | 30 +-------
 .../pages/lists/CooperativeMembers.tsx        | 29 +-------
 mp_web_app/frontend/pages/lists/Proxies.tsx   | 33 +--------
 mp_web_app/frontend/pnpm-lock.yaml            | 18 +++++
 mp_web_app/frontend/src/App.tsx               | 12 ++--
 15 files changed, 134 insertions(+), 266 deletions(-)
 create mode 100644 mp_web_app/backend/middleware/cache_headers.py

diff --git a/mp_web_app/backend/api.py b/mp_web_app/backend/api.py
index 0259e8c..e2f8493 100644
--- a/mp_web_app/backend/api.py
+++ b/mp_web_app/backend/api.py
@@ -12,11 +12,15 @@
 from news.routers import news_router
 from products.routers import product_router
 from users.routers import user_router
+from middleware.cache_headers import CacheControlMiddleware
 
 FRONTEND_URL = os.environ.get("FRONTEND_BASE_URL", FRONTEND_BASE_URL)
 
 app = FastAPI(docs_url="/api/docs", redoc_url="/api/redoc", openapi_url="/api/openapi.json")
 
+# Add cache control middleware (before CORS)
+app.add_middleware(CacheControlMiddleware)
+
 app.add_middleware(
   CORSMiddleware,
   allow_origins=[FRONTEND_URL],
diff --git a/mp_web_app/backend/middleware/cache_headers.py b/mp_web_app/backend/middleware/cache_headers.py
new file mode 100644
index 0000000..559b619
--- /dev/null
+++ b/mp_web_app/backend/middleware/cache_headers.py
@@ -0,0 +1,55 @@
+# middleware/cache_headers.py
+"""
+Middleware to add cache control headers to responses.
+"""
+from fastapi import Request, Response
+from starlette.middleware.base import BaseHTTPMiddleware
+from typing import Callable
+
+
+class CacheControlMiddleware(BaseHTTPMiddleware):
+    """
+    Middleware that adds Cache-Control headers based on the endpoint.
+    """
+    
+    # Define cache policies for different endpoint patterns
+    CACHE_POLICIES = {
+        # Long cache (1 hour) - rarely changing data
+        "products/list": "public, max-age=3600, stale-while-revalidate=7200",
+        "gallery/list": "public, max-age=3600, stale-while-revalidate=7200",
+        "users/board": "public, max-age=3600, stale-while-revalidate=7200",
+        "users/control": "public, max-age=3600, stale-while-revalidate=7200",
+        "members/list": "public, max-age=3600, stale-while-revalidate=7200",
+        "files/list": "public, max-age=3600, stale-while-revalidate=7200",
+        
+        # Medium cache (10 minutes) - occasionally changing data
+        "news/list": "public, max-age=600, stale-while-revalidate=1200",
+        
+        # Short cache (5 minutes) - admin panel data
+        "users/list": "private, max-age=300, stale-while-revalidate=600",
+    }
+    
+    async def dispatch(self, request: Request, call_next: Callable) -> Response:
+        response = await call_next(request)
+        
+        # Only cache GET requests with successful responses
+        if request.method == "GET" and 200 <= response.status_code < 300:
+            path = request.url.path.lstrip("/api/")
+            
+            # Check if this path has a cache policy
+            for pattern, cache_control in self.CACHE_POLICIES.items():
+                if pattern in path:
+                    response.headers["Cache-Control"] = cache_control
+                    # Vary by Authorization to cache authenticated vs public separately
+                    response.headers["Vary"] = "Authorization"
+                    break
+            else:
+                # Default: no cache for unmatched GET endpoints
+                response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
+        else:
+            # Never cache mutations or errors
+            response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
+            response.headers["Pragma"] = "no-cache"
+            response.headers["Expires"] = "0"
+        
+        return response
diff --git a/mp_web_app/frontend/components/files-table.tsx b/mp_web_app/frontend/components/files-table.tsx
index 39e922f..92c604d 100644
--- a/mp_web_app/frontend/components/files-table.tsx
+++ b/mp_web_app/frontend/components/files-table.tsx
@@ -13,23 +13,7 @@ import {
   PaginationPrevious,
 } from "@/components/ui/pagination";
 import apiClient from "@/context/apiClient";
-
-type FileType =
-  | "governing_documents"
-  | "forms"
-  | "minutes"
-  | "transcripts"
-  | "accounting"
-  | "private_documents"
-  | "others";
-
-type FileMetadata = {
-  id?: string | null;
-  file_name?: string | null;
-  file_type: FileType;
-  uploaded_by?: string | null;
-  created_at?: string | null;
-};
+import {useFiles, type FileType, type FileMetadata} from "@/hooks/useFiles";
 
 type FilesTableProps = {
   fileType: FileType;
@@ -39,31 +23,12 @@ type FilesTableProps = {
 const PAGE_SIZE = 25;
 
 export function FilesTable({fileType, title = "Документи"}: FilesTableProps) {
-  const [data, setData] = React.useState<FileMetadata[]>([]);
-  const [loading, setLoading] = React.useState<boolean>(false);
-  const [error, setError] = React.useState<string | null>(null);
+  // Use React Query hook for caching (1 hour)
+  const {data = [], isLoading: loading, error: queryError} = useFiles(fileType);
   const [page, setPage] = React.useState<number>(1);
-
-  const load = React.useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const res = await apiClient.get<FileMetadata[]>(`files/list`, {
-        params: {file_type: fileType},
-        withCredentials: true,
-      });
-      setData(res.data ?? []);
-      setPage(1); // reset page on type change/fresh load
-    } catch (e: any) {
-      setError(e?.response?.data?.detail ?? "Възникна грешка при зареждане.");
-    } finally {
-      setLoading(false);
-    }
-  }, [fileType]);
-
-  React.useEffect(() => {
-    load();
-  }, [load]);
+  
+  // Convert error to string for display
+  const error = queryError ? "Възникна грешка при зареждане." : null;
 
   // Pagination helpers
   const total = data.length;
@@ -174,7 +139,7 @@ export function FilesTable({fileType, title = "Документи"}: FilesTableP
               )}
               {!loading &&
                 !error &&
-                pageItems.map((file, idx) => (
+                pageItems.map((file: FileMetadata, idx: number) => (
                   <TableRow key={file.id ?? `${file.file_name}-${startIdx + idx}`}>
                     <TableCell className="font-medium py-2">{startIdx + idx + 1}</TableCell>
                     <TableCell className="py-2">{file.file_name}</TableCell>
diff --git a/mp_web_app/frontend/components/gallery-modal.tsx b/mp_web_app/frontend/components/gallery-modal.tsx
index 7bd98ee..a285c6a 100644
--- a/mp_web_app/frontend/components/gallery-modal.tsx
+++ b/mp_web_app/frontend/components/gallery-modal.tsx
@@ -83,7 +83,7 @@ export function GalleryModal({
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent
-        className="!max-w-[100vw] !w-[100vw] h-[100vh] p-0 border-0 bg-white/40 dark:bg-gray-900/40 backdrop-blur-md md:!max-w-[85vw] md:!w-[85vw] md:h-[90vh]"
+        className="!max-w-[100vw] !w-[100vw] h-[90vh] p-0 border-0 bg-white/40 dark:bg-gray-900/40 backdrop-blur-md md:!max-w-[85vw] md:!w-[85vw] md:h-[90vh]"
         showCloseButton={false}
       >
         <DialogTitle className="sr-only">{imageName}</DialogTitle>
diff --git a/mp_web_app/frontend/components/products-table.tsx b/mp_web_app/frontend/components/products-table.tsx
index 4e116ee..3148e66 100644
--- a/mp_web_app/frontend/components/products-table.tsx
+++ b/mp_web_app/frontend/components/products-table.tsx
@@ -11,16 +11,7 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "@/components/ui/pagination";
-import apiClient from "@/context/apiClient";
-
-type Product = {
-  id?: string | null;
-  name: string;
-  width?: number | null;
-  height?: number | null;
-  length?: number | null;
-  description?: string | null;
-};
+import {useProducts, type Product} from "@/hooks/useProducts";
 
 type ProductsTableProps = {
   title?: string;
@@ -29,28 +20,12 @@ type ProductsTableProps = {
 const PAGE_SIZE = 25;
 
 export function ProductsTable({title = "Продукти"}: ProductsTableProps) {
-  const [data, setData] = React.useState<Product[]>([]);
-  const [loading, setLoading] = React.useState<boolean>(false);
-  const [error, setError] = React.useState<string | null>(null);
+  // Use React Query hook for caching (1 hour)
+  const {data = [], isLoading: loading, error: queryError} = useProducts();
   const [page, setPage] = React.useState<number>(1);
-
-  const load = React.useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const res = await apiClient.get<Product[]>(`products/list`);
-      setData(res.data ?? []);
-      setPage(1);
-    } catch (e: any) {
-      setError(e?.response?.data?.detail ?? "Възникна грешка при зареждане.");
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  React.useEffect(() => {
-    load();
-  }, [load]);
+  
+  // Convert error to string for display
+  const error = queryError ? "Възникна грешка при зареждане." : null;
 
   // Pagination helpers
   const total = data.length;
@@ -108,7 +83,7 @@ export function ProductsTable({title = "Продукти"}: ProductsTableProps)
               )}
               {!loading &&
                 !error &&
-                pageItems.map((product, idx) => (
+                pageItems.map((product: Product, idx: number) => (
                   <TableRow key={product.id ?? `product-${startIdx + idx}`}>
                     <TableCell className="font-medium py-2">{startIdx + idx + 1}</TableCell>
                     <TableCell className="py-2 font-medium">{product.name}</TableCell>
diff --git a/mp_web_app/frontend/components/ui/dialog.tsx b/mp_web_app/frontend/components/ui/dialog.tsx
index eadcb7d..db2b772 100644
--- a/mp_web_app/frontend/components/ui/dialog.tsx
+++ b/mp_web_app/frontend/components/ui/dialog.tsx
@@ -22,18 +22,21 @@ function DialogClose({...props}: React.ComponentProps<typeof DialogPrimitive.Clo
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
-function DialogOverlay({className, ...props}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
-        className
-      )}
-      {...props}
-    />
-  );
-}
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({className, ...props}, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    data-slot="dialog-overlay"
+    className={cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 function DialogContent({
   className,
diff --git a/mp_web_app/frontend/components/ui/select.tsx b/mp_web_app/frontend/components/ui/select.tsx
index 624be21..3fa92ea 100644
--- a/mp_web_app/frontend/components/ui/select.tsx
+++ b/mp_web_app/frontend/components/ui/select.tsx
@@ -54,7 +54,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-white dark:bg-gray-800 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className
diff --git a/mp_web_app/frontend/package.json b/mp_web_app/frontend/package.json
index e612978..1a6a52e 100644
--- a/mp_web_app/frontend/package.json
+++ b/mp_web_app/frontend/package.json
@@ -25,6 +25,7 @@
     "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-toast": "^1.2.4",
+    "@tanstack/react-query": "^5.90.9",
     "axios": "^1.7.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/mp_web_app/frontend/pages/Home.tsx b/mp_web_app/frontend/pages/Home.tsx
index 85eef4b..2204dd2 100644
--- a/mp_web_app/frontend/pages/Home.tsx
+++ b/mp_web_app/frontend/pages/Home.tsx
@@ -1,9 +1,6 @@
-import {useEffect, useState} from "react";
-import {useLocation} from "react-router-dom";
+import {useState} from "react";
 import {NewsCard} from "@/components/news-card";
-import apiClient from "@/context/apiClient";
-import {getAccessToken, setAccessToken} from "@/context/tokenStore";
-import {isJwtExpired} from "@/context/jwt";
+import {useNews} from "@/hooks/useNews";
 import {
   Pagination,
   PaginationContent,
@@ -26,49 +23,12 @@ interface News {
 const PAGE_SIZE = 6;
 
 export default function Home() {
-  const location = useLocation();
-  const [news, setNews] = useState<News[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  // Use React Query hook for caching
+  const {data: news = [], isLoading: loading, error: queryError} = useNews();
   const [page, setPage] = useState(1);
-
-  useEffect(() => {
-    const fetchNews = async () => {
-      try {
-        setLoading(true);
-        setError(null);
-
-        // Check if token exists and is expired
-        const token = getAccessToken();
-        if (token && isJwtExpired(token)) {
-          // Token is expired, explicitly refresh it first
-          try {
-            const refreshResponse = await apiClient.post("auth/refresh");
-            // Update token in localStorage with the new one from response
-            if (refreshResponse.data?.access_token) {
-              setAccessToken(refreshResponse.data.access_token);
-            }
-          } catch (refreshError) {
-            // Refresh failed, user will be logged out by apiClient
-            // Just fetch public news
-          }
-        }
-
-        // Now fetch news with fresh token (or no token if refresh failed)
-        const response = await apiClient.get("news/list");
-        setNews(response.data || []);
-      } catch (err: any) {
-        if (err.response?.status !== 401) {
-          setError("Неуспешно зареждане на новините");
-        }
-        setNews([]);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchNews();
-  }, [location.key]); // Refetch when navigation occurs (including browser refresh)
+  
+  // Convert error to string for display
+  const error = queryError ? "Неуспешно зареждане на новините" : null;
 
   // Pagination helpers
   const total = news.length;
@@ -122,20 +82,7 @@ export default function Home() {
               </div>
               <p className="text-red-800 dark:text-red-200 font-semibold">{error}</p>
               <button
-                onClick={() => {
-                  setError(null);
-                  setLoading(true);
-                  apiClient
-                    .get("news/get")
-                    .then((response) => setNews(response.data || []))
-                    .catch((err) => {
-                      if (err.response?.status !== 401) {
-                        setError("Неуспешно зареждане на новините");
-                      }
-                      setNews([]);
-                    })
-                    .finally(() => setLoading(false));
-                }}
+                onClick={() => window.location.reload()}
                 className="px-6 py-3 bg-red-600 hover:bg-red-700 text-white rounded-xl font-semibold transition-all duration-200 hover:scale-105 active:scale-95"
               >
                 Опитай отново
diff --git a/mp_web_app/frontend/pages/about-us/Board.tsx b/mp_web_app/frontend/pages/about-us/Board.tsx
index 5557ea2..52598ec 100644
--- a/mp_web_app/frontend/pages/about-us/Board.tsx
+++ b/mp_web_app/frontend/pages/about-us/Board.tsx
@@ -1,39 +1,13 @@
-import {useEffect, useState} from "react";
 import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
 import {Mail, Phone, User as UserIcon} from "lucide-react";
-import apiClient from "@/context/apiClient";
 import {useAuth} from "@/context/AuthContext";
-
-interface User {
-  id: string;
-  first_name: string;
-  last_name: string;
-  email: string;
-  phone: string;
-  role: string;
-}
+import {useBoardMembers} from "@/hooks/useUsers";
 
 export default function Board() {
-  const [members, setMembers] = useState<User[]>([]);
-  const [loading, setLoading] = useState(true);
+  const {data: members = [], isLoading: loading} = useBoardMembers();
   const {isLoggedIn} = useAuth();
 
-  useEffect(() => {
-    const fetchMembers = async () => {
-      try {
-        const response = await apiClient.get("users/board");
-        setMembers(response.data || []);
-      } catch (error) {
-        console.error("Failed to fetch board members:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchMembers();
-  }, []);
-
   if (loading) {
     return (
       <section className="container mx-auto px-4 py-8">
diff --git a/mp_web_app/frontend/pages/about-us/Control.tsx b/mp_web_app/frontend/pages/about-us/Control.tsx
index e2a8304..33f9312 100644
--- a/mp_web_app/frontend/pages/about-us/Control.tsx
+++ b/mp_web_app/frontend/pages/about-us/Control.tsx
@@ -1,39 +1,13 @@
-import {useEffect, useState} from "react";
 import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
 import {Mail, Phone, User as UserIcon} from "lucide-react";
-import apiClient from "@/context/apiClient";
 import {useAuth} from "@/context/AuthContext";
-
-interface User {
-  id: string;
-  first_name: string;
-  last_name: string;
-  email: string;
-  phone: string;
-  role: string;
-}
+import {useControlMembers} from "@/hooks/useUsers";
 
 export default function Control() {
-  const [members, setMembers] = useState<User[]>([]);
-  const [loading, setLoading] = useState(true);
+  const {data: members = [], isLoading: loading} = useControlMembers();
   const {isLoggedIn} = useAuth();
 
-  useEffect(() => {
-    const fetchMembers = async () => {
-      try {
-        const response = await apiClient.get("users/control");
-        setMembers(response.data || []);
-      } catch (error) {
-        console.error("Failed to fetch control members:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchMembers();
-  }, []);
-
   if (loading) {
     return (
       <section className="container mx-auto px-4 py-8">
diff --git a/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx b/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
index f68fa0e..2bc786d 100644
--- a/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
+++ b/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
@@ -1,36 +1,11 @@
-import {useEffect, useState} from "react";
 import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
 import {User as UserIcon} from "lucide-react";
 import {LoadingSpinner} from "@/components/ui/loading-spinner";
-import apiClient from "@/context/apiClient";
-
-interface Member {
-  first_name: string;
-  last_name: string;
-  proxy: boolean;
-}
+import {useMembers} from "@/hooks/useMembers";
 
 export default function CooperativeMembers() {
-  const [members, setMembers] = useState<Member[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchMembers = async () => {
-      try {
-        const response = await apiClient.get("members/list", {
-          params: {proxy_only: false},
-        });
-        setMembers(response.data || []);
-      } catch (error) {
-        console.error("Failed to fetch cooperative members:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchMembers();
-  }, []);
+  const {data: members = [], isLoading: loading} = useMembers({ proxy_only: false });
 
   if (loading) {
     return (
diff --git a/mp_web_app/frontend/pages/lists/Proxies.tsx b/mp_web_app/frontend/pages/lists/Proxies.tsx
index d53ea4e..f4d7de0 100644
--- a/mp_web_app/frontend/pages/lists/Proxies.tsx
+++ b/mp_web_app/frontend/pages/lists/Proxies.tsx
@@ -1,39 +1,12 @@
-import {useEffect, useState} from "react";
 import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
 import {User as UserIcon} from "lucide-react";
 import {LoadingSpinner} from "@/components/ui/loading-spinner";
-import apiClient from "@/context/apiClient";
-
-interface Member {
-  first_name: string;
-  last_name: string;
-  proxy: boolean;
-}
+import {useMembers} from "@/hooks/useMembers";
 
 export default function Proxies() {
-  const [members, setMembers] = useState<Member[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const fetchProxies = async () => {
-      try {
-        setLoading(true);
-        // Fetch members with proxy_only=true filter
-        const response = await apiClient.get("members/list", {
-          params: {proxy_only: true},
-        });
-        setMembers(response.data || []);
-      } catch (err: any) {
-        setError(err.response?.data?.detail || "Неуспешно зареждане на пълномощниците");
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchProxies();
-  }, []);
+  const {data: members = [], isLoading: loading, error: queryError} = useMembers({ proxy_only: true });
+  const error = queryError ? "Неуспешно зареждане на пълномощниците" : null;
 
   if (loading) {
     return (
diff --git a/mp_web_app/frontend/pnpm-lock.yaml b/mp_web_app/frontend/pnpm-lock.yaml
index 80a0932..2d847fd 100644
--- a/mp_web_app/frontend/pnpm-lock.yaml
+++ b/mp_web_app/frontend/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
       '@radix-ui/react-toast':
         specifier: ^1.2.4
         version: 1.2.15(@types/react-dom@18.3.7(@types/react@18.3.26))(@types/react@18.3.26)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@tanstack/react-query':
+        specifier: ^5.90.9
+        version: 5.90.9(react@18.3.1)
       axios:
         specifier: ^1.7.9
         version: 1.13.2
@@ -1077,6 +1080,14 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7
 
+  '@tanstack/query-core@5.90.9':
+    resolution: {integrity: sha512-UFOCQzi6pRGeVTVlPNwNdnAvT35zugcIydqjvFUzG62dvz2iVjElmNp/hJkUoM5eqbUPfSU/GJIr/wbvD8bTUw==}
+
+  '@tanstack/react-query@5.90.9':
+    resolution: {integrity: sha512-Zke2AaXiaSfnG8jqPZR52m8SsclKT2d9//AgE/QIzyNvbpj/Q2ln+FsZjb1j69bJZUouBvX2tg9PHirkTm8arw==}
+    peerDependencies:
+      react: ^18 || ^19
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -2853,6 +2864,13 @@ snapshots:
       tailwindcss: 4.1.17
       vite: 6.4.1(jiti@2.6.1)(lightningcss@1.30.2)
 
+  '@tanstack/query-core@5.90.9': {}
+
+  '@tanstack/react-query@5.90.9(react@18.3.1)':
+    dependencies:
+      '@tanstack/query-core': 5.90.9
+      react: 18.3.1
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.28.5
diff --git a/mp_web_app/frontend/src/App.tsx b/mp_web_app/frontend/src/App.tsx
index 75df971..7eac237 100644
--- a/mp_web_app/frontend/src/App.tsx
+++ b/mp_web_app/frontend/src/App.tsx
@@ -5,6 +5,8 @@ import Base from "@/pages/Base";
 import {Route, Routes} from "react-router-dom";
 import PageLoadingWrapper from "@/components/page-loading-wrapper";
 import {Toaster} from "@/components/ui/toaster";
+import {QueryClientProvider} from "@tanstack/react-query";
+import {queryClient} from "@/lib/queryClient";
 
 // Regular imports for pages that don't need API calls
 import Home from "@/pages/Home";
@@ -34,9 +36,10 @@ const AdminPanel = lazy(() => import("@/pages/admin/AdminPanel"));
 
 function App() {
   return (
-    <AuthProvider>
-      <Toaster />
-      <Routes>
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <Toaster />
+        <Routes>
         <Route path="/" element={<Base />}>
           <Route element={<Navigation />}>
             <Route index element={<Home />} />
@@ -154,7 +157,8 @@ function App() {
           </Route>
         </Route>
       </Routes>
-    </AuthProvider>
+      </AuthProvider>
+    </QueryClientProvider>
   );
 }
 

From 31e15c1644494f5fd908ab6aafb1fcd53804e57a Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sat, 15 Nov 2025 14:41:04 +0200
Subject: [PATCH 09/26] feat: extend admin panel functionality and improve file
 upload UI

- Added new tabs for Members and Emails management in AdminPanel.
- Implemented persistent tab selection using localStorage.
- Introduced drag-and-drop functionality to GalleryManagement for image uploads.
- Replaced bulk delete in DocumentsManagement with individual file delete for better control.
- Updated UI components with design improvements: responsive layouts, enhanced file input fields, and styled action buttons.
- Removed unnecessary CloudFront invalidation step from Makefile for optimized deployment.
---
 Makefile                                      |  12 +-
 .../frontend/components/upload-file.tsx       |  11 +-
 mp_web_app/frontend/pages/UploadFile.tsx      |   2 +-
 .../frontend/pages/admin/AdminPanel.tsx       |  47 +++++-
 .../pages/admin/DocumentsManagement.tsx       | 150 +++++++-----------
 .../pages/admin/GalleryManagement.tsx         | 104 +++++++++++-
 6 files changed, 207 insertions(+), 119 deletions(-)

diff --git a/Makefile b/Makefile
index bb57781..4cb1a1b 100644
--- a/Makefile
+++ b/Makefile
@@ -178,17 +178,7 @@ frontend-deploy: frontend-build ## Build and deploy frontend to S3
 	aws s3 sync mp_web_app/frontend/dist/ s3://frontendstack-frontendsitebucket127f9fa2-zjnv4evaddvi/ --delete
 	@echo "$(GREEN)✓ Frontend deployed to S3$(NC)"
 
-frontend-invalidate: ## Invalidate CloudFront cache
-	@echo "$(BLUE)Invalidating CloudFront cache...$(NC)"
-	@DISTRIBUTION_ID=$$(aws cloudfront list-distributions --query "DistributionList.Items[?Origins.Items[?DomainName=='frontendstack-frontendsitebucket127f9fa2-zjnv4evaddit.s3.amazonaws.com']].Id" --output text); \
-	if [ -z "$$DISTRIBUTION_ID" ]; then \
-		echo "$(RED)✗ CloudFront distribution not found$(NC)"; \
-		exit 1; \
-	fi; \
-	aws cloudfront create-invalidation --distribution-id $$DISTRIBUTION_ID --paths "/*"; \
-	echo "$(GREEN)✓ CloudFront cache invalidated (Distribution: $$DISTRIBUTION_ID)$(NC)"
-
-frontend-deploy-all: frontend-deploy frontend-invalidate ## Build, deploy to S3, and invalidate CloudFront
+frontend-deploy-all: frontend-deploy ## Build, deploy to S3
 	@echo "$(GREEN)✓ Frontend fully deployed and cache invalidated$(NC)"
 
 ##@ Utilities
diff --git a/mp_web_app/frontend/components/upload-file.tsx b/mp_web_app/frontend/components/upload-file.tsx
index 78d5980..75a6c56 100644
--- a/mp_web_app/frontend/components/upload-file.tsx
+++ b/mp_web_app/frontend/components/upload-file.tsx
@@ -48,7 +48,7 @@ export default function UploadFile() {
 
   // Get user role
   const [userRole, setUserRole] = useState<string>("");
-  
+
   // Frontend guard: only allow admins and accountants to access this page
   useEffect(() => {
     try {
@@ -65,11 +65,11 @@ export default function UploadFile() {
       const payload = JSON.parse(atob(base64));
       const role = String(payload?.role ?? "").toLowerCase();
       setUserRole(role);
-      
+
       if (role !== "admin" && role !== "accountant") {
         navigate("/");
       }
-      
+
       // If accountant, set default file type to accounting
       if (role === "accountant") {
         setFileType("accounting");
@@ -228,7 +228,7 @@ export default function UploadFile() {
                     ))}
                 </select>
                 <p className="text-xs text-muted-foreground">
-                  {userRole === "accountant" 
+                  {userRole === "accountant"
                     ? "Счетоводителите могат да качват само счетоводни документи."
                     : "Използвайте валидна стойност според FileType в бекенда."}
                 </p>
@@ -287,7 +287,7 @@ export default function UploadFile() {
                   disabled={submitting}
                   required
                 />
-                
+
                 {/* Drag and drop zone */}
                 <div
                   className={`relative border-2 border-dashed rounded-lg p-8 text-center transition-all duration-200 ${
@@ -328,7 +328,6 @@ export default function UploadFile() {
                         <p className="text-sm font-medium text-foreground">
                           {isDragging ? "Пусни файла тук" : "Кликни или пусни файл"}
                         </p>
-                        <p className="text-xs text-muted-foreground">Поддържат се всички типове файлове</p>
                       </div>
                     )}
                   </div>
diff --git a/mp_web_app/frontend/pages/UploadFile.tsx b/mp_web_app/frontend/pages/UploadFile.tsx
index 030c90e..5f0b8dc 100644
--- a/mp_web_app/frontend/pages/UploadFile.tsx
+++ b/mp_web_app/frontend/pages/UploadFile.tsx
@@ -3,7 +3,7 @@ import UploadFile from "@/components/upload-file";
 export default function Upload() {
   return (
     <div className="flex min-h-svh w-full items-top justify-center p-5 md:pt-15">
-      <div className="w-full max-w-sm">
+      <div className="w-full max-w-[60vw]">
         <UploadFile />
       </div>
     </div>
diff --git a/mp_web_app/frontend/pages/admin/AdminPanel.tsx b/mp_web_app/frontend/pages/admin/AdminPanel.tsx
index d079a79..def18e7 100644
--- a/mp_web_app/frontend/pages/admin/AdminPanel.tsx
+++ b/mp_web_app/frontend/pages/admin/AdminPanel.tsx
@@ -9,12 +9,17 @@ import UserManagement from "./UserManagement";
 import ProductsManagement from "./ProductsManagement";
 import DocumentsManagement from "./DocumentsManagement";
 import GalleryManagement from "./GalleryManagement";
+import MembersManagement from "./MembersManagement";
+import EmailsManagement from "./EmailsManagement";
 
 export default function AdminPanel() {
   const navigate = useNavigate();
   const [isAdmin, setIsAdmin] = useState(false);
   const [loading, setLoading] = useState(true);
-  const [activeTab, setActiveTab] = useState("news");
+  // Load active tab from localStorage or default to "news"
+  const [activeTab, setActiveTab] = useState(() => {
+    return localStorage.getItem("adminActiveTab") || "news";
+  });
   const [isMobile, setIsMobile] = useState(window.innerWidth < 1200);
 
   useEffect(() => {
@@ -23,6 +28,11 @@ export default function AdminPanel() {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
+  // Save active tab to localStorage whenever it changes
+  useEffect(() => {
+    localStorage.setItem("adminActiveTab", activeTab);
+  }, [activeTab]);
+
   useEffect(() => {
     const token = getAccessToken();
     const role = getUserRole(token);
@@ -48,8 +58,20 @@ export default function AdminPanel() {
   }
 
   return (
-    <div className="w-full px-2 xl:container xl:mx-auto xl:px-4 py-8">
-      <h1 className="text-3xl font-bold mb-6">Административен панел</h1>
+    <div className="min-h-screen">
+      {/* Hero Section */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-white to-primary/10 dark:from-gray-900 dark:via-gray-800 dark:to-primary/5 border-b border-gray-200/50">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5" />
+        <div className="container mx-auto px-4 py-12 md:py-16 relative">
+          <div className="max-w-4xl mx-auto text-center">
+            <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-primary to-gray-900 dark:from-white dark:via-primary dark:to-white bg-clip-text text-transparent animate-in fade-in slide-in-from-bottom-4 duration-1000">
+              Административен панел
+            </h1>
+          </div>
+        </div>
+      </section>
+
+      <div className="w-full px-2 xl:container xl:mx-auto xl:px-4 py-8">
 
       {isMobile ? (
         <div className="w-full">
@@ -61,8 +83,10 @@ export default function AdminPanel() {
               <SelectItem value="news">Новини</SelectItem>
               <SelectItem value="users">Потребители</SelectItem>
               <SelectItem value="products">Продукти</SelectItem>
-              <SelectItem value="documents">Документи</SelectItem>
               <SelectItem value="gallery">Галерия</SelectItem>
+              <SelectItem value="members">Членове</SelectItem>
+              <SelectItem value="emails">Мейл</SelectItem>
+              <SelectItem value="documents">Документи</SelectItem>
             </SelectContent>
           </Select>
 
@@ -72,16 +96,20 @@ export default function AdminPanel() {
             {activeTab === "products" && <ProductsManagement />}
             {activeTab === "documents" && <DocumentsManagement />}
             {activeTab === "gallery" && <GalleryManagement />}
+            {activeTab === "members" && <MembersManagement />}
+            {activeTab === "emails" && <EmailsManagement />}
           </div>
         </div>
       ) : (
         <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-          <TabsList className="grid w-full grid-cols-5">
+          <TabsList className="grid w-full grid-cols-7">
             <TabsTrigger value="news">Новини</TabsTrigger>
             <TabsTrigger value="users">Потребители</TabsTrigger>
             <TabsTrigger value="products">Продукти</TabsTrigger>
             <TabsTrigger value="documents">Документи</TabsTrigger>
             <TabsTrigger value="gallery">Галерия</TabsTrigger>
+            <TabsTrigger value="members">Членове</TabsTrigger>
+            <TabsTrigger value="emails">Мейл</TabsTrigger>
           </TabsList>
 
           <TabsContent value="news" className="mt-6">
@@ -103,8 +131,17 @@ export default function AdminPanel() {
           <TabsContent value="gallery" className="mt-6">
             <GalleryManagement />
           </TabsContent>
+
+          <TabsContent value="members" className="mt-6">
+            <MembersManagement />
+          </TabsContent>
+
+          <TabsContent value="emails" className="mt-6">
+            <EmailsManagement />
+          </TabsContent>
         </Tabs>
       )}
+      </div>
     </div>
   );
 }
diff --git a/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx b/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx
index b8656c6..80c8b5c 100644
--- a/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx
@@ -3,7 +3,6 @@ import {AdminLayout} from "@/components/admin-layout";
 import {Button} from "@/components/ui/button";
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
-import {Checkbox} from "@/components/ui/checkbox";
 import {ConfirmDialog} from "@/components/confirm-dialog";
 import {useToast} from "@/components/ui/use-toast";
 import {LoadingSpinner} from "@/components/ui/loading-spinner";
@@ -32,8 +31,8 @@ export default function DocumentsManagement() {
   const [files, setFiles] = useState<FileMetadata[]>([]);
   const [filteredFiles, setFilteredFiles] = useState<FileMetadata[]>([]);
   const [loading, setLoading] = useState(true);
-  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set());
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<FileMetadata | null>(null);
   const [selectedFileType, setSelectedFileType] = useState("all");
 
   const {toast} = useToast();
@@ -90,48 +89,30 @@ export default function DocumentsManagement() {
     } else {
       setFilteredFiles(files.filter((f) => f.file_type === selectedFileType));
     }
-    // Clear selection when filter changes
-    setSelectedFiles(new Set());
   }, [selectedFileType, files]);
 
-  const toggleFileSelection = (fileId: string) => {
-    const newSelection = new Set(selectedFiles);
-    if (newSelection.has(fileId)) {
-      newSelection.delete(fileId);
-    } else {
-      newSelection.add(fileId);
-    }
-    setSelectedFiles(newSelection);
-  };
-
-  const toggleAllSelection = () => {
-    if (selectedFiles.size === filteredFiles.length) {
-      setSelectedFiles(new Set());
-    } else {
-      setSelectedFiles(new Set(filteredFiles.map((f) => f.id)));
-    }
+  const openDeleteDialog = (file: FileMetadata) => {
+    setSelectedFile(file);
+    setDeleteDialogOpen(true);
   };
 
   const handleDelete = async () => {
-    try {
-      const filesToDelete = files.filter((f) => selectedFiles.has(f.id));
+    if (!selectedFile) return;
 
-      // Delete each file (backend will delete both S3 file and DynamoDB metadata)
-      for (const file of filesToDelete) {
-        await apiClient.delete(`files/delete/${file.id}`);
-      }
+    try {
+      await apiClient.delete(`files/delete/${selectedFile.id}`);
 
       toast({
         title: "Успех",
-        description: `${filesToDelete.length} документа са изтрити успешно`,
+        description: "Документът е изтрит успешно",
       });
       setDeleteDialogOpen(false);
-      setSelectedFiles(new Set());
+      setSelectedFile(null);
       fetchFiles();
     } catch (err: any) {
       toast({
         title: "Грешка",
-        description: err.response?.data?.detail || "Неуспешно изтриване на документите",
+        description: err.response?.data?.detail || "Неуспешно изтриване на документа",
         variant: "destructive",
       });
     }
@@ -145,30 +126,23 @@ export default function DocumentsManagement() {
   return (
     <AdminLayout title="Управление на документи">
       <div className="space-y-4">
-        <div className="flex justify-between items-center gap-4">
-          <div className="flex items-center gap-4 flex-1">
-            <h3 className="text-lg font-semibold">Списък с документи</h3>
-            <Select value={selectedFileType} onValueChange={setSelectedFileType}>
-              <SelectTrigger className="w-[280px]">
-                <SelectValue placeholder="Изберете тип документ" />
-              </SelectTrigger>
-              <SelectContent sideOffset={5}>
-                {FILE_TYPES.map((type) => (
-                  <SelectItem key={type.value} value={type.value}>
-                    {type.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <span className="text-sm text-muted-foreground">
-              ({filteredFiles.length} {filteredFiles.length === 1 ? "документ" : "документа"})
-            </span>
-          </div>
-          {selectedFiles.size > 0 && (
-            <Button variant="destructive" onClick={() => setDeleteDialogOpen(true)}>
-              Изтрий избраните ({selectedFiles.size})
-            </Button>
-          )}
+        <div className="flex items-center gap-4">
+          <h3 className="text-lg font-semibold">Списък с документи</h3>
+          <Select value={selectedFileType} onValueChange={setSelectedFileType}>
+            <SelectTrigger className="w-[280px]">
+              <SelectValue placeholder="Изберете тип документ" />
+            </SelectTrigger>
+            <SelectContent sideOffset={5}>
+              {FILE_TYPES.map((type) => (
+                <SelectItem key={type.value} value={type.value}>
+                  {type.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <span className="text-sm text-muted-foreground">
+            ({filteredFiles.length} {filteredFiles.length === 1 ? "документ" : "документа"})
+          </span>
         </div>
 
         {loading ? (
@@ -178,50 +152,46 @@ export default function DocumentsManagement() {
             Няма налични документи{selectedFileType !== "all" ? " от този тип" : ""}
           </p>
         ) : (
-          <div className="rounded-md border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-12">
-                    <Checkbox
-                      checked={selectedFiles.size === filteredFiles.length && filteredFiles.length > 0}
-                      onCheckedChange={toggleAllSelection}
-                    />
-                  </TableHead>
-                  <TableHead>Име на файл</TableHead>
-                  <TableHead>Тип</TableHead>
-                  <TableHead>Качен от</TableHead>
-                  <TableHead>Дата</TableHead>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Име на файл</TableHead>
+                <TableHead>Тип</TableHead>
+                <TableHead>Качен от</TableHead>
+                <TableHead>Дата</TableHead>
+                <TableHead className="text-right">Действия</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredFiles.map((file) => (
+                <TableRow key={file.id}>
+                  <TableCell className="font-medium">{file.file_name}</TableCell>
+                  <TableCell>
+                    <span className="text-sm text-muted-foreground">{getFileTypeLabel(file.file_type)}</span>
+                  </TableCell>
+                  <TableCell>{file.uploaded_by}</TableCell>
+                  <TableCell>{new Date(file.created_at).toLocaleDateString("bg-BG")}</TableCell>
+                  <TableCell className="text-right">
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={() => openDeleteDialog(file)}
+                    >
+                      Изтрий
+                    </Button>
+                  </TableCell>
                 </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredFiles.map((file) => (
-                  <TableRow key={file.id}>
-                    <TableCell>
-                      <Checkbox
-                        checked={selectedFiles.has(file.id)}
-                        onCheckedChange={() => toggleFileSelection(file.id)}
-                      />
-                    </TableCell>
-                    <TableCell className="font-medium">{file.file_name}</TableCell>
-                    <TableCell>
-                      <span className="text-sm text-muted-foreground">{getFileTypeLabel(file.file_type)}</span>
-                    </TableCell>
-                    <TableCell>{file.uploaded_by}</TableCell>
-                    <TableCell>{new Date(file.created_at).toLocaleDateString("bg-BG")}</TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
+              ))}
+            </TableBody>
+          </Table>
         )}
 
         {/* Delete Confirmation */}
         <ConfirmDialog
           open={deleteDialogOpen}
           onOpenChange={setDeleteDialogOpen}
-          title="Изтриване на документи"
-          description={`Сигурни ли сте, че искате да изтриете ${selectedFiles.size} ${selectedFiles.size === 1 ? "документ" : "документа"}? Файловете ще бъдат изтрити от S3 и базата данни. Това действие не може да бъде отменено.`}
+          title="Изтриване на документ"
+          description={`Сигурни ли сте, че искате да изтриете "${selectedFile?.file_name}"? Файлът ще бъде изтрит от S3 и базата данни. Това действие не може да бъде отменено.`}
           onConfirm={handleDelete}
           confirmText="Изтрий"
           variant="destructive"
diff --git a/mp_web_app/frontend/pages/admin/GalleryManagement.tsx b/mp_web_app/frontend/pages/admin/GalleryManagement.tsx
index 6916e67..e5ea840 100644
--- a/mp_web_app/frontend/pages/admin/GalleryManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/GalleryManagement.tsx
@@ -6,7 +6,7 @@ import {Card} from "@/components/ui/card";
 import {ConfirmDialog} from "@/components/confirm-dialog";
 import {useToast} from "@/components/ui/use-toast";
 import apiClient from "@/context/apiClient";
-import {X} from "lucide-react";
+import {Trash2} from "lucide-react";
 
 interface GalleryImage {
   id: string;
@@ -26,6 +26,7 @@ export default function GalleryManagement() {
   const [selectedImage, setSelectedImage] = useState<GalleryImage | null>(null);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [imageName, setImageName] = useState("");
+  const [isDragging, setIsDragging] = useState(false);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
   const {toast} = useToast();
@@ -68,6 +69,45 @@ export default function GalleryManagement() {
     }
   };
 
+  // Drag and drop handlers
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const files = e.dataTransfer.files;
+    if (files && files.length > 0) {
+      const file = files[0];
+      if (file.type.startsWith('image/')) {
+        setSelectedFile(file);
+        setImageName(file.name.split(".")[0]);
+      } else {
+        toast({
+          title: "Грешка",
+          description: "Моля изберете файл със снимка",
+          variant: "destructive",
+        });
+      }
+    }
+  };
+
   const handleUpload = async () => {
     if (!selectedFile) {
       toast({
@@ -156,9 +196,60 @@ export default function GalleryManagement() {
             }}
             className="space-y-4"
           >
-            <div>
-              <label className="text-sm font-medium">Избери снимка</label>
-              <Input ref={fileInputRef} type="file" accept="image/*" onChange={handleFileSelect} disabled={uploading} />
+            {/* Hidden file input */}
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              onChange={handleFileSelect}
+              disabled={uploading}
+              className="sr-only"
+            />
+
+            {/* Drag and drop zone */}
+            <div
+              className={`relative border-2 border-dashed rounded-lg p-8 text-center transition-all duration-200 ${
+                isDragging
+                  ? "border-primary bg-primary/5 scale-[1.02]"
+                  : "border-muted-foreground/25 hover:border-primary/50 hover:bg-accent/50"
+              } ${uploading ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
+              onDragEnter={handleDragEnter}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+              onClick={() => !uploading && fileInputRef.current?.click()}
+            >
+              <div className="flex flex-col items-center gap-2">
+                <svg
+                  className="w-12 h-12 text-muted-foreground"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                  />
+                </svg>
+                {selectedFile ? (
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium text-foreground">{selectedFile.name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {(selectedFile.size / 1024 / 1024).toFixed(2)} MB
+                    </p>
+                    <p className="text-xs text-primary">Кликни или пусни снимка за промяна</p>
+                  </div>
+                ) : (
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium text-foreground">
+                      {isDragging ? "Пусни снимката тук" : "Кликни или пусни снимка"}
+                    </p>
+                    <p className="text-xs text-muted-foreground">PNG, JPG, GIF до 10MB</p>
+                  </div>
+                )}
+              </div>
             </div>
 
             {selectedFile && (
@@ -169,6 +260,7 @@ export default function GalleryManagement() {
                   onChange={(e) => setImageName(e.target.value)}
                   placeholder="Въведете име"
                   disabled={uploading}
+                  className="mt-2"
                 />
               </div>
             )}
@@ -197,11 +289,11 @@ export default function GalleryManagement() {
                     <img src={imageUrls[image.id]} alt={image.image_name} className="w-full h-full object-cover" />
                     <Button
                       variant="destructive"
-                      size="icon"
+                      size="sm"
                       className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
                       onClick={() => openDeleteDialog(image)}
                     >
-                      <X className="h-4 w-4" />
+                      <Trash2 className="h-4 w-4 text-white" />
                     </Button>
                   </Card>
                 );

From 0006aa2fe224ed27afadfff76f65d33613cf56ff Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sat, 15 Nov 2025 14:41:19 +0200
Subject: [PATCH 10/26] feat: grant S3:DeleteObject permission in BackendStack

- Added `s3:DeleteObject` to the permissions list for backend Lambda.
---
 stacks/backend_stack.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/stacks/backend_stack.py b/stacks/backend_stack.py
index 7efef77..61289bb 100644
--- a/stacks/backend_stack.py
+++ b/stacks/backend_stack.py
@@ -249,7 +249,8 @@ def __init__(
           "s3:PutObject",
           "s3:GetObject",
           "s3:AbortMultipartUpload",
-          "s3:ListBucket"
+          "s3:ListBucket",
+          "s3:DeleteObject"
         ],
         resources=[
           "arn:aws:s3:::uploadsstack-uploadsbucket5e5e9b64-luhskbfle3up",

From 464060833b9a2ade648db856e266c0fbe8180e7c Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sat, 15 Nov 2025 14:45:57 +0200
Subject: [PATCH 11/26] feat: add reusable React Query hooks and extend admin
 panel functionality

- Introduced new reusable hooks (`useNews`, `useGallery`, `useProducts`, `useMembers`, `useFiles`, `useUsers`) for managing API interactions with React Query.
- Enhanced caching and query key factories for optimized API calls.
- Updated admin panel with new pages: `EmailsManagement` and `MembersManagement`.
- Implemented drag-and-drop file upload for members syncing and gallery management.
- Improved query caching using a centralized `queryClient` configuration in `lib/queryClient.ts`.
---
 mp_web_app/frontend/hooks/useFiles.ts         |  90 +++++++++
 mp_web_app/frontend/hooks/useGallery.ts       |  70 +++++++
 mp_web_app/frontend/hooks/useMembers.ts       |  79 ++++++++
 mp_web_app/frontend/hooks/useNews.ts          |  80 ++++++++
 mp_web_app/frontend/hooks/useProducts.ts      |  76 ++++++++
 mp_web_app/frontend/hooks/useUsers.ts         |  87 +++++++++
 mp_web_app/frontend/lib/queryClient.ts        |  19 ++
 .../frontend/pages/admin/EmailsManagement.tsx |  32 ++++
 .../pages/admin/MembersManagement.tsx         | 177 ++++++++++++++++++
 9 files changed, 710 insertions(+)
 create mode 100644 mp_web_app/frontend/hooks/useFiles.ts
 create mode 100644 mp_web_app/frontend/hooks/useGallery.ts
 create mode 100644 mp_web_app/frontend/hooks/useMembers.ts
 create mode 100644 mp_web_app/frontend/hooks/useNews.ts
 create mode 100644 mp_web_app/frontend/hooks/useProducts.ts
 create mode 100644 mp_web_app/frontend/hooks/useUsers.ts
 create mode 100644 mp_web_app/frontend/lib/queryClient.ts
 create mode 100644 mp_web_app/frontend/pages/admin/EmailsManagement.tsx
 create mode 100644 mp_web_app/frontend/pages/admin/MembersManagement.tsx

diff --git a/mp_web_app/frontend/hooks/useFiles.ts b/mp_web_app/frontend/hooks/useFiles.ts
new file mode 100644
index 0000000..a18a84f
--- /dev/null
+++ b/mp_web_app/frontend/hooks/useFiles.ts
@@ -0,0 +1,90 @@
+// hooks/useFiles.ts
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import apiClient from '@/context/apiClient';
+
+export type FileType =
+  | 'governing_documents'
+  | 'forms'
+  | 'minutes'
+  | 'transcripts'
+  | 'accounting'
+  | 'private_documents'
+  | 'others';
+
+export interface FileMetadata {
+  id?: string | null;
+  file_name?: string | null;
+  file_type: FileType;
+  uploaded_by?: string | null;
+  created_at?: string | null;
+}
+
+// Query key factory
+export const fileKeys = {
+  all: ['files'] as const,
+  lists: () => [...fileKeys.all, 'list'] as const,
+  list: (fileType?: FileType) => [...fileKeys.lists(), { fileType }] as const,
+};
+
+// Fetch files by type
+export function useFiles(fileType: FileType) {
+  return useQuery({
+    queryKey: fileKeys.list(fileType),
+    queryFn: async () => {
+      const response = await apiClient.get<FileMetadata[]>('files/list', {
+        params: { file_type: fileType },
+        withCredentials: true,
+      });
+      return response.data ?? [];
+    },
+    staleTime: 60 * 60 * 1000, // 1 hour
+  });
+}
+
+// Fetch all files (admin)
+export function useAllFiles() {
+  return useQuery({
+    queryKey: fileKeys.lists(),
+    queryFn: async () => {
+      const fileTypes: FileType[] = [
+        'governing_documents',
+        'forms',
+        'minutes',
+        'transcripts',
+        'accounting',
+        'private_documents',
+        'others',
+      ];
+      
+      const allFiles: FileMetadata[] = [];
+      for (const type of fileTypes) {
+        try {
+          const response = await apiClient.get<FileMetadata[]>('files/list', {
+            params: { file_type: type },
+          });
+          if (response.data) {
+            allFiles.push(...response.data);
+          }
+        } catch (error) {
+          console.error(`Error fetching ${type}:`, error);
+        }
+      }
+      return allFiles;
+    },
+    staleTime: 5 * 60 * 1000, // 5 minutes (admin panel)
+  });
+}
+
+// Delete file mutation
+export function useDeleteFile() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await apiClient.delete(`files/delete/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: fileKeys.all });
+    },
+  });
+}
diff --git a/mp_web_app/frontend/hooks/useGallery.ts b/mp_web_app/frontend/hooks/useGallery.ts
new file mode 100644
index 0000000..93f8d0a
--- /dev/null
+++ b/mp_web_app/frontend/hooks/useGallery.ts
@@ -0,0 +1,70 @@
+// hooks/useGallery.ts
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import apiClient from '@/context/apiClient';
+import { API_BASE_URL } from '@/app-config';
+
+export interface GalleryImage {
+  id: string;
+  image_name: string;
+  s3_key: string;
+  s3_bucket: string;
+  uploaded_by: string;
+  created_at: string;
+  url?: string;
+}
+
+// Query key factory
+export const galleryKeys = {
+  all: ['gallery'] as const,
+  lists: () => [...galleryKeys.all, 'list'] as const,
+  list: () => [...galleryKeys.lists()] as const,
+};
+
+// Fetch gallery images
+export function useGallery() {
+  return useQuery({
+    queryKey: galleryKeys.list(),
+    queryFn: async () => {
+      const response = await fetch(`${API_BASE_URL}gallery/list`);
+      if (!response.ok) {
+        throw new Error('Failed to fetch gallery');
+      }
+      const data = await response.json();
+      return (data || []) as GalleryImage[];
+    },
+    staleTime: 60 * 60 * 1000, // 1 hour (gallery rarely changes)
+  });
+}
+
+// Create gallery image mutation
+export function useCreateGalleryImage() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: async (formData: FormData) => {
+      const response = await apiClient.post('gallery/create', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: galleryKeys.list() });
+    },
+  });
+}
+
+// Delete gallery image mutation
+export function useDeleteGalleryImage() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await apiClient.delete(`gallery/delete/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: galleryKeys.list() });
+    },
+  });
+}
diff --git a/mp_web_app/frontend/hooks/useMembers.ts b/mp_web_app/frontend/hooks/useMembers.ts
new file mode 100644
index 0000000..2c1e35c
--- /dev/null
+++ b/mp_web_app/frontend/hooks/useMembers.ts
@@ -0,0 +1,79 @@
+// hooks/useMembers.ts
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import apiClient from '@/context/apiClient';
+
+export interface Member {
+  member_code: string;
+  first_name: string;
+  last_name: string;
+  email?: string;
+  phone?: string;
+  role?: string;
+  is_proxy?: boolean;
+}
+
+// Query key factory
+export const memberKeys = {
+  all: ['members'] as const,
+  lists: () => [...memberKeys.all, 'list'] as const,
+  list: (filters?: { proxy_only?: boolean; role?: string }) => 
+    [...memberKeys.lists(), filters] as const,
+};
+
+// Fetch members list
+export function useMembers(filters?: { proxy_only?: boolean; role?: string }) {
+  return useQuery({
+    queryKey: memberKeys.list(filters),
+    queryFn: async () => {
+      const response = await apiClient.get<Member[]>('members/list', {
+        params: filters,
+      });
+      return response.data ?? [];
+    },
+    staleTime: 60 * 60 * 1000, // 1 hour
+  });
+}
+
+// Create member mutation
+export function useCreateMember() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: async (member: Omit<Member, 'member_code'>) => {
+      const response = await apiClient.post('members/create', member);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: memberKeys.lists() });
+    },
+  });
+}
+
+// Update member mutation
+export function useUpdateMember() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: async ({ member_code, ...member }: Member) => {
+      const response = await apiClient.put(`members/update/${member_code}`, member);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: memberKeys.lists() });
+    },
+  });
+}
+
+// Delete member mutation
+export function useDeleteMember() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: async (member_code: string) => {
+      await apiClient.delete(`members/delete/${member_code}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: memberKeys.lists() });
+    },
+  });
+}
diff --git a/mp_web_app/frontend/hooks/useNews.ts b/mp_web_app/frontend/hooks/useNews.ts
new file mode 100644
index 0000000..df92094
--- /dev/null
+++ b/mp_web_app/frontend/hooks/useNews.ts
@@ -0,0 +1,80 @@
+// hooks/useNews.ts
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import apiClient from '@/context/apiClient';
+import { getAccessToken } from '@/context/tokenStore';
+
+export interface NewsItem {
+  id?: string | null;
+  title: string;
+  content: string;
+  author?: string | null;
+  created_at?: string | null;
+  is_public?: boolean;
+}
+
+// Query key factory
+export const newsKeys = {
+  all: ['news'] as const,
+  lists: () => [...newsKeys.all, 'list'] as const,
+  list: (token?: string) => [...newsKeys.lists(), { token }] as const,
+};
+
+// Fetch news list
+export function useNews() {
+  const token = getAccessToken();
+  
+  return useQuery({
+    queryKey: newsKeys.list(token || undefined),
+    queryFn: async () => {
+      const response = await apiClient.get<NewsItem[]>('news/list', {
+        params: token ? { token } : {},
+      });
+      return response.data ?? [];
+    },
+    staleTime: 10 * 60 * 1000, // 10 minutes
+  });
+}
+
+// Create news mutation
+export function useCreateNews() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: async (news: Omit<NewsItem, 'id' | 'created_at'>) => {
+      const response = await apiClient.post('news/create', news);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: newsKeys.lists() });
+    },
+  });
+}
+
+// Update news mutation
+export function useUpdateNews() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: async ({ id, ...news }: NewsItem & { id: string }) => {
+      const response = await apiClient.put(`news/update/${id}`, news);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: newsKeys.lists() });
+    },
+  });
+}
+
+// Delete news mutation
+export function useDeleteNews() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await apiClient.delete(`news/delete/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: newsKeys.lists() });
+    },
+  });
+}
diff --git a/mp_web_app/frontend/hooks/useProducts.ts b/mp_web_app/frontend/hooks/useProducts.ts
new file mode 100644
index 0000000..fa768f9
--- /dev/null
+++ b/mp_web_app/frontend/hooks/useProducts.ts
@@ -0,0 +1,76 @@
+// hooks/useProducts.ts
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import apiClient from '@/context/apiClient';
+
+export interface Product {
+  id?: string | null;
+  name: string;
+  width?: number | null;
+  height?: number | null;
+  length?: number | null;
+  description?: string | null;
+}
+
+// Query key factory
+export const productKeys = {
+  all: ['products'] as const,
+  lists: () => [...productKeys.all, 'list'] as const,
+  list: () => [...productKeys.lists()] as const,
+};
+
+// Fetch products list
+export function useProducts() {
+  return useQuery({
+    queryKey: productKeys.list(),
+    queryFn: async () => {
+      const response = await apiClient.get<Product[]>('products/list');
+      return response.data ?? [];
+    },
+    staleTime: 60 * 60 * 1000, // 1 hour (products rarely change)
+  });
+}
+
+// Create product mutation
+export function useCreateProduct() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: async (product: Omit<Product, 'id'>) => {
+      const response = await apiClient.post('products/create', product);
+      return response.data;
+    },
+    onSuccess: () => {
+      // Invalidate products list to refetch
+      queryClient.invalidateQueries({ queryKey: productKeys.list() });
+    },
+  });
+}
+
+// Update product mutation
+export function useUpdateProduct() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: async ({ id, ...product }: Product & { id: string }) => {
+      const response = await apiClient.put(`products/update/${id}`, product);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: productKeys.list() });
+    },
+  });
+}
+
+// Delete product mutation
+export function useDeleteProduct() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await apiClient.delete(`products/delete/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: productKeys.list() });
+    },
+  });
+}
diff --git a/mp_web_app/frontend/hooks/useUsers.ts b/mp_web_app/frontend/hooks/useUsers.ts
new file mode 100644
index 0000000..f7b4f8b
--- /dev/null
+++ b/mp_web_app/frontend/hooks/useUsers.ts
@@ -0,0 +1,87 @@
+// hooks/useUsers.ts
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import apiClient from '@/context/apiClient';
+
+export interface User {
+  id?: string;
+  email: string;
+  first_name?: string;
+  last_name?: string;
+  phone?: string;
+  role?: string;
+  is_active?: boolean;
+}
+
+// Query key factory
+export const userKeys = {
+  all: ['users'] as const,
+  lists: () => [...userKeys.all, 'list'] as const,
+  list: () => [...userKeys.lists()] as const,
+  board: () => [...userKeys.all, 'board'] as const,
+  control: () => [...userKeys.all, 'control'] as const,
+};
+
+// Fetch all users (admin)
+export function useUsersList() {
+  return useQuery({
+    queryKey: userKeys.list(),
+    queryFn: async () => {
+      const response = await apiClient.get<User[]>('users/list');
+      return response.data ?? [];
+    },
+    staleTime: 5 * 60 * 1000, // 5 minutes (admin panel)
+  });
+}
+
+// Fetch board members
+export function useBoardMembers() {
+  return useQuery({
+    queryKey: userKeys.board(),
+    queryFn: async () => {
+      const response = await apiClient.get<User[]>('users/board');
+      return response.data ?? [];
+    },
+    staleTime: 60 * 60 * 1000, // 1 hour
+  });
+}
+
+// Fetch control members
+export function useControlMembers() {
+  return useQuery({
+    queryKey: userKeys.control(),
+    queryFn: async () => {
+      const response = await apiClient.get<User[]>('users/control');
+      return response.data ?? [];
+    },
+    staleTime: 60 * 60 * 1000, // 1 hour
+  });
+}
+
+// Update user mutation
+export function useUpdateUser() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: async ({ id, ...user }: User & { id: string }) => {
+      const response = await apiClient.put(`users/update/${id}`, user);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: userKeys.all });
+    },
+  });
+}
+
+// Delete user mutation
+export function useDeleteUser() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await apiClient.delete(`users/delete/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: userKeys.all });
+    },
+  });
+}
diff --git a/mp_web_app/frontend/lib/queryClient.ts b/mp_web_app/frontend/lib/queryClient.ts
new file mode 100644
index 0000000..abf5d36
--- /dev/null
+++ b/mp_web_app/frontend/lib/queryClient.ts
@@ -0,0 +1,19 @@
+// lib/queryClient.ts
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // Stale time: how long data is considered fresh
+      staleTime: 5 * 60 * 1000, // 5 minutes
+      // Cache time: how long unused data stays in cache
+      gcTime: 10 * 60 * 1000, // 10 minutes (formerly cacheTime)
+      // Retry failed requests
+      retry: 1,
+      // Refetch on window focus for fresh data
+      refetchOnWindowFocus: false,
+      // Refetch on reconnect
+      refetchOnReconnect: true,
+    },
+  },
+});
diff --git a/mp_web_app/frontend/pages/admin/EmailsManagement.tsx b/mp_web_app/frontend/pages/admin/EmailsManagement.tsx
new file mode 100644
index 0000000..c172fbd
--- /dev/null
+++ b/mp_web_app/frontend/pages/admin/EmailsManagement.tsx
@@ -0,0 +1,32 @@
+import {AdminLayout} from "@/components/admin-layout";
+import {Card} from "@/components/ui/card";
+
+export default function EmailsManagement() {
+  return (
+    <AdminLayout title="Управление на мейли">
+      <Card className="p-8">
+        <div className="text-center space-y-4">
+          <div className="w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center">
+            <svg
+              className="w-8 h-8 text-primary"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+              />
+            </svg>
+          </div>
+          <h3 className="text-xl font-semibold">В разработка</h3>
+          <p className="text-muted-foreground max-w-md mx-auto">
+            Функционалността за управление на мейли е в процес на разработка и скоро ще бъде достъпна.
+          </p>
+        </div>
+      </Card>
+    </AdminLayout>
+  );
+}
diff --git a/mp_web_app/frontend/pages/admin/MembersManagement.tsx b/mp_web_app/frontend/pages/admin/MembersManagement.tsx
new file mode 100644
index 0000000..347f170
--- /dev/null
+++ b/mp_web_app/frontend/pages/admin/MembersManagement.tsx
@@ -0,0 +1,177 @@
+import React, {useState, useRef} from "react";
+import {AdminLayout} from "@/components/admin-layout";
+import {Button} from "@/components/ui/button";
+import {Card} from "@/components/ui/card";
+import {useToast} from "@/components/ui/use-toast";
+import apiClient from "@/context/apiClient";
+
+export default function MembersManagement() {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const {toast} = useToast();
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setSelectedFile(file);
+    }
+  };
+
+  // Drag and drop handlers
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const files = e.dataTransfer.files;
+    if (files && files.length > 0) {
+      setSelectedFile(files[0]);
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!selectedFile) {
+      toast({
+        title: "Грешка",
+        description: "Моля изберете файл",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      setUploading(true);
+
+      const formData = new FormData();
+      formData.append("file", selectedFile);
+
+      await apiClient.post("members/sync_members", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      });
+
+      toast({
+        title: "Успех",
+        description: "Членовете са синхронизирани успешно",
+      });
+
+      // Reset form
+      setSelectedFile(null);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    } catch (err: any) {
+      toast({
+        title: "Грешка",
+        description: err.response?.data?.detail || "Неуспешна синхронизация на членовете",
+        variant: "destructive",
+      });
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return (
+    <AdminLayout title="Управление на членове">
+      <div className="space-y-6">
+        <Card className="p-4">
+          <h3 className="text-lg font-semibold mb-4">Синхронизирай членове</h3>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleUpload();
+            }}
+            className="space-y-4"
+          >
+            {/* Hidden file input */}
+            <input
+              ref={fileInputRef}
+              type="file"
+              onChange={handleFileSelect}
+              disabled={uploading}
+              className="sr-only"
+            />
+
+            {/* Drag and drop zone */}
+            <div
+              className={`relative border-2 border-dashed rounded-lg p-8 text-center transition-all duration-200 ${
+                isDragging
+                  ? "border-primary bg-primary/5 scale-[1.02]"
+                  : "border-muted-foreground/25 hover:border-primary/50 hover:bg-accent/50"
+              } ${uploading ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
+              onDragEnter={handleDragEnter}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+              onClick={() => !uploading && fileInputRef.current?.click()}
+            >
+              <div className="flex flex-col items-center gap-2">
+                <svg
+                  className="w-12 h-12 text-muted-foreground"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                  />
+                </svg>
+                {selectedFile ? (
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium text-foreground">{selectedFile.name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {(selectedFile.size / 1024 / 1024).toFixed(2)} MB
+                    </p>
+                    <p className="text-xs text-primary">Кликни или пусни файл за промяна</p>
+                  </div>
+                ) : (
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium text-foreground">
+                      {isDragging ? "Пусни файла тук" : "Кликни или пусни файл"}
+                    </p>
+                    <p className="text-xs text-muted-foreground">Приема се само предварително подготвен файл с предварително зададена структура в .csv формат</p>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <Button type="submit" disabled={uploading || !selectedFile} className="w-full">
+              {uploading ? "Качване..." : "Качи"}
+            </Button>
+          </form>
+        </Card>
+
+        <Card className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Информация</h3>
+          <p className="text-sm text-muted-foreground">
+            Качете файл с данни за членовете, за да синхронизирате информацията в системата.
+            Файлът трябва да съдържа необходимите полета за членовете.
+          </p>
+        </Card>
+      </div>
+    </AdminLayout>
+  );
+}

From b695386d92470e14454e97c822342f8fb95463ec Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sat, 15 Nov 2025 14:58:14 +0200
Subject: [PATCH 12/26] refactor: update cache invalidation step and adjust
 middleware order in backend

- Removed unnecessary cache invalidation message from Makefile to streamline deployment output.
- Reordered `CacheControlMiddleware` initialization for proper middleware execution.
- Updated `Home` page to refine `NewsCard` property mapping based on `is_public` attribute changes.
- Removed unused `News` interface for cleaner frontend code.
---
 Makefile                           |  2 +-
 mp_web_app/backend/api.py          |  6 +++---
 mp_web_app/frontend/pages/Home.tsx | 13 ++-----------
 3 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/Makefile b/Makefile
index 4cb1a1b..f525457 100644
--- a/Makefile
+++ b/Makefile
@@ -179,7 +179,7 @@ frontend-deploy: frontend-build ## Build and deploy frontend to S3
 	@echo "$(GREEN)✓ Frontend deployed to S3$(NC)"
 
 frontend-deploy-all: frontend-deploy ## Build, deploy to S3
-	@echo "$(GREEN)✓ Frontend fully deployed and cache invalidated$(NC)"
+	@echo "$(GREEN)✓ Frontend fully deployed$(NC)"
 
 ##@ Utilities
 
diff --git a/mp_web_app/backend/api.py b/mp_web_app/backend/api.py
index e2f8493..97a94fd 100644
--- a/mp_web_app/backend/api.py
+++ b/mp_web_app/backend/api.py
@@ -18,9 +18,6 @@
 
 app = FastAPI(docs_url="/api/docs", redoc_url="/api/redoc", openapi_url="/api/openapi.json")
 
-# Add cache control middleware (before CORS)
-app.add_middleware(CacheControlMiddleware)
-
 app.add_middleware(
   CORSMiddleware,
   allow_origins=[FRONTEND_URL],
@@ -29,6 +26,9 @@
   allow_headers=["*"],
 )
 
+# Add cache control middleware
+app.add_middleware(CacheControlMiddleware)
+
 app.include_router(user_router, prefix="/api/users")
 app.include_router(auth_router, prefix="/api/auth")
 app.include_router(mail_router, prefix="/api/mail")
diff --git a/mp_web_app/frontend/pages/Home.tsx b/mp_web_app/frontend/pages/Home.tsx
index 2204dd2..e160850 100644
--- a/mp_web_app/frontend/pages/Home.tsx
+++ b/mp_web_app/frontend/pages/Home.tsx
@@ -11,15 +11,6 @@ import {
   PaginationPrevious,
 } from "@/components/ui/pagination";
 
-interface News {
-  id: string;
-  title: string;
-  content: string;
-  author_id: string;
-  created_at: string;
-  news_type: "regular" | "private";
-}
-
 const PAGE_SIZE = 6;
 
 export default function Home() {
@@ -116,8 +107,8 @@ export default function Home() {
                   <NewsCard
                     title={item.title}
                     content={item.content}
-                    created_at={item.created_at}
-                    news_type={item.news_type}
+                    created_at={item.created_at || ""}
+                    news_type={item.is_public === false ? "private" : "regular"}
                   />
                 </div>
               ))}

From e0f9f439a77e703c8eecee8904748678d4945115 Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sat, 15 Nov 2025 15:18:00 +0200
Subject: [PATCH 13/26] refactor: simplify Navigation component structure and
 update integration in Header

- Replaced redundant `<div>` wrapper with fragments for cleaner DOM structure.
- Updated `Header` component to include `Navigation` for consistent placement.
- Removed embedded `Navigation` from `App` routes, aligning navigation handling with `Header`.
---
 mp_web_app/frontend/components/header.tsx |  3 +++
 mp_web_app/frontend/pages/Navigation.tsx  | 12 ++++--------
 mp_web_app/frontend/src/App.tsx           |  3 ---
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/mp_web_app/frontend/components/header.tsx b/mp_web_app/frontend/components/header.tsx
index ae9bb8f..3723a8c 100644
--- a/mp_web_app/frontend/components/header.tsx
+++ b/mp_web_app/frontend/components/header.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { Logo } from "@/components/logo";
+import Navigation from "@/pages/Navigation";
 
 export function Header() {
   const [scrolled, setScrolled] = useState(false);
@@ -30,6 +31,8 @@ export function Header() {
         <div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-transparent to-primary/5 opacity-50" />
         <Logo />
       </div>
+      {/* Navigation bar */}
+      <Navigation />
     </header>
   );
 }
diff --git a/mp_web_app/frontend/pages/Navigation.tsx b/mp_web_app/frontend/pages/Navigation.tsx
index 968cd94..571949e 100644
--- a/mp_web_app/frontend/pages/Navigation.tsx
+++ b/mp_web_app/frontend/pages/Navigation.tsx
@@ -356,10 +356,10 @@ export function Navigation() {
   );
 
   return (
-    <div>
+    <>
       {/* Desktop Navigation */}
       {!isMobile && (
-        <div className="sticky top-0 z-40 flex p-3 w-full items-center justify-center bg-background/95 backdrop-blur-md shadow-sm transition-all duration-300 border-t-2 border-b-2 border-transparent" style={{borderImage: 'linear-gradient(to right, oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56 / 0.8)) 1'}}>
+        <div className="flex p-3 w-full items-center justify-center bg-background/95 backdrop-blur-md shadow-sm transition-all duration-300 border-t-2 border-b-2 border-transparent" style={{borderImage: 'linear-gradient(to right, oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56 / 0.8)) 1'}}>
           <NavigationMenu viewport={false}>
             <NavigationMenuList className="gap-2">
               {NAV_LINKS.map((link) => {
@@ -526,7 +526,7 @@ export function Navigation() {
 
       {/* Hamburger Icon for Mobile */}
       {isMobile && (
-        <div className="sticky top-0 z-40 flex items-center px-2 py-1.5 w-full bg-background/95 backdrop-blur-md shadow-sm border-t-2 border-transparent" style={{borderImageSource: 'linear-gradient(to right, oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56 / 0.8))', borderImageSlice: 1}}>
+        <div className="flex items-center px-2 py-1.5 w-full bg-background/95 backdrop-blur-md shadow-sm border-t-2 border-transparent" style={{borderImageSource: 'linear-gradient(to right, oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56 / 0.8))', borderImageSlice: 1}}>
           <Button
             onClick={() => setMobileMenuOpen(true)}
             className="w-full flex items-center justify-center py-1.5 h-[30px]"
@@ -540,11 +540,7 @@ export function Navigation() {
 
       {/* Mobile Menu Overlay with animation and scrollability */}
       {showMobileMenu && mobileMenu}
-
-      <div>
-        <Outlet />
-      </div>
-    </div>
+    </>
   );
 }
 
diff --git a/mp_web_app/frontend/src/App.tsx b/mp_web_app/frontend/src/App.tsx
index 7eac237..cf2dd00 100644
--- a/mp_web_app/frontend/src/App.tsx
+++ b/mp_web_app/frontend/src/App.tsx
@@ -1,6 +1,5 @@
 import {lazy} from "react";
 import {AuthProvider} from "@/context/AuthContext";
-import Navigation from "@/pages/Navigation";
 import Base from "@/pages/Base";
 import {Route, Routes} from "react-router-dom";
 import PageLoadingWrapper from "@/components/page-loading-wrapper";
@@ -41,7 +40,6 @@ function App() {
         <Toaster />
         <Routes>
         <Route path="/" element={<Base />}>
-          <Route element={<Navigation />}>
             <Route index element={<Home />} />
             <Route path="home" element={<Home />} />
             <Route path="products" element={<Products />} />
@@ -154,7 +152,6 @@ function App() {
             <Route path="forgot-password" element={<ForgotPassword />} />
             <Route path="new-password" element={<NewPassword />} />
             <Route path="unsubscribe" element={<Unsubscribe />} />
-          </Route>
         </Route>
       </Routes>
       </AuthProvider>

From 8516a00c96dbec0cf19164c948880d7a92fa0766 Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sat, 15 Nov 2025 15:35:58 +0200
Subject: [PATCH 14/26] refactor: remove unused `Outlet` import from Navigation
 component

---
 mp_web_app/frontend/pages/Navigation.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/mp_web_app/frontend/pages/Navigation.tsx b/mp_web_app/frontend/pages/Navigation.tsx
index 571949e..49a566a 100644
--- a/mp_web_app/frontend/pages/Navigation.tsx
+++ b/mp_web_app/frontend/pages/Navigation.tsx
@@ -1,6 +1,5 @@
 import {useState, useEffect} from "react";
 import {Link, useNavigate} from "react-router-dom";
-import {Outlet} from "react-router-dom";
 import {useAuth} from "@/context/AuthContext";
 import {
   NavigationMenu,

From 8eec6d9b27886f8c41176cc9e2502942392542ce Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sat, 15 Nov 2025 15:46:12 +0200
Subject: [PATCH 15/26] feat: enhance file handling and upload UX, optimize
 caching

- Allowed Unicode characters in filenames while enforcing S3-safe restrictions.
- Adjusted filename cleaning logic to handle special characters and improve URL structure.
- Updated file download headers to support Unicode filenames.
- Improved file upload form UX with toast notifications for errors and success messages.
- Replaced outdated error/success messages with a modern toast system.
- Reduced React Query file list stale time from 1 hour to 1 minute for fresher data.
---
 mp_web_app/backend/files/operations.py        | 17 +++++--
 .../frontend/components/upload-file.tsx       | 45 ++++++++++---------
 mp_web_app/frontend/hooks/useFiles.ts         |  2 +-
 3 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/mp_web_app/backend/files/operations.py b/mp_web_app/backend/files/operations.py
index eb962d0..de4b9f3 100644
--- a/mp_web_app/backend/files/operations.py
+++ b/mp_web_app/backend/files/operations.py
@@ -126,10 +126,12 @@ def _create_file_name(file_name: str, original_name: str):
   extension = original_name.split(".")[-1]
   if extension not in allowed:
     raise InvalidFileExtensionError(extension, allowed)
-  cleaned_file_name = re.sub(r"[^A-Za-z0-9.\-_\s]", "", file_name).strip()
-  file_name_parts = re.split(r"[.\s\-_]", cleaned_file_name)
+  # Keep Cyrillic and other Unicode characters, only remove special chars that break S3
+  cleaned_file_name = re.sub(r'[<>:"/\\|?*]', "", file_name).strip()
+  # Replace spaces with underscores for cleaner URLs
+  cleaned_file_name = cleaned_file_name.replace(" ", "_")
   date_tag = f"{now.year!s}_{str(now.month).zfill(2)}_{str(now.day).zfill(2)}"
-  file_name = f"{date_tag}_{'_'.join([p.lower() for p in file_name_parts if p != ''])}_{str(uuid4())[:8]}.{extension}"
+  file_name = f"{date_tag}_{cleaned_file_name}_{str(uuid4())[:8]}.{extension}"
   return file_name
 
 
@@ -148,10 +150,17 @@ def download_file(file_metadata: FileMetadata | list[FileMetadata], user: User,
   try:
     s3_object = s3.get_object(Bucket=file_meta_object.bucket, Key=file_meta_object.key)
     file_stream = s3_object["Body"]
+    
+    # Properly encode filename for Cyrillic and other Unicode characters
+    from urllib.parse import quote
+    encoded_filename = quote(file_meta_object.file_name)
+    
     return StreamingResponse(
       file_stream,
       media_type="application/octet-stream",
-      headers={"Content-Disposition": f'attachment; filename="{file_meta_object.key}"'},
+      headers={
+        "Content-Disposition": f"attachment; filename*=UTF-8''{encoded_filename}"
+      },
     )
   except s3.exceptions.NoSuchKey:
     raise FileNotFoundError("File not found")
diff --git a/mp_web_app/frontend/components/upload-file.tsx b/mp_web_app/frontend/components/upload-file.tsx
index 75a6c56..d7db3d8 100644
--- a/mp_web_app/frontend/components/upload-file.tsx
+++ b/mp_web_app/frontend/components/upload-file.tsx
@@ -5,6 +5,7 @@ import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/compo
 import {Input} from "@/components/ui/input";
 import {Label} from "@/components/ui/label";
 import {useNavigate} from "react-router-dom";
+import {useToast} from "@/components/ui/use-toast";
 import apiClient from "@/context/apiClient";
 
 type User = {
@@ -32,19 +33,18 @@ export default function UploadFile() {
     []
   );
 
+  const {toast} = useToast();
   const [fileName, setFileName] = useState("");
   const [fileType, setFileType] = useState(fileTypeOptions[0]?.value ?? "");
   const [file, setFile] = useState<File | null>(null);
   const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState<string>("");
-  const [success, setSuccess] = useState<string>("");
+  const [isDragging, setIsDragging] = useState(false);
 
   // Users state
   const [users, setUsers] = useState<User[]>([]);
   const [loadingUsers, setLoadingUsers] = useState(false);
   const [usersError, setUsersError] = useState<string>("");
   const [selectedUserIds, setSelectedUserIds] = useState<string[]>([]);
-  const [isDragging, setIsDragging] = useState(false);
 
   // Get user role
   const [userRole, setUserRole] = useState<string>("");
@@ -101,16 +101,22 @@ export default function UploadFile() {
 
   const onSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    setError("");
-    setSuccess("");
 
     const isPrivate = fileType === "private_documents";
     if (!file || !fileName || !fileType) {
-      setError("Моля, попълнете всички задължителни полета и изберете файл.");
+      toast({
+        title: "Грешка",
+        description: "Моля, попълнете всички задължителни полета и изберете файл.",
+        variant: "destructive",
+      });
       return;
     }
     if (isPrivate && selectedUserIds.length === 0) {
-      setError("При частни документи трябва да изберете поне един потребител.");
+      toast({
+        title: "Грешка",
+        description: "При частни документи трябва да изберете поне един потребител.",
+        variant: "destructive",
+      });
       return;
     }
 
@@ -127,18 +133,22 @@ export default function UploadFile() {
         withCredentials: true,
       });
 
-      setSuccess("Файлът беше качен успешно.");
+      toast({
+        title: "Успех",
+        description: "Файлът беше качен успешно",
+      });
+
       setFile(null);
       setFileName("");
       setFileType(fileTypeOptions[0]?.value ?? "");
       setSelectedUserIds([]);
-      setTimeout(() => {
-        setSuccess("");
-        navigate("/upload", {replace: true});
-      }, 1200);
     } catch (err: any) {
       const msg = err?.response?.data?.detail || err?.response?.data?.message || err?.message || "Неуспех при качване.";
-      setError(msg);
+      toast({
+        title: "Грешка",
+        description: msg,
+        variant: "destructive",
+      });
     } finally {
       setSubmitting(false);
     }
@@ -188,15 +198,6 @@ export default function UploadFile() {
           </CardHeader>
           <CardContent>
             <form onSubmit={onSubmit} className="flex flex-col gap-6">
-              {error && (
-                <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">{error}</div>
-              )}
-              {success && (
-                <div className="p-3 text-sm text-green-600 bg-green-50 border border-green-200 rounded-md text-center">
-                  {success}
-                </div>
-              )}
-
               <div className="grid gap-3">
                 <Label htmlFor="file_name">Име на файл</Label>
                 <Input
diff --git a/mp_web_app/frontend/hooks/useFiles.ts b/mp_web_app/frontend/hooks/useFiles.ts
index a18a84f..8677266 100644
--- a/mp_web_app/frontend/hooks/useFiles.ts
+++ b/mp_web_app/frontend/hooks/useFiles.ts
@@ -37,7 +37,7 @@ export function useFiles(fileType: FileType) {
       });
       return response.data ?? [];
     },
-    staleTime: 60 * 60 * 1000, // 1 hour
+    staleTime: 60 * 1000, // 1 minute
   });
 }
 

From 8d6a137916c09f3bb03425cbb7c227cf27382e26 Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sat, 15 Nov 2025 16:20:50 +0200
Subject: [PATCH 16/26] refactor: simplify navigation styles and adjust
 integration in components

- Updated `Navigation` component to streamline class names and remove redundant styles.
- Adjusted `Header` and `Base` components to relocate and consistently render the `Navigation` bar.
- Introduced sticky desktop navigation in `Base` for improved user experience.
---
 mp_web_app/frontend/components/header.tsx             | 5 +----
 mp_web_app/frontend/components/ui/navigation-menu.tsx | 4 ++--
 mp_web_app/frontend/pages/Base.tsx                    | 6 ++++++
 mp_web_app/frontend/pages/Navigation.tsx              | 4 ++--
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/mp_web_app/frontend/components/header.tsx b/mp_web_app/frontend/components/header.tsx
index 3723a8c..2ce5ba4 100644
--- a/mp_web_app/frontend/components/header.tsx
+++ b/mp_web_app/frontend/components/header.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { Logo } from "@/components/logo";
-import Navigation from "@/pages/Navigation";
 
 export function Header() {
   const [scrolled, setScrolled] = useState(false);
@@ -17,7 +16,7 @@ export function Header() {
   return (
     <header
       className={`
-        sticky top-0 z-50 w-full
+        w-full
         transition-all duration-500
         ${
           scrolled
@@ -31,8 +30,6 @@ export function Header() {
         <div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-transparent to-primary/5 opacity-50" />
         <Logo />
       </div>
-      {/* Navigation bar */}
-      <Navigation />
     </header>
   );
 }
diff --git a/mp_web_app/frontend/components/ui/navigation-menu.tsx b/mp_web_app/frontend/components/ui/navigation-menu.tsx
index 03ee768..a3291a1 100644
--- a/mp_web_app/frontend/components/ui/navigation-menu.tsx
+++ b/mp_web_app/frontend/components/ui/navigation-menu.tsx
@@ -42,7 +42,7 @@ function NavigationMenuItem({className, ...props}: React.ComponentProps<typeof N
 }
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-xl bg-transparent hover:bg-white/50 hover:dark:bg-gray-900/50 backdrop-blur-sm px-4 py-2 text-[0.9625rem] font-medium disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-white/80 data-[state=open]:dark:bg-gray-900/80 focus-visible:ring-2 focus-visible:ring-ring/50 outline-none transition-all duration-300"
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
 );
 
 function NavigationMenuTrigger({
@@ -99,7 +99,7 @@ function NavigationMenuLink({className, ...props}: React.ComponentProps<typeof N
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "data-[active=true]:bg-white/80 data-[active=true]:dark:bg-gray-900/80 hover:bg-white/60 hover:dark:bg-gray-900/60 hover:shadow-md focus:bg-white/80 focus:dark:bg-gray-900/80 focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-lg p-3 text-sm transition-all duration-300 outline-none [&_svg:not([class*='size-'])]:size-4",
+        "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
         className
       )}
       {...props}
diff --git a/mp_web_app/frontend/pages/Base.tsx b/mp_web_app/frontend/pages/Base.tsx
index 6659a21..06579d1 100644
--- a/mp_web_app/frontend/pages/Base.tsx
+++ b/mp_web_app/frontend/pages/Base.tsx
@@ -1,6 +1,7 @@
 import { Outlet } from "react-router-dom";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
+import Navigation from "@/pages/Navigation";
 
 export default function Base() {
   return (
@@ -8,6 +9,11 @@ export default function Base() {
       {/* Modern Header with hero image and parallax effect */}
       <Header />
 
+      {/* Navigation bar - sticky on desktop, hamburger on mobile */}
+      <div className="sticky top-0 z-40 lg:block">
+        <Navigation />
+      </div>
+
       {/* Main content area - child routes render here */}
       <main className="flex-grow">
         <Outlet />
diff --git a/mp_web_app/frontend/pages/Navigation.tsx b/mp_web_app/frontend/pages/Navigation.tsx
index 49a566a..79bcf20 100644
--- a/mp_web_app/frontend/pages/Navigation.tsx
+++ b/mp_web_app/frontend/pages/Navigation.tsx
@@ -358,7 +358,7 @@ export function Navigation() {
     <>
       {/* Desktop Navigation */}
       {!isMobile && (
-        <div className="flex p-3 w-full items-center justify-center bg-background/95 backdrop-blur-md shadow-sm transition-all duration-300 border-t-2 border-b-2 border-transparent" style={{borderImage: 'linear-gradient(to right, oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56 / 0.8)) 1'}}>
+        <div className="flex p-3 w-full items-center justify-center bg-background border-t-2 border-b-2 border-transparent" style={{borderImage: 'linear-gradient(to right, oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56 / 0.8)) 1'}}>
           <NavigationMenu viewport={false}>
             <NavigationMenuList className="gap-2">
               {NAV_LINKS.map((link) => {
@@ -525,7 +525,7 @@ export function Navigation() {
 
       {/* Hamburger Icon for Mobile */}
       {isMobile && (
-        <div className="flex items-center px-2 py-1.5 w-full bg-background/95 backdrop-blur-md shadow-sm border-t-2 border-transparent" style={{borderImageSource: 'linear-gradient(to right, oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56), oklch(0.5889 0.145 154.56 / 0.8))', borderImageSlice: 1}}>
+        <div className="flex items-center px-2 py-1.5 w-full bg-background shadow-sm">
           <Button
             onClick={() => setMobileMenuOpen(true)}
             className="w-full flex items-center justify-center py-1.5 h-[30px]"

From 091f961448527210cfe684be13c7ba26e2481781 Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sat, 15 Nov 2025 17:50:43 +0200
Subject: [PATCH 17/26] **Refactor and enhance UI, backend endpoints, and data
 handling**

- Unified table styles for better responsiveness (`overflow-x-auto`, column group widths, `whitespace-nowrap` adjustments).
- Added user role checks (`useAuth`) across member-related components (`CooperativeMembers`, `Proxies`, `Board`, `Control`) for enhanced conditional rendering.
- Refined file size display to distinguish between KB and MB.
- Introduced `/me` endpoint in the backend to fetch authenticated user details.
- Adjusted `sync_members_list` endpoint to `/sync_members` and updated operations with `proxy` normalization.
- Enhanced AuthContext to manage user state and added `user` to context provider values.
---
 mp_web_app/backend/members/operations.py      |  1 +
 mp_web_app/backend/members/routers.py         |  2 +-
 mp_web_app/backend/users/routers.py           |  8 ++-
 .../frontend/components/files-table.tsx       | 38 ++++++----
 .../frontend/components/upload-file.tsx       |  4 +-
 mp_web_app/frontend/context/AuthContext.tsx   | 24 +++++--
 mp_web_app/frontend/hooks/useMembers.ts       |  3 +-
 mp_web_app/frontend/hooks/useUsers.ts         |  2 +
 mp_web_app/frontend/pages/about-us/Board.tsx  | 40 +++++------
 .../frontend/pages/about-us/Control.tsx       | 40 +++++------
 .../pages/admin/DocumentsManagement.tsx       | 35 +++++++---
 .../pages/admin/GalleryManagement.tsx         |  4 +-
 .../pages/admin/MembersManagement.tsx         |  4 +-
 .../frontend/pages/admin/UserManagement.tsx   | 32 +++++----
 .../pages/lists/CooperativeMembers.tsx        | 69 ++++++++++++++++---
 mp_web_app/frontend/pages/lists/Proxies.tsx   | 69 ++++++++++++++++---
 16 files changed, 265 insertions(+), 110 deletions(-)

diff --git a/mp_web_app/backend/members/operations.py b/mp_web_app/backend/members/operations.py
index 1f7a2de..21f2779 100644
--- a/mp_web_app/backend/members/operations.py
+++ b/mp_web_app/backend/members/operations.py
@@ -120,6 +120,7 @@ def _normalize_members(new_members_list: list[dict[str, Any]]):
         "email": member["email"] if member["email"] else None,
         "member_code": member["member_code"],
         "member_code_valid": True,
+        "proxy": True if member["proxy"] in ["1", "yes", "true"] else False
       }
     )
   return normalized_members_list
diff --git a/mp_web_app/backend/members/routers.py b/mp_web_app/backend/members/routers.py
index 659481b..13d9f7c 100644
--- a/mp_web_app/backend/members/routers.py
+++ b/mp_web_app/backend/members/routers.py
@@ -101,7 +101,7 @@ async def member_delete(
     raise HTTPException(status_code=500, detail=str(e))
 
 
-@member_router.post("/sync_members_list", status_code=status.HTTP_200_OK)
+@member_router.post("/sync_members", status_code=status.HTTP_200_OK)
 async def members_upload(
   file: UploadFile,
   member_repo: MemberRepository = Depends(get_member_repository),
diff --git a/mp_web_app/backend/users/routers.py b/mp_web_app/backend/users/routers.py
index 56f72f9..d83e935 100644
--- a/mp_web_app/backend/users/routers.py
+++ b/mp_web_app/backend/users/routers.py
@@ -3,7 +3,7 @@
 from starlette.responses import RedirectResponse
 
 from app_config import FRONTEND_BASE_URL
-from auth.operations import decode_token, is_token_expired, role_required
+from auth.operations import decode_token, get_current_user, is_token_expired, role_required
 from database.repositories import MemberRepository, UserRepository
 from mail.operations import construct_verification_link, send_verification_email
 from members.operations import get_member_repository, is_member_code_valid, update_member_code
@@ -24,6 +24,12 @@
 user_router = APIRouter(tags=["users"])
 
 
+@user_router.get("/me", response_model=User, status_code=status.HTTP_200_OK)
+async def get_me(current_user: User = Depends(get_current_user)):
+  """Get current authenticated user information."""
+  return current_user
+
+
 @user_router.get("/list", response_model=list[User], status_code=status.HTTP_200_OK)
 async def users_list(
   user_repo: UserRepository = Depends(get_user_repository), 
diff --git a/mp_web_app/frontend/components/files-table.tsx b/mp_web_app/frontend/components/files-table.tsx
index 92c604d..cbe0bf6 100644
--- a/mp_web_app/frontend/components/files-table.tsx
+++ b/mp_web_app/frontend/components/files-table.tsx
@@ -106,33 +106,40 @@ export function FilesTable({fileType, title = "Документи"}: FilesTableP
           <CardTitle>Списък с налични файлове</CardTitle>
         </CardHeader>
         <CardContent className="px-0">
-            <Table>
+          <div className="overflow-x-auto">
+            <Table className="w-full table-auto">
+            <colgroup>
+              <col style={{width: '5%'}} />
+              <col style={{width: '60%'}} />
+              <col style={{width: '20%'}} />
+              <col style={{width: '15%'}} />
+            </colgroup>
             <TableHeader>
               <TableRow>
-                <TableHead className="w-[80px] py-2">№</TableHead>
-                <TableHead className="py-2">Име на файл</TableHead>
-                <TableHead className="py-2">Дата на създаване</TableHead>
-                <TableHead className="text-right py-2">Действия</TableHead>
+                <TableHead className="whitespace-nowrap py-2">№</TableHead>
+                <TableHead className="whitespace-nowrap py-2">Име на файл</TableHead>
+                <TableHead className="whitespace-nowrap py-2">Дата на създаване</TableHead>
+                <TableHead className="whitespace-nowrap text-right py-2">Действия</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {loading && (
                 <TableRow>
-                  <TableCell colSpan={4} className="py-2">
+                  <TableCell colSpan={4} className="py-2 whitespace-nowrap">
                     Зареждане...
                   </TableCell>
                 </TableRow>
               )}
               {error && !loading && (
                 <TableRow>
-                  <TableCell colSpan={4} className="text-red-600 py-2">
+                  <TableCell colSpan={4} className="text-red-600 py-2 whitespace-nowrap">
                     {error}
                   </TableCell>
                 </TableRow>
               )}
               {!loading && !error && pageItems.length === 0 && (
                 <TableRow>
-                  <TableCell colSpan={4} className="py-2">
+                  <TableCell colSpan={4} className="py-2 whitespace-nowrap">
                     Няма налични записи.
                   </TableCell>
                 </TableRow>
@@ -141,12 +148,16 @@ export function FilesTable({fileType, title = "Документи"}: FilesTableP
                 !error &&
                 pageItems.map((file: FileMetadata, idx: number) => (
                   <TableRow key={file.id ?? `${file.file_name}-${startIdx + idx}`}>
-                    <TableCell className="font-medium py-2">{startIdx + idx + 1}</TableCell>
-                    <TableCell className="py-2">{file.file_name}</TableCell>
-                    <TableCell className="py-2">
-                      {file.created_at ? new Date(file.created_at).toLocaleString() : "-"}
+                    <TableCell className="font-medium py-2 whitespace-nowrap">{startIdx + idx + 1}</TableCell>
+                    <TableCell className="py-2 whitespace-nowrap">{file.file_name}</TableCell>
+                    <TableCell className="py-2 whitespace-nowrap">
+                      {file.created_at ? new Date(file.created_at).toLocaleDateString('bg-BG', {
+                        day: '2-digit',
+                        month: '2-digit',
+                        year: 'numeric'
+                      }) : "-"}
                     </TableCell>
-                    <TableCell className="text-right py-2">
+                    <TableCell className="text-right py-2 whitespace-nowrap">
                       <Button size="sm" onClick={() => handleDownload(file)}>
                         Изтегли
                       </Button>
@@ -155,6 +166,7 @@ export function FilesTable({fileType, title = "Документи"}: FilesTableP
                 ))}
             </TableBody>
           </Table>
+          </div>
 
           {/* Pagination footer */}
         {totalPages > 1 && (
diff --git a/mp_web_app/frontend/components/upload-file.tsx b/mp_web_app/frontend/components/upload-file.tsx
index d7db3d8..d4de78c 100644
--- a/mp_web_app/frontend/components/upload-file.tsx
+++ b/mp_web_app/frontend/components/upload-file.tsx
@@ -320,7 +320,9 @@ export default function UploadFile() {
                       <div className="space-y-1">
                         <p className="text-sm font-medium text-foreground">{file.name}</p>
                         <p className="text-xs text-muted-foreground">
-                          {(file.size / 1024 / 1024).toFixed(2)} MB
+                          {file.size >= 1024 * 1024
+                            ? `${(file.size / 1024 / 1024).toFixed(2)} MB`
+                            : `${(file.size / 1024).toFixed(2)} KB`}
                         </p>
                         <p className="text-xs text-primary">Кликни или пусни файл за промяна</p>
                       </div>
diff --git a/mp_web_app/frontend/context/AuthContext.tsx b/mp_web_app/frontend/context/AuthContext.tsx
index 5d147f6..084c52f 100644
--- a/mp_web_app/frontend/context/AuthContext.tsx
+++ b/mp_web_app/frontend/context/AuthContext.tsx
@@ -4,8 +4,17 @@ import {API_BASE_URL} from "@/app-config";
 import {getAccessToken, setAccessToken} from "@/context/tokenStore";
 import apiClient from "@/context/apiClient";
 
+interface User {
+  id: string;
+  email: string;
+  first_name?: string;
+  last_name?: string;
+  role?: string;
+}
+
 interface AuthContextType {
   isLoggedIn: boolean;
+  user: User | null;
   login: (accessToken: string) => void;
   logout: () => Promise<void>;
   checkAuth: () => void;
@@ -20,6 +29,7 @@ function getInitialAuthState(): boolean {
 
 export const AuthProvider = ({children}: {children: ReactNode}) => {
   const [isLoggedIn, setIsLoggedIn] = useState(getInitialAuthState);
+  const [user, setUser] = useState<User | null>(null);
   const navigate = useNavigate();
 
   // Function to check and update auth state (only checks token existence, no API calls)
@@ -37,21 +47,21 @@ export const AuthProvider = ({children}: {children: ReactNode}) => {
       const token = getAccessToken();
       if (!token) {
         setIsLoggedIn(false);
+        setUser(null);
         return;
       }
 
       try {
-        // Make a lightweight request to validate token
-        // If token is expired, apiClient interceptor will automatically refresh it
-        // Using news/get as a lightweight endpoint (returns quickly)
-        await apiClient.get("news/list");
-        // If we get here, token is valid or was refreshed successfully
+        // Fetch current user info
+        const response = await apiClient.get("users/me");
+        setUser(response.data);
         setIsLoggedIn(true);
       } catch (error: any) {
         // If it's a 401 after refresh attempt, token is invalid
         if (error.response?.status === 401) {
           setAccessToken(null);
           setIsLoggedIn(false);
+          setUser(null);
         }
         // For other errors (network, etc), keep logged in state
       }
@@ -69,6 +79,7 @@ export const AuthProvider = ({children}: {children: ReactNode}) => {
     // Listen for token cleared event from apiClient (when refresh fails)
     const handleTokenCleared = () => {
       setIsLoggedIn(false);
+      setUser(null);
     };
 
     window.addEventListener("storage", handleStorage);
@@ -89,6 +100,7 @@ export const AuthProvider = ({children}: {children: ReactNode}) => {
     // Clear access token first
     setAccessToken(null);
     setIsLoggedIn(false);
+    setUser(null);
 
     try {
       await fetch(`${API_BASE_URL}auth/logout`, {
@@ -102,7 +114,7 @@ export const AuthProvider = ({children}: {children: ReactNode}) => {
     navigate("/");
   };
 
-  return <AuthContext.Provider value={{isLoggedIn, login, logout, checkAuth}}>{children}</AuthContext.Provider>;
+  return <AuthContext.Provider value={{isLoggedIn, user, login, logout, checkAuth}}>{children}</AuthContext.Provider>;
 };
 
 export function useAuth() {
diff --git a/mp_web_app/frontend/hooks/useMembers.ts b/mp_web_app/frontend/hooks/useMembers.ts
index 2c1e35c..37fd384 100644
--- a/mp_web_app/frontend/hooks/useMembers.ts
+++ b/mp_web_app/frontend/hooks/useMembers.ts
@@ -9,7 +9,8 @@ export interface Member {
   email?: string;
   phone?: string;
   role?: string;
-  is_proxy?: boolean;
+  proxy?: boolean;
+  member_code_valid?: boolean;
 }
 
 // Query key factory
diff --git a/mp_web_app/frontend/hooks/useUsers.ts b/mp_web_app/frontend/hooks/useUsers.ts
index f7b4f8b..71b9240 100644
--- a/mp_web_app/frontend/hooks/useUsers.ts
+++ b/mp_web_app/frontend/hooks/useUsers.ts
@@ -10,6 +10,8 @@ export interface User {
   phone?: string;
   role?: string;
   is_active?: boolean;
+  user_code?: string;
+  is_code_valid?: boolean;
 }
 
 // Query key factory
diff --git a/mp_web_app/frontend/pages/about-us/Board.tsx b/mp_web_app/frontend/pages/about-us/Board.tsx
index 52598ec..0c9afdb 100644
--- a/mp_web_app/frontend/pages/about-us/Board.tsx
+++ b/mp_web_app/frontend/pages/about-us/Board.tsx
@@ -1,12 +1,10 @@
 import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
 import {Mail, Phone, User as UserIcon} from "lucide-react";
-import {useAuth} from "@/context/AuthContext";
 import {useBoardMembers} from "@/hooks/useUsers";
 
 export default function Board() {
   const {data: members = [], isLoading: loading} = useBoardMembers();
-  const {isLoggedIn} = useAuth();
 
   if (loading) {
     return (
@@ -39,53 +37,51 @@ export default function Board() {
           {members.length === 0 ? (
             <p className="text-center text-muted-foreground py-8">Няма налични данни</p>
           ) : (
-              <Table>
+              <div className="overflow-x-auto">
+              <Table className="w-full">
                 <TableHeader>
                   <TableRow>
-                    <TableHead>
+                    <TableHead className="whitespace-nowrap">
                       <div className="flex items-center gap-2">
                         <UserIcon className="w-4 h-4" />
                         Име
                       </div>
                     </TableHead>
-                    <TableHead>
+                    <TableHead className="whitespace-nowrap">
                       <div className="flex items-center gap-2">
                         <Mail className="w-4 h-4" />
                         Имейл
                       </div>
                     </TableHead>
-                    {isLoggedIn && (
-                      <TableHead>
-                        <div className="flex items-center gap-2">
-                          <Phone className="w-4 h-4" />
-                          Телефон
-                        </div>
-                      </TableHead>
-                    )}
+                    <TableHead className="whitespace-nowrap">
+                      <div className="flex items-center gap-2">
+                        <Phone className="w-4 h-4" />
+                        Телефон
+                      </div>
+                    </TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {members.map((member) => (
                     <TableRow key={member.id}>
-                      <TableCell className="font-medium">
+                      <TableCell className="font-medium whitespace-nowrap">
                         {member.first_name} {member.last_name}
                       </TableCell>
-                      <TableCell>
+                      <TableCell className="whitespace-nowrap">
                         <a href={`mailto:${member.email}`} className="text-primary hover:underline">
                           {member.email}
                         </a>
                       </TableCell>
-                      {isLoggedIn && (
-                        <TableCell>
-                          <a href={`tel:${member.phone}`} className="text-primary hover:underline">
-                            {member.phone}
-                          </a>
-                        </TableCell>
-                      )}
+                      <TableCell className="whitespace-nowrap">
+                        <a href={`tel:${member.phone}`} className="text-primary hover:underline">
+                          {member.phone || "-"}
+                        </a>
+                      </TableCell>
                     </TableRow>
                   ))}
                 </TableBody>
               </Table>
+              </div>
           )}
         </CardContent>
       </Card>
diff --git a/mp_web_app/frontend/pages/about-us/Control.tsx b/mp_web_app/frontend/pages/about-us/Control.tsx
index 33f9312..6c7d676 100644
--- a/mp_web_app/frontend/pages/about-us/Control.tsx
+++ b/mp_web_app/frontend/pages/about-us/Control.tsx
@@ -1,12 +1,10 @@
 import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
 import {Mail, Phone, User as UserIcon} from "lucide-react";
-import {useAuth} from "@/context/AuthContext";
 import {useControlMembers} from "@/hooks/useUsers";
 
 export default function Control() {
   const {data: members = [], isLoading: loading} = useControlMembers();
-  const {isLoggedIn} = useAuth();
 
   if (loading) {
     return (
@@ -39,53 +37,51 @@ export default function Control() {
           {members.length === 0 ? (
             <p className="text-center text-muted-foreground py-8">Няма налични данни</p>
           ) : (
-              <Table>
+              <div className="overflow-x-auto">
+              <Table className="w-full">
                 <TableHeader>
                   <TableRow>
-                    <TableHead>
+                    <TableHead className="whitespace-nowrap">
                       <div className="flex items-center gap-2">
                         <UserIcon className="w-4 h-4" />
                         Име
                       </div>
                     </TableHead>
-                    <TableHead>
+                    <TableHead className="whitespace-nowrap">
                       <div className="flex items-center gap-2">
                         <Mail className="w-4 h-4" />
                         Имейл
                       </div>
                     </TableHead>
-                    {isLoggedIn && (
-                      <TableHead>
-                        <div className="flex items-center gap-2">
-                          <Phone className="w-4 h-4" />
-                          Телефон
-                        </div>
-                      </TableHead>
-                    )}
+                    <TableHead className="whitespace-nowrap">
+                      <div className="flex items-center gap-2">
+                        <Phone className="w-4 h-4" />
+                        Телефон
+                      </div>
+                    </TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {members.map((member) => (
                     <TableRow key={member.id}>
-                      <TableCell className="font-medium">
+                      <TableCell className="font-medium whitespace-nowrap">
                         {member.first_name} {member.last_name}
                       </TableCell>
-                      <TableCell>
+                      <TableCell className="whitespace-nowrap">
                         <a href={`mailto:${member.email}`} className="text-primary hover:underline">
                           {member.email}
                         </a>
                       </TableCell>
-                      {isLoggedIn && (
-                        <TableCell>
-                          <a href={`tel:${member.phone}`} className="text-primary hover:underline">
-                            {member.phone}
-                          </a>
-                        </TableCell>
-                      )}
+                      <TableCell className="whitespace-nowrap">
+                        <a href={`tel:${member.phone}`} className="text-primary hover:underline">
+                          {member.phone || "-"}
+                        </a>
+                      </TableCell>
                     </TableRow>
                   ))}
                 </TableBody>
               </Table>
+              </div>
           )}
         </CardContent>
       </Card>
diff --git a/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx b/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx
index 80c8b5c..311a4d4 100644
--- a/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx
@@ -152,26 +152,38 @@ export default function DocumentsManagement() {
             Няма налични документи{selectedFileType !== "all" ? " от този тип" : ""}
           </p>
         ) : (
-          <Table>
+          <div className="overflow-x-auto">
+          <Table className="w-full table-auto">
+            <colgroup>
+              <col style={{width: '35%'}} />
+              <col style={{width: '20%'}} />
+              <col style={{width: '20%'}} />
+              <col style={{width: '12%'}} />
+              <col style={{width: '13%'}} />
+            </colgroup>
             <TableHeader>
               <TableRow>
-                <TableHead>Име на файл</TableHead>
-                <TableHead>Тип</TableHead>
-                <TableHead>Качен от</TableHead>
-                <TableHead>Дата</TableHead>
-                <TableHead className="text-right">Действия</TableHead>
+                <TableHead className="whitespace-nowrap">Име на файл</TableHead>
+                <TableHead className="whitespace-nowrap">Тип</TableHead>
+                <TableHead className="whitespace-nowrap">Качен от</TableHead>
+                <TableHead className="whitespace-nowrap">Дата</TableHead>
+                <TableHead className="whitespace-nowrap text-right">Действия</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {filteredFiles.map((file) => (
                 <TableRow key={file.id}>
-                  <TableCell className="font-medium">{file.file_name}</TableCell>
-                  <TableCell>
+                  <TableCell className="font-medium whitespace-nowrap">{file.file_name}</TableCell>
+                  <TableCell className="whitespace-nowrap">
                     <span className="text-sm text-muted-foreground">{getFileTypeLabel(file.file_type)}</span>
                   </TableCell>
-                  <TableCell>{file.uploaded_by}</TableCell>
-                  <TableCell>{new Date(file.created_at).toLocaleDateString("bg-BG")}</TableCell>
-                  <TableCell className="text-right">
+                  <TableCell className="whitespace-nowrap">{file.uploaded_by}</TableCell>
+                  <TableCell className="whitespace-nowrap">{new Date(file.created_at).toLocaleDateString("bg-BG", {
+                    day: '2-digit',
+                    month: '2-digit',
+                    year: 'numeric'
+                  })}</TableCell>
+                  <TableCell className="text-right whitespace-nowrap">
                     <Button
                       variant="destructive"
                       size="sm"
@@ -184,6 +196,7 @@ export default function DocumentsManagement() {
               ))}
             </TableBody>
           </Table>
+          </div>
         )}
 
         {/* Delete Confirmation */}
diff --git a/mp_web_app/frontend/pages/admin/GalleryManagement.tsx b/mp_web_app/frontend/pages/admin/GalleryManagement.tsx
index e5ea840..60be1f8 100644
--- a/mp_web_app/frontend/pages/admin/GalleryManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/GalleryManagement.tsx
@@ -237,7 +237,9 @@ export default function GalleryManagement() {
                   <div className="space-y-1">
                     <p className="text-sm font-medium text-foreground">{selectedFile.name}</p>
                     <p className="text-xs text-muted-foreground">
-                      {(selectedFile.size / 1024 / 1024).toFixed(2)} MB
+                      {selectedFile.size >= 1024 * 1024
+                        ? `${(selectedFile.size / 1024 / 1024).toFixed(2)} MB`
+                        : `${(selectedFile.size / 1024).toFixed(2)} KB`}
                     </p>
                     <p className="text-xs text-primary">Кликни или пусни снимка за промяна</p>
                   </div>
diff --git a/mp_web_app/frontend/pages/admin/MembersManagement.tsx b/mp_web_app/frontend/pages/admin/MembersManagement.tsx
index 347f170..603ebb2 100644
--- a/mp_web_app/frontend/pages/admin/MembersManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/MembersManagement.tsx
@@ -143,7 +143,9 @@ export default function MembersManagement() {
                   <div className="space-y-1">
                     <p className="text-sm font-medium text-foreground">{selectedFile.name}</p>
                     <p className="text-xs text-muted-foreground">
-                      {(selectedFile.size / 1024 / 1024).toFixed(2)} MB
+                      {selectedFile.size >= 1024 * 1024
+                        ? `${(selectedFile.size / 1024 / 1024).toFixed(2)} MB`
+                        : `${(selectedFile.size / 1024).toFixed(2)} KB`}
                     </p>
                     <p className="text-xs text-primary">Кликни или пусни файл за промяна</p>
                   </div>
diff --git a/mp_web_app/frontend/pages/admin/UserManagement.tsx b/mp_web_app/frontend/pages/admin/UserManagement.tsx
index daf8506..dd188be 100644
--- a/mp_web_app/frontend/pages/admin/UserManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/UserManagement.tsx
@@ -131,29 +131,32 @@ export default function UserManagement() {
         {loading ? (
           <LoadingSpinner />
         ) : (
-          <Table>
+          <div className="overflow-x-auto">
+          <Table className="w-full">
             <TableHeader>
               <TableRow>
-                <TableHead className="w-[60px]">№</TableHead>
-                <TableHead>Име</TableHead>
-                <TableHead>Email</TableHead>
-                <TableHead>Роля</TableHead>
-                <TableHead>Активен</TableHead>
-                <TableHead>Абониран</TableHead>
-                <TableHead>Действия</TableHead>
+                <TableHead className="whitespace-nowrap">№</TableHead>
+                <TableHead className="whitespace-nowrap">Име</TableHead>
+                <TableHead className="whitespace-nowrap">Email</TableHead>
+                <TableHead className="whitespace-nowrap">Телефон</TableHead>
+                <TableHead className="whitespace-nowrap">Роля</TableHead>
+                <TableHead className="whitespace-nowrap">Активен</TableHead>
+                <TableHead className="whitespace-nowrap">Абониран</TableHead>
+                <TableHead className="whitespace-nowrap">Действия</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {users.map((user, index) => (
                 <TableRow key={user.id}>
-                  <TableCell className="font-medium">{index + 1}</TableCell>
-                  <TableCell className="font-medium">
+                  <TableCell className="font-medium whitespace-nowrap">{index + 1}</TableCell>
+                  <TableCell className="font-medium whitespace-nowrap">
                     {user.first_name} {user.last_name}
                   </TableCell>
-                  <TableCell>{user.email}</TableCell>
-                  <TableCell>{roleTranslations[user.role] || user.role}</TableCell>
-                  <TableCell>{user.active ? "Да" : "Не"}</TableCell>
-                  <TableCell>{user.subscribed ? "Да" : "Не"}</TableCell>
+                  <TableCell className="whitespace-nowrap">{user.email}</TableCell>
+                  <TableCell className="whitespace-nowrap">{user.phone || "-"}</TableCell>
+                  <TableCell className="whitespace-nowrap">{roleTranslations[user.role] || user.role}</TableCell>
+                  <TableCell className="whitespace-nowrap">{user.active ? "Да" : "Не"}</TableCell>
+                  <TableCell className="whitespace-nowrap">{user.subscribed ? "Да" : "Не"}</TableCell>
                   <TableCell>
                     <div className="flex gap-2">
                       <Button variant="outline" size="sm" onClick={() => openEditDialog(user)}>
@@ -168,6 +171,7 @@ export default function UserManagement() {
               ))}
             </TableBody>
           </Table>
+          </div>
         )}
 
         {/* Edit Dialog */}
diff --git a/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx b/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
index 2bc786d..0fc2bf9 100644
--- a/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
+++ b/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
@@ -1,11 +1,14 @@
 import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
-import {User as UserIcon} from "lucide-react";
+import {User as UserIcon, Mail, Phone, CheckCircle, XCircle} from "lucide-react";
 import {LoadingSpinner} from "@/components/ui/loading-spinner";
 import {useMembers} from "@/hooks/useMembers";
+import {useAuth} from "@/context/AuthContext";
 
 export default function CooperativeMembers() {
   const {data: members = [], isLoading: loading} = useMembers({ proxy_only: false });
+  const {isLoggedIn, user} = useAuth();
+  const isAdmin = user?.role === "admin";
 
   if (loading) {
     return (
@@ -38,29 +41,79 @@ export default function CooperativeMembers() {
           {members.length === 0 ? (
             <p className="text-center text-muted-foreground py-8">Няма налични данни</p>
           ) : (
-              <Table>
+              <div className="overflow-x-auto">
+              <Table className="w-full">
                 <TableHeader>
                   <TableRow>
-                    <TableHead className="w-[80px]">№</TableHead>
-                    <TableHead>
+                    <TableHead className="whitespace-nowrap">№</TableHead>
+                    <TableHead className="whitespace-nowrap">
                       <div className="flex items-center gap-2">
                         <UserIcon className="w-4 h-4" />
                         Име
                       </div>
                     </TableHead>
-                    <TableHead>Фамилия</TableHead>
+                    <TableHead className="whitespace-nowrap">Фамилия</TableHead>
+                    {isLoggedIn && (
+                      <TableHead className="whitespace-nowrap">
+                        <div className="flex items-center gap-2">
+                          <Mail className="w-4 h-4" />
+                          Имейл
+                        </div>
+                      </TableHead>
+                    )}
+                    {isAdmin && (
+                      <>
+                        <TableHead className="whitespace-nowrap">
+                          <div className="flex items-center gap-2">
+                            <Phone className="w-4 h-4" />
+                            Телефон
+                          </div>
+                        </TableHead>
+                        <TableHead className="whitespace-nowrap text-center">Код</TableHead>
+                        <TableHead className="whitespace-nowrap text-center">Използван</TableHead>
+                      </>
+                    )}
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {members.map((member, index) => (
                     <TableRow key={index}>
-                      <TableCell className="font-medium">{index + 1}</TableCell>
-                      <TableCell>{member.first_name}</TableCell>
-                      <TableCell>{member.last_name}</TableCell>
+                      <TableCell className="font-medium whitespace-nowrap">{index + 1}</TableCell>
+                      <TableCell className="whitespace-nowrap">{member.first_name}</TableCell>
+                      <TableCell className="whitespace-nowrap">{member.last_name}</TableCell>
+                      {isLoggedIn && (
+                        <TableCell className="whitespace-nowrap">{member.email || "-"}</TableCell>
+                      )}
+                      {isAdmin && (
+                        <>
+                          <TableCell className="whitespace-nowrap">{member.phone || "-"}</TableCell>
+                          <TableCell className="text-center">
+                            {member.member_code ? (
+                              <span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm bg-muted border border-border">
+                                {member.member_code}
+                              </span>
+                            ) : (
+                              "-"
+                            )}
+                          </TableCell>
+                          <TableCell className="text-center">
+                            {member.member_code ? (
+                              member.member_code_valid ? (
+                                <CheckCircle className="h-4 w-4 text-green-600 mx-auto" />
+                              ) : (
+                                <XCircle className="h-4 w-4 text-red-600 mx-auto" />
+                              )
+                            ) : (
+                              "-"
+                            )}
+                          </TableCell>
+                        </>
+                      )}
                     </TableRow>
                   ))}
                 </TableBody>
               </Table>
+              </div>
           )}
         </CardContent>
       </Card>
diff --git a/mp_web_app/frontend/pages/lists/Proxies.tsx b/mp_web_app/frontend/pages/lists/Proxies.tsx
index f4d7de0..33de3ce 100644
--- a/mp_web_app/frontend/pages/lists/Proxies.tsx
+++ b/mp_web_app/frontend/pages/lists/Proxies.tsx
@@ -1,12 +1,15 @@
 import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
-import {User as UserIcon} from "lucide-react";
+import {User as UserIcon, Mail, Phone, CheckCircle, XCircle} from "lucide-react";
 import {LoadingSpinner} from "@/components/ui/loading-spinner";
 import {useMembers} from "@/hooks/useMembers";
+import {useAuth} from "@/context/AuthContext";
 
 export default function Proxies() {
   const {data: members = [], isLoading: loading, error: queryError} = useMembers({ proxy_only: true });
   const error = queryError ? "Неуспешно зареждане на пълномощниците" : null;
+  const {isLoggedIn, user} = useAuth();
+  const isAdmin = user?.role === "admin";
 
   if (loading) {
     return (
@@ -41,29 +44,79 @@ export default function Proxies() {
           ) : members.length === 0 ? (
             <p className="text-center text-muted-foreground py-8">Няма налични пълномощници</p>
           ) : (
-              <Table>
+              <div className="overflow-x-auto">
+              <Table className="w-full">
                 <TableHeader>
                   <TableRow>
-                    <TableHead className="w-[80px]">№</TableHead>
-                    <TableHead>
+                    <TableHead className="w-[5%]">№</TableHead>
+                    <TableHead className="w-[12%]">
                       <div className="flex items-center gap-2">
                         <UserIcon className="w-4 h-4" />
                         Име
                       </div>
                     </TableHead>
-                    <TableHead>Фамилия</TableHead>
+                    <TableHead className="w-[12%]">Фамилия</TableHead>
+                    {isLoggedIn && (
+                      <TableHead className={isAdmin ? "w-[25%]" : "w-[71%]"}>
+                        <div className="flex items-center gap-2">
+                          <Mail className="w-4 h-4" />
+                          Имейл
+                        </div>
+                      </TableHead>
+                    )}
+                    {isAdmin && (
+                      <>
+                        <TableHead className="w-[18%]">
+                          <div className="flex items-center gap-2">
+                            <Phone className="w-4 h-4" />
+                            Телефон
+                          </div>
+                        </TableHead>
+                        <TableHead className="w-[16%] text-center">Код</TableHead>
+                        <TableHead className="w-[12%] text-center">Използван</TableHead>
+                      </>
+                    )}
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {members.map((member, index) => (
                     <TableRow key={index}>
-                      <TableCell className="font-medium">{index + 1}</TableCell>
-                      <TableCell>{member.first_name}</TableCell>
-                      <TableCell>{member.last_name}</TableCell>
+                      <TableCell className="font-medium whitespace-nowrap">{index + 1}</TableCell>
+                      <TableCell className="whitespace-nowrap">{member.first_name}</TableCell>
+                      <TableCell className="whitespace-nowrap">{member.last_name}</TableCell>
+                      {isLoggedIn && (
+                        <TableCell className="whitespace-nowrap">{member.email || "-"}</TableCell>
+                      )}
+                      {isAdmin && (
+                        <>
+                          <TableCell className="whitespace-nowrap">{member.phone || "-"}</TableCell>
+                          <TableCell className="text-center">
+                            {member.member_code ? (
+                              <span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm bg-muted border border-border">
+                                {member.member_code}
+                              </span>
+                            ) : (
+                              "-"
+                            )}
+                          </TableCell>
+                          <TableCell className="text-center">
+                            {member.member_code ? (
+                              member.member_code_valid ? (
+                                <CheckCircle className="h-4 w-4 text-green-600 mx-auto" />
+                              ) : (
+                                <XCircle className="h-4 w-4 text-red-600 mx-auto" />
+                              )
+                            ) : (
+                              "-"
+                            )}
+                          </TableCell>
+                        </>
+                      )}
                     </TableRow>
                   ))}
                 </TableBody>
               </Table>
+              </div>
           )}
         </CardContent>
       </Card>

From 45d877513079947564fa138844a3b4ca870dac1e Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Wed, 19 Nov 2025 00:14:58 +0200
Subject: [PATCH 18/26] fix: correct attribute name usage in DynamoDB update
 and adjust token expiration

- Fixed `#name` attribute reference in `products/operations.py` for proper DynamoDB update expression syntax.
- Increased `ACCESS_TOKEN_EXPIRE_MINUTES` from 1 to 5 in `auth/operations.py` to provide more practical access token lifespan.
---
 mp_web_app/backend/auth/operations.py     | 2 +-
 mp_web_app/backend/products/operations.py | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/mp_web_app/backend/auth/operations.py b/mp_web_app/backend/auth/operations.py
index 247eabb..1f4a120 100644
--- a/mp_web_app/backend/auth/operations.py
+++ b/mp_web_app/backend/auth/operations.py
@@ -20,7 +20,7 @@
 from users.roles import ROLE_HIERARCHY, UserRole
 
 REFRESH_TABLE_NAME = os.environ.get("REFRESH_TABLE_NAME")
-ACCESS_TOKEN_EXPIRE_MINUTES = 1
+ACCESS_TOKEN_EXPIRE_MINUTES = 5
 REFRESH_TOKEN_EXPIRE_DAYS = 7
 
 oauth2_scheme = OAuth2PasswordBearer(tokenUrl="auth/login")
diff --git a/mp_web_app/backend/products/operations.py b/mp_web_app/backend/products/operations.py
index 343c6c2..c190dc2 100644
--- a/mp_web_app/backend/products/operations.py
+++ b/mp_web_app/backend/products/operations.py
@@ -51,7 +51,7 @@ def update_product(product_update: ProductUpdate, product: Product, repo: Produc
   if product_update.name is not None:
     update_expression_parts.append("#name = :name")
     expression_attribute_values[":name"] = product_update.name
-    expression_attribute_names[":name"] = "name"
+    expression_attribute_names["#name"] = "name"
 
   if product_update.length is not None:
     update_expression_parts.append("#length = :length")

From f4a45b554802d38e2957be2766be96e02bb76596 Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Wed, 19 Nov 2025 00:15:13 +0200
Subject: [PATCH 19/26] refactor: standardize table column widths and enhance
 data handling

- Adjusted table column widths across frontend components for consistency and improved readability.
- Updated `useNews` hook to simplify query keys and handle user authentication state.
- Added member counts to several titles (`Board`, `Control`, `CooperativeMembers`, `Proxies`) for better context.
- Improved `ProductsManagement` form validation and payload handling to ensure clean and accurate data submission.
- Replaced deprecated `is_public` attribute in `NewsCard` with new `news_type` for better clarity.
---
 .../frontend/components/files-table.tsx       |  8 +--
 .../frontend/components/products-table.tsx    | 14 +++---
 mp_web_app/frontend/components/ui/table.tsx   |  2 +-
 mp_web_app/frontend/hooks/useNews.ts          | 14 +++---
 mp_web_app/frontend/pages/Home.tsx            |  2 +-
 mp_web_app/frontend/pages/UploadFile.tsx      |  4 +-
 mp_web_app/frontend/pages/about-us/Board.tsx  |  6 ++-
 .../frontend/pages/about-us/Control.tsx       |  6 ++-
 .../pages/admin/DocumentsManagement.tsx       | 11 ++---
 .../frontend/pages/admin/NewsManagement.tsx   |  2 +-
 .../pages/admin/ProductsManagement.tsx        | 49 +++++++++++++------
 .../frontend/pages/admin/UserManagement.tsx   | 10 ++--
 .../pages/lists/CooperativeMembers.tsx        |  4 +-
 mp_web_app/frontend/pages/lists/Proxies.tsx   |  2 +-
 14 files changed, 74 insertions(+), 60 deletions(-)

diff --git a/mp_web_app/frontend/components/files-table.tsx b/mp_web_app/frontend/components/files-table.tsx
index cbe0bf6..6a888ce 100644
--- a/mp_web_app/frontend/components/files-table.tsx
+++ b/mp_web_app/frontend/components/files-table.tsx
@@ -108,15 +108,9 @@ export function FilesTable({fileType, title = "Документи"}: FilesTableP
         <CardContent className="px-0">
           <div className="overflow-x-auto">
             <Table className="w-full table-auto">
-            <colgroup>
-              <col style={{width: '5%'}} />
-              <col style={{width: '60%'}} />
-              <col style={{width: '20%'}} />
-              <col style={{width: '15%'}} />
-            </colgroup>
             <TableHeader>
               <TableRow>
-                <TableHead className="whitespace-nowrap py-2">№</TableHead>
+                <TableHead className="whitespace-nowrap py-2 w-[5%]">№</TableHead>
                 <TableHead className="whitespace-nowrap py-2">Име на файл</TableHead>
                 <TableHead className="whitespace-nowrap py-2">Дата на създаване</TableHead>
                 <TableHead className="whitespace-nowrap text-right py-2">Действия</TableHead>
diff --git a/mp_web_app/frontend/components/products-table.tsx b/mp_web_app/frontend/components/products-table.tsx
index 3148e66..73a22b6 100644
--- a/mp_web_app/frontend/components/products-table.tsx
+++ b/mp_web_app/frontend/components/products-table.tsx
@@ -51,12 +51,12 @@ export function ProductsTable({title = "Продукти"}: ProductsTableProps)
             <Table>
             <TableHeader>
               <TableRow>
-                <TableHead className="w-[80px] py-2">№</TableHead>
-                <TableHead className="py-2">Име</TableHead>
-                <TableHead className="py-2 text-center">Дължина (см)</TableHead>
-                <TableHead className="py-2 text-center">Ширина (см)</TableHead>
-                <TableHead className="py-2 text-center">Височина (см)</TableHead>
-                <TableHead className="py-2">Описание</TableHead>
+                <TableHead className="py-2 w-[5%] whitespace-nowrap">№</TableHead>
+                <TableHead className="py-2 w-[20%] whitespace-nowrap">Име</TableHead>
+                <TableHead className="py-2 text-center w-[10%] whitespace-nowrap">Дължина (см)</TableHead>
+                <TableHead className="py-2 text-center w-[10%] whitespace-nowrap">Ширина (см)</TableHead>
+                <TableHead className="py-2 text-center w-[10%] whitespace-nowrap">Височина (см)</TableHead>
+                <TableHead className="py-2 w-[45%] pl-8 whitespace-nowrap">Описание</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -90,7 +90,7 @@ export function ProductsTable({title = "Продукти"}: ProductsTableProps)
                     <TableCell className="py-2 text-center">{product.length ?? "-"}</TableCell>
                     <TableCell className="py-2 text-center">{product.width ?? "-"}</TableCell>
                     <TableCell className="py-2 text-center">{product.height ?? "-"}</TableCell>
-                    <TableCell className="py-2">{product.description || "-"}</TableCell>
+                    <TableCell className="py-2 pl-8 min-w-[350px]">{product.description || "-"}</TableCell>
                   </TableRow>
                 ))}
             </TableBody>
diff --git a/mp_web_app/frontend/components/ui/table.tsx b/mp_web_app/frontend/components/ui/table.tsx
index f21c798..17e1772 100644
--- a/mp_web_app/frontend/components/ui/table.tsx
+++ b/mp_web_app/frontend/components/ui/table.tsx
@@ -6,7 +6,7 @@ import {Button} from "./button";
 
 function Table({className, ...props}: React.ComponentProps<"table">) {
   return (
-    <div data-slot="table-container" className="relative w-[95%] mx-auto overflow-x-auto rounded-xl border border-gray-200/50 dark:border-gray-700/50 bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm">
+    <div data-slot="table-container" className="relative w-[97%] mx-auto overflow-x-auto rounded-xl border border-gray-200/50 dark:border-gray-700/50 bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm">
       <table data-slot="table" className={cn("w-full caption-bottom text-sm min-w-[600px] xl:table-fixed", className)} {...props} />
     </div>
   );
diff --git a/mp_web_app/frontend/hooks/useNews.ts b/mp_web_app/frontend/hooks/useNews.ts
index df92094..247cff6 100644
--- a/mp_web_app/frontend/hooks/useNews.ts
+++ b/mp_web_app/frontend/hooks/useNews.ts
@@ -7,28 +7,28 @@ export interface NewsItem {
   id?: string | null;
   title: string;
   content: string;
-  author?: string | null;
+  author_id?: string | null;
   created_at?: string | null;
-  is_public?: boolean;
+  news_type?: "regular" | "private";
 }
 
 // Query key factory
 export const newsKeys = {
   all: ['news'] as const,
   lists: () => [...newsKeys.all, 'list'] as const,
-  list: (token?: string) => [...newsKeys.lists(), { token }] as const,
+  list: () => [...newsKeys.lists()] as const,
 };
 
 // Fetch news list
 export function useNews() {
   const token = getAccessToken();
+  const isLoggedIn = !!token;
   
   return useQuery({
-    queryKey: newsKeys.list(token || undefined),
+    queryKey: [...newsKeys.list(), { isLoggedIn }],
     queryFn: async () => {
-      const response = await apiClient.get<NewsItem[]>('news/list', {
-        params: token ? { token } : {},
-      });
+      // Token is automatically sent via Authorization header by apiClient
+      const response = await apiClient.get<NewsItem[]>('news/list');
       return response.data ?? [];
     },
     staleTime: 10 * 60 * 1000, // 10 minutes
diff --git a/mp_web_app/frontend/pages/Home.tsx b/mp_web_app/frontend/pages/Home.tsx
index e160850..9aec560 100644
--- a/mp_web_app/frontend/pages/Home.tsx
+++ b/mp_web_app/frontend/pages/Home.tsx
@@ -108,7 +108,7 @@ export default function Home() {
                     title={item.title}
                     content={item.content}
                     created_at={item.created_at || ""}
-                    news_type={item.is_public === false ? "private" : "regular"}
+                    news_type={item.news_type || "regular"}
                   />
                 </div>
               ))}
diff --git a/mp_web_app/frontend/pages/UploadFile.tsx b/mp_web_app/frontend/pages/UploadFile.tsx
index 5f0b8dc..ee5907c 100644
--- a/mp_web_app/frontend/pages/UploadFile.tsx
+++ b/mp_web_app/frontend/pages/UploadFile.tsx
@@ -2,8 +2,8 @@ import UploadFile from "@/components/upload-file";
 
 export default function Upload() {
   return (
-    <div className="flex min-h-svh w-full items-top justify-center p-5 md:pt-15">
-      <div className="w-full max-w-[60vw]">
+    <div className="flex min-h-svh w-full items-top justify-center md:pb-15 md:pt-15">
+      <div className="w-[99vw] md:w-full md:max-w-[60vw]">
         <UploadFile />
       </div>
     </div>
diff --git a/mp_web_app/frontend/pages/about-us/Board.tsx b/mp_web_app/frontend/pages/about-us/Board.tsx
index 0c9afdb..6d8c4bc 100644
--- a/mp_web_app/frontend/pages/about-us/Board.tsx
+++ b/mp_web_app/frontend/pages/about-us/Board.tsx
@@ -31,7 +31,7 @@ export default function Board() {
       <section className="w-full px-2 xl:container xl:mx-auto xl:px-4 py-8">
         <Card>
         <CardHeader>
-          <CardTitle>Членове на управителния съвет</CardTitle>
+          <CardTitle>Членове на управителния съвет ({members.length})</CardTitle>
         </CardHeader>
         <CardContent className="px-0">
           {members.length === 0 ? (
@@ -41,6 +41,7 @@ export default function Board() {
               <Table className="w-full">
                 <TableHeader>
                   <TableRow>
+                    <TableHead className="whitespace-nowrap w-[5%]">№</TableHead>
                     <TableHead className="whitespace-nowrap">
                       <div className="flex items-center gap-2">
                         <UserIcon className="w-4 h-4" />
@@ -62,8 +63,9 @@ export default function Board() {
                   </TableRow>
                 </TableHeader>
                 <TableBody>
-                  {members.map((member) => (
+                  {members.map((member, index) => (
                     <TableRow key={member.id}>
+                      <TableCell className="font-medium whitespace-nowrap">{index + 1}</TableCell>
                       <TableCell className="font-medium whitespace-nowrap">
                         {member.first_name} {member.last_name}
                       </TableCell>
diff --git a/mp_web_app/frontend/pages/about-us/Control.tsx b/mp_web_app/frontend/pages/about-us/Control.tsx
index 6c7d676..057df64 100644
--- a/mp_web_app/frontend/pages/about-us/Control.tsx
+++ b/mp_web_app/frontend/pages/about-us/Control.tsx
@@ -31,7 +31,7 @@ export default function Control() {
       <section className="w-full px-2 xl:container xl:mx-auto xl:px-4 py-8">
         <Card>
         <CardHeader>
-          <CardTitle>Членове на контролния съвет</CardTitle>
+          <CardTitle>Членове на контролния съвет ({members.length})</CardTitle>
         </CardHeader>
         <CardContent className="px-0">
           {members.length === 0 ? (
@@ -41,6 +41,7 @@ export default function Control() {
               <Table className="w-full">
                 <TableHeader>
                   <TableRow>
+                    <TableHead className="whitespace-nowrap w-[5%]">№</TableHead>
                     <TableHead className="whitespace-nowrap">
                       <div className="flex items-center gap-2">
                         <UserIcon className="w-4 h-4" />
@@ -62,8 +63,9 @@ export default function Control() {
                   </TableRow>
                 </TableHeader>
                 <TableBody>
-                  {members.map((member) => (
+                  {members.map((member, index) => (
                     <TableRow key={member.id}>
+                      <TableCell className="font-medium whitespace-nowrap">{index + 1}</TableCell>
                       <TableCell className="font-medium whitespace-nowrap">
                         {member.first_name} {member.last_name}
                       </TableCell>
diff --git a/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx b/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx
index 311a4d4..f0c540e 100644
--- a/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx
@@ -154,15 +154,9 @@ export default function DocumentsManagement() {
         ) : (
           <div className="overflow-x-auto">
           <Table className="w-full table-auto">
-            <colgroup>
-              <col style={{width: '35%'}} />
-              <col style={{width: '20%'}} />
-              <col style={{width: '20%'}} />
-              <col style={{width: '12%'}} />
-              <col style={{width: '13%'}} />
-            </colgroup>
             <TableHeader>
               <TableRow>
+                <TableHead className="whitespace-nowrap w-[5%]">№</TableHead>
                 <TableHead className="whitespace-nowrap">Име на файл</TableHead>
                 <TableHead className="whitespace-nowrap">Тип</TableHead>
                 <TableHead className="whitespace-nowrap">Качен от</TableHead>
@@ -171,8 +165,9 @@ export default function DocumentsManagement() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {filteredFiles.map((file) => (
+              {filteredFiles.map((file, index) => (
                 <TableRow key={file.id}>
+                  <TableCell className="font-medium whitespace-nowrap">{index + 1}</TableCell>
                   <TableCell className="font-medium whitespace-nowrap">{file.file_name}</TableCell>
                   <TableCell className="whitespace-nowrap">
                     <span className="text-sm text-muted-foreground">{getFileTypeLabel(file.file_type)}</span>
diff --git a/mp_web_app/frontend/pages/admin/NewsManagement.tsx b/mp_web_app/frontend/pages/admin/NewsManagement.tsx
index f0244f1..cb5d0e2 100644
--- a/mp_web_app/frontend/pages/admin/NewsManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/NewsManagement.tsx
@@ -206,7 +206,7 @@ export default function NewsManagement() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead className="w-[60px]">№</TableHead>
+                <TableHead className="w-[5%]">№</TableHead>
                 <TableHead>Заглавие</TableHead>
                 <TableHead>Тип</TableHead>
                 <TableHead>Дата</TableHead>
diff --git a/mp_web_app/frontend/pages/admin/ProductsManagement.tsx b/mp_web_app/frontend/pages/admin/ProductsManagement.tsx
index c8a4d06..211adf2 100644
--- a/mp_web_app/frontend/pages/admin/ProductsManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/ProductsManagement.tsx
@@ -107,14 +107,35 @@ export default function ProductsManagement() {
 
   const handleEdit = async () => {
     if (!selectedProduct) return;
+    
+    // Validate name is not empty
+    if (!formData.name || formData.name.trim() === "") {
+      toast({
+        title: "Грешка",
+        description: "Името на продукта е задължително",
+        variant: "destructive",
+      });
+      return;
+    }
+    
     try {
-      const payload = {
-        name: formData.name || null,
-        width: formData.width ? parseFloat(formData.width) : null,
-        height: formData.height ? parseFloat(formData.height) : null,
-        length: formData.length ? parseFloat(formData.length) : null,
-        description: formData.description || null,
+      const payload: any = {
+        name: formData.name.trim(),
       };
+      
+      // Only include dimensions if they have values
+      if (formData.width && formData.width.trim() !== "") {
+        payload.width = parseFloat(formData.width);
+      }
+      if (formData.height && formData.height.trim() !== "") {
+        payload.height = parseFloat(formData.height);
+      }
+      if (formData.length && formData.length.trim() !== "") {
+        payload.length = parseFloat(formData.length);
+      }
+      if (formData.description && formData.description.trim() !== "") {
+        payload.description = formData.description.trim();
+      }
 
       await apiClient.put(`products/update/${selectedProduct.id}`, payload);
       toast({
@@ -255,13 +276,13 @@ export default function ProductsManagement() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead className="w-[60px]">№</TableHead>
-                <TableHead>Име</TableHead>
-                <TableHead className="text-center">Дължина (см)</TableHead>
-                <TableHead className="text-center">Ширина (см)</TableHead>
-                <TableHead className="text-center">Височина (см)</TableHead>
-                <TableHead>Описание</TableHead>
-                <TableHead>Действия</TableHead>
+                <TableHead className="w-[5%] whitespace-nowrap">№</TableHead>
+                <TableHead className="w-[20%] whitespace-nowrap">Име</TableHead>
+                <TableHead className="text-center w-[8%] whitespace-nowrap">Дължина (см)</TableHead>
+                <TableHead className="text-center w-[8%] whitespace-nowrap">Ширина (см)</TableHead>
+                <TableHead className="text-center w-[8%] whitespace-nowrap">Височина (см)</TableHead>
+                <TableHead className="w-[30%] pl-8 whitespace-nowrap">Описание</TableHead>
+                <TableHead className="w-[21%] whitespace-nowrap">Действия</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -272,7 +293,7 @@ export default function ProductsManagement() {
                   <TableCell className="text-center">{product.length ?? "-"}</TableCell>
                   <TableCell className="text-center">{product.width ?? "-"}</TableCell>
                   <TableCell className="text-center">{product.height ?? "-"}</TableCell>
-                  <TableCell className="max-w-xs truncate">{product.description || "-"}</TableCell>
+                  <TableCell className="pl-8 min-w-[350px]">{product.description || "-"}</TableCell>
                   <TableCell>
                     <div className="flex gap-2">
                       <Button variant="outline" size="sm" onClick={() => openEditDialog(product)}>
diff --git a/mp_web_app/frontend/pages/admin/UserManagement.tsx b/mp_web_app/frontend/pages/admin/UserManagement.tsx
index dd188be..b38a966 100644
--- a/mp_web_app/frontend/pages/admin/UserManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/UserManagement.tsx
@@ -135,14 +135,14 @@ export default function UserManagement() {
           <Table className="w-full">
             <TableHeader>
               <TableRow>
-                <TableHead className="whitespace-nowrap">№</TableHead>
+                <TableHead className="whitespace-nowrap w-[5%]">№</TableHead>
                 <TableHead className="whitespace-nowrap">Име</TableHead>
                 <TableHead className="whitespace-nowrap">Email</TableHead>
                 <TableHead className="whitespace-nowrap">Телефон</TableHead>
-                <TableHead className="whitespace-nowrap">Роля</TableHead>
-                <TableHead className="whitespace-nowrap">Активен</TableHead>
-                <TableHead className="whitespace-nowrap">Абониран</TableHead>
-                <TableHead className="whitespace-nowrap">Действия</TableHead>
+                <TableHead className="whitespace-nowrap w-[10%]">Роля</TableHead>
+                <TableHead className="whitespace-nowrap w-[8%]">Активен</TableHead>
+                <TableHead className="whitespace-nowrap w-[8%]">Абониран</TableHead>
+                <TableHead className="whitespace-nowrap w-[15%]">Действия</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
diff --git a/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx b/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
index 0fc2bf9..35a16d1 100644
--- a/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
+++ b/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
@@ -35,7 +35,7 @@ export default function CooperativeMembers() {
       <section className="w-full px-2 xl:container xl:mx-auto xl:px-4 py-8">
         <Card>
         <CardHeader>
-          <CardTitle>Списък на член кооператорите</CardTitle>
+          <CardTitle>Списък на член кооператорите ({members.length})</CardTitle>
         </CardHeader>
         <CardContent className="px-0">
           {members.length === 0 ? (
@@ -45,7 +45,7 @@ export default function CooperativeMembers() {
               <Table className="w-full">
                 <TableHeader>
                   <TableRow>
-                    <TableHead className="whitespace-nowrap">№</TableHead>
+                    <TableHead className="whitespace-nowrap w-[5%]">№</TableHead>
                     <TableHead className="whitespace-nowrap">
                       <div className="flex items-center gap-2">
                         <UserIcon className="w-4 h-4" />
diff --git a/mp_web_app/frontend/pages/lists/Proxies.tsx b/mp_web_app/frontend/pages/lists/Proxies.tsx
index 33de3ce..f919a1b 100644
--- a/mp_web_app/frontend/pages/lists/Proxies.tsx
+++ b/mp_web_app/frontend/pages/lists/Proxies.tsx
@@ -36,7 +36,7 @@ export default function Proxies() {
       <section className="w-full px-2 xl:container xl:mx-auto xl:px-4 py-8">
         <Card>
         <CardHeader>
-          <CardTitle>Списък на пълномощниците</CardTitle>
+          <CardTitle>Списък на пълномощниците ({members.length})</CardTitle>
         </CardHeader>
         <CardContent className="px-0">
           {error ? (

From da946a0dccb323c38c1f7be48e2465002ce6ee5c Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Wed, 19 Nov 2025 00:52:28 +0200
Subject: [PATCH 20/26] refactor: enhance file access logic and add user
 account status checks

- Simplified `_check_file_allowed_to_user` function with clearer role-based access and document type categorization.
- Updated `download_file` to incorporate user role in file validation.
- Extended `/members` endpoint to refine data visibility based on roles (admins, accountants, regular users).
- Added `active` status check in user authentication to restrict access for inactive accounts.
---
 mp_web_app/backend/auth/operations.py  |  7 ++++
 mp_web_app/backend/files/operations.py | 58 +++++++++++++++++---------
 mp_web_app/backend/members/routers.py  | 21 +++++++++-
 mp_web_app/backend/users/models.py     |  1 +
 4 files changed, 66 insertions(+), 21 deletions(-)

diff --git a/mp_web_app/backend/auth/operations.py b/mp_web_app/backend/auth/operations.py
index 1f4a120..cfd3164 100644
--- a/mp_web_app/backend/auth/operations.py
+++ b/mp_web_app/backend/auth/operations.py
@@ -157,6 +157,9 @@ def get_current_user(token: str = Depends(oauth2_scheme), repo: UserRepository =
     user = get_user_by_id(user_id, repo)
     if not user:
       raise UserNotFoundError("User not found")
+    # Check if user account is active
+    if not user.active:
+      raise UnauthorizedError("Account is not active")
     return user
   except UnauthorizedError as e:
     raise HTTPException(status_code=401, detail=str(e))
@@ -170,6 +173,10 @@ def authenticate_user(email: str, password: str, repo: UserRepository) -> Option
   if not user:
     return None
 
+  # Check if user account is active
+  if not user.active:
+    return None
+
   if verify_password(password_hash=user.password_hash, password=password, salt=user.salt):
     return user
   return None
diff --git a/mp_web_app/backend/files/operations.py b/mp_web_app/backend/files/operations.py
index de4b9f3..0b40e5d 100644
--- a/mp_web_app/backend/files/operations.py
+++ b/mp_web_app/backend/files/operations.py
@@ -138,11 +138,11 @@ def _create_file_name(file_name: str, original_name: str):
 def download_file(file_metadata: FileMetadata | list[FileMetadata], user: User, repo: FileMetadataRepository):
   file_meta_object = get_db_metadata(file_metadata, repo)
 
-  user_id = None
-  if user.role != UserRole.REGULAR_USER.value and user.role != UserRole.ACCOUNTANT.value:
-    user_id = user.id
+  # All logged-in users should have access to their allowed files
+  user_id = user.id
+  user_role = user.role
 
-  is_allowed = _check_file_allowed_to_user(file_meta_object, user_id)
+  is_allowed = _check_file_allowed_to_user(file_meta_object, user_id, user_role)
   if not is_allowed:
     raise FileAccessDeniedError(file_meta_object.file_name)
 
@@ -184,27 +184,47 @@ def _validate_metadata(file_metadata: FileMetadata, db_meta_object: FileMetadata
   return file_metadata.model_dump() == db_meta_object.model_dump(include=fields)
 
 
-def _check_file_allowed_to_user(file_metadata: FileMetadata, user_id: str | None = None) -> bool:
-  public_allowed_types = [
+def _check_file_allowed_to_user(file_metadata: FileMetadata, user_id: str, user_role: str) -> bool:
+  # Public documents - accessible to everyone (logged in or not)
+  public_types = [
     FileType.governing_documents.value,
     FileType.forms.value,
   ]
-
-  private_allowed_types = [
+  
+  # Documents accessible to all logged-in users
+  logged_in_types = [
     FileType.minutes.value,
-    FileType.governing_documents.value,
-    FileType.forms.value,
     FileType.transcripts.value,
-    FileType.accounting.value,
-    FileType.private_documents.value,
     FileType.others.value,
   ]
   
-  is_allowed_to_user = True
-  if user_id:
-    is_allowed_type = file_metadata.file_type.value in private_allowed_types
+  # Accounting documents - only for admin, board, control, accountant
+  accounting_allowed_roles = [
+    UserRole.ADMIN.value,
+    UserRole.BOARD.value,
+    UserRole.CONTROL.value,
+    UserRole.ACCOUNTANT.value,
+  ]
+  
+  file_type = file_metadata.file_type.value
+  
+  # Public documents - always allowed
+  if file_type in public_types:
+    return True
+  
+  # Documents for all logged-in users
+  if file_type in logged_in_types:
+    return True
+  
+  # Accounting documents - role-based access
+  if file_type == FileType.accounting.value:
+    return user_role in accounting_allowed_roles
+  
+  # Private documents - only for specified users
+  if file_type == FileType.private_documents.value:
     if file_metadata.allowed_to:
-      is_allowed_to_user = user_id in file_metadata.allowed_to
-  else:
-    is_allowed_type = file_metadata.file_type.value in public_allowed_types
-  return is_allowed_type and is_allowed_to_user
+      return user_id in file_metadata.allowed_to
+    return False
+  
+  # Default deny
+  return False
diff --git a/mp_web_app/backend/members/routers.py b/mp_web_app/backend/members/routers.py
index 13d9f7c..9347761 100644
--- a/mp_web_app/backend/members/routers.py
+++ b/mp_web_app/backend/members/routers.py
@@ -34,8 +34,10 @@ async def members_list(
 
   Access:
   - All authenticated users can access this endpoint
-  - ADMIN, BOARD, CONTROL: See full details (name, email, phone)
-  - REGULAR_USER: See only names (first_name, last_name, proxy)
+  - ADMIN, BOARD, CONTROL: See full details (name, email, phone, member_code)
+  - REGULAR_USER, ACCOUNTANT: 
+    - For cooperative members: See only names (first_name, last_name)
+    - For proxies: See names + email
 
   Query Parameters:
   - proxy_only: If True, returns only members with proxy=True. Default is False (returns all members).
@@ -47,8 +49,23 @@ async def members_list(
     user_role = current_user.role if isinstance(current_user.role, UserRole) else UserRole(current_user.role)
 
     if user_role in privileged_roles:
+      # Admin, Board, Control see everything
       return members
+    elif proxy_only:
+      # For proxies list: all logged users see email (but not phone/member_code)
+      return [
+        Member(
+          first_name=m.first_name,
+          last_name=m.last_name,
+          email=m.email,
+          phone=None,  # Hide phone for regular users
+          member_code="",  # Hide member code
+          member_code_valid=False,
+          proxy=m.proxy
+        ) for m in members
+      ]
     else:
+      # For cooperative members: regular users see only names
       return [MemberPublic(first_name=m.first_name, last_name=m.last_name, proxy=m.proxy) for m in members]
   except DatabaseError as e:
     raise HTTPException(status_code=500, detail=str(e))
diff --git a/mp_web_app/backend/users/models.py b/mp_web_app/backend/users/models.py
index cf66ace..330878b 100644
--- a/mp_web_app/backend/users/models.py
+++ b/mp_web_app/backend/users/models.py
@@ -46,5 +46,6 @@ class UserSecret(BaseModel):
   email: EmailStr
   member_code: str
   role: str
+  active: bool
   salt: str
   password_hash: str

From cc739dc9696e12e3c01d587f4add069c71592425 Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Wed, 19 Nov 2025 00:52:36 +0200
Subject: [PATCH 21/26] refactor: add role-based conditional rendering for
 contact info visibility

- Introduced `isBoardOrControl` and `canSeeContactInfo` checks to enhance data visibility in `CooperativeMembers` and `Proxies` components.
- Updated `Board` and `Control` pages to conditionally display email and phone based on authentication state.
- Improved overall table handling logic for member-related components.
---
 mp_web_app/frontend/pages/about-us/Board.tsx  | 54 +++++++++++--------
 .../frontend/pages/about-us/Control.tsx       | 54 +++++++++++--------
 .../pages/lists/CooperativeMembers.tsx        | 32 ++++++-----
 mp_web_app/frontend/pages/lists/Proxies.tsx   | 32 ++++++-----
 4 files changed, 102 insertions(+), 70 deletions(-)

diff --git a/mp_web_app/frontend/pages/about-us/Board.tsx b/mp_web_app/frontend/pages/about-us/Board.tsx
index 6d8c4bc..147f1ed 100644
--- a/mp_web_app/frontend/pages/about-us/Board.tsx
+++ b/mp_web_app/frontend/pages/about-us/Board.tsx
@@ -2,9 +2,11 @@ import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
 import {Mail, Phone, User as UserIcon} from "lucide-react";
 import {useBoardMembers} from "@/hooks/useUsers";
+import {useAuth} from "@/context/AuthContext";
 
 export default function Board() {
   const {data: members = [], isLoading: loading} = useBoardMembers();
+  const {isLoggedIn} = useAuth();
 
   if (loading) {
     return (
@@ -48,18 +50,22 @@ export default function Board() {
                         Име
                       </div>
                     </TableHead>
-                    <TableHead className="whitespace-nowrap">
-                      <div className="flex items-center gap-2">
-                        <Mail className="w-4 h-4" />
-                        Имейл
-                      </div>
-                    </TableHead>
-                    <TableHead className="whitespace-nowrap">
-                      <div className="flex items-center gap-2">
-                        <Phone className="w-4 h-4" />
-                        Телефон
-                      </div>
-                    </TableHead>
+                    {isLoggedIn && (
+                      <>
+                        <TableHead className="whitespace-nowrap">
+                          <div className="flex items-center gap-2">
+                            <Mail className="w-4 h-4" />
+                            Имейл
+                          </div>
+                        </TableHead>
+                        <TableHead className="whitespace-nowrap">
+                          <div className="flex items-center gap-2">
+                            <Phone className="w-4 h-4" />
+                            Телефон
+                          </div>
+                        </TableHead>
+                      </>
+                    )}
                   </TableRow>
                 </TableHeader>
                 <TableBody>
@@ -69,16 +75,20 @@ export default function Board() {
                       <TableCell className="font-medium whitespace-nowrap">
                         {member.first_name} {member.last_name}
                       </TableCell>
-                      <TableCell className="whitespace-nowrap">
-                        <a href={`mailto:${member.email}`} className="text-primary hover:underline">
-                          {member.email}
-                        </a>
-                      </TableCell>
-                      <TableCell className="whitespace-nowrap">
-                        <a href={`tel:${member.phone}`} className="text-primary hover:underline">
-                          {member.phone || "-"}
-                        </a>
-                      </TableCell>
+                      {isLoggedIn && (
+                        <>
+                          <TableCell className="whitespace-nowrap">
+                            <a href={`mailto:${member.email}`} className="text-primary hover:underline">
+                              {member.email}
+                            </a>
+                          </TableCell>
+                          <TableCell className="whitespace-nowrap">
+                            <a href={`tel:${member.phone}`} className="text-primary hover:underline">
+                              {member.phone || "-"}
+                            </a>
+                          </TableCell>
+                        </>
+                      )}
                     </TableRow>
                   ))}
                 </TableBody>
diff --git a/mp_web_app/frontend/pages/about-us/Control.tsx b/mp_web_app/frontend/pages/about-us/Control.tsx
index 057df64..68ed2d4 100644
--- a/mp_web_app/frontend/pages/about-us/Control.tsx
+++ b/mp_web_app/frontend/pages/about-us/Control.tsx
@@ -2,9 +2,11 @@ import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
 import {Mail, Phone, User as UserIcon} from "lucide-react";
 import {useControlMembers} from "@/hooks/useUsers";
+import {useAuth} from "@/context/AuthContext";
 
 export default function Control() {
   const {data: members = [], isLoading: loading} = useControlMembers();
+  const {isLoggedIn} = useAuth();
 
   if (loading) {
     return (
@@ -48,18 +50,22 @@ export default function Control() {
                         Име
                       </div>
                     </TableHead>
-                    <TableHead className="whitespace-nowrap">
-                      <div className="flex items-center gap-2">
-                        <Mail className="w-4 h-4" />
-                        Имейл
-                      </div>
-                    </TableHead>
-                    <TableHead className="whitespace-nowrap">
-                      <div className="flex items-center gap-2">
-                        <Phone className="w-4 h-4" />
-                        Телефон
-                      </div>
-                    </TableHead>
+                    {isLoggedIn && (
+                      <>
+                        <TableHead className="whitespace-nowrap">
+                          <div className="flex items-center gap-2">
+                            <Mail className="w-4 h-4" />
+                            Имейл
+                          </div>
+                        </TableHead>
+                        <TableHead className="whitespace-nowrap">
+                          <div className="flex items-center gap-2">
+                            <Phone className="w-4 h-4" />
+                            Телефон
+                          </div>
+                        </TableHead>
+                      </>
+                    )}
                   </TableRow>
                 </TableHeader>
                 <TableBody>
@@ -69,16 +75,20 @@ export default function Control() {
                       <TableCell className="font-medium whitespace-nowrap">
                         {member.first_name} {member.last_name}
                       </TableCell>
-                      <TableCell className="whitespace-nowrap">
-                        <a href={`mailto:${member.email}`} className="text-primary hover:underline">
-                          {member.email}
-                        </a>
-                      </TableCell>
-                      <TableCell className="whitespace-nowrap">
-                        <a href={`tel:${member.phone}`} className="text-primary hover:underline">
-                          {member.phone || "-"}
-                        </a>
-                      </TableCell>
+                      {isLoggedIn && (
+                        <>
+                          <TableCell className="whitespace-nowrap">
+                            <a href={`mailto:${member.email}`} className="text-primary hover:underline">
+                              {member.email}
+                            </a>
+                          </TableCell>
+                          <TableCell className="whitespace-nowrap">
+                            <a href={`tel:${member.phone}`} className="text-primary hover:underline">
+                              {member.phone || "-"}
+                            </a>
+                          </TableCell>
+                        </>
+                      )}
                     </TableRow>
                   ))}
                 </TableBody>
diff --git a/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx b/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
index 35a16d1..3394383 100644
--- a/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
+++ b/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
@@ -7,8 +7,10 @@ import {useAuth} from "@/context/AuthContext";
 
 export default function CooperativeMembers() {
   const {data: members = [], isLoading: loading} = useMembers({ proxy_only: false });
-  const {isLoggedIn, user} = useAuth();
+  const {user} = useAuth();
   const isAdmin = user?.role === "admin";
+  const isBoardOrControl = user?.role === "board" || user?.role === "control";
+  const canSeeContactInfo = isAdmin || isBoardOrControl;
 
   if (loading) {
     return (
@@ -53,22 +55,24 @@ export default function CooperativeMembers() {
                       </div>
                     </TableHead>
                     <TableHead className="whitespace-nowrap">Фамилия</TableHead>
-                    {isLoggedIn && (
-                      <TableHead className="whitespace-nowrap">
-                        <div className="flex items-center gap-2">
-                          <Mail className="w-4 h-4" />
-                          Имейл
-                        </div>
-                      </TableHead>
-                    )}
-                    {isAdmin && (
+                    {canSeeContactInfo && (
                       <>
+                        <TableHead className="whitespace-nowrap">
+                          <div className="flex items-center gap-2">
+                            <Mail className="w-4 h-4" />
+                            Имейл
+                          </div>
+                        </TableHead>
                         <TableHead className="whitespace-nowrap">
                           <div className="flex items-center gap-2">
                             <Phone className="w-4 h-4" />
                             Телефон
                           </div>
                         </TableHead>
+                      </>
+                    )}
+                    {isAdmin && (
+                      <>
                         <TableHead className="whitespace-nowrap text-center">Код</TableHead>
                         <TableHead className="whitespace-nowrap text-center">Използван</TableHead>
                       </>
@@ -81,12 +85,14 @@ export default function CooperativeMembers() {
                       <TableCell className="font-medium whitespace-nowrap">{index + 1}</TableCell>
                       <TableCell className="whitespace-nowrap">{member.first_name}</TableCell>
                       <TableCell className="whitespace-nowrap">{member.last_name}</TableCell>
-                      {isLoggedIn && (
-                        <TableCell className="whitespace-nowrap">{member.email || "-"}</TableCell>
+                      {canSeeContactInfo && (
+                        <>
+                          <TableCell className="whitespace-nowrap">{member.email || "-"}</TableCell>
+                          <TableCell className="whitespace-nowrap">{member.phone || "-"}</TableCell>
+                        </>
                       )}
                       {isAdmin && (
                         <>
-                          <TableCell className="whitespace-nowrap">{member.phone || "-"}</TableCell>
                           <TableCell className="text-center">
                             {member.member_code ? (
                               <span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm bg-muted border border-border">
diff --git a/mp_web_app/frontend/pages/lists/Proxies.tsx b/mp_web_app/frontend/pages/lists/Proxies.tsx
index f919a1b..b716409 100644
--- a/mp_web_app/frontend/pages/lists/Proxies.tsx
+++ b/mp_web_app/frontend/pages/lists/Proxies.tsx
@@ -10,6 +10,8 @@ export default function Proxies() {
   const error = queryError ? "Неуспешно зареждане на пълномощниците" : null;
   const {isLoggedIn, user} = useAuth();
   const isAdmin = user?.role === "admin";
+  const isBoardOrControl = user?.role === "board" || user?.role === "control";
+  const canSeePhone = isAdmin || isBoardOrControl;
 
   if (loading) {
     return (
@@ -48,32 +50,34 @@ export default function Proxies() {
               <Table className="w-full">
                 <TableHeader>
                   <TableRow>
-                    <TableHead className="w-[5%]">№</TableHead>
-                    <TableHead className="w-[12%]">
+                    <TableHead className="whitespace-nowrap w-[5%]">№</TableHead>
+                    <TableHead className="whitespace-nowrap">
                       <div className="flex items-center gap-2">
                         <UserIcon className="w-4 h-4" />
                         Име
                       </div>
                     </TableHead>
-                    <TableHead className="w-[12%]">Фамилия</TableHead>
+                    <TableHead className="whitespace-nowrap">Фамилия</TableHead>
                     {isLoggedIn && (
-                      <TableHead className={isAdmin ? "w-[25%]" : "w-[71%]"}>
+                      <TableHead className="whitespace-nowrap">
                         <div className="flex items-center gap-2">
                           <Mail className="w-4 h-4" />
                           Имейл
                         </div>
                       </TableHead>
                     )}
+                    {canSeePhone && (
+                      <TableHead className="whitespace-nowrap">
+                        <div className="flex items-center gap-2">
+                          <Phone className="w-4 h-4" />
+                          Телефон
+                        </div>
+                      </TableHead>
+                    )}
                     {isAdmin && (
                       <>
-                        <TableHead className="w-[18%]">
-                          <div className="flex items-center gap-2">
-                            <Phone className="w-4 h-4" />
-                            Телефон
-                          </div>
-                        </TableHead>
-                        <TableHead className="w-[16%] text-center">Код</TableHead>
-                        <TableHead className="w-[12%] text-center">Използван</TableHead>
+                        <TableHead className="whitespace-nowrap text-center">Код</TableHead>
+                        <TableHead className="whitespace-nowrap text-center">Използван</TableHead>
                       </>
                     )}
                   </TableRow>
@@ -87,9 +91,11 @@ export default function Proxies() {
                       {isLoggedIn && (
                         <TableCell className="whitespace-nowrap">{member.email || "-"}</TableCell>
                       )}
+                      {canSeePhone && (
+                        <TableCell className="whitespace-nowrap">{member.phone || "-"}</TableCell>
+                      )}
                       {isAdmin && (
                         <>
-                          <TableCell className="whitespace-nowrap">{member.phone || "-"}</TableCell>
                           <TableCell className="text-center">
                             {member.member_code ? (
                               <span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm bg-muted border border-border">

From eea56b305c920f3121a221c2964af22f1b275adc Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sun, 7 Dec 2025 12:28:45 +0200
Subject: [PATCH 22/26] fix: correct member code validation logic in
 `CooperativeMembers` and `Proxies`

- Updated conditional rendering logic to properly check `member_code_valid` status.
- Ensured accurate icon display (checkmark or cross) based on validation results.
---
 mp_web_app/frontend/pages/lists/CooperativeMembers.tsx | 2 +-
 mp_web_app/frontend/pages/lists/Proxies.tsx            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx b/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
index 3394383..302998d 100644
--- a/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
+++ b/mp_web_app/frontend/pages/lists/CooperativeMembers.tsx
@@ -104,7 +104,7 @@ export default function CooperativeMembers() {
                           </TableCell>
                           <TableCell className="text-center">
                             {member.member_code ? (
-                              member.member_code_valid ? (
+                              !member.member_code_valid ? (
                                 <CheckCircle className="h-4 w-4 text-green-600 mx-auto" />
                               ) : (
                                 <XCircle className="h-4 w-4 text-red-600 mx-auto" />
diff --git a/mp_web_app/frontend/pages/lists/Proxies.tsx b/mp_web_app/frontend/pages/lists/Proxies.tsx
index b716409..318a455 100644
--- a/mp_web_app/frontend/pages/lists/Proxies.tsx
+++ b/mp_web_app/frontend/pages/lists/Proxies.tsx
@@ -107,7 +107,7 @@ export default function Proxies() {
                           </TableCell>
                           <TableCell className="text-center">
                             {member.member_code ? (
-                              member.member_code_valid ? (
+                              !member.member_code_valid ? (
                                 <CheckCircle className="h-4 w-4 text-green-600 mx-auto" />
                               ) : (
                                 <XCircle className="h-4 w-4 text-red-600 mx-auto" />

From d542e2b95e3f172931a4e1c23a7f5f35cee742a1 Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sun, 7 Dec 2025 12:48:01 +0200
Subject: [PATCH 23/26] feat: add comprehensive error handling for image
 uploads and validations

- Enhanced error messages for file uploads, including invalid formats and size limits (max 15MB).
- Introduced image type and size validation in both frontend and backend.
- Updated `errorUtils` to extract and detail API errors for improved user feedback.
- Improved gallery management with file validation logic and dynamic toast notifications.
- Adjusted backend to provide clearer error responses for image-related issues.
- Updated UI to reflect updated file size limit in gallery upload instructions.
---
 mp_web_app/backend/gallery/operations.py      | 13 +++
 mp_web_app/backend/gallery/routers.py         |  6 +-
 mp_web_app/frontend/lib/errorUtils.ts         | 11 ++-
 mp_web_app/frontend/pages/Gallery.tsx         | 31 +++----
 .../pages/admin/GalleryManagement.tsx         | 81 +++++++++++++++++--
 5 files changed, 115 insertions(+), 27 deletions(-)

diff --git a/mp_web_app/backend/gallery/operations.py b/mp_web_app/backend/gallery/operations.py
index 401c4f9..b8f637e 100644
--- a/mp_web_app/backend/gallery/operations.py
+++ b/mp_web_app/backend/gallery/operations.py
@@ -23,6 +23,8 @@
 USE_CLOUDFRONT = os.environ.get("USE_CLOUDFRONT", "false").lower() == "true"
 
 ALLOWED_IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "gif", "webp"]
+MAX_IMAGE_SIZE_MB = 15  # Maximum image size in MB
+MAX_IMAGE_SIZE_BYTES = MAX_IMAGE_SIZE_MB * 1024 * 1024
 
 
 def get_gallery_repository() -> GalleryRepository:
@@ -35,9 +37,20 @@ def upload_gallery_image(
 ) -> GalleryImageMetadata:
   """Upload gallery image to S3 and store metadata in DynamoDB."""
   # Validate file extension
+  if not file.filename or "." not in file.filename:
+    raise InvalidImageFormatError(ALLOWED_IMAGE_EXTENSIONS)
+  
   file_extension = file.filename.split(".")[-1].lower()
   if file_extension not in ALLOWED_IMAGE_EXTENSIONS:
     raise InvalidImageFormatError(ALLOWED_IMAGE_EXTENSIONS)
+  
+  # Validate file size
+  file.file.seek(0, 2)  # Seek to end of file
+  file_size = file.file.tell()  # Get current position (file size)
+  file.file.seek(0)  # Reset to beginning
+  
+  if file_size > MAX_IMAGE_SIZE_BYTES:
+    raise ImageUploadError(f"File too large. Maximum size: {MAX_IMAGE_SIZE_MB}MB. Your file: {file_size / 1024 / 1024:.2f}MB")
 
   # Generate unique S3 key
   image_id = str(uuid4())
diff --git a/mp_web_app/backend/gallery/routers.py b/mp_web_app/backend/gallery/routers.py
index 665ceae..dbc11a5 100644
--- a/mp_web_app/backend/gallery/routers.py
+++ b/mp_web_app/backend/gallery/routers.py
@@ -35,11 +35,11 @@ async def gallery_create(
   except InvalidImageFormatError as e:
     raise HTTPException(status_code=400, detail=str(e))
   except ImageUploadError as e:
-    raise HTTPException(status_code=500, detail=str(e))
+    raise HTTPException(status_code=400, detail=str(e))
   except DatabaseError as e:
-    raise HTTPException(status_code=500, detail=str(e))
+    raise HTTPException(status_code=500, detail=f"Database error: {str(e)}")
   except Exception as e:
-    raise HTTPException(status_code=400, detail=str(e))
+    raise HTTPException(status_code=400, detail=f"Image upload failed: {str(e)}")
 
 
 @gallery_router.get("/list", status_code=status.HTTP_200_OK)
diff --git a/mp_web_app/frontend/lib/errorUtils.ts b/mp_web_app/frontend/lib/errorUtils.ts
index ddedf63..ebaced4 100644
--- a/mp_web_app/frontend/lib/errorUtils.ts
+++ b/mp_web_app/frontend/lib/errorUtils.ts
@@ -48,8 +48,17 @@ export function extractApiErrorDetails(error: any): string {
     
     // File upload errors
     if (/Invalid file type/i.test(msg)) return "Невалиден тип файл";
-    if (/Invalid image format/i.test(msg)) return "Невалиден формат на изображение";
+    if (/Invalid image format/i.test(msg)) return "Невалиден формат на изображение. Разрешени формати: JPG, JPEG, PNG, GIF, WEBP";
     if (/Invalid members list file type/i.test(msg)) return "Невалиден тип файл за списък с членове. Разрешен тип: .csv";
+    if (/File too large/i.test(msg)) {
+      // Extract size info if present
+      const match = msg.match(/Maximum size: (\d+)MB.*Your file: ([\d.]+)MB/i);
+      if (match) {
+        return `Файлът е твърде голям. Максимален размер: ${match[1]}MB. Вашият файл: ${match[2]}MB`;
+      }
+      return "Файлът е твърде голям";
+    }
+    if (/Image upload failed/i.test(msg)) return "Неуспешно качване на снимката";
     
     // Token errors
     if (/Invalid or expired token/i.test(msg)) return "Невалиден или изтекъл токен";
diff --git a/mp_web_app/frontend/pages/Gallery.tsx b/mp_web_app/frontend/pages/Gallery.tsx
index 2fd6e6a..85fd9b9 100644
--- a/mp_web_app/frontend/pages/Gallery.tsx
+++ b/mp_web_app/frontend/pages/Gallery.tsx
@@ -21,23 +21,24 @@ export default function Gallery() {
   const [loadedImages, setLoadedImages] = useState<Set<string>>(new Set());
   const observerRef = useRef<IntersectionObserver | null>(null);
 
-  useEffect(() => {
-    const fetchGallery = async () => {
-      try {
-        setLoading(true);
-        const response = await fetch(`${API_BASE_URL}gallery/list`);
-        if (!response.ok) {
-          throw new Error("Failed to fetch gallery");
-        }
-        const galleryImages = await response.json();
-        setImages(galleryImages || []);
-      } catch (err: any) {
-        setError("Неуспешно зареждане на галерията");
-      } finally {
-        setLoading(false);
+  const fetchGallery = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch(`${API_BASE_URL}gallery/list`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch gallery");
       }
-    };
+      const galleryImages = await response.json();
+      setImages(galleryImages || []);
+      setError(null);
+    } catch (err: any) {
+      setError("Неуспешно зареждане на галерията");
+    } finally {
+      setLoading(false);
+    }
+  };
 
+  useEffect(() => {
     fetchGallery();
   }, []);
 
diff --git a/mp_web_app/frontend/pages/admin/GalleryManagement.tsx b/mp_web_app/frontend/pages/admin/GalleryManagement.tsx
index 60be1f8..98065df 100644
--- a/mp_web_app/frontend/pages/admin/GalleryManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/GalleryManagement.tsx
@@ -7,6 +7,7 @@ import {ConfirmDialog} from "@/components/confirm-dialog";
 import {useToast} from "@/components/ui/use-toast";
 import apiClient from "@/context/apiClient";
 import {Trash2} from "lucide-react";
+import {extractApiErrorDetails} from "@/lib/errorUtils";
 
 interface GalleryImage {
   id: string;
@@ -47,9 +48,10 @@ export default function GalleryManagement() {
       });
       setImageUrls(urls);
     } catch (err: any) {
+      const errorMessage = extractApiErrorDetails(err.response?.data || err);
       toast({
         title: "Грешка",
-        description: err.response?.data?.detail || "Неуспешно зареждане на галерията",
+        description: errorMessage || "Неуспешно зареждане на галерията",
         variant: "destructive",
       });
     } finally {
@@ -64,6 +66,30 @@ export default function GalleryManagement() {
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
+      const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
+      
+      if (!allowedTypes.includes(file.type)) {
+        toast({
+          title: "Грешка",
+          description: "Невалиден формат. Разрешени формати: JPG, PNG, GIF, WEBP",
+          variant: "destructive",
+        });
+        e.target.value = ""; // Reset input
+        return;
+      }
+      
+      // Check file size
+      const maxSize = 15 * 1024 * 1024; // 15MB
+      if (file.size > maxSize) {
+        toast({
+          title: "Грешка",
+          description: `Файлът е твърде голям. Максимален размер: 15MB. Вашият файл: ${(file.size / 1024 / 1024).toFixed(2)}MB`,
+          variant: "destructive",
+        });
+        e.target.value = ""; // Reset input
+        return;
+      }
+      
       setSelectedFile(file);
       setImageName(file.name.split(".")[0]);
     }
@@ -95,13 +121,26 @@ export default function GalleryManagement() {
     const files = e.dataTransfer.files;
     if (files && files.length > 0) {
       const file = files[0];
-      if (file.type.startsWith('image/')) {
+      const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
+      
+      if (file.type.startsWith('image/') && allowedTypes.includes(file.type)) {
+        // Check file size
+        const maxSize = 15 * 1024 * 1024; // 15MB
+        if (file.size > maxSize) {
+          toast({
+            title: "Грешка",
+            description: `Файлът е твърде голям. Максимален размер: 15MB. Вашият файл: ${(file.size / 1024 / 1024).toFixed(2)}MB`,
+            variant: "destructive",
+          });
+          return;
+        }
+        
         setSelectedFile(file);
         setImageName(file.name.split(".")[0]);
       } else {
         toast({
           title: "Грешка",
-          description: "Моля изберете файл със снимка",
+          description: "Невалиден формат. Разрешени формати: JPG, PNG, GIF, WEBP",
           variant: "destructive",
         });
       }
@@ -118,6 +157,28 @@ export default function GalleryManagement() {
       return;
     }
 
+    // Validate file size on frontend (15MB limit)
+    const maxSize = 15 * 1024 * 1024; // 15MB in bytes
+    if (selectedFile.size > maxSize) {
+      toast({
+        title: "Грешка",
+        description: `Файлът е твърде голям. Максимален размер: 15MB. Вашият файл: ${(selectedFile.size / 1024 / 1024).toFixed(2)}MB`,
+        variant: "destructive",
+      });
+      return;
+    }
+
+    // Validate file type
+    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
+    if (!allowedTypes.includes(selectedFile.type)) {
+      toast({
+        title: "Грешка",
+        description: "Невалиден формат на снимката. Разрешени формати: JPG, PNG, GIF, WEBP",
+        variant: "destructive",
+      });
+      return;
+    }
+
     try {
       setUploading(true);
 
@@ -145,13 +206,16 @@ export default function GalleryManagement() {
         fileInputRef.current.value = "";
       }
 
-      fetchGallery();
+      // Refresh gallery
+      await fetchGallery();
     } catch (err: any) {
+      const errorMessage = extractApiErrorDetails(err.response?.data || err);
       toast({
-        title: "Грешка",
-        description: err.response?.data?.detail || "Неуспешно качване на снимката",
+        title: "Грешка при качване",
+        description: errorMessage || "Неуспешно качване на снимката",
         variant: "destructive",
       });
+      console.error("Upload error:", err);
     } finally {
       setUploading(false);
     }
@@ -175,9 +239,10 @@ export default function GalleryManagement() {
       setSelectedImage(null);
       fetchGallery();
     } catch (err: any) {
+      const errorMessage = extractApiErrorDetails(err.response?.data || err);
       toast({
         title: "Грешка",
-        description: err.response?.data?.detail || "Неуспешно изтриване на снимката",
+        description: errorMessage || "Неуспешно изтриване на снимката",
         variant: "destructive",
       });
     }
@@ -248,7 +313,7 @@ export default function GalleryManagement() {
                     <p className="text-sm font-medium text-foreground">
                       {isDragging ? "Пусни снимката тук" : "Кликни или пусни снимка"}
                     </p>
-                    <p className="text-xs text-muted-foreground">PNG, JPG, GIF до 10MB</p>
+                    <p className="text-xs text-muted-foreground">PNG, JPG, GIF до 15MB</p>
                   </div>
                 )}
               </div>

From ab33de9f168d7ed275017b61c7e08eee4f138c08 Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sun, 7 Dec 2025 13:04:49 +0200
Subject: [PATCH 24/26] refactor: enhance error handling, caching, and UI
 consistency across components

- Updated `UserManagement` to suppress redundant error toasts for authentication refresh errors.
- Switched `useNews` hook to use `AuthContext` for better authentication handling and reduced query stale time to 5 minutes for improved responsiveness.
- Refactored `AlertDialog` components with `React.forwardRef` for better type safety and reusability.
- Enhanced `AuthContext` to invalidate queries on token refresh/logout and handle user state changes seamlessly.
- Improved `apiClient` to mark and handle authentication refresh errors efficiently.
---
 .../frontend/components/ui/alert-dialog.tsx   | 52 +++++++++++--------
 mp_web_app/frontend/context/AuthContext.tsx   | 22 +++++++-
 mp_web_app/frontend/context/apiClient.ts      |  7 ++-
 mp_web_app/frontend/hooks/useNews.ts          |  9 ++--
 .../frontend/pages/admin/UserManagement.tsx   | 15 +++---
 5 files changed, 69 insertions(+), 36 deletions(-)

diff --git a/mp_web_app/frontend/components/ui/alert-dialog.tsx b/mp_web_app/frontend/components/ui/alert-dialog.tsx
index ec41ed7..3a9696d 100644
--- a/mp_web_app/frontend/components/ui/alert-dialog.tsx
+++ b/mp_web_app/frontend/components/ui/alert-dialog.tsx
@@ -18,34 +18,40 @@ function AlertDialogPortal({...props}: React.ComponentProps<typeof AlertDialogPr
   return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
 }
 
-function AlertDialogOverlay({className, ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({className, ...props}, ref) => (
+  <AlertDialogPrimitive.Overlay
+    ref={ref}
+    data-slot="alert-dialog-overlay"
+    className={cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+      className
+    )}
+    {...props}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({className, ...props}, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      data-slot="alert-dialog-content"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
         className
       )}
       {...props}
     />
-  );
-}
-
-function AlertDialogContent({className, ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  );
-}
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 function AlertDialogHeader({className, ...props}: React.ComponentProps<"div">) {
   return (
diff --git a/mp_web_app/frontend/context/AuthContext.tsx b/mp_web_app/frontend/context/AuthContext.tsx
index 084c52f..873e132 100644
--- a/mp_web_app/frontend/context/AuthContext.tsx
+++ b/mp_web_app/frontend/context/AuthContext.tsx
@@ -3,6 +3,7 @@ import {useNavigate} from "react-router-dom";
 import {API_BASE_URL} from "@/app-config";
 import {getAccessToken, setAccessToken} from "@/context/tokenStore";
 import apiClient from "@/context/apiClient";
+import {useQueryClient} from "@tanstack/react-query";
 
 interface User {
   id: string;
@@ -31,6 +32,7 @@ export const AuthProvider = ({children}: {children: ReactNode}) => {
   const [isLoggedIn, setIsLoggedIn] = useState(getInitialAuthState);
   const [user, setUser] = useState<User | null>(null);
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
 
   // Function to check and update auth state (only checks token existence, no API calls)
   const checkAuth = () => {
@@ -80,16 +82,34 @@ export const AuthProvider = ({children}: {children: ReactNode}) => {
     const handleTokenCleared = () => {
       setIsLoggedIn(false);
       setUser(null);
+      // Invalidate all queries when logged out
+      queryClient.invalidateQueries();
+    };
+
+    // Listen for token refreshed event to invalidate cached queries
+    const handleTokenRefreshed = async () => {
+      // Fetch updated user info
+      try {
+        const response = await apiClient.get("users/me");
+        setUser(response.data);
+        setIsLoggedIn(true);
+      } catch {
+        // If fetching user fails, keep current state
+      }
+      // Invalidate all queries to refetch with new token
+      queryClient.invalidateQueries();
     };
 
     window.addEventListener("storage", handleStorage);
     window.addEventListener("token-cleared", handleTokenCleared);
+    window.addEventListener("token-refreshed", handleTokenRefreshed);
 
     return () => {
       window.removeEventListener("storage", handleStorage);
       window.removeEventListener("token-cleared", handleTokenCleared);
+      window.removeEventListener("token-refreshed", handleTokenRefreshed);
     };
-  }, [isLoggedIn]);
+  }, [isLoggedIn, queryClient]);
 
   const login = (accessToken: string) => {
     setAccessToken(accessToken);
diff --git a/mp_web_app/frontend/context/apiClient.ts b/mp_web_app/frontend/context/apiClient.ts
index 8efb3a5..4550863 100644
--- a/mp_web_app/frontend/context/apiClient.ts
+++ b/mp_web_app/frontend/context/apiClient.ts
@@ -38,6 +38,7 @@ apiClient.interceptors.response.use(
       !original.url?.includes("/auth/refresh")
     ) {
       (original as any)._retry = true;
+      (error as any).isAuthRefresh = true; // Mark as auto-handled auth error
 
       // If already refreshing, wait for that refresh to complete
       if (isRefreshing && refreshPromise) {
@@ -50,6 +51,8 @@ apiClient.interceptors.response.use(
           }
         } catch {
           setAccessToken(null);
+          // Mark final error as auth-related
+          (error as any).isAuthRefresh = true;
           return Promise.reject(error);
         }
       }
@@ -63,11 +66,13 @@ apiClient.interceptors.response.use(
             const newToken = res.data?.access_token;
             if (newToken) {
               setAccessToken(newToken);
+              // Dispatch event to invalidate cached queries
+              window.dispatchEvent(new Event("token-refreshed"));
               return newToken;
             }
             return null;
           } catch (e) {
-            // Silently handle refresh failures - don't log to console
+            // Silently handle refresh failures
             setAccessToken(null);
             window.dispatchEvent(tokenClearedEvent);
             return null;
diff --git a/mp_web_app/frontend/hooks/useNews.ts b/mp_web_app/frontend/hooks/useNews.ts
index 247cff6..38e4212 100644
--- a/mp_web_app/frontend/hooks/useNews.ts
+++ b/mp_web_app/frontend/hooks/useNews.ts
@@ -1,7 +1,7 @@
 // hooks/useNews.ts
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import apiClient from '@/context/apiClient';
-import { getAccessToken } from '@/context/tokenStore';
+import { useAuth } from '@/context/AuthContext';
 
 export interface NewsItem {
   id?: string | null;
@@ -21,17 +21,16 @@ export const newsKeys = {
 
 // Fetch news list
 export function useNews() {
-  const token = getAccessToken();
-  const isLoggedIn = !!token;
+  const { isLoggedIn, user } = useAuth();
   
   return useQuery({
-    queryKey: [...newsKeys.list(), { isLoggedIn }],
+    queryKey: [...newsKeys.list(), { isLoggedIn, userId: user?.id }],
     queryFn: async () => {
       // Token is automatically sent via Authorization header by apiClient
       const response = await apiClient.get<NewsItem[]>('news/list');
       return response.data ?? [];
     },
-    staleTime: 10 * 60 * 1000, // 10 minutes
+    staleTime: 5 * 60 * 1000, // 5 minutes (reduced from 10 to be more responsive)
   });
 }
 
diff --git a/mp_web_app/frontend/pages/admin/UserManagement.tsx b/mp_web_app/frontend/pages/admin/UserManagement.tsx
index b38a966..6a7c96e 100644
--- a/mp_web_app/frontend/pages/admin/UserManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/UserManagement.tsx
@@ -51,12 +51,15 @@ export default function UserManagement() {
       const response = await apiClient.get("users/list");
       // Force a new array reference to trigger React re-render
       setUsers([...(response.data || [])]);
-    } catch (err) {
-      toast({
-        title: "Грешка",
-        description: "Неуспешно зареждане на потребителите",
-        variant: "destructive",
-      });
+    } catch (err: any) {
+      // Don't show error toast for auth refresh errors (they're handled automatically)
+      if (!(err as any)?.isAuthRefresh) {
+        toast({
+          title: "Грешка",
+          description: "Неуспешно зареждане на потребителите",
+          variant: "destructive",
+        });
+      }
     } finally {
       setLoading(false);
     }

From 56f15881afaabfa228a26ae6bb375e194a922da9 Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sun, 7 Dec 2025 13:18:02 +0200
Subject: [PATCH 25/26] refactor: unify table column styles and enhance
 metadata handling

- Standardized column widths and added `whitespace-nowrap` for better table readability in `NewsManagement`, `ProductsManagement`, and `DocumentsManagement`.
- Introduced uploader name enrichment in file metadata for improved display in `DocumentsManagement`.
- Simplified product form validation and payload generation for cleaner code and accurate submissions.
---
 mp_web_app/backend/files/models.py            |  1 +
 mp_web_app/backend/files/operations.py        | 37 +++++++++++++-
 .../pages/admin/DocumentsManagement.tsx       | 15 +++---
 .../frontend/pages/admin/NewsManagement.tsx   | 24 +++++----
 .../pages/admin/ProductsManagement.tsx        | 50 ++++++++-----------
 5 files changed, 79 insertions(+), 48 deletions(-)

diff --git a/mp_web_app/backend/files/models.py b/mp_web_app/backend/files/models.py
index 00ba473..57a05d4 100644
--- a/mp_web_app/backend/files/models.py
+++ b/mp_web_app/backend/files/models.py
@@ -19,6 +19,7 @@ class FileMetadata(BaseModel):
   file_name: str | None = None
   file_type: FileType
   uploaded_by: str | None = None
+  uploaded_by_name: str | None = None  # User's full name for display
   created_at: str = datetime.now().isoformat()
 
 
diff --git a/mp_web_app/backend/files/operations.py b/mp_web_app/backend/files/operations.py
index 0b40e5d..0744957 100644
--- a/mp_web_app/backend/files/operations.py
+++ b/mp_web_app/backend/files/operations.py
@@ -10,7 +10,7 @@
 from fastapi.responses import StreamingResponse
 
 from app_config import AllowedFileExtensions
-from database.repositories import FileMetadataRepository
+from database.repositories import FileMetadataRepository, UserRepository
 from files.exceptions import (
   FileAccessDeniedError,
   FileNotFoundError,
@@ -27,6 +27,7 @@
 
 BUCKET = os.environ.get("UPLOADS_BUCKET")
 UPLOADS_TABLE_NAME = os.environ.get("UPLOADS_TABLE_NAME")
+USERS_TABLE_NAME = os.environ.get("USERS_TABLE_NAME")
 
 
 @lru_cache
@@ -35,6 +36,36 @@ def get_allowed_file_extensions():
   return AllowedFileExtensions().allowed_file_extensions
 
 
+def _enrich_with_user_names(files_metadata: list[FileMetadata]):
+  """Enrich file metadata with uploader names."""
+  if not files_metadata:
+    return
+  
+  # Collect unique user IDs
+  user_ids = {fm.uploaded_by for fm in files_metadata if fm.uploaded_by}
+  if not user_ids:
+    return
+  
+  # Fetch users and create a map
+  user_repo = UserRepository(USERS_TABLE_NAME)
+  users_map = {}
+  
+  for user_id in user_ids:
+    try:
+      response = user_repo.table.get_item(Key={"id": user_id})
+      if "Item" in response:
+        user = user_repo.convert_item_to_object(response["Item"])
+        users_map[user.id] = f"{user.first_name} {user.last_name}"
+    except Exception:
+      # If fetch fails, continue without this user's name
+      continue
+  
+  # Enrich file metadata with user names
+  for fm in files_metadata:
+    if fm.uploaded_by:
+      fm.uploaded_by_name = users_map.get(fm.uploaded_by, fm.uploaded_by)
+
+
 def get_uploads_repository():
   return FileMetadataRepository(UPLOADS_TABLE_NAME)
 
@@ -92,6 +123,10 @@ def get_files_metadata(file_type: str, repo: FileMetadataRepository):
       items.extend(response["Items"])
 
     files_metadata = [repo.convert_item_to_object(item) for item in items]
+    
+    # Enrich with user names
+    _enrich_with_user_names(files_metadata)
+    
     return files_metadata
 
   except Exception as e:
diff --git a/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx b/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx
index f0c540e..33fed28 100644
--- a/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/DocumentsManagement.tsx
@@ -13,6 +13,7 @@ interface FileMetadata {
   file_name: string;
   file_type: string;
   uploaded_by: string;
+  uploaded_by_name?: string;
   created_at: string;
 }
 
@@ -153,15 +154,15 @@ export default function DocumentsManagement() {
           </p>
         ) : (
           <div className="overflow-x-auto">
-          <Table className="w-full table-auto">
+          <Table className="w-full">
             <TableHeader>
               <TableRow>
                 <TableHead className="whitespace-nowrap w-[5%]">№</TableHead>
-                <TableHead className="whitespace-nowrap">Име на файл</TableHead>
-                <TableHead className="whitespace-nowrap">Тип</TableHead>
-                <TableHead className="whitespace-nowrap">Качен от</TableHead>
-                <TableHead className="whitespace-nowrap">Дата</TableHead>
-                <TableHead className="whitespace-nowrap text-right">Действия</TableHead>
+                <TableHead className="whitespace-nowrap w-[30%]">Име на файл</TableHead>
+                <TableHead className="whitespace-nowrap w-[20%]">Тип</TableHead>
+                <TableHead className="whitespace-nowrap w-[15%]">Качен от</TableHead>
+                <TableHead className="whitespace-nowrap w-[15%]">Дата</TableHead>
+                <TableHead className="whitespace-nowrap w-[15%] text-right">Действия</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -172,7 +173,7 @@ export default function DocumentsManagement() {
                   <TableCell className="whitespace-nowrap">
                     <span className="text-sm text-muted-foreground">{getFileTypeLabel(file.file_type)}</span>
                   </TableCell>
-                  <TableCell className="whitespace-nowrap">{file.uploaded_by}</TableCell>
+                  <TableCell className="whitespace-nowrap">{file.uploaded_by_name || file.uploaded_by}</TableCell>
                   <TableCell className="whitespace-nowrap">{new Date(file.created_at).toLocaleDateString("bg-BG", {
                     day: '2-digit',
                     month: '2-digit',
diff --git a/mp_web_app/frontend/pages/admin/NewsManagement.tsx b/mp_web_app/frontend/pages/admin/NewsManagement.tsx
index cb5d0e2..6bacdf0 100644
--- a/mp_web_app/frontend/pages/admin/NewsManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/NewsManagement.tsx
@@ -203,22 +203,23 @@ export default function NewsManagement() {
         ) : news.length === 0 ? (
           <p className="text-center text-muted-foreground py-8">Няма налични новини</p>
         ) : (
-          <Table>
+          <div className="overflow-x-auto">
+          <Table className="w-full">
             <TableHeader>
               <TableRow>
-                <TableHead className="w-[5%]">№</TableHead>
-                <TableHead>Заглавие</TableHead>
-                <TableHead>Тип</TableHead>
-                <TableHead>Дата</TableHead>
-                <TableHead>Действия</TableHead>
+                <TableHead className="w-[5%] whitespace-nowrap">№</TableHead>
+                <TableHead className="w-[35%] whitespace-nowrap">Заглавие</TableHead>
+                <TableHead className="w-[20%] whitespace-nowrap">Тип</TableHead>
+                <TableHead className="w-[15%] whitespace-nowrap">Дата</TableHead>
+                <TableHead className="w-[25%] whitespace-nowrap">Действия</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {news.map((item, index) => (
                 <TableRow key={item.id}>
-                  <TableCell className="font-medium">{index + 1}</TableCell>
-                  <TableCell className="font-medium">{item.title}</TableCell>
-                  <TableCell>
+                  <TableCell className="font-medium whitespace-nowrap">{index + 1}</TableCell>
+                  <TableCell className="font-medium whitespace-nowrap">{item.title}</TableCell>
+                  <TableCell className="whitespace-nowrap">
                     {item.news_type === "private" ? (
                       <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap w-fit bg-primary/10 text-primary border border-primary/20">
                         <Lock className="w-3 h-3" />
@@ -231,8 +232,8 @@ export default function NewsManagement() {
                       </div>
                     )}
                   </TableCell>
-                  <TableCell>{new Date(item.created_at).toLocaleDateString("bg-BG")}</TableCell>
-                  <TableCell>
+                  <TableCell className="whitespace-nowrap">{new Date(item.created_at).toLocaleDateString("bg-BG")}</TableCell>
+                  <TableCell className="whitespace-nowrap">
                     <div className="flex gap-2">
                       <Button variant="outline" size="sm" onClick={() => openEditDialog(item)}>
                         Редактирай
@@ -246,6 +247,7 @@ export default function NewsManagement() {
               ))}
             </TableBody>
           </Table>
+          </div>
         )}
 
         {/* Edit Dialog */}
diff --git a/mp_web_app/frontend/pages/admin/ProductsManagement.tsx b/mp_web_app/frontend/pages/admin/ProductsManagement.tsx
index 211adf2..0866f1f 100644
--- a/mp_web_app/frontend/pages/admin/ProductsManagement.tsx
+++ b/mp_web_app/frontend/pages/admin/ProductsManagement.tsx
@@ -119,23 +119,13 @@ export default function ProductsManagement() {
     }
     
     try {
-      const payload: any = {
+      const payload = {
         name: formData.name.trim(),
+        width: formData.width && formData.width.trim() !== "" ? parseFloat(formData.width) : null,
+        height: formData.height && formData.height.trim() !== "" ? parseFloat(formData.height) : null,
+        length: formData.length && formData.length.trim() !== "" ? parseFloat(formData.length) : null,
+        description: formData.description && formData.description.trim() !== "" ? formData.description.trim() : null,
       };
-      
-      // Only include dimensions if they have values
-      if (formData.width && formData.width.trim() !== "") {
-        payload.width = parseFloat(formData.width);
-      }
-      if (formData.height && formData.height.trim() !== "") {
-        payload.height = parseFloat(formData.height);
-      }
-      if (formData.length && formData.length.trim() !== "") {
-        payload.length = parseFloat(formData.length);
-      }
-      if (formData.description && formData.description.trim() !== "") {
-        payload.description = formData.description.trim();
-      }
 
       await apiClient.put(`products/update/${selectedProduct.id}`, payload);
       toast({
@@ -273,28 +263,29 @@ export default function ProductsManagement() {
         ) : products.length === 0 ? (
           <p className="text-center text-muted-foreground py-8">Няма налични продукти</p>
         ) : (
-          <Table>
+          <div className="overflow-x-auto">
+          <Table className="w-full">
             <TableHeader>
               <TableRow>
                 <TableHead className="w-[5%] whitespace-nowrap">№</TableHead>
-                <TableHead className="w-[20%] whitespace-nowrap">Име</TableHead>
-                <TableHead className="text-center w-[8%] whitespace-nowrap">Дължина (см)</TableHead>
-                <TableHead className="text-center w-[8%] whitespace-nowrap">Ширина (см)</TableHead>
-                <TableHead className="text-center w-[8%] whitespace-nowrap">Височина (см)</TableHead>
-                <TableHead className="w-[30%] pl-8 whitespace-nowrap">Описание</TableHead>
-                <TableHead className="w-[21%] whitespace-nowrap">Действия</TableHead>
+                <TableHead className="w-[15%] whitespace-nowrap">Име</TableHead>
+                <TableHead className="text-center w-[10%] whitespace-nowrap">Дължина (см)</TableHead>
+                <TableHead className="text-center w-[10%] whitespace-nowrap">Ширина (см)</TableHead>
+                <TableHead className="text-center w-[10%] whitespace-nowrap">Височина (см)</TableHead>
+                <TableHead className="w-[30%] whitespace-nowrap">Описание</TableHead>
+                <TableHead className="w-[20%] whitespace-nowrap">Действия</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {products.map((product, index) => (
                 <TableRow key={product.id}>
-                  <TableCell className="font-medium">{index + 1}</TableCell>
-                  <TableCell className="font-medium">{product.name}</TableCell>
-                  <TableCell className="text-center">{product.length ?? "-"}</TableCell>
-                  <TableCell className="text-center">{product.width ?? "-"}</TableCell>
-                  <TableCell className="text-center">{product.height ?? "-"}</TableCell>
-                  <TableCell className="pl-8 min-w-[350px]">{product.description || "-"}</TableCell>
-                  <TableCell>
+                  <TableCell className="font-medium whitespace-nowrap">{index + 1}</TableCell>
+                  <TableCell className="font-medium whitespace-nowrap">{product.name}</TableCell>
+                  <TableCell className="text-center whitespace-nowrap">{product.length ?? "-"}</TableCell>
+                  <TableCell className="text-center whitespace-nowrap">{product.width ?? "-"}</TableCell>
+                  <TableCell className="text-center whitespace-nowrap">{product.height ?? "-"}</TableCell>
+                  <TableCell className="whitespace-nowrap">{product.description || "-"}</TableCell>
+                  <TableCell className="whitespace-nowrap">
                     <div className="flex gap-2">
                       <Button variant="outline" size="sm" onClick={() => openEditDialog(product)}>
                         Редактирай
@@ -308,6 +299,7 @@ export default function ProductsManagement() {
               ))}
             </TableBody>
           </Table>
+          </div>
         )}
 
         {/* Edit Dialog */}

From 0c2fcc04c69d0250997deb82f4175e047dee738d Mon Sep 17 00:00:00 2001
From: IvanPartsunev <ivan.parcunev@gmail.com>
Date: Sun, 7 Dec 2025 13:25:10 +0200
Subject: [PATCH 26/26] refactor: remove redundant whitespaces and standardize
 formatting in backend code

- Cleaned up unnecessary blank lines across multiple modules to improve code readability.
- Simplified argument layout in function definitions and exception handling for more concise formatting.
- Standardized `import` statements and improved alignment of dictionary definitions for better consistency.
- Applied minor updates to string formatting for enhanced clarity in error messages.
---
 mp_web_app/backend/api.py                     |  2 +-
 mp_web_app/backend/auth/operations.py         |  2 +-
 mp_web_app/backend/files/operations.py        | 37 ++++----
 mp_web_app/backend/files/routers.py           | 30 +++---
 mp_web_app/backend/gallery/operations.py      | 22 +++--
 mp_web_app/backend/gallery/routers.py         |  6 +-
 mp_web_app/backend/members/operations.py      |  2 +-
 mp_web_app/backend/members/routers.py         |  7 +-
 .../backend/middleware/cache_headers.py       | 93 ++++++++++---------
 mp_web_app/backend/products/operations.py     |  1 -
 mp_web_app/backend/users/operations.py        |  4 +-
 mp_web_app/backend/users/routers.py           | 11 +--
 12 files changed, 104 insertions(+), 113 deletions(-)

diff --git a/mp_web_app/backend/api.py b/mp_web_app/backend/api.py
index 97a94fd..92bf3aa 100644
--- a/mp_web_app/backend/api.py
+++ b/mp_web_app/backend/api.py
@@ -9,10 +9,10 @@
 from gallery.routers import gallery_router
 from mail.routers import mail_router
 from members.routers import member_router
+from middleware.cache_headers import CacheControlMiddleware
 from news.routers import news_router
 from products.routers import product_router
 from users.routers import user_router
-from middleware.cache_headers import CacheControlMiddleware
 
 FRONTEND_URL = os.environ.get("FRONTEND_BASE_URL", FRONTEND_BASE_URL)
 
diff --git a/mp_web_app/backend/auth/operations.py b/mp_web_app/backend/auth/operations.py
index cfd3164..9222de5 100644
--- a/mp_web_app/backend/auth/operations.py
+++ b/mp_web_app/backend/auth/operations.py
@@ -5,7 +5,7 @@
 from typing import Literal, Optional
 from uuid import uuid4
 
-from fastapi import Depends, HTTPException, status
+from fastapi import Depends, HTTPException
 from fastapi.security import OAuth2PasswordBearer
 from jose import JWTError, jwt
 from pydantic import EmailStr, ValidationError
diff --git a/mp_web_app/backend/files/operations.py b/mp_web_app/backend/files/operations.py
index 0744957..f45576d 100644
--- a/mp_web_app/backend/files/operations.py
+++ b/mp_web_app/backend/files/operations.py
@@ -40,16 +40,16 @@ def _enrich_with_user_names(files_metadata: list[FileMetadata]):
   """Enrich file metadata with uploader names."""
   if not files_metadata:
     return
-  
+
   # Collect unique user IDs
   user_ids = {fm.uploaded_by for fm in files_metadata if fm.uploaded_by}
   if not user_ids:
     return
-  
+
   # Fetch users and create a map
   user_repo = UserRepository(USERS_TABLE_NAME)
   users_map = {}
-  
+
   for user_id in user_ids:
     try:
       response = user_repo.table.get_item(Key={"id": user_id})
@@ -59,7 +59,7 @@ def _enrich_with_user_names(files_metadata: list[FileMetadata]):
     except Exception:
       # If fetch fails, continue without this user's name
       continue
-  
+
   # Enrich file metadata with user names
   for fm in files_metadata:
     if fm.uploaded_by:
@@ -123,10 +123,10 @@ def get_files_metadata(file_type: str, repo: FileMetadataRepository):
       items.extend(response["Items"])
 
     files_metadata = [repo.convert_item_to_object(item) for item in items]
-    
+
     # Enrich with user names
     _enrich_with_user_names(files_metadata)
-    
+
     return files_metadata
 
   except Exception as e:
@@ -185,17 +185,16 @@ def download_file(file_metadata: FileMetadata | list[FileMetadata], user: User,
   try:
     s3_object = s3.get_object(Bucket=file_meta_object.bucket, Key=file_meta_object.key)
     file_stream = s3_object["Body"]
-    
+
     # Properly encode filename for Cyrillic and other Unicode characters
     from urllib.parse import quote
+
     encoded_filename = quote(file_meta_object.file_name)
-    
+
     return StreamingResponse(
       file_stream,
       media_type="application/octet-stream",
-      headers={
-        "Content-Disposition": f"attachment; filename*=UTF-8''{encoded_filename}"
-      },
+      headers={"Content-Disposition": f"attachment; filename*=UTF-8''{encoded_filename}"},
     )
   except s3.exceptions.NoSuchKey:
     raise FileNotFoundError("File not found")
@@ -225,14 +224,14 @@ def _check_file_allowed_to_user(file_metadata: FileMetadata, user_id: str, user_
     FileType.governing_documents.value,
     FileType.forms.value,
   ]
-  
+
   # Documents accessible to all logged-in users
   logged_in_types = [
     FileType.minutes.value,
     FileType.transcripts.value,
     FileType.others.value,
   ]
-  
+
   # Accounting documents - only for admin, board, control, accountant
   accounting_allowed_roles = [
     UserRole.ADMIN.value,
@@ -240,26 +239,26 @@ def _check_file_allowed_to_user(file_metadata: FileMetadata, user_id: str, user_
     UserRole.CONTROL.value,
     UserRole.ACCOUNTANT.value,
   ]
-  
+
   file_type = file_metadata.file_type.value
-  
+
   # Public documents - always allowed
   if file_type in public_types:
     return True
-  
+
   # Documents for all logged-in users
   if file_type in logged_in_types:
     return True
-  
+
   # Accounting documents - role-based access
   if file_type == FileType.accounting.value:
     return user_role in accounting_allowed_roles
-  
+
   # Private documents - only for specified users
   if file_type == FileType.private_documents.value:
     if file_metadata.allowed_to:
       return user_id in file_metadata.allowed_to
     return False
-  
+
   # Default deny
   return False
diff --git a/mp_web_app/backend/files/routers.py b/mp_web_app/backend/files/routers.py
index b5c96d3..3ed1837 100644
--- a/mp_web_app/backend/files/routers.py
+++ b/mp_web_app/backend/files/routers.py
@@ -30,10 +30,8 @@ async def file_create(
   try:
     # Accountants can only upload accounting documents
     if user.role == UserRole.ACCOUNTANT.value and file_type != FileType.accounting:
-      raise HTTPException(
-        status_code=403, detail="Accountants can only upload accounting documents"
-      )
-    
+      raise HTTPException(status_code=403, detail="Accountants can only upload accounting documents")
+
     file_metadata = FileMetadataFull(
       file_name=file_name, file_type=file_type, allowed_to=allowed_to, uploaded_by=user.id
     )
@@ -52,21 +50,19 @@ async def file_create(
 async def files_list(
   file_type: str,
   repo: FileMetadataRepository = Depends(get_uploads_repository),
-  user=Depends(role_required([UserRole.REGULAR_USER, UserRole.ACCOUNTANT, UserRole.BOARD, UserRole.CONTROL, UserRole.ADMIN])),
+  user=Depends(
+    role_required([UserRole.REGULAR_USER, UserRole.ACCOUNTANT, UserRole.BOARD, UserRole.CONTROL, UserRole.ADMIN])
+  ),
 ):
   try:
     # Accountants can only list accounting documents
     if user.role == UserRole.ACCOUNTANT.value and file_type != "accounting":
-      raise HTTPException(
-        status_code=403, detail="Accountants can only access accounting documents"
-      )
-    
+      raise HTTPException(status_code=403, detail="Accountants can only access accounting documents")
+
     # Regular users cannot list accounting documents
     if user.role == UserRole.REGULAR_USER.value and file_type == "accounting":
-      raise HTTPException(
-        status_code=403, detail="You don't have access to this document type"
-      )
-    
+      raise HTTPException(status_code=403, detail="You don't have access to this document type")
+
     return get_files_metadata(file_type, repo)
   except MetadataError as e:
     raise HTTPException(status_code=500, detail=str(e))
@@ -85,13 +81,11 @@ async def file_delete(
       response = repo.table.get_item(Key={"id": file_id})
       if "Item" not in response:
         raise HTTPException(status_code=404, detail="File not found")
-      
+
       file_metadata = repo.convert_item_to_object_full(response["Item"])
       if file_metadata.file_type != FileType.accounting:
-        raise HTTPException(
-          status_code=403, detail="Accountants can only delete accounting documents"
-        )
-    
+        raise HTTPException(status_code=403, detail="Accountants can only delete accounting documents")
+
     delete_file(file_id, repo)
   except FileNotFoundError as e:
     raise HTTPException(status_code=404, detail=str(e))
diff --git a/mp_web_app/backend/gallery/operations.py b/mp_web_app/backend/gallery/operations.py
index b8f637e..35e34d7 100644
--- a/mp_web_app/backend/gallery/operations.py
+++ b/mp_web_app/backend/gallery/operations.py
@@ -39,18 +39,20 @@ def upload_gallery_image(
   # Validate file extension
   if not file.filename or "." not in file.filename:
     raise InvalidImageFormatError(ALLOWED_IMAGE_EXTENSIONS)
-  
+
   file_extension = file.filename.split(".")[-1].lower()
   if file_extension not in ALLOWED_IMAGE_EXTENSIONS:
     raise InvalidImageFormatError(ALLOWED_IMAGE_EXTENSIONS)
-  
+
   # Validate file size
   file.file.seek(0, 2)  # Seek to end of file
   file_size = file.file.tell()  # Get current position (file size)
   file.file.seek(0)  # Reset to beginning
-  
+
   if file_size > MAX_IMAGE_SIZE_BYTES:
-    raise ImageUploadError(f"File too large. Maximum size: {MAX_IMAGE_SIZE_MB}MB. Your file: {file_size / 1024 / 1024:.2f}MB")
+    raise ImageUploadError(
+      f"File too large. Maximum size: {MAX_IMAGE_SIZE_MB}MB. Your file: {file_size / 1024 / 1024:.2f}MB"
+    )
 
   # Generate unique S3 key
   image_id = str(uuid4())
@@ -92,11 +94,11 @@ def upload_gallery_image(
 def get_gallery_images(repo: GalleryRepository, include_urls: bool = True):
   """
   Retrieve all gallery images from DynamoDB.
-  
+
   Args:
     repo: Gallery repository
     include_urls: If True, adds 'url' field with CloudFront/S3 URL to each image
-  
+
   Returns:
     List of gallery image objects with optional URLs
   """
@@ -116,7 +118,7 @@ def get_gallery_images(repo: GalleryRepository, include_urls: bool = True):
       items.extend(response["Items"])
 
     images = [repo.convert_item_to_object(item) for item in items]
-    
+
     # Add URLs to each image if requested
     if include_urls:
       for image in images:
@@ -125,7 +127,7 @@ def get_gallery_images(repo: GalleryRepository, include_urls: bool = True):
         except Exception:
           # If URL generation fails, skip this image
           image.url = None
-    
+
     return images
   except ClientError as e:
     raise DatabaseError(f"Failed to fetch gallery images: {e.response['Error']['Message']}")
@@ -164,14 +166,14 @@ def delete_gallery_image(image_id: str, repo: GalleryRepository) -> bool:
 def generate_presigned_url(s3_key: str, bucket: str, expiration: int = 3600) -> str:
   """
   Generate URL for image access.
-  
+
   If CloudFront is enabled, returns CloudFront URL (permanent, cached).
   Otherwise, returns S3 presigned URL (temporary, direct to S3).
   """
   # Use CloudFront if configured (recommended for production)
   if USE_CLOUDFRONT and CLOUDFRONT_DOMAIN:
     return f"https://{CLOUDFRONT_DOMAIN}/{s3_key}"
-  
+
   # Fallback to S3 presigned URL
   s3 = boto3.client("s3")
   try:
diff --git a/mp_web_app/backend/gallery/routers.py b/mp_web_app/backend/gallery/routers.py
index dbc11a5..2c7dea1 100644
--- a/mp_web_app/backend/gallery/routers.py
+++ b/mp_web_app/backend/gallery/routers.py
@@ -1,8 +1,8 @@
 from fastapi import APIRouter, Depends, File, Form, HTTPException, UploadFile, status
 
 from auth.operations import role_required
-from database.repositories import GalleryRepository
 from database.exceptions import DatabaseError
+from database.repositories import GalleryRepository
 from gallery.exceptions import (
   ImageNotFoundError,
   ImageUploadError,
@@ -37,9 +37,9 @@ async def gallery_create(
   except ImageUploadError as e:
     raise HTTPException(status_code=400, detail=str(e))
   except DatabaseError as e:
-    raise HTTPException(status_code=500, detail=f"Database error: {str(e)}")
+    raise HTTPException(status_code=500, detail=f"Database error: {e!s}")
   except Exception as e:
-    raise HTTPException(status_code=400, detail=f"Image upload failed: {str(e)}")
+    raise HTTPException(status_code=400, detail=f"Image upload failed: {e!s}")
 
 
 @gallery_router.get("/list", status_code=status.HTTP_200_OK)
diff --git a/mp_web_app/backend/members/operations.py b/mp_web_app/backend/members/operations.py
index 21f2779..b92ec09 100644
--- a/mp_web_app/backend/members/operations.py
+++ b/mp_web_app/backend/members/operations.py
@@ -120,7 +120,7 @@ def _normalize_members(new_members_list: list[dict[str, Any]]):
         "email": member["email"] if member["email"] else None,
         "member_code": member["member_code"],
         "member_code_valid": True,
-        "proxy": True if member["proxy"] in ["1", "yes", "true"] else False
+        "proxy": member["proxy"] in ["1", "yes", "true"],
       }
     )
   return normalized_members_list
diff --git a/mp_web_app/backend/members/routers.py b/mp_web_app/backend/members/routers.py
index 9347761..c6e7d6b 100644
--- a/mp_web_app/backend/members/routers.py
+++ b/mp_web_app/backend/members/routers.py
@@ -35,7 +35,7 @@ async def members_list(
   Access:
   - All authenticated users can access this endpoint
   - ADMIN, BOARD, CONTROL: See full details (name, email, phone, member_code)
-  - REGULAR_USER, ACCOUNTANT: 
+  - REGULAR_USER, ACCOUNTANT:
     - For cooperative members: See only names (first_name, last_name)
     - For proxies: See names + email
 
@@ -61,8 +61,9 @@ async def members_list(
           phone=None,  # Hide phone for regular users
           member_code="",  # Hide member code
           member_code_valid=False,
-          proxy=m.proxy
-        ) for m in members
+          proxy=m.proxy,
+        )
+        for m in members
       ]
     else:
       # For cooperative members: regular users see only names
diff --git a/mp_web_app/backend/middleware/cache_headers.py b/mp_web_app/backend/middleware/cache_headers.py
index 559b619..43c4b2a 100644
--- a/mp_web_app/backend/middleware/cache_headers.py
+++ b/mp_web_app/backend/middleware/cache_headers.py
@@ -2,54 +2,55 @@
 """
 Middleware to add cache control headers to responses.
 """
+
+from collections.abc import Callable
+from typing import ClassVar
+
 from fastapi import Request, Response
 from starlette.middleware.base import BaseHTTPMiddleware
-from typing import Callable
 
 
 class CacheControlMiddleware(BaseHTTPMiddleware):
-    """
-    Middleware that adds Cache-Control headers based on the endpoint.
-    """
-    
-    # Define cache policies for different endpoint patterns
-    CACHE_POLICIES = {
-        # Long cache (1 hour) - rarely changing data
-        "products/list": "public, max-age=3600, stale-while-revalidate=7200",
-        "gallery/list": "public, max-age=3600, stale-while-revalidate=7200",
-        "users/board": "public, max-age=3600, stale-while-revalidate=7200",
-        "users/control": "public, max-age=3600, stale-while-revalidate=7200",
-        "members/list": "public, max-age=3600, stale-while-revalidate=7200",
-        "files/list": "public, max-age=3600, stale-while-revalidate=7200",
-        
-        # Medium cache (10 minutes) - occasionally changing data
-        "news/list": "public, max-age=600, stale-while-revalidate=1200",
-        
-        # Short cache (5 minutes) - admin panel data
-        "users/list": "private, max-age=300, stale-while-revalidate=600",
-    }
-    
-    async def dispatch(self, request: Request, call_next: Callable) -> Response:
-        response = await call_next(request)
-        
-        # Only cache GET requests with successful responses
-        if request.method == "GET" and 200 <= response.status_code < 300:
-            path = request.url.path.lstrip("/api/")
-            
-            # Check if this path has a cache policy
-            for pattern, cache_control in self.CACHE_POLICIES.items():
-                if pattern in path:
-                    response.headers["Cache-Control"] = cache_control
-                    # Vary by Authorization to cache authenticated vs public separately
-                    response.headers["Vary"] = "Authorization"
-                    break
-            else:
-                # Default: no cache for unmatched GET endpoints
-                response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
-        else:
-            # Never cache mutations or errors
-            response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
-            response.headers["Pragma"] = "no-cache"
-            response.headers["Expires"] = "0"
-        
-        return response
+  """
+  Middleware that adds Cache-Control headers based on the endpoint.
+  """
+
+  # Define cache policies for different endpoint patterns
+  CACHE_POLICIES: ClassVar[dict[str, str]] = {
+    # Long cache (1 hour) - rarely changing data
+    "products/list": "public, max-age=3600, stale-while-revalidate=7200",
+    "gallery/list": "public, max-age=3600, stale-while-revalidate=7200",
+    "users/board": "public, max-age=3600, stale-while-revalidate=7200",
+    "users/control": "public, max-age=3600, stale-while-revalidate=7200",
+    "members/list": "public, max-age=3600, stale-while-revalidate=7200",
+    "files/list": "public, max-age=3600, stale-while-revalidate=7200",
+    # Medium cache (10 minutes) - occasionally changing data
+    "news/list": "public, max-age=600, stale-while-revalidate=1200",
+    # Short cache (5 minutes) - admin panel data
+    "users/list": "private, max-age=300, stale-while-revalidate=600",
+  }
+
+  async def dispatch(self, request: Request, call_next: Callable) -> Response:
+    response = await call_next(request)
+
+    # Only cache GET requests with successful responses
+    if request.method == "GET" and 200 <= response.status_code < 300:
+      path = request.url.path.removeprefix("/api/")
+
+      # Check if this path has a cache policy
+      for pattern, cache_control in self.CACHE_POLICIES.items():
+        if pattern in path:
+          response.headers["Cache-Control"] = cache_control
+          # Vary by Authorization to cache authenticated vs public separately
+          response.headers["Vary"] = "Authorization"
+          break
+      else:
+        # Default: no cache for unmatched GET endpoints
+        response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
+    else:
+      # Never cache mutations or errors
+      response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
+      response.headers["Pragma"] = "no-cache"
+      response.headers["Expires"] = "0"
+
+    return response
diff --git a/mp_web_app/backend/products/operations.py b/mp_web_app/backend/products/operations.py
index c190dc2..0ca9cbf 100644
--- a/mp_web_app/backend/products/operations.py
+++ b/mp_web_app/backend/products/operations.py
@@ -1,5 +1,4 @@
 import os
-from decimal import Decimal
 from typing import Any
 from uuid import uuid4
 
diff --git a/mp_web_app/backend/users/operations.py b/mp_web_app/backend/users/operations.py
index 94cdb47..92d9883 100644
--- a/mp_web_app/backend/users/operations.py
+++ b/mp_web_app/backend/users/operations.py
@@ -152,9 +152,7 @@ def list_users(repo: UserRepository) -> list[User]:
   return [repo.convert_item_to_object(item) for item in response["Items"]]
 
 
-def update_user(
-  user_id: str, user_email: EmailStr | str, user_data: UserUpdate, repo: UserRepository
-) -> User:
+def update_user(user_id: str, user_email: EmailStr | str, user_data: UserUpdate, repo: UserRepository) -> User:
   """Update a user in DynamoDB. Raises UserNotFoundError if not found."""
 
   existing_user = get_user_by_email(user_email, repo)
diff --git a/mp_web_app/backend/users/routers.py b/mp_web_app/backend/users/routers.py
index d83e935..61fc0e5 100644
--- a/mp_web_app/backend/users/routers.py
+++ b/mp_web_app/backend/users/routers.py
@@ -32,8 +32,8 @@ async def get_me(current_user: User = Depends(get_current_user)):
 
 @user_router.get("/list", response_model=list[User], status_code=status.HTTP_200_OK)
 async def users_list(
-  user_repo: UserRepository = Depends(get_user_repository), 
-  user=Depends(role_required([UserRole.REGULAR_USER, UserRole.ACCOUNTANT]))
+  user_repo: UserRepository = Depends(get_user_repository),
+  user=Depends(role_required([UserRole.REGULAR_USER, UserRole.ACCOUNTANT])),
 ):
   try:
     return list_users(user_repo)
@@ -157,11 +157,8 @@ async def user_update(
     if user_data.role is not None:
       valid_roles = [role.value for role in UserRole]
       if user_data.role not in valid_roles:
-        raise HTTPException(
-          status_code=400, 
-          detail=f"Invalid role. Must be one of: {', '.join(valid_roles)}"
-        )
-    
+        raise HTTPException(status_code=400, detail=f"Invalid role. Must be one of: {', '.join(valid_roles)}")
+
     # Get user by ID to get their email
     existing_user = get_user_by_id(user_id, user_repo)
     return update_user(user_id, existing_user.email, user_data, user_repo)