import { useMemo, useRef, useState } from 'react';
import { Link, router } from '@inertiajs/react';
import {
ArrowUpRight, Building2, Cake, CalendarCheck, ClipboardCheck, ClipboardList, Clock, FileText, FlaskConical, Info,
LineChart, ListOrdered, Package, Target, TrendingDown, TrendingUp, Trophy, User, Wallet,
} from 'lucide-react';
import { Card } from '@/Components/ui/card';
/**
* Real dashboard widgets — every figure arrives via props from DashboardWidgetService (the
* viewer's OWN data). Pure presentation: no fetching, no dummy fallbacks — an empty list
* renders an honest "Belum ada data".
*
* Colors are design tokens only (`bg-card`, `text-primary`, `var(--color-*)` in SVG) so
* dark mode flips everything from one switch — no proto PALETTE hex here. The donut palette
* is the shadcn `--color-chart-*` set, which app.css already maps to brand tokens.
*/
/**
* The card-header icon tile. ONE definition, and every colour in it is a token.
*
* The hardcoded form it replaces — `border-violet-100 bg-white text-violet-600` — broke the design
* system twice over: `bg-white` is a literal, so the tile stayed white on a dark card instead of
* flipping with the theme, and `violet-600` is not this app's brand violet (#57008b / #c89cff in
* dark), so the icons drifted a shade off every other primary mark on the page.
*/
/** Approval queues shown before the "Lihat semua" toggle. */
const VISIBLE_APPROVALS = 6;
const TILE_SKIN = 'border border-primary/20 bg-card text-primary shadow-xs';
const HEAD_TILE = `grid size-8 shrink-0 place-items-center rounded-lg ${TILE_SKIN}`;
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
// Full month names + weekday heads for BirthdaysCard's calendar grid. Separate from MONTHS above,
// which is the abbreviated set the 12-month revenue trend axis uses.
const MONTH_FULL_ID = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
const WEEKDAY_ID = ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min'];
/**
* Every money figure on this board is IDR, exactly as stored, with nothing converted anywhere
* (user decision 2026-08-24). `netsuiteinvoicedetail.TotalRevenue` is rupiah and has no currency
* column; the recent-quotation feed carries the document's own `TotalIDR`.
*
* ⛔ Do NOT reintroduce a rate, in either direction. Until 2026-08-22 the board divided EVERY
* figure by one flat `USD_IDR_RATE` (config/currency.php, default 16,000) carried down as a
* `MoneyProvider` context — one made-up number applied to six years of history, so the "USD" it
* printed was not a conversion, it was a wrong figure. The config file, the `currency` prop and
* the context are DELETED, not set to zero. If USD is ever wanted it has to come from the rate on
* each individual row, never from one number for the whole board.
*
* The context went with the rate: with a single fixed currency there is no board-wide value left
* to share, so this is a plain module constant. Nothing to provide, nothing to forget to wrap.
*/
const compact = (n) => {
if (Math.abs(n) >= 1e9) return `IDR ${(n / 1e9).toFixed(1)}B`;
if (Math.abs(n) >= 1e6) return `IDR ${(n / 1e6).toFixed(1)}M`;
if (Math.abs(n) >= 1e3) return `IDR ${(n / 1e3).toFixed(0)}K`;
return `IDR ${n.toLocaleString('en-US', { maximumFractionDigits: 0 })}`;
};
export const money = {
/** Card-sized: "IDR 12.3B". Magnitude only — `full` is what the tooltips carry. */
short: (v) => compact(Number(v) || 0),
/**
* Tooltip-sized: every rupiah, grouped, and NO decimals. `TotalRevenue` is decimal(20,5) and
* `TotalIDR` decimal(20,2), but nothing here is priced in sen — a real figure is IDR
* 3,481,905,772, and printing ".00" after ten digits only makes it harder to read.
*/
full: (v) => `IDR ${(Number(v) || 0).toLocaleString('en-US', { maximumFractionDigits: 0 })}`,
};
const fmtDate = (s) => {
if (!s) return '—';
const [y, m, d] = String(s).slice(0, 10).split('-').map(Number);
return m >= 1 && m <= 12 ? `${d} ${MONTHS[m - 1]} ${y}` : String(s).slice(0, 10);
};
// ── Scope switcher — only rendered for users who actually hold more than one scope ──────────
const SCOPE_ICON = { sales: User, sm: Building2, pm: Package };
/**
* Sales / Divisi Saya / Principal Saya. The server decides which options exist (a scope the user
* does not head is never offered, and a hand-typed one degrades back to `sales`), so this is a
* plain partial reload — no client-side authority over what the viewer may see.
*/
export function ScopeSwitcher({ scope }) {
if (!scope || scope.options.length < 2) return null;
const go = (id) => {
if (id === scope.mode) return;
router.get(route('dashboard'), { scope: id }, {
only: ['scope', 'kpis', 'revenueTrend', 'recent', 'podium'],
preserveState: true,
preserveScroll: true,
replace: true,
});
};
return (
);
}
/**
* One line saying whose figures these are, plus the honest note when the money source is partial.
*
* ⛔ The rate pill that used to sit here ("Kurs: USD 1 = IDR 16,000") was REMOVED by user decision
* on 2026-08-11, and the rate itself was deleted on 2026-08-22. Do not restore either: the board
* is IDR end to end now (user decision 2026-08-24), so there is nothing to state a rate for.
*
* `scope.nsNote` is BACK, and it has to be. The money reads `netsuiteinvoicedetail`, whose keys
* reach 8 of 104 users and 12 of 126 principals — so most viewers are shown a structural zero, and
* an unexplained Rp 0 is indistinguishable from "you sold nothing this month". The banner is the
* difference between a partial figure and a lie. It renders only when the server sends a note.
*/
export function ScopeBar({ scope }) {
if (!scope) return null;
const Icon = SCOPE_ICON[scope.mode] ?? User;
return (
{scope.label}
{scope.nsNote && (
{scope.nsNote}
)}
);
}
// ── KPI strip — one slim card, four stats with per-stat icon tint ───────────────────────────
// All four KPI tiles wear the SAME skin as the card-header tiles — outlined brand violet on the
// card colour. They used to be violet / green / amber / blue, which read as four STATUS colours:
// green on "Win Rate" and amber on "Pending Approval" implied a verdict the number never gave. The
// tile says what the figure is ABOUT; the delta chip beside the value is what carries good-or-bad.
const KPI_TINTS = { omset: TILE_SKIN, win: TILE_SKIN, pending: TILE_SKIN, visits: TILE_SKIN };
export function KpiStrip({ kpis }) {
const delta = kpis.omzetMtd.momPct;
const up = (delta ?? 0) >= 0;
const stats = [
{
label: 'Omset (MTD)',
value: money.short(kpis.omzetMtd.value),
icon: Wallet,
tint: KPI_TINTS.omset,
chip: delta != null && (
{up ? : }
{up ? '+' : ''}{delta}%
),
caption: 'vs bulan lalu',
},
{
label: 'Win Rate',
value: kpis.winRate.pct != null ? `${kpis.winRate.pct}%` : '—',
icon: Target,
tint: KPI_TINTS.win,
caption: `${kpis.winRate.won}/${kpis.winRate.decided} quotation diputuskan`,
},
{ label: 'Pending Approval', value: kpis.pendingApproval, icon: Clock, tint: KPI_TINTS.pending, caption: 'quotation menunggu SM/PM' },
{ label: 'Visit Minggu Ini', value: kpis.visitsThisWeek, icon: CalendarCheck, tint: KPI_TINTS.visits, caption: 'jadwal kunjungan' },
];
return (
{stats.map((s) => (
{s.label}
{s.value}
{s.chip}
{s.caption}
))}
);
}
// ── Omset trend — 12 bulan, SVG token-colored, hover tooltip + window toggle ───────
export function RevenueTrendCard({ trend }) {
const H = 180;
const [months, setMonths] = useState(12);
const [hover, setHover] = useState(null);
const areaRef = useRef(null);
const data = months === 6 ? trend.slice(-6) : trend;
const n = data.length;
const max = Math.max(...data.map((t) => t.total), 1);
const nice = Math.ceil(max / Math.pow(10, Math.floor(Math.log10(max)))) * Math.pow(10, Math.floor(Math.log10(max)));
const py = (v) => H - (v / nice) * H;
const px = (i) => (n > 1 ? (i / (n - 1)) * 100 : 50);
const pts = data.map((t, i) => `${px(i) * 10},${py(t.total)}`).join(' ');
const area = `M0,${H} ${data.map((t, i) => `L${px(i) * 10},${py(t.total)}`).join(' ')} L1000,${H} Z`;
const ticks = [1, 0.5, 0];
const windowTotal = data.reduce((a, t) => a + t.total, 0);
// Every bucket at zero is a REAL state, not a loading one — and on this source it is the
// COMMON one: the money reads `netsuiteinvoicedetail`, whose keys reach 8 of 104 users, so
// most viewers have a genuinely flat 12 months. Drawing the chart anyway is worse than saying
// so — `max` floors at 1 to avoid dividing by zero, which makes the axis print
// 'IDR 1, IDR 1, IDR 0' and reads as near-zero sales rather than no sales at all.
const isEmpty = windowTotal === 0;
const onMove = (e) => {
const rect = areaRef.current?.getBoundingClientRect();
if (!rect || rect.width === 0) return;
const frac = (e.clientX - rect.left) / rect.width;
setHover(Math.min(n - 1, Math.max(0, Math.round(frac * (n - 1)))));
};
const hovered = hover != null ? data[hover] : null;
const prev = hover != null && hover > 0 ? data[hover - 1] : null;
const momPct = hovered && prev && prev.total > 0 ? Math.round(((hovered.total - prev.total) / prev.total) * 100) : null;
// Keep the tooltip inside the card at both ends of the x-axis.
const tipShift = hover == null ? '-50%' : hover === 0 ? '-8%' : hover === n - 1 ? '-92%' : '-50%';
return (
Omset {months} Bulan
{!isEmpty && (
Total {money.short(windowTotal)}
)}
{[6, 12].map((m) => (
))}
{isEmpty ? (
/* Same flex-1 as the chart below, so an empty card still fills the row height the
board hands this widget and the board keeps its grid. */
Belum ada omset
Tidak ada invoice tercatat dalam {months} bulan terakhir.
) : (
<>
{/* flex-1 + absolute SVG: the chart absorbs whatever row height the board gives this
widget (e.g. matching the taller donut card beside it) instead of leaving a gap. */}
)}
);
}
// ── Top principal — the transactional face of "Principal": own YTD revenue per brand ────────
const DONUT_COLORS = [
'var(--color-chart-1)', 'var(--color-chart-2)', 'var(--color-chart-3)',
'var(--color-chart-4)', 'var(--color-chart-5)',
];
export function TopPrincipalsCard({ rows }) {
const [active, setActive] = useState(null);
const sum = rows.reduce((a, r) => a + r.total, 0);
// Donut geometry: r=62 in a 160-box, segments as stroke dashes with a 2-unit gap.
const R = 62;
const C = 2 * Math.PI * R;
const segments = useMemo(() => {
let acc = 0;
return rows.map((r) => {
const len = sum > 0 ? (r.total / sum) * C : 0;
const seg = { start: acc, len: Math.max(len - 2, 0.5) };
acc += len;
return seg;
});
}, [rows, sum, C]);
const focus = active != null ? rows[active] : null;
return (
Top Principal
{/* Static for now: the figures behind this card are YTD only, so a period picker
that could not actually change the period would be a lie with a chevron on it. */}
YTD
{rows.length === 0 ? (
)}
);
}
// ── Sales podium — hero (top 3) + ranked list ───────────────────────────────────────────────
/**
* Two widgets over ONE payload: the hero shows the three that made the podium, the list shows
* everyone below it. They are separate board widgets so a user who only wants the leaderboard, or
* only the standings, can hide the other half.
*
* Both dimensions (per sales rep / per division) ship together, so each card toggles instantly and
* they cannot end up reading from different data.
*/
/**
* Trophy artwork, drawn as inline SVG rather than shipped as images.
*
* Three reasons it is vector: the board is theme-aware (a PNG cup would keep its baked-in white
* halo on a dark card), the metals must stay in step with the tier tokens used elsewhere in the
* widget, and three raster cups at retina size would outweigh the entire page payload.
*
* The gradients here are ILLUSTRATION shading, not decoration — the ban in ui-conventions.md is on
* large decorative background/section/hero gradients, and the card behind these stays a flat tint.
*/
const TROPHY_METAL = {
1: { spec: '#FFFDF0', hi: '#FFE9A0', mid: '#F0BE3E', lo: '#C08A10', deep: '#8A5D04', num: '#7A5100', leaf: '#E4AE2A' },
2: { spec: '#FFFFFF', hi: '#F1F4F8', mid: '#CBD3DD', lo: '#9BA5B2', deep: '#6B7482', num: '#5A626D', leaf: '#BCC5D0' },
3: { spec: '#FFF4E8', hi: '#F7CDA4', mid: '#DA9257', lo: '#A85F2C', deep: '#7A431E', num: '#6B3A18', leaf: '#C67F45' },
};
/**
* Laurel wreath drawn IN FRONT of the bowl's base, opening upward like a pair of cupped branches —
* that framing is what makes a cup read as a trophy rather than a goblet.
*/
function Laurel({ dir, color, shade, spec }) {
// The branch stays INSIDE the bowl's width and stops around mid-bowl. The previous arc swept
// up past the rim and crossed the handles, which read as a chain draped over the cup rather
// than a wreath framing it.
const p0 = [120 - dir * 8, 204];
const c = [120 - dir * 76, 198];
const p1 = [120 - dir * 72, 106];
const at = (t) => [
(1 - t) ** 2 * p0[0] + 2 * (1 - t) * t * c[0] + t ** 2 * p1[0],
(1 - t) ** 2 * p0[1] + 2 * (1 - t) * t * c[1] + t ** 2 * p1[1],
];
return (
{/* Branch in the leaf colour, not a dark stroke — a dark line reads as wire. */}
{Array.from({ length: 5 }, (_, i) => {
const t = 0.16 + (i / 4) * 0.84;
const [x, y] = at(t);
// Leaves point up and outward along the branch, fanning as they climb — at the old
// size and angle they overlapped into a continuous strip and read as a chain.
const rot = -dir * (80 - t * 34);
return (
{/* Almond leaf: pointed at both ends, unlike the flat ellipse it replaces. */}
);
})}
);
}
/**
* The cup. Shape follows the reference: a wide flared chalice, big loop handles springing from the
* rim, a slender stem into a flared foot, all standing on a black plinth.
*
* The metal is a horizontal multi-stop gradient — dark edge, body, a narrow specular band, body,
* dark edge — which is what gives a flat vector shape its roundness.
*/
function TrophyArt({ rank, className }) {
const m = TROPHY_METAL[rank];
const id = `podTrophy${rank}`;
return (
);
}
/**
* The cylindrical step each trophy stands on: an elliptical top face over a straight body, which
* is what reads as a cylinder without needing a second SVG.
*/
/**
* The step AND the name plate. A podium block is a name plate, so the name belongs on it — but it
* only reads as a name plate if the surface is clean: card-coloured with a vivid tier edge, not a
* mid-tone wash. The rank chip straddles the top edge so the plate has an anchor and the step
* still announces its position without repeating the number twice at full size.
*/
function Pedestal({ rank, className, name, value, valueTitle, isMe }) {
const tier = PODIUM_TIERS[rank - 1];
return (
// min-height, NOT height. A two-line name inside a FIXED-height box with overflow-hidden is
// sliced through the middle of the letters — which is what cut "Hendra Ariansyah" in half.
// The plate now grows for the rare long name; line-clamp-2 still caps the truly absurd ones,
// and then it ellipsises instead of cutting.
<>
#{rank}
{name}
{value}
{isMe && ANDA}
);
}
const PODIUM_TIERS = [
// `edge` is a VIVID solid bar; `plate` stays card-coloured. The step used to be a mid-tone
// wash (warning at 28% over card) with the name on it, and dark text on a muddy tint is
// exactly what made the name look lifeless — no contrast to carry it. Colour now lives in a
// thin edge and the value, so the name gets a clean surface to sit on.
{ edge: 'bg-warning', chip: 'bg-warning-bg text-warning-text', accent: 'text-warning-text', plateH: 'min-h-[76px]', nameSize: 'text-[13.5px]', t: 'w-32' },
{ edge: 'bg-muted-foreground/70', chip: 'bg-secondary text-muted-foreground', accent: 'text-muted-foreground', plateH: 'min-h-[64px]', nameSize: 'text-[12.5px]', t: 'w-24' },
{ edge: 'bg-stat-orange-text/80', chip: 'bg-stat-orange-bg text-stat-orange-text', accent: 'text-stat-orange-text', plateH: 'min-h-[56px]', nameSize: 'text-[12.5px]', t: 'w-20' },
];
const initialsOf = (s) => String(s || '?').trim().split(/\s+/).slice(0, 2).map((w) => w[0]).join('').toUpperCase() || '?';
/** Sales ↔ Divisi switch, shared by both cards (each keeps its own choice). */
function DimToggle({ dim, onChange }) {
return (
);
}
function PodiumEmpty({ children }) {
return (
{children}
);
}
const TIER_INFO_STYLES = {
1: {
badgeBg: 'bg-amber-50 border border-amber-100/50',
badgeText: 'text-amber-600',
rankIcon: 'text-amber-500',
},
2: {
badgeBg: 'bg-secondary border border-border',
badgeText: 'text-muted-foreground',
rankIcon: 'text-muted-foreground',
},
3: {
badgeBg: 'bg-orange-50 border border-orange-100/50',
badgeText: 'text-orange-600',
rankIcon: 'text-orange-500',
},
};
/** The hero: three trophies on three pedestals, the winner centre and tallest. */
export function SalesPodiumHero({ podium }) {
const [dim, setDim] = useState('sales');
const [hover, setHover] = useState(null);
const [showRest, setShowRest] = useState(false);
const rows = podium?.[dim] ?? [];
const top = rows.slice(0, 3);
const rest = rows.slice(3);
const leader = rows[0]?.total ?? 0;
// Steps read 2nd · 1st · 3rd, the way a real podium stands.
const steps = [top[1], top[0], top[2]].map((row, i) => ({ row, rank: [2, 1, 3][i] })).filter((s) => s.row);
return (
{/* Decorative floating diamonds */}
{/* z-20, ABOVE the podium body's z-10. The header is positioned WITH a z-index, so it is a
stacking context: the "Peringkat 4–10" panel's own z-30 only ranks it inside the
header, and the header as a whole was tying with the body at z-10 — so the body,
being later in DOM order, painted its trophies straight over the open panel. */}
Podium Penjualan
Top Performer {dim === 'sales' ? 'Sales' : 'Divisi'} (YTD)
{rest.length > 0 && (
// Ranks 4+ live behind this button rather than in a card of their own: the
// podium is the headline, the standings are the follow-up question.
// Hover opens it, click pins it — a hover-only panel is unreachable by
// keyboard and unusable on touch.
{steps.length === 0 ? (
Belum ada penjualan tahun ini.
) : (
// ⚠️ Two nested boxes on purpose. This card shares its grid row with Top Principal
// and the row stretches both to the taller one (437px measured), so the podium gets
// ~90px more height than its content needs. With `items-end` on the FILLING box the
// whole podium was shoved to the floor of that extra height and the trophies sat far
// below the header. The outer box now centres the group in whatever height the row
// hands over; the inner one keeps the three columns bottom-aligned to each other so
// the steps still line up.
)}
);
}
// ── Approval shortcuts ──────────────────────────────────────────────────────────────────────
/**
* Doors into the approval queues, and ONLY the ones this viewer holds a grant for — the server
* builds the list from `allowedMenuLinks()`, so a shortcut here can never answer 403.
*
* The number is the same one the sidebar badge shows (NavBadges): work the viewer can ACT ON.
* When there is no number the chip is simply absent — a queue nobody counted is not the same
* claim as a queue with nothing in it.
*/
export function ApprovalShortcutsCard({ approvals = [] }) {
const [showAll, setShowAll] = useState(false);
// An admin holds nearly every grant — 27 queues — and an un-capped list turned this card into a
// wall that also stretched the row beside it. Queues WITH work come first (the service already
// sorted them that way), the rest are one click away, and the list scrolls instead of growing.
const withWork = approvals.filter((a) => (a.count ?? 0) > 0);
const primary = withWork.length > 0 ? withWork : approvals.slice(0, VISIBLE_APPROVALS);
const visible = showAll ? approvals : primary.slice(0, VISIBLE_APPROVALS);
const hidden = approvals.length - visible.length;
return (
) : (
<>
{/* @container, not a viewport breakpoint: this card can be set to ⅓, ½ or full
width from Atur Dashboard, so the column count has to follow the CARD's own
width. At ⅓ it stays a single list; at full width it fills the row instead of
leaving two thirds of it empty. */}
{(hidden > 0 || showAll) && (
)}
)}
);
}
// ── Recent transactional lists ──────────────────────────────────────────────────────────────
// Per-module icon tint so the four cards read as four modules, not four copies of one table.
//
// `href` is each module's VIEW REQUEST list, not its View All. For quotation/visit/lwr the bare
// link already is that page (menu 63 'View Request - Quotation', 83 'View Visit Report', 110
// 'View Request'); Sample Order is the odd one out, where '/sample-orders' is menu 33 'View All'
// and View Request lives at '/sample-orders/view-request' (menu 32). Pointing the Sample tab at
// the bare link sent everyone to the wrong list, and to a 403 for most: View All is granted to 6
// roles, View Request to 13.
export const RECENT_META = {
quotation: { title: 'Quotation Terbaru', icon: FileText, href: '/quotations', idLabel: 'Qt', money: true, tint: 'bg-accent text-primary' },
sample: { title: 'Sample Order Terbaru', icon: Package, href: '/sample-orders/view-request', idLabel: 'SO', tint: 'bg-info-bg text-info-text' },
visit: { title: 'Visit Plan Terbaru', icon: ClipboardList, href: '/visit-plans', idLabel: 'No', tint: 'bg-success-bg text-success-text' },
lwr: { title: 'Lab Work Request Terbaru', icon: FlaskConical, href: '/lwrs', idLabel: 'LWR', tint: 'bg-warning-bg text-warning-text' },
};
// Status names differ per module; classify by keyword and fall back to a neutral pill.
const statusTone = (s) => {
const t = String(s || '').toLowerCase();
if (!t) return null;
if (/(approve[^a]|approved|won|good|receive|order|complete|close|done|active|finish|deliver)/.test(t + ' ')) return 'bg-success-bg text-success-text';
if (/(reject|lost|cancel|expired|fail|overdue)/.test(t)) return 'bg-danger-bg text-danger-text';
if (/(approval|pending|wait|process|review|progress|open|new|submit|request|draft|feedback|revis)/.test(t)) return 'bg-warning-bg text-warning-text';
return 'bg-secondary text-foreground';
};
/**
* ONE recent-transactions card for all four modules, with a module toggle in the header
* (user request 2026-08-05 — replaces the four separate "… Terbaru" cards). All four lists
* ship in the `recent` payload already, so switching is instant and free.
*/
export function RecentUnifiedCard({ recent }) {
const [kind, setKind] = useState('quotation');
const meta = RECENT_META[kind];
const rows = recent?.[kind] ?? [];
return (
) : (
/* Activity-list rows (avatar + two lines + status on the right) — deliberately not a
: five rows of the viewer's own latest work read better as a feed. */
/* min-h = five rows. The tabs return different row counts, so without a floor the
whole card (and the widget beside it) jumped every time you switched module. */
/* @container: two columns once the CARD (not the window) is wide enough. The
server sends TEN rows; in one column that would run past the card, so rows
6-10 are hidden until the second column exists. Two columns × five lines is
exactly the height the Ulang Tahun calendar beside it sets, which is what
used to be a ~130px empty band under a five-row list. */
{/* `r.total != null` is the redaction guard, not a defensive habit.
DashboardWidgetService::recent() OMITS the `total` key for a
role that holds `recent` without `money` — the key is absent
precisely so no figure is shown. But `money.short` is
`Number(v) || 0`, so rendering it anyway prints "IDR 0", which
reads as a real rupiah amount sitting next to real ones. */}
{meta.money && r.total != null && {money.short(r.total)}}
{statusTone(r.status) ? (
{r.status}
) : (
—
)}
))}
)}
);
}
/**
* Ulang Tahun — a month calendar with birthdays marked, fed by DashboardWidgetService's
* `calendar` payload. Grafted back from the pre-merge WIP stash on 2026-08-10: Pages/Dashboard/
* Index.jsx imports it, so the bundle could not build without it (MISSING_EXPORT at chunk
* render). Only this component came across — the podium/Pedestal iteration in this file is a
* separate open question and was deliberately left untouched.
*/
export function BirthdaysCard({ calendar = null }) {
const [open, setOpen] = useState(null);
if (!calendar) return null;
const marked = new Map((calendar.days ?? []).map((d) => [d.day, d.names]));
// Leading blanks so the 1st lands under its weekday.
const cells = [
...Array.from({ length: calendar.startWeekday }, () => null),
...Array.from({ length: calendar.daysInMonth }, (_, i) => i + 1),
];
return (