improvement: sidebar refactored. COMMING SOON page added for all non-developed tabs.

frontend/src/components/ui/Sidebar.tsx

@@ -1,6 +1,8 @@
 'use client';
 
-import { usePathname, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { memo } from 'react';
+import { usePathname } from 'next/navigation';
 import {
   LayoutDashboard,
   Users,
@@ -21,9 +23,8 @@ const menu = [
   { name: 'Reports', path: '/reports', icon: FileText },
 ];
 
-export default function Sidebar() {
+function Sidebar() {
   const pathname = usePathname();
-  const router = useRouter();
 
   return (
     <aside className="w-64 bg-background-secondary/90 border-r border-border text-text-primary flex flex-col p-4">
@@ -37,9 +38,10 @@ export default function Sidebar() {
           const isActive = pathname === item.path;
 
           return (
-            <button
+            <Link
               key={item.name}
-              onClick={() => router.push(item.path)}
+              href={item.path}
+              prefetch
               className={`flex items-center gap-3 px-3 py-2.5 rounded-[var(--radius-sm)] border transition-colors ${
                 isActive
                   ? 'bg-primary-soft border-primary/60 text-text-primary'
@@ -48,10 +50,12 @@ export default function Sidebar() {
             >
               <Icon className="w-[18px] h-[18px] icon-flat" />
               <span className="text-sm">{item.name}</span>
-            </button>
+            </Link>
           );
         })}
       </nav>
     </aside>
   );
-}
+}
+
+export default memo(Sidebar);