Médicos: badges de ventas 30d al estilo legacy
- 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:
@@ -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} /> },
|
||||
]}
|
||||
/>
|
||||
))}
|
||||
|
||||
@@ -250,6 +250,7 @@ export interface Doctor {
|
||||
work_email: string;
|
||||
commission_pct: number;
|
||||
patient_count?: number;
|
||||
recomendaciones_30d?: number;
|
||||
ventas_30d?: number;
|
||||
total_30d?: number;
|
||||
total_30d_usd?: number | null;
|
||||
|
||||
Reference in New Issue
Block a user