import { useState } from “react”;
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from “@/components/ui/card”;
import { Button } from “@/components/ui/button”;
import { Tabs, TabsContent, TabsList, TabsTrigger } from “@/components/ui/tabs”;
import { Badge } from “@/components/ui/badge”;
import {
BarChart3,
Package,
Users,
TrendingUp,
Plus,
Search,
Filter,
MoreHorizontal,
Eye,
Edit,
Trash2
} from “lucide-react”;
import { Input } from “@/components/ui/input”;
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from “@/components/ui/table”;
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from “@/components/ui/dropdown-menu”;
// Mock data
const mockProducts = [
{
id: 1,
name: “Website Redesign Pro”,
status: “active”,
price: “R$ 2.500”,
category: “Design”,
lastUpdated: “2024-01-15”,
conversions: 85,
},
{
id: 2,
name: “SEO Optimization Plus”,
status: “pending”,
price: “R$ 1.200”,
category: “Marketing”,
lastUpdated: “2024-01-14”,
conversions: 92,
},
{
id: 3,
name: “E-commerce Setup”,
status: “active”,
price: “R$ 3.500”,
category: “Development”,
lastUpdated: “2024-01-13”,
conversions: 78,
},
];
const mockClients = [
{
id: 1,
name: “Tech Solutions Ltd”,
email: “contact@techsolutions.com”,
phone: “+55 11 9999-9999”,
status: “active”,
lastContact: “2024-01-15”,
value: “R$ 15.000”,
},
{
id: 2,
name: “Marketing Pro Agency”,
email: “hello@marketingpro.com”,
phone: “+55 11 8888-8888”,
status: “lead”,
lastContact: “2024-01-14”,
value: “R$ 8.500”,
},
];
const Index = () => {
const [activeTab, setActiveTab] = useState(“dashboard”);
const getStatusBadge = (status: string) => {
const statusMap = {
active: { label: “Ativo”, variant: “default” as const },
pending: { label: “Pendente”, variant: “secondary” as const },
lead: { label: “Lead”, variant: “outline” as const },
};
const statusInfo = statusMap[status as keyof typeof statusMap];
return {statusInfo.label} ;
};
return (
{/* Header */}
{/* Dashboard Tab */}
Total de Produtos
Clientes Ativos
Taxa de Conversão
Receita Mensal
Produtos Recentes
Últimos produtos cadastrados
Performance dos Produtos
Taxa de conversão por produto
{/* Products Tab */}
{/* Clients Tab */}
{/* Workflow Tab */}
Pipeline de Projetos
Status atual dos projetos em andamento
);
};
export default Index;
CRM – Fernanda Amaral
Sistema de Gestão de Produtos e Clientes
24
+3 este mês
18
+2 esta semana
85%
+5% vs mês anterior
R$ 45.2K
+12% vs mês anterior
{mockProducts.slice(0, 3).map((product) => (
))}
{product.name}
{product.category}
{product.price}
{getStatusBadge(product.status)}
{mockProducts.map((product) => (
))}
{product.name}
{product.conversions}%
Gerenciamento de Produtos
Organize e acompanhe seus produtos
Gerenciamento de Clientes
Acompanhe seus clientes e leads
Workflow de Cadastro
Processo completo de cadastro e otimização
1
Análise & Diagnóstico
- • Análise do site atual
- • Diagnóstico de melhorias
- • Geração de planilha
- • Identificação de gargalos
2
Planejamento
- • Mudanças de layout
- • Otimização de textos
- • Melhorias de usabilidade
- • Estratégia de CTAs
3
Execução Técnica
- • Design e desenvolvimento
- • Ajustes de páginas
- • Otimização de formulários
- • Checkout melhorado
4
Configuração
- • Setup de ferramentas
- • Configuração Hotjar
- • Testes A/B
- • Analytics avançado
5
Relatórios
- • Relatório de resultados
- • Comparativo antes x depois
- • Métricas de conversão
- • ROI detalhado
6
Suporte
- • Ajustes pós-implementação
- • Correções necessárias
- • Suporte contínuo
- • Otimizações adicionais
Em Análise
Tech Solutions
E-commerce redesign
Em Execução
Marketing Pro
Landing page otimization
Digital Agency
Checkout improvement
Concluído
StartupX
Conversion optimization