feat(auth): implement role-based dashboard redirect

2026-01-29 11:43:19 +05:30
parent d07d42ad0b
commit e214e32c17
12 changed files with 713 additions and 78 deletions
--- a/apps/web/src/features/layouts/Sidebar.tsx
+++ b/apps/web/src/features/layouts/Sidebar.tsx
@@ -0,0 +1,122 @@
+import React, { useMemo } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { LogOut, Menu, X } from 'lucide-react';
+import { Button } from '../../common/components/ui/button';
+import { NAV_CONFIG } from "../../common/config/navigation";
+import type { Role } from '../../common/config/navigation';
+
+interface SidebarProps {
+    sidebarOpen: boolean;
+    setSidebarOpen: (open: boolean) => void;
+    user: {
+        name?: string;
+        role?: string;
+    } | null;
+    onLogout: () => void;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({
+    sidebarOpen,
+    setSidebarOpen,
+    user,
+    onLogout
+}) => {
+    const location = useLocation();
+
+    // Filter navigation based on user role
+    const filteredNav = useMemo(() => {
+        const userRole = (user?.role || 'Client') as Role;
+
+        return NAV_CONFIG.map(group => {
+            const visibleItems = group.items.filter(item =>
+                item.allowedRoles.includes(userRole)
+            );
+            return {
+                ...group,
+                items: visibleItems
+            };
+        }).filter(group => group.items.length > 0);
+    }, [user?.role]);
+
+    return (
+        <aside
+            className={`${sidebarOpen ? 'w-64' : 'w-20'
+                } bg-white border-r border-slate-200 transition-all duration-300 flex flex-col z-20`}
+        >
+            <div className="h-16 flex items-center justify-between px-4 border-b border-slate-100 flex-shrink-0">
+                {sidebarOpen ? (
+                    <span className="text-xl font-bold text-primary">KROW</span>
+                ) : (
+                    <span className="text-xl font-bold text-primary mx-auto">K</span>
+                )}
+                <button
+                    onClick={() => setSidebarOpen(!sidebarOpen)}
+                    className="p-1 rounded-md hover:bg-slate-100 text-secondary-text"
+                >
+                    {sidebarOpen ? <X size={20} /> : <Menu size={20} />}
+                </button>
+            </div>
+
+            <nav className="flex-1 py-6 px-3 space-y-6 overflow-y-auto">
+                {filteredNav.map((group) => (
+                    <div key={group.title}>
+                        {sidebarOpen && (
+                            <h3 className="px-3 mb-2 text-xs font-semibold text-muted-text uppercase tracking-wider">
+                                {group.title}
+                            </h3>
+                        )}
+                        <div className="space-y-1">
+                            {group.items.map((item) => (
+                                <Link
+                                    key={item.path}
+                                    to={item.path}
+                                    className={`flex items-center px-3 py-2.5 rounded-lg transition-colors group ${location.pathname.startsWith(item.path)
+                                        ? 'bg-primary/10 text-primary font-medium'
+                                        : 'text-secondary-text hover:bg-slate-50 hover:text-primary-text'
+                                        }`}
+                                    title={!sidebarOpen ? item.label : undefined}
+                                >
+                                    <item.icon
+                                        size={20}
+                                        className={`flex-shrink-0 ${location.pathname.startsWith(item.path)
+                                            ? 'text-primary'
+                                            : 'text-muted-text group-hover:text-secondary-text'
+                                            }`}
+                                    />
+                                    {sidebarOpen && <span className="ml-3 truncate">{item.label}</span>}
+                                </Link>
+                            ))}
+                        </div>
+                    </div>
+                ))}
+            </nav>
+
+            <div className="p-4 border-t border-slate-100 flex-shrink-0">
+                <div className={`flex items-center ${sidebarOpen ? 'justify-between' : 'justify-center'}`}>
+                    {sidebarOpen && (
+                        <div className="flex items-center overflow-hidden">
+                            <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xs flex-shrink-0">
+                                {user?.name?.charAt(0) || 'U'}
+                            </div>
+                            <div className="ml-3 overflow-hidden">
+                                <p className="text-sm font-medium text-primary-text truncate w-32">{user?.name}</p>
+                                <p className="text-xs text-secondary-text truncate">{user?.role}</p>
+                            </div>
+                        </div>
+                    )}
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={onLogout}
+                        title="Logout"
+                        className="text-secondary-text hover:text-destructive hover:bg-destructive/10"
+                    >
+                        <LogOut size={18} />
+                    </Button>
+                </div>
+            </div>
+        </aside>
+    );
+};
+
+export default Sidebar;