fix: allow origin colors to be edited and display correctly in dashboard
- Fixed database initialization where default origins were seeded without color_classes. - Added a visual color picker to the Origens admin page to allow users to assign colors to origin tags. - Updated Dashboard Pie Chart to read the color classes correctly and display them.
This commit is contained in:
Cauê Faleiros
@@ -179,6 +179,17 @@ export const Dashboard: React.FC = () => {
|
||||
}));
|
||||
}, [data, funnelDefs]);
|
||||
|
||||
const tailwindToHex: Record<string, string> = {
|
||||
'zinc': '#71717a',
|
||||
'blue': '#3b82f6',
|
||||
'purple': '#a855f7',
|
||||
'green': '#22c55e',
|
||||
'red': '#ef4444',
|
||||
'pink': '#ec4899',
|
||||
'orange': '#f97316',
|
||||
'yellow': '#eab308'
|
||||
};
|
||||
|
||||
// --- Chart Data: Origin ---
|
||||
const originData = useMemo(() => {
|
||||
const origins = data.reduce((acc, curr) => {
|
||||
@@ -186,11 +197,21 @@ export const Dashboard: React.FC = () => {
|
||||
return acc;
|
||||
}, {} as Record<string, number>);
|
||||
|
||||
// Ensure type safety for value in sort
|
||||
return (Object.entries(origins) as [string, number][])
|
||||
.map(([name, value]) => ({ name, value }))
|
||||
.map(([name, value]) => {
|
||||
const def = originDefs.find(o => o.name === name);
|
||||
// Extract base color (e.g. "red" from "bg-red-100 text-red-700...")
|
||||
let hexColor = '';
|
||||
if (def && def.color_class) {
|
||||
const match = def.color_class.match(/bg-([a-z]+)-\d+/);
|
||||
if (match && tailwindToHex[match[1]]) {
|
||||
hexColor = tailwindToHex[match[1]];
|
||||
}
|
||||
}
|
||||
return { name, value, hexColor };
|
||||
})
|
||||
.sort((a, b) => b.value - a.value);
|
||||
}, [data]);
|
||||
}, [data, originDefs]);
|
||||
|
||||
// --- Table Data: Sellers Ranking ---
|
||||
const sellersRanking = useMemo(() => {
|
||||
@@ -427,12 +448,11 @@ export const Dashboard: React.FC = () => {
|
||||
stroke="none"
|
||||
>
|
||||
{originData.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={COLORS.origins[entry.name as keyof typeof COLORS.origins] || COLORS.charts[index % COLORS.charts.length]}
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={entry.hexColor || COLORS.charts[index % COLORS.charts.length]}
|
||||
/>
|
||||
))}
|
||||
</Pie>
|
||||
))} </Pie>
|
||||
<Tooltip
|
||||
formatter={(value: any) => [value, 'Leads']}
|
||||
contentStyle={{
|
||||
|
||||
@@ -11,7 +11,7 @@ export const Origins: React.FC = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingItem, setEditingItem] = useState<OriginItemDef | null>(null);
|
||||
const [formData, setFormData] = useState({ name: '' });
|
||||
const [formData, setFormData] = useState({ name: '', color_class: '' });
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// Group creation state
|
||||
@@ -20,6 +20,15 @@ export const Origins: React.FC = () => {
|
||||
|
||||
const tenantId = localStorage.getItem('ctms_tenant_id') || '';
|
||||
|
||||
const PRESET_COLORS = [
|
||||
{ label: 'Cinza', value: 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-dark-input dark:text-dark-muted dark:border-dark-border' },
|
||||
{ label: 'Azul', value: 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800' },
|
||||
{ label: 'Roxo', value: 'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800' },
|
||||
{ label: 'Verde', value: 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800' },
|
||||
{ label: 'Vermelho', value: 'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800' },
|
||||
{ label: 'Rosa', value: 'bg-pink-100 text-pink-700 border-pink-200 dark:bg-pink-900/30 dark:text-pink-400 dark:border-pink-800' },
|
||||
];
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
const [fetchedGroups, fetchedTeams] = await Promise.all([
|
||||
@@ -115,10 +124,10 @@ export const Origins: React.FC = () => {
|
||||
const openItemModal = (item?: OriginItemDef) => {
|
||||
if (item) {
|
||||
setEditingItem(item);
|
||||
setFormData({ name: item.name });
|
||||
setFormData({ name: item.name, color_class: item.color_class || PRESET_COLORS[0].value });
|
||||
} else {
|
||||
setEditingItem(null);
|
||||
setFormData({ name: '' });
|
||||
setFormData({ name: '', color_class: PRESET_COLORS[0].value });
|
||||
}
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
@@ -211,7 +220,9 @@ export const Origins: React.FC = () => {
|
||||
<div className="divide-y divide-zinc-100 dark:divide-dark-border">
|
||||
{selectedGroup.items?.map((o) => (
|
||||
<div key={o.id} className="p-4 px-6 flex items-center justify-between group hover:bg-zinc-50 dark:hover:bg-dark-bg transition-colors">
|
||||
<div className="font-medium text-zinc-800 dark:text-zinc-200">{o.name}</div>
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide border ${o.color_class || 'bg-zinc-100 text-zinc-700 border-zinc-200'}`}>
|
||||
{o.name}
|
||||
</span>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => openItemModal(o)} className="p-2 text-zinc-400 hover:text-brand-yellow hover:bg-zinc-100 dark:hover:bg-dark-input rounded-lg transition-colors">
|
||||
@@ -286,6 +297,26 @@ export const Origins: React.FC = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-2 block">Cor Visual</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{PRESET_COLORS.map((color, i) => (
|
||||
<label key={i} className={`flex items-center gap-2 p-2 border rounded-lg cursor-pointer transition-all ${formData.color_class === color.value ? 'border-brand-yellow bg-yellow-50/50 dark:bg-yellow-900/10' : 'border-zinc-200 dark:border-dark-border hover:bg-zinc-50 dark:hover:bg-dark-input'}`}>
|
||||
<input
|
||||
type="radio"
|
||||
name="color"
|
||||
value={color.value}
|
||||
checked={formData.color_class === color.value}
|
||||
onChange={(e) => setFormData({...formData, color_class: e.target.value})}
|
||||
className="sr-only"
|
||||
/>
|
||||
<span className={`w-3 h-3 rounded-full border ${color.value.split(' ')[0]} ${color.value.split(' ')[2]}`}></span>
|
||||
<span className="text-xs font-medium text-zinc-700 dark:text-zinc-300">{color.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex justify-end gap-3 mt-6 border-t border-zinc-100 dark:border-dark-border pt-6">
|
||||
<button type="button" onClick={() => setIsModalOpen(false)} className="px-4 py-2 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg text-sm font-medium transition-colors">Cancelar</button>
|
||||
<button type="submit" disabled={isSaving} className="px-6 py-2 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-lg text-sm font-bold flex items-center gap-2 hover:opacity-90 transition-all shadow-sm disabled:opacity-70">
|
||||
|
||||
Reference in New Issue
Block a user