feat: versão 1.5 - CRM Beta com leads, funis, campanhas e portal do cliente
This commit is contained in:
@@ -1,51 +1,93 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import {
|
||||
HomeIcon,
|
||||
RocketLaunchIcon,
|
||||
Squares2X2Icon
|
||||
UserPlusIcon,
|
||||
RectangleStackIcon,
|
||||
UsersIcon,
|
||||
ListBulletIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
import {
|
||||
HomeIcon as HomeIconSolid,
|
||||
RocketLaunchIcon as RocketIconSolid,
|
||||
Squares2X2Icon as GridIconSolid
|
||||
UserPlusIcon as UserPlusIconSolid,
|
||||
RectangleStackIcon as RectangleStackIconSolid,
|
||||
UsersIcon as UsersIconSolid,
|
||||
ListBulletIcon as ListBulletIconSolid
|
||||
} from '@heroicons/react/24/solid';
|
||||
import { MenuItem } from './SidebarRail';
|
||||
|
||||
export const MobileBottomBar: React.FC = () => {
|
||||
interface MobileBottomBarProps {
|
||||
menuItems?: MenuItem[];
|
||||
}
|
||||
|
||||
export const MobileBottomBar: React.FC<MobileBottomBarProps> = ({ menuItems }) => {
|
||||
const pathname = usePathname();
|
||||
const [showMoreMenu, setShowMoreMenu] = useState(false);
|
||||
|
||||
const isActive = (path: string) => {
|
||||
if (path === '/dashboard') {
|
||||
return pathname === '/dashboard';
|
||||
if (path === '/dashboard' || path === '/cliente/dashboard') {
|
||||
return pathname === path;
|
||||
}
|
||||
return pathname.startsWith(path);
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
label: 'Início',
|
||||
path: '/dashboard',
|
||||
icon: HomeIcon,
|
||||
iconSolid: HomeIconSolid
|
||||
},
|
||||
{
|
||||
label: 'CRM',
|
||||
path: '/crm',
|
||||
icon: RocketLaunchIcon,
|
||||
iconSolid: RocketIconSolid
|
||||
},
|
||||
{
|
||||
label: 'Mais',
|
||||
path: '#',
|
||||
icon: Squares2X2Icon,
|
||||
iconSolid: GridIconSolid,
|
||||
onClick: () => setShowMoreMenu(true)
|
||||
}
|
||||
];
|
||||
// Mapeamento de ícones sólidos para os itens do menu
|
||||
const getSolidIcon = (label: string, defaultIcon: any) => {
|
||||
const map: Record<string, any> = {
|
||||
'Dashboard': HomeIconSolid,
|
||||
'Leads': UserPlusIconSolid,
|
||||
'Listas': RectangleStackIconSolid,
|
||||
'CRM': UsersIconSolid,
|
||||
'Meus Leads': UserPlusIconSolid,
|
||||
'Meu Perfil': UserPlusIconSolid,
|
||||
};
|
||||
return map[label] || defaultIcon;
|
||||
};
|
||||
|
||||
const navItems = menuItems
|
||||
? menuItems.reduce((acc: any[], item) => {
|
||||
if (item.href !== '#') {
|
||||
acc.push({
|
||||
label: item.label,
|
||||
path: item.href,
|
||||
icon: item.icon,
|
||||
iconSolid: getSolidIcon(item.label, item.icon)
|
||||
});
|
||||
} else if (item.subItems) {
|
||||
// Adiciona subitens importantes se o item pai for '#'
|
||||
item.subItems.forEach(sub => {
|
||||
acc.push({
|
||||
label: sub.label,
|
||||
path: sub.href,
|
||||
icon: item.icon, // Usa o ícone do pai
|
||||
iconSolid: getSolidIcon(sub.label, item.icon)
|
||||
});
|
||||
});
|
||||
}
|
||||
return acc;
|
||||
}, []).slice(0, 4) // Limita a 4 itens no mobile
|
||||
: [
|
||||
{
|
||||
label: 'Dashboard',
|
||||
path: '/dashboard',
|
||||
icon: HomeIcon,
|
||||
iconSolid: HomeIconSolid
|
||||
},
|
||||
{
|
||||
label: 'Leads',
|
||||
path: '/crm/leads',
|
||||
icon: UserPlusIcon,
|
||||
iconSolid: UserPlusIconSolid
|
||||
},
|
||||
{
|
||||
label: 'Listas',
|
||||
path: '/crm/listas',
|
||||
icon: RectangleStackIcon,
|
||||
iconSolid: RectangleStackIconSolid
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -56,21 +98,6 @@ export const MobileBottomBar: React.FC = () => {
|
||||
const active = isActive(item.path);
|
||||
const Icon = active ? item.iconSolid : item.icon;
|
||||
|
||||
if (item.onClick) {
|
||||
return (
|
||||
<button
|
||||
key={item.label}
|
||||
onClick={item.onClick}
|
||||
className="flex flex-col items-center justify-center min-w-[70px] h-full gap-1"
|
||||
>
|
||||
<Icon className={`w-6 h-6 ${active ? 'text-[var(--brand-color)]' : 'text-gray-500 dark:text-gray-400'}`} />
|
||||
<span className={`text-xs font-medium ${active ? 'text-[var(--brand-color)]' : 'text-gray-500 dark:text-gray-400'}`}>
|
||||
{item.label}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.label}
|
||||
@@ -86,44 +113,6 @@ export const MobileBottomBar: React.FC = () => {
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* More Menu Modal */}
|
||||
{showMoreMenu && (
|
||||
<div className="md:hidden fixed inset-0 z-[100] bg-black/50 backdrop-blur-sm" onClick={() => setShowMoreMenu(false)}>
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 bg-white dark:bg-zinc-900 rounded-t-3xl shadow-2xl max-h-[70vh] overflow-y-auto"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="p-6">
|
||||
{/* Handle bar */}
|
||||
<div className="w-12 h-1.5 bg-gray-300 dark:bg-zinc-700 rounded-full mx-auto mb-6" />
|
||||
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
Todos os Módulos
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<Link
|
||||
href="/erp"
|
||||
onClick={() => setShowMoreMenu(false)}
|
||||
className="flex flex-col items-center gap-3 p-4 rounded-2xl hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white shadow-lg">
|
||||
<svg className="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white text-center">
|
||||
ERP
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Add more modules here */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user