Feat(Chore): Implemented Audit-Logs, Department, Principal.

src/components/layouts/ProtectedLayout.tsx

@@ -2,12 +2,14 @@ import { Navigate, Outlet } from 'react-router-dom';
 import { useAuth } from '@/contexts/AuthContext';
 import AuthenticatedLayout from './AuthenticatedLayout';
 import MfaEnforcementLayout from './MfaEnforcementLayout';
+import { useOrganizations } from '@/hooks/useOrganizations';
 import { Loader2 } from 'lucide-react';
 
 export default function ProtectedLayout() {
   const { isAuthenticated, isLoading, requiresMfaEnrollment } = useAuth();
+  const { isLoading: isOrgsLoading } = useOrganizations();
 
-  if (isLoading) {
+  if (isLoading || isOrgsLoading) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-background">
         <div className="flex flex-col items-center gap-4">
@@ -27,8 +29,6 @@ export default function ProtectedLayout() {
   }
 
   return (
-    <AuthenticatedLayout>
-      <Outlet />
-    </AuthenticatedLayout>
+    <AuthenticatedLayout />
   );
 }

src/components/navigation/AppSidebar.tsx

@@ -9,6 +9,9 @@ import {
   Settings,
   FileText,
   Key,
+  Layers,
+  GitBranch,
+  ScrollText,
 } from "lucide-react";
 import { GatehouseLogo } from "@/components/branding/GatehouseLogo";
 import { NavLink } from "@/components/NavLink";
@@ -37,12 +40,15 @@ const userNavItems = [
 const orgNavItems = [
   { title: "Overview", url: "/org", icon: Building2 },
   { title: "Members", url: "/org/members", icon: Users },
+  { title: "Departments", url: "/org/departments", icon: Layers },
+  { title: "Principals", url: "/org/principals", icon: GitBranch },
   { title: "Policies", url: "/org/policies", icon: Settings },
   { title: "Audit Log", url: "/org/audit", icon: FileText },
 ];
 
 const adminNavItems = [
   { title: "OIDC Clients", url: "/org/clients", icon: Key },
+  { title: "System Logs",  url: "/admin/audit", icon: ScrollText },
 ];
 
 export function AppSidebar() {