style(dashboard): simplify scope indicators to icons only without background color
This commit is contained in:
parent
b41e664d8a
commit
f8b8bc14b8
3 changed files with 83 additions and 26 deletions
|
|
@ -16,6 +16,8 @@ import {
|
||||||
Trash2,
|
Trash2,
|
||||||
Edit2,
|
Edit2,
|
||||||
GripVertical,
|
GripVertical,
|
||||||
|
User,
|
||||||
|
Users,
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import type { DashboardV2Card } from '../../lib/userPreferences'
|
import type { DashboardV2Card } from '../../lib/userPreferences'
|
||||||
import type { Task, Project, Category } from '../../types/task'
|
import type { Task, Project, Category } from '../../types/task'
|
||||||
|
|
@ -557,21 +559,20 @@ export const BiUniformCard: React.FC<BiUniformCardProps> = ({
|
||||||
|
|
||||||
{/* Footer: Compact Dimension Tags */}
|
{/* Footer: Compact Dimension Tags */}
|
||||||
<div className="pt-1.5 border-t border-border-soft/60 flex items-center gap-1.5 flex-wrap text-[9px] truncate">
|
<div className="pt-1.5 border-t border-border-soft/60 flex items-center gap-1.5 flex-wrap text-[9px] truncate">
|
||||||
{/* Scope Tag */}
|
{/* Scope Icon (only icon, without background color) */}
|
||||||
<span
|
<span
|
||||||
className={`px-1.5 py-0.2 rounded font-semibold border ${
|
className="text-muted/70 hover:text-foreground transition-colors shrink-0 inline-flex items-center px-0.5"
|
||||||
effectiveScope === 'mine'
|
|
||||||
? 'bg-brand/10 text-brand border-brand/25'
|
|
||||||
: 'bg-zinc-500/10 text-muted border-zinc-500/20'
|
|
||||||
}`}
|
|
||||||
title={
|
title={
|
||||||
card.scope && card.scope !== 'INHERIT'
|
card.scope && card.scope !== 'INHERIT'
|
||||||
? 'Escopo fixado nas configurações deste card'
|
? `Escopo fixado: ${effectiveScope === 'mine' ? 'Individual' : 'Equipe'}`
|
||||||
: 'Escopo herdado do filtro global da página'
|
: `Escopo: ${effectiveScope === 'mine' ? 'Individual' : 'Equipe'}`
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{effectiveScope === 'mine' ? '👤 Minhas' : '👥 Equipe'}
|
{effectiveScope === 'mine' ? (
|
||||||
{card.scope && card.scope !== 'INHERIT' && ' • fixo'}
|
<User className="w-3.5 h-3.5 text-brand" />
|
||||||
|
) : (
|
||||||
|
<Users className="w-3.5 h-3.5 text-muted" />
|
||||||
|
)}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span className={`px-1.5 py-0.2 rounded font-semibold border ${theme.badge}`}>
|
<span className={`px-1.5 py-0.2 rounded font-semibold border ${theme.badge}`}>
|
||||||
|
|
|
||||||
|
|
@ -373,8 +373,15 @@ export const AnalyticsPage: React.FC = () => {
|
||||||
<p className="text-2xl sm:text-3xl font-extrabold text-foreground tracking-tight font-mono">
|
<p className="text-2xl sm:text-3xl font-extrabold text-foreground tracking-tight font-mono">
|
||||||
{formatSecondsToTimer(kpis.totalSecondsTracked)}
|
{formatSecondsToTimer(kpis.totalSecondsTracked)}
|
||||||
</p>
|
</p>
|
||||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-sunken text-muted border border-border-soft">
|
<span
|
||||||
{selectedMember === 'ALL' ? '👥 Equipe' : '👤 Individual'}
|
className="text-muted/70 hover:text-foreground transition-colors shrink-0"
|
||||||
|
title={selectedMember === 'ALL' ? 'Métrica da Equipe' : 'Métrica Individual'}
|
||||||
|
>
|
||||||
|
{selectedMember === 'ALL' ? (
|
||||||
|
<Users className="w-4 h-4 text-muted" />
|
||||||
|
) : (
|
||||||
|
<User className="w-4 h-4 text-brand" />
|
||||||
|
)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-[11px] text-muted mt-1">
|
<p className="text-[11px] text-muted mt-1">
|
||||||
|
|
@ -396,8 +403,15 @@ export const AnalyticsPage: React.FC = () => {
|
||||||
<p className="text-2xl sm:text-3xl font-extrabold text-emerald-700 dark:text-emerald-400 tracking-tight">
|
<p className="text-2xl sm:text-3xl font-extrabold text-emerald-700 dark:text-emerald-400 tracking-tight">
|
||||||
{kpis.completionRate}%
|
{kpis.completionRate}%
|
||||||
</p>
|
</p>
|
||||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-sunken text-muted border border-border-soft">
|
<span
|
||||||
{selectedMember === 'ALL' ? '👥 Equipe' : '👤 Individual'}
|
className="text-muted/70 hover:text-foreground transition-colors shrink-0"
|
||||||
|
title={selectedMember === 'ALL' ? 'Métrica da Equipe' : 'Métrica Individual'}
|
||||||
|
>
|
||||||
|
{selectedMember === 'ALL' ? (
|
||||||
|
<Users className="w-4 h-4 text-muted" />
|
||||||
|
) : (
|
||||||
|
<User className="w-4 h-4 text-brand" />
|
||||||
|
)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-[11px] text-muted mt-1">
|
<p className="text-[11px] text-muted mt-1">
|
||||||
|
|
@ -419,8 +433,15 @@ export const AnalyticsPage: React.FC = () => {
|
||||||
<p className="text-2xl sm:text-3xl font-extrabold text-teal-700 dark:text-teal-300 tracking-tight">
|
<p className="text-2xl sm:text-3xl font-extrabold text-teal-700 dark:text-teal-300 tracking-tight">
|
||||||
{kpis.inProgressTasks} tarefas
|
{kpis.inProgressTasks} tarefas
|
||||||
</p>
|
</p>
|
||||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-sunken text-muted border border-border-soft">
|
<span
|
||||||
{selectedMember === 'ALL' ? '👥 Equipe' : '👤 Individual'}
|
className="text-muted/70 hover:text-foreground transition-colors shrink-0"
|
||||||
|
title={selectedMember === 'ALL' ? 'Métrica da Equipe' : 'Métrica Individual'}
|
||||||
|
>
|
||||||
|
{selectedMember === 'ALL' ? (
|
||||||
|
<Users className="w-4 h-4 text-muted" />
|
||||||
|
) : (
|
||||||
|
<User className="w-4 h-4 text-brand" />
|
||||||
|
)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-[11px] text-muted mt-1">
|
<p className="text-[11px] text-muted mt-1">
|
||||||
|
|
@ -442,8 +463,15 @@ export const AnalyticsPage: React.FC = () => {
|
||||||
<p className="text-2xl sm:text-3xl font-extrabold text-foreground tracking-tight font-mono">
|
<p className="text-2xl sm:text-3xl font-extrabold text-foreground tracking-tight font-mono">
|
||||||
{formatSecondsToHuman(kpis.avgSecondsPerCompletedTask)}
|
{formatSecondsToHuman(kpis.avgSecondsPerCompletedTask)}
|
||||||
</p>
|
</p>
|
||||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-sunken text-muted border border-border-soft">
|
<span
|
||||||
{selectedMember === 'ALL' ? '👥 Equipe' : '👤 Individual'}
|
className="text-muted/70 hover:text-foreground transition-colors shrink-0"
|
||||||
|
title={selectedMember === 'ALL' ? 'Métrica da Equipe' : 'Métrica Individual'}
|
||||||
|
>
|
||||||
|
{selectedMember === 'ALL' ? (
|
||||||
|
<Users className="w-4 h-4 text-muted" />
|
||||||
|
) : (
|
||||||
|
<User className="w-4 h-4 text-brand" />
|
||||||
|
)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-[11px] text-muted mt-1">
|
<p className="text-[11px] text-muted mt-1">
|
||||||
|
|
|
||||||
|
|
@ -436,8 +436,15 @@ export const DashboardPage: React.FC = () => {
|
||||||
<p className="text-3xl font-extrabold text-teal-700 dark:text-teal-400 tracking-tight font-mono">
|
<p className="text-3xl font-extrabold text-teal-700 dark:text-teal-400 tracking-tight font-mono">
|
||||||
{stats.inProgress}
|
{stats.inProgress}
|
||||||
</p>
|
</p>
|
||||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-sunken text-muted border border-border-soft">
|
<span
|
||||||
{viewScope === 'mine' ? '👤 Minhas' : '👥 Equipe'}
|
className="text-muted/70 hover:text-foreground transition-colors shrink-0"
|
||||||
|
title={viewScope === 'mine' ? 'Métrica Individual' : 'Métrica da Equipe'}
|
||||||
|
>
|
||||||
|
{viewScope === 'mine' ? (
|
||||||
|
<User className="w-4 h-4 text-brand" />
|
||||||
|
) : (
|
||||||
|
<Users className="w-4 h-4 text-muted" />
|
||||||
|
)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-[11px] text-muted font-medium mt-1">
|
<p className="text-[11px] text-muted font-medium mt-1">
|
||||||
|
|
@ -463,8 +470,15 @@ export const DashboardPage: React.FC = () => {
|
||||||
<p className="text-3xl font-extrabold text-emerald-700 dark:text-emerald-400 tracking-tight font-mono">
|
<p className="text-3xl font-extrabold text-emerald-700 dark:text-emerald-400 tracking-tight font-mono">
|
||||||
{stats.completed}
|
{stats.completed}
|
||||||
</p>
|
</p>
|
||||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-sunken text-muted border border-border-soft">
|
<span
|
||||||
{viewScope === 'mine' ? '👤 Minhas' : '👥 Equipe'}
|
className="text-muted/70 hover:text-foreground transition-colors shrink-0"
|
||||||
|
title={viewScope === 'mine' ? 'Métrica Individual' : 'Métrica da Equipe'}
|
||||||
|
>
|
||||||
|
{viewScope === 'mine' ? (
|
||||||
|
<User className="w-4 h-4 text-brand" />
|
||||||
|
) : (
|
||||||
|
<Users className="w-4 h-4 text-muted" />
|
||||||
|
)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-[11px] text-muted font-medium mt-1">
|
<p className="text-[11px] text-muted font-medium mt-1">
|
||||||
|
|
@ -490,8 +504,15 @@ export const DashboardPage: React.FC = () => {
|
||||||
<p className="text-3xl font-extrabold text-amber-400 tracking-tight font-mono">
|
<p className="text-3xl font-extrabold text-amber-400 tracking-tight font-mono">
|
||||||
{formatSecondsToTimer(stats.totalSeconds)}
|
{formatSecondsToTimer(stats.totalSeconds)}
|
||||||
</p>
|
</p>
|
||||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-sunken text-muted border border-border-soft">
|
<span
|
||||||
{viewScope === 'mine' ? '👤 Minhas' : '👥 Equipe'}
|
className="text-muted/70 hover:text-foreground transition-colors shrink-0"
|
||||||
|
title={viewScope === 'mine' ? 'Métrica Individual' : 'Métrica da Equipe'}
|
||||||
|
>
|
||||||
|
{viewScope === 'mine' ? (
|
||||||
|
<User className="w-4 h-4 text-brand" />
|
||||||
|
) : (
|
||||||
|
<Users className="w-4 h-4 text-muted" />
|
||||||
|
)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-[11px] text-muted font-medium mt-1">
|
<p className="text-[11px] text-muted font-medium mt-1">
|
||||||
|
|
@ -517,8 +538,15 @@ export const DashboardPage: React.FC = () => {
|
||||||
<p className="text-3xl font-extrabold text-foreground tracking-tight font-mono">
|
<p className="text-3xl font-extrabold text-foreground tracking-tight font-mono">
|
||||||
{stats.projectsCount}
|
{stats.projectsCount}
|
||||||
</p>
|
</p>
|
||||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-sunken text-muted border border-border-soft">
|
<span
|
||||||
{viewScope === 'mine' ? '👤 Minhas' : '👥 Equipe'}
|
className="text-muted/70 hover:text-foreground transition-colors shrink-0"
|
||||||
|
title={viewScope === 'mine' ? 'Métrica Individual' : 'Métrica da Equipe'}
|
||||||
|
>
|
||||||
|
{viewScope === 'mine' ? (
|
||||||
|
<User className="w-4 h-4 text-brand" />
|
||||||
|
) : (
|
||||||
|
<Users className="w-4 h-4 text-muted" />
|
||||||
|
)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-[11px] text-muted font-medium mt-1">
|
<p className="text-[11px] text-muted font-medium mt-1">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue