no idea

src/apps/officer-web/Screens/Dashboard/Layout/DashboardLayout.tsx

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+import { useAuth } from 'hooks/useAuth';
 import { Background } from './Background';
 import { Header } from './Header';
 import { Dock, dockItems } from './Dock';
@@ -6,12 +8,18 @@ type DashboardLayoutProps = {
   children?: React.ReactNode;
 };
 export function DashboardLayout({ children }: DashboardLayoutProps) {
+  const { user } = useAuth();
+  const visibleItems = useMemo(
+    () => dockItems.filter((item) => !item.role || item.role === user?.role),
+    [user?.role],
+  );
+
   return (
     <div className="relative overflow-hidden h-dvh outline-none inset-0">
       <Header />
       <section className="relative h-dvh snap-start overflow-hidden">
         <Background />
-        <Dock items={dockItems} />
+        <Dock items={visibleItems} />
         <div className="absolute inset-0 z-2 pt-[52px] md:pt-[64px] pb-2 overflow-y-auto">
           {children}
         </div>