consultoria-as/SKEEN-Proyecto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Médicos: badges de ventas 30d al estilo legacy

Browse Source 
- Píldora verde 'N ventas' + gris 'N recomendaciones' y píldoras
  índigo apiladas (usd / m.n. / tarjeta m.n.) en una sola columna
- recomendaciones_30d: pacientes captados con 'recomendado por'
This commit is contained in:
Consultoría Alcaraz Salazar
2026-08-14 09:10:15 +00:00
parent 4c3eb0b11d
commit f80073f687
3 changed files with 51 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/pages/Medicos.tsx
View File

@@ -13,11 +13,41 @@ const isMedicalTitle = (jobTitle?: string) => {
return medicalTerms.some((term) => normalized.includes(term));
};
const fmtMoney = (n: number) =>
(n || 0).toLocaleString('es-MX', { style: 'currency', currency: 'MXN', maximumFractionDigits: 0 });
const fmtNum = (n: number | null | undefined, decimals = 2) =>
(n ?? 0).toLocaleString('es-MX', { maximumFractionDigits: decimals });
const fmtUsd = (n: number | null | undefined) =>
n == null ? '—' : n.toLocaleString('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 });
/** Badges de ventas 30d al estilo del sistema legacy:
* píldora verde "N ventas" + gris "N recomendaciones" y
* píldoras índigo apiladas: usd / m.n. / tarjeta m.n. */
const StatBadges: FC<{ d: Doctor }> = ({ d }) => (
<div>
<div className="flex flex-wrap items-center gap-2 mb-1.5">
<span
className="inline-flex items-center gap-1.5 rounded px-2 py-0.5 text-xs font-medium text-white"
style={{ backgroundColor: '#00a65a' }}
>
<span className="font-bold">{d.ventas_30d ?? 0}</span> ventas
</span>
<span
className="inline-flex items-center gap-1.5 rounded px-2 py-0.5 text-xs font-medium"
style={{ backgroundColor: '#bdc3c7', color: '#333' }}
>
<span className="font-bold">{d.recomendaciones_30d ?? 0}</span> recomendaciones
</span>
</div>
<div className="space-y-0.5">
<span className="block w-fit rounded px-1.5 py-0.5 text-[11px] text-white" style={{ backgroundColor: '#605ca8' }}>
{d.total_30d_usd == null ? '—' : fmtNum(d.total_30d_usd)} usd
</span>
<span className="block w-fit rounded px-1.5 py-0.5 text-[11px] text-white" style={{ backgroundColor: '#605ca8' }}>
{fmtNum(d.total_30d ?? 0, 0)} m.n.
</span>
<span className="block w-fit rounded px-1.5 py-0.5 text-[11px] text-white" style={{ backgroundColor: '#605ca8' }}>
{fmtNum(d.card_30d ?? 0, 0)} tarjeta m.n.
</span>
</div>
</div>
);
const Medicos: FC = () => {
const [employees, setEmployees] = useState<Doctor[]>([]);
@@ -95,10 +125,7 @@ const Medicos: FC = () => {
<th className="text-left p-3 text-xs font-medium text-theme-muted uppercase hidden md:table-cell">Teléfono</th>
<th className="text-left p-3 text-xs font-medium text-theme-muted uppercase hidden lg:table-cell">Email</th>
<th className="text-left p-3 text-xs font-medium text-theme-muted uppercase">% Comisión</th>
<th className="text-right p-3 text-xs font-medium text-theme-muted uppercase" title="Ventas con líneas recetadas por el médico, últimos 30 días">Ventas 30d</th>
<th className="text-right p-3 text-xs font-medium text-theme-muted uppercase hidden md:table-cell" title="Subtotal de líneas recetadas, últimos 30 días">Total 30d</th>
<th className="text-right p-3 text-xs font-medium text-theme-muted uppercase hidden lg:table-cell" title="Equivalente en USD al TC vigente">Total USD</th>
<th className="text-right p-3 text-xs font-medium text-theme-muted uppercase hidden md:table-cell" title="Pagado con tarjeta (terminal física), últimos 30 días">Pagado tarjeta</th>
<th className="text-left p-3 text-xs font-medium text-theme-muted uppercase" title="Ventas con líneas recetadas por el médico, últimos 30 días">Últimos 30 días</th>
</tr>
</thead>
<tbody className="divide-y">
@@ -144,10 +171,9 @@ const Medicos: FC = () => {
</Button>
</div>
</td>
<td className="p-3 text-sm text-right font-medium text-theme-heading">{d.ventas_30d ?? 0}</td>
<td className="p-3 text-sm text-right text-theme-heading hidden md:table-cell">{fmtMoney(d.total_30d ?? 0)}</td>
<td className="p-3 text-sm text-right text-theme-muted hidden lg:table-cell">{fmtUsd(d.total_30d_usd)}</td>
<td className="p-3 text-sm text-right text-theme-heading hidden md:table-cell">{fmtMoney(d.card_30d ?? 0)}</td>
<td className="p-3 align-top">
<StatBadges d={d} />
</td>
</tr>
))}
</tbody>
@@ -169,10 +195,7 @@ const Medicos: FC = () => {
{ label: 'Teléfono', value: d.work_phone || '-' },
{ label: 'Email', value: d.work_email || '-' },
{ label: '% Comisión', value: `${d.commission_pct ?? 0}%` },
{ label: 'Ventas 30d', value: String(d.ventas_30d ?? 0) },
{ label: 'Total 30d', value: fmtMoney(d.total_30d ?? 0) },
{ label: 'Total USD', value: fmtUsd(d.total_30d_usd) },
{ label: 'Pagado tarjeta', value: fmtMoney(d.card_30d ?? 0) },
{ label: 'Últimos 30 días', value: <StatBadges d={d} /> },
]}
/>
))}