feat: UI/UX updates - Sidebar, ProCanvas, Dashboard, Schedule, Map
This commit is contained in:
Satyam
@@ -392,6 +392,11 @@ const IntelligenceMap = () => {
|
||||
{/* Larger invisible touch target */}
|
||||
<div className="absolute -inset-4 md:-inset-2" />
|
||||
|
||||
{/* Urgent Status Alert Pulse */}
|
||||
{visible && spot.status === 'Urgent' && (
|
||||
<div className="absolute -inset-8 rounded-full bg-red-500/30 animate-ping" style={{ animationDuration: '1.5s' }} />
|
||||
)}
|
||||
|
||||
{/* Radar Ripple */}
|
||||
{visible && (
|
||||
<div className={`absolute ${isCommercial ? '-inset-5' : '-inset-4'} rounded-full animate-ping opacity-75 ${isCommercial ? 'bg-purple-500/20' : 'bg-cyan-400/20'
|
||||
|
||||
+28
-15
@@ -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">
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
import React from 'react';
|
||||
import { SpotlightCard } from '../SpotlightCard';
|
||||
import { Trophy, ChevronRight, User } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const MOCK_TOP_REPS = [
|
||||
{ id: 1, name: "Sarah Connor", sales: "$1.2M", deals: 42, avatar: null },
|
||||
{ id: 2, name: "Michael Ross", sales: "$980K", deals: 35, avatar: null },
|
||||
{ id: 3, name: "Jessica Pearson", sales: "$850K", deals: 28, avatar: null },
|
||||
{ id: 4, name: "Harvey Specter", sales: "$720K", deals: 24, avatar: null },
|
||||
{ id: 5, name: "Louis Litt", sales: "$640K", deals: 20, avatar: null },
|
||||
{ id: 6, name: "Donna Paulsen", sales: "$590K", deals: 18, avatar: null },
|
||||
];
|
||||
|
||||
export const TopSalesLeaderboard = () => {
|
||||
return (
|
||||
<SpotlightCard className="h-full flex flex-col">
|
||||
<div className="p-6 flex-1 flex flex-col min-h-0">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-amber-100 dark:bg-amber-500/10 rounded-lg text-amber-600 dark:text-amber-500">
|
||||
<Trophy size={20} />
|
||||
</div>
|
||||
<h3 className="font-bold text-zinc-900 dark:text-white">Top Sales Reps</h3>
|
||||
</div>
|
||||
<Link
|
||||
to="/admin/leaderboard"
|
||||
className="text-xs font-bold text-zinc-500 hover:text-amber-500 dark:text-zinc-400 dark:hover:text-amber-400 flex items-center transition-colors"
|
||||
>
|
||||
View All <ChevronRight size={14} className="ml-1" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-h-0 space-y-3 overflow-y-auto pr-1 custom-scrollbar">
|
||||
{MOCK_TOP_REPS.map((rep, index) => (
|
||||
<Link
|
||||
to="/admin/leaderboard"
|
||||
key={rep.id}
|
||||
className="flex items-center justify-between p-3 rounded-xl bg-zinc-50 dark:bg-white/5 hover:bg-zinc-100 dark:hover:bg-white/10 transition-all border border-transparent hover:border-zinc-200 dark:hover:border-white/10 group"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`
|
||||
w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold border
|
||||
${index === 0 ? 'bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-500/20 dark:text-amber-400 dark:border-amber-500/30' :
|
||||
index === 1 ? 'bg-zinc-200 text-zinc-700 border-zinc-300 dark:bg-zinc-700 dark:text-zinc-300 dark:border-zinc-600' :
|
||||
index === 2 ? 'bg-orange-100 text-orange-800 border-orange-200 dark:bg-orange-900/40 dark:text-orange-300 dark:border-orange-800' :
|
||||
'bg-zinc-100 text-zinc-500 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-500 dark:border-zinc-700'}
|
||||
`}>
|
||||
{index + 1}
|
||||
</div>
|
||||
|
||||
<div className="w-8 h-8 rounded-full bg-zinc-200 dark:bg-zinc-700 flex items-center justify-center overflow-hidden">
|
||||
{rep.avatar ? (
|
||||
<img src={rep.avatar} alt={rep.name} className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<User size={14} className="text-zinc-400 dark:text-zinc-500" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-sm font-bold text-zinc-900 dark:text-white group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors">
|
||||
{rep.name}
|
||||
</div>
|
||||
<div className="text-[10px] text-zinc-500 dark:text-zinc-400 font-mono">
|
||||
{rep.deals} Deals
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<div className="text-sm font-black text-zinc-900 dark:text-white">
|
||||
{rep.sales}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subtle bottom gradient for scroll indication */}
|
||||
<div className="h-6 bg-gradient-to-t from-zinc-100 dark:from-black/20 to-transparent pointer-events-none -mt-6 rounded-b-2xl" />
|
||||
</SpotlightCard>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user