20bdf510fd
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m54s
- Enforced tenant isolation and Role-Based Access Control across all API routes - Implemented secure profile avatar upload using multer and UUIDs - Redesigned UI with a premium "Onyx & Gold" Charcoal dark mode - Added Funnel Stage and Origin filters to Dashboard and User Detail pages - Replaced "Referral" with "Indicação" across the platform and database - Optimized Dockerfile and local environment setup for reliable deployments - Fixed frontend syntax errors and improved KPI/Chart visualizations
60 lines
2.5 KiB
TypeScript
60 lines
2.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { ShoppingBag, TrendingUp } from 'lucide-react';
|
|
|
|
interface ProductStat {
|
|
name: string;
|
|
count: number;
|
|
percentage: number;
|
|
}
|
|
|
|
interface ProductListsProps {
|
|
requested: ProductStat[];
|
|
sold: ProductStat[];
|
|
}
|
|
|
|
export const ProductLists: React.FC<ProductListsProps> = ({ requested, sold }) => {
|
|
const ListSection = ({ title, icon: Icon, data, color }: { title: string, icon: any, data: ProductStat[], color: string }) => (
|
|
<div className="bg-white dark:bg-dark-card p-6 rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border flex-1 transition-colors">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<div className={`p-2 rounded-lg ${color === 'blue' ? 'bg-blue-100 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400' : 'bg-green-100 dark:bg-green-950/50 text-green-600 dark:text-green-400'}`}>
|
|
<Icon size={18} />
|
|
</div>
|
|
<h3 className="font-bold text-zinc-800 dark:text-dark-text">{title}</h3>
|
|
</div>
|
|
<ul className="space-y-4">
|
|
{data.map((item, idx) => (
|
|
<li key={idx} className="flex items-center justify-between group">
|
|
<div className="flex items-center gap-3">
|
|
<span className={`flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold ${idx < 3 ? 'bg-zinc-800 dark:bg-brand-yellow text-white dark:text-zinc-950' : 'bg-zinc-100 dark:bg-dark-bg text-zinc-500 dark:text-dark-muted'}`}>
|
|
{idx + 1}
|
|
</span>
|
|
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-dark-text">{item.name}</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className="text-sm font-bold text-zinc-900 dark:text-zinc-100 block">{item.count}</span>
|
|
<span className="text-[10px] text-zinc-400 dark:text-dark-muted">{item.percentage}%</span>
|
|
</div>
|
|
</li>
|
|
))}
|
|
{data.length === 0 && <li className="text-sm text-zinc-400 dark:text-dark-muted italic">Nenhum dado disponível.</li>}
|
|
</ul>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<ListSection
|
|
title="Produtos Mais Solicitados"
|
|
icon={ShoppingBag}
|
|
data={requested}
|
|
color="blue"
|
|
/>
|
|
<ListSection
|
|
title="Produtos Mais Vendidos"
|
|
icon={TrendingUp}
|
|
data={sold}
|
|
color="green"
|
|
/>
|
|
</div>
|
|
);
|
|
}; |