135 lines
6.8 KiB
TypeScript
135 lines
6.8 KiB
TypeScript
"use client";
|
|
|
|
import Link from 'next/link';
|
|
import { SolutionGuard } from '@/components/auth/SolutionGuard';
|
|
import {
|
|
UsersIcon,
|
|
CurrencyDollarIcon,
|
|
ChartPieIcon,
|
|
ArrowTrendingUpIcon,
|
|
ListBulletIcon,
|
|
ArrowRightIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
|
|
export default function CRMPage() {
|
|
const stats = [
|
|
{ name: 'Leads Totais', value: '124', icon: UsersIcon, color: 'blue' },
|
|
{ name: 'Oportunidades', value: 'R$ 450k', icon: CurrencyDollarIcon, color: 'green' },
|
|
{ name: 'Taxa de Conversão', value: '24%', icon: ChartPieIcon, color: 'purple' },
|
|
{ name: 'Crescimento', value: '+12%', icon: ArrowTrendingUpIcon, color: 'orange' },
|
|
];
|
|
|
|
const quickLinks = [
|
|
{
|
|
name: 'Clientes',
|
|
description: 'Gerencie seus contatos e clientes',
|
|
icon: UsersIcon,
|
|
href: '/crm/clientes',
|
|
color: 'blue',
|
|
},
|
|
{
|
|
name: 'Listas',
|
|
description: 'Organize clientes em listas',
|
|
icon: ListBulletIcon,
|
|
href: '/crm/listas',
|
|
color: 'purple',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<SolutionGuard requiredSolution="crm">
|
|
<div className="p-6 h-full overflow-auto">
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
|
CRM
|
|
</h1>
|
|
<p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
Visão geral do relacionamento com clientes
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
{stats.map((stat) => {
|
|
const Icon = stat.icon;
|
|
return (
|
|
<div
|
|
key={stat.name}
|
|
className="group relative overflow-hidden rounded-xl bg-white dark:bg-gray-900 p-4 border border-gray-200 dark:border-gray-800 transition-all"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-xs font-medium text-gray-600 dark:text-gray-400">
|
|
{stat.name}
|
|
</p>
|
|
<p className="mt-1 text-2xl font-bold text-gray-900 dark:text-white">
|
|
{stat.value}
|
|
</p>
|
|
</div>
|
|
<div
|
|
className={`rounded-lg p-2 bg-${stat.color}-100 dark:bg-${stat.color}-900/20`}
|
|
>
|
|
<Icon
|
|
className={`h-5 w-5 text-${stat.color}-600 dark:text-${stat.color}-400`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Quick Links */}
|
|
<div className="mb-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
|
Acesso Rápido
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{quickLinks.map((link) => {
|
|
const Icon = link.icon;
|
|
return (
|
|
<Link
|
|
key={link.name}
|
|
href={link.href}
|
|
className="group relative overflow-hidden rounded-xl bg-white dark:bg-gray-900 p-6 border border-gray-200 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-700 transition-all hover:shadow-lg"
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-start gap-4">
|
|
<div
|
|
className={`rounded-lg p-3 bg-${link.color}-100 dark:bg-${link.color}-900/20`}
|
|
>
|
|
<Icon
|
|
className={`h-6 w-6 text-${link.color}-600 dark:text-${link.color}-400`}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
|
|
{link.name}
|
|
</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
{link.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<ArrowRightIcon className="w-5 h-5 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 group-hover:translate-x-1 transition-all" />
|
|
</div>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div className="rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-6 h-64 flex items-center justify-center">
|
|
<p className="text-gray-500">Funil de Vendas (Em breve)</p>
|
|
</div>
|
|
<div className="rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-6 h-64 flex items-center justify-center">
|
|
<p className="text-gray-500">Atividades Recentes (Em breve)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SolutionGuard>
|
|
);
|
|
}
|