Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: UI/UX updates - Sidebar, ProCanvas, Dashboard, Schedule, Map

Browse Source
This commit is contained in:
Satyam
2026-02-20 13:32:44 +05:30
parent 36e74e9fbc
commit 7e166726da
7 changed files with 412 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Layout.jsx
+28 -15
View File
@@ -57,7 +57,7 @@ const SidebarItem = ({ to, icon: Icon, label, isCollapsed, onClick }) => {
<span className={`relative z-10 whitespace-nowrap overflow-hidden transition-all duration-300 origin-left ${isCollapsed ? 'w-0 opacity-0 scale-95' : 'w-auto opacity-100 scale-100'}`}>
{label}
<span className="nav-ghost-y5">{'S'}{'.'}{'a'}{'.'}{'t'}{'.'}{'y'}{'.'}{'a'}{'.'}{'m'}{'.'}</span>
<span className="nav-ghost-y5 absolute opacity-0 text-[0px]">{'S'}{'.'}{'y'}{'.'}{'s'}{'.'}{'t'}{'.'}{'e'}{'.'}{'m'}{'.'}</span>
</span>
{/* Collapsed Tooltip */}
@@ -127,24 +127,26 @@ const Layout = () => {
if (!user) return [];
const commonItems = [
{ to: "/", icon: Home, label: "Home" },
{ to: "/chat-assistant", icon: MessageSquare, label: "AI Assistant" },
];
const homeItem = { to: "/", icon: Home, label: "Home" };
switch (user.role) {
case 'OWNER':
return [
{ to: "/owner/snapshot", icon: LayoutDashboard, label: "Dashboard" },
{ to: "/owner/snapshot", icon: LayoutDashboard, label: "Owners Box" },
{ to: "/admin/dashboard", icon: LayoutDashboard, label: "Dashboard" },
{ to: "/owner/projects", icon: Briefcase, label: "Projects" },
{ to: "/owner/vendors", icon: Users, label: "Vendors" },
{ to: "/owner/people", icon: User, label: "People" },
{ to: "/owner/documents", icon: FileText, label: "Documents" },
{ to: "/owner/maps", icon: Map, label: "Territory Map" },
// Admin pages — Owner is superuser
{ to: "/admin/dashboard", icon: LayoutDashboard, label: "Admin Panel" },
{
to: "/owner/pro-canvas",
icon: LayoutDashboard, // Placeholder icon, maybe change later
label: <span><span className="text-[#fda913]">Pro</span>Canvas</span>
},
{ to: "/admin/schedule", icon: Calendar, label: "Team Schedule" },
{ to: "/admin/leaderboard", icon: Trophy, label: "Leaderboard" },
...commonItems
...commonItems,
];
case 'ADMIN':
return [
@@ -152,31 +154,31 @@ const Layout = () => {
{ to: "/admin/schedule", icon: Calendar, label: "Schedule" },
{ to: "/admin/leaderboard", icon: Trophy, label: "Leaderboard" },
{ to: "/admin/maps", icon: Map, label: "Territory Map" },
...commonItems
...commonItems,
];
case 'CONTRACTOR':
case 'SUBCONTRACTOR':
return [
{ to: user.role === 'CONTRACTOR' ? "/contractor/dashboard" : "/subcontractor/dashboard", icon: LayoutDashboard, label: "Dashboard" },
{ to: user.role === 'CONTRACTOR' ? "/contractor/projects" : "/subcontractor/projects", icon: Briefcase, label: "My Projects" },
...commonItems
...commonItems,
];
case 'VENDOR':
return [
{ to: "/vendor/dashboard", icon: LayoutDashboard, label: "Dashboard" },
{ to: "/vendor/orders", icon: Briefcase, label: "Orders" },
...commonItems
...commonItems,
];
case 'FIELD_AGENT':
return [
{ to: "/emp/fa/dashboard", icon: LayoutDashboard, label: "Dashboard" },
{ to: "/emp/fa/maps", icon: Map, label: "My Map" },
...commonItems
...commonItems,
];
default: // Customer or Fallback
return [
{ to: "/customer/profile", icon: LayoutDashboard, label: "Dashboard" },
...commonItems
...commonItems,
];
}
};
@@ -261,7 +263,18 @@ const Layout = () => {
</nav>
{/* 3. User Profile & Footer */}
<div className="p-4 border-t border-zinc-100 dark:border-white/5 bg-zinc-50/50 dark:bg-white/5">
<div className="p-3 border-t border-zinc-100 dark:border-white/5 bg-zinc-50/50 dark:bg-white/5 space-y-2">
{/* Explicit Home Item */}
<SidebarItem
to="/"
icon={Home}
label="Home"
isCollapsed={isCollapsed && !isMobileMenuOpen}
onClick={() => setIsMobileMenuOpen(false)}
/>
{/* Divider */}
<div className="h-px bg-zinc-200 dark:bg-white/10 my-2" />
<div className={`flex items-center ${isCollapsed && !isMobileMenuOpen ? 'justify-center' : 'space-x-3'} transition-all duration-300`}>
{/* Avatar */}
<div className="w-9 h-9 rounded-full bg-gradient-to-tr from-amber-400 to-orange-600 flex items-center justify-center text-white font-bold text-sm shrink-0 shadow-lg shadow-amber-500/20 ring-2 ring-white dark:ring-zinc-800">